Summary
- Position
- Flex
- Transition
- Transform
Notes
1. Position (배치)
Stack Order
- position 값이 있는 경우 위에 쌓인다
- 1번 동시 만족 시 z-index 값이 높을수록 위에 쌓인다
- 1,2 동시 만족 시 HTML의 후순위 구조일수록 위에 쌓인다
1-1. position
다음 중 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경된다(display:block을 따로 주지 않아도 된다).
- static (default) (기준 없음)
- relative (요소 자신 기준)
- absolute (위치 상 부모 요소 기준) (=display: block)
- fixed (뷰포트 기준) (=display: block)
또한 각 방향에 단위를 넣어 위치를 지정할 수 있다(음수 사용 가능).
- top
- bottom
- left
- right
- z-index
1-2. z-index
- auto (default) (부모 요소와 동일)
- 숫자 (높을수록 위에 쌓임)
2. Flex (정렬)
display: flex로 flex container를 정의한다. 이때 기본적으로 container는 블록 요소이며, 인라인 요소로 정의하려면 inline-flex 값을 준다.
2-1. flex-container
flex-direction
- row (default) (좌>우)
- row-reverse (우>좌)
- column (위>아래)
- column-reverse (아래>위)
flex-wrap
- nowrap (default)
- wrap
justify-content
- flex-start (default)
- flex-end
- center
- space-between
- space-around
align-content
- stretch (default)
- flex-start
- flex-end
- center
- space-between
- space-around
align-items
- stretch (default)
- flex-start
- flex-end
- center
2-2. flex-items
order
- 0 (default) (순서 없음)
- 숫자 (숫자가 작을수록 먼저)
flex-grow
- 0 (default)
- 숫자 (증가 비율)
flex-shrink
- 1 (default) (container 너비에 따라 감소 비율 적용)
- 숫자 (감소 비율)
flex-basis
공간 배분 전 기본 너비
- auto (default) (요소의 content 너비)
- 단위
3. Transition (전환)
3-1. transition-property
- all (default) (모든 속성에 적용)
- 속성이름 (width, height, ...)
3-2. transition-duration (필수 속성)
- 0s (default) (전환 효과 없음)
- 시간 (지속시간-초 지정)
3-3. transition-timing-function
3-4. transition-delay
- 0s (default) (대기 시간 없음)
- 시간 (대기시간-초 지정)
4. Transform (변환)
4-1. 2D transform function
translate(x,y) (단축)
- translateX(x)
- translateY(y)
rotate(degree)
skewX(x), skewY(y)
4-2. 3D transform function
rotateX(x), rotateY(y)
perspective
하위 요소를 관찰하는 원근 거리를 지정
- perspective: 600px; (속성, 관찰 대상의 부모에 적용)
- transform: perspective(600px); (함수, 관찰 대상에 적용)
backface-visibility
3D 변환으로 회전된 요소의 뒷면 숨김 여부
- visible (default) (뒷면 보임)
- hidden (뒷면 숨김)
