4. CSS 배치와 애니메이션
1. CSS position
position 프로퍼티 / HTML 요소 위치 결정 방식
(1) 정적 위치 (static position) (디폴트)
- 다른 태그와의 관계에 의해 자동으로 배치되며, 임의로 위치 설정 불가, 상속 등으로 설정된 position을 리셋할때 사용
(2) 상대 위치 (relative position)
- 미설정 시 원래 요소가 존재해야 하는 위치를 기준으로 좌표 지정
- 문서의 일반적인 흐름에 포함됨
- 미지정 시 원래 요소가 존재해야 하는 공간을 남두고, 요소가 상대적 위치로 이동
(3) 절대 위치 (absolute position)
- 가장 가까운 위치에 있는 position 속성이 relative인 부모 요소를 기준으로 left, right, top, bottom 값으로 요소를 위치
- position 속성이 relative인 부모 요소가 없으면 body 요소를 기준으로 위치
- 문서의 일반적인 흐름에 포함되지 않고, 페이지 레이아웃 공간도 배정하지 않음
- 다른 요소가 먼저 위치를 점유해도 덮어 씌우게 됨 (부유 객체; floating object)
(4) 고정 위치 (fixed position)
- 뷰포트를 기준으로 특정 위치에 배치 (스크롤 X)
- 문서의 일반적인 흐름에 포함되지 않고, 페이지 레이아웃 공간도 배정하지 않음
- 다른 요소가 먼저 위치를 점유해도 덮어 씌우게 됨
z-index 프로퍼티
-
z-index 프로퍼티에 큰 숫자값을 지정할 수록 화면 전면에 출력
-
static 이외의 요소에 적용
overflow 프로퍼티
-
visible (디폴트)
-
hidden
-
scroll
-
auto: 부모 영역을 벗어난 부분이 있을 때만 스크롤 표시
2. CSS transition
CSS 프로퍼티 값 변경 시, 해당 값의 변화가 일정 시간에 걸쳐 일어나도록 해서 일종의 애니메이션 효과를 주는 기능
transition-property / transition-duration 프로퍼티
- transition-property: 트랜지션 대상이 되는 CSS 프로퍼티 지정 (디폴트: all)
- transition-duration: 초(s) 또는 밀리 초(ms)로 지정 (디폴트: 0s)
div {
transition-property: opacity, width, height, background-color;
transition-duration: 3s 2s;
}
// 두 설정은 동일
div {
transition-property: opacity, width, height, background-color;
transition-duration: 3s 2s 3s 2s
}
transition-timing-function 프로퍼티
- 디폴트: 0s
- ease: 느리게 시작, 점점 빨라지다가, 다시 느려지며 종료
- linear
- ease-in: 느리게 시작, 일정 속도 후에는 동일 속도로 진행
- ease-out: 일정 속도로 진행 후, 점점 느려지며 종료
- ease-in-out: 느리게 시작 (속도가 빨라지는 시간이 ease 보다 김), 점점 빨라지다가, 다시 느려지며 종료
- step-start
- step-end
- steps(n, start/end)
cubic-bezier(n, n, n, n)
: n == 0 ~ 1
transition-delay 프로퍼티
transition 단축 프로퍼티
transition: property duration function delay
// property duration
transition: margin 2s
// property duration delay
tansition: margin 2s 1s;
// property duration timing-function delay
transition: margin 2s ease-in 1s;
3. CSS animation
-
transition은 변경되어야할 스타일만 지정하지만, animation은 중간에 변경되는 스타일을 세밀하게 지정할 수 있음
-
animation은 animation을 나타내는 CSS 스타일과 중간상태를 나타내는 키프레임(@keyframes)으로 이루어짐
가벼운 효과는 CSS 애니메이션, 세밀한 제어가 필요한 애니메이션은 javascript로 처리
keyframes 문법
transition은 변경되어야할 스타일만 지정하지만, animation은 중간에 변경되는 스타일을 세밀하게 지정할 수 있음
animation은 animation을 나타내는 CSS 스타일과 중간상태를 나타내는 키프레임(@keyframes)으로 이루어짐
가벼운 효과는 CSS 애니메이션, 세밀한 제어가 필요한 애니메이션은 javascript로 처리
from 또는 0%에 설정한 스타일에서 시작해서 to 또는 100%까지, 또는 그 중간 시점을 %로 표기하여, 각 시점에 설정한 스타일로 변경되는 스타일 설정
<style>
.box1 {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid #F2B441;
background: #FD541;
border-radius: 10px;
animation-name: ball;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframe ball {
0% {
// keyframe
}
50% {
// keyframe
}
100% {
// keyframe
}
@keyframe fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
}
</style>
주요 animation 프로퍼티
프로퍼티 | 설명 | 기본값 |
---|---|---|
animation-name | @keyframes 애니메이션 이름 지정 | |
animation-duration | 한 사이클의 애니메이션에 소요되는 시간을 초(s) 또는 밀리 초(ms)로 지정 | 0s |
animation-timing-function | 애니메이션 속도 설정을 위한 함수 지정 | ease |
animation-delay | 애니메이션 시작 전 대기시간을 초(s) 또는 밀리 초(ms)로 지정 | 0s |
animation-iteration-count | 애니메이션 재생 횟수 지정 | 1 |
animation-direction | 애니메이션 종료 후 반복될 때 진행방향 지정 | normal |
animation-fill-mode | 애니메이션 종료 또는 대기 시의 요소 스타일 지정 | |
animation-play-state | 애니메이션 재생 상태 지정 | running |
animation | animation 단축 프로퍼티 |
animation-timing-function 프로퍼티
transition-timing-function과 동일
- 디폴트: ease
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
- steps(n, start/end)
- cubic-bezier(n, n, n, n)
animation-duration, animation-delay
animation-iteration-count
정수로 지정가능, infinite == 무한반복
animation-direction
- normal: 0% -> 100%
- reverse: 100% -> 0%
- alternate: 홀수 번째는 normal, 짝수 번째는 reverse로 전행
- alternate-reverse
animation-fill-mode
- none: 처음 스타일 -> 0% -> 100% -> 처음 스타일
- forwards: 처음 스타일 -> 0% -> 100% -> 100%
- backwards: 0% -> 0% -> 100% -> 처음 스타일
- both: 0% -> 0% -> 100% -> 100%
animation-play-state
주로 javascript와 함께 사용하여 이벤트에 따라 해당 프로퍼티 값을 변경
- paused
- running (디폴트)
animation 단축 프로퍼티
animation: name duration timing-function delay interation-count direction fill-mode play-state
4. CSS transform
요소의 회전, 크기조절, 기울이기, 이동 효과를 부여하는 함수를 제공한다. 애니메이션 등의 키프레임 기반 설정은 제공하지 않으므로, 애니메이션 효과 필요 시 CSS animation이나 transition과 함께 사용하면 된다.
tansform: <transform 함수>;
주요 transform 함수
transform 함수 | 설명 | transform 함수 인자 값 |
---|---|---|
translate(x, y) | px, %, em 등 | |
translateX(n) | px, %, em 등 | |
translateY(n) | px, %, em 등 | |
scale(x, y) | 0 또는 양수 (0~1 == 축소) | |
scaleX(n) | 0 또는 양수 (0~1 == 축소) | |
scaleY(n) | 0 또는 양수 (0~1 == 축소) | |
skew(x-angle, y-angle) | 요소를 가로로 x 각도만큼, 세로로 y 각도만큼 기울임 | 정수, 단위: deg |
skewX(x-angle) | 정수, 단위: deg | |
skewY(y-angle) | 정수, 단위: deg | |
rotate(angle) | 요소를 주어진 각도 (angle) 만큼 회전시킴 | 정수, 단위: deg |
transform-origin 프로퍼티
-
scale(), roate(), translate(), skew() 동작은 해당 요소의 중심을 기준으로 동작
-
tansfrom-origin 프로퍼티를 사용하여 요소의 기준점을 변경
- 프로퍼티 값: left, center, right, length, % 등
transform-origin: x축 / y축 / z축
transform-origin: 50% 0%
5. CSS float
예외사항과 호환성 이슈로 인해 flexbox를 사용하는것이 일반적이다.
float 프로퍼티 값
- none (디폴트)
- right
- left
clear 프로퍼티 값 -> float 해제
- none (디폴트)
- right: 왼쪽 float를 사용 해제
- left: 오른쪽 float를 사용 해제
- both
clearfix
예외사항과 호환성 이슈로 인해 flexbox를 사용하는것이 일반적이다.
float 사용 시 clear를 반드시 해줘야 하므로 clearfix를 사용한다.
<stlye>
.clearfix::after {
content: "";
clear: both;
display: block;
}
</stlye>
...
<div class="clearfix">
...
</div>
Author And Source
이 문제에 관하여(4. CSS 배치와 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@24siefil/4.-CSS-배치와-애니메이션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)