배치

position

요소의 위치 지정 기준이다.
(top,bottom,left,right,z-index)

Static - 기본값, 기준이 없음

relative- 요소 자신을 기준으로 위치를

absolute - 위치 상 부모 요소를 기준으로 지정한다.

fixed - 뷰포트(브라우저)를 기준

sticky - 스크롤 영역 기준

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임( 기본값 제외 )

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. 1번과 2번의 조건까지 같을 경우, HTML의 다음 구조일 수록 위에 쌓임

z-index

= 요소의 쌓임 정도를 지정

요소의 display가 변경됨

• position의 속성 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경됩니다.

---

전환 효과

transition

• 속성명 지속시간 타이밍함수 대기시간

transition-property(속성명)

• 기본값은 all입니다.
• 속성을 지정하면 특정 속성만 적용된다.

transition-duration(지속시간)

• 기본값은 0s입니다.
• 전환효과가 실행되기까지 지속시간을 말합니다.

transition-timing-function(타이밍 함수)

• 기본값은 ease 느리게-빠르게-느리게
• 타이밍(Easing)함수라고도 합니다.

linear = 일정하게
ease-in = 느리게- 빠르게
ease-out = 빠르게 - 느리게
ease-in-out = 느리게-빠르게-느리게

easing functions 라고 검색하면
Easing 사이트에서 연습해볼 수 있음.

transition-delay(대기시간)

• 전환효과가 몇 초 뒤에 시작할지 대기시간을 지정
• 기본값은 0s입니다.
• 시간을 지정하여 사용합니다.

---

변환

transform

변환함수를 사용하여 원근법 이동, 크기, 회전,기울임등을 사용할 수 있습니다.

• 2D 변홤 함수, 3D 변환 함수이기도 합니다.

2D 변환 함수

단위는 px입니다.
scale만 없고 배수기준입니다.

• translate(x,y) = 이동 (x축,y축)
• translateX(x) = 이동(x축)
• translateY(y) = 이동(y축)
• scale(x,y) = 크기(x축,y축)

단위는 deg(각도)입니다.

• rotate(degree) = 회전(각도)
• skewX(x) = 기울임(x축)
• skewY(y) = 기울임(y축)

3D 변환 함수

단위는 px입니다.

• perspective(n) = 원근법(거리)

단위는 deg(각도)입니다.

• rotateX(x) = 회전(x축)
• rotateY(y) = 회전(y축)

backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김 여부

• 기본값은 visible 뒷면 보임입니다.
• hidden 으로 설정하면 안보입니다.