CSS
배치
position
- static: 상관없음
- relative: 요소 자신을 기준
- absolute: 위치 상 부모 요소를 기준 (display:block)
- fixed: 뷰포트(브라우저)를 기준
z-index
auto: 부모 요소와 동일한 쌓임 정도 (기본값)
숫자: 숫자가 높을 수록 위에 쌓임 (큰 수를 사용말고 작은 수 사용 권장)
플렉스(정렬) -> display: flex
display
Flex Container의 화면 출력 특성
flex: 블록 요소와 같이 Flex Container 정의
inline-flex: 인라인 요소와 같이 Flex Container 정의
flex-direction
row: 행 축(좌 => 우) -> 기본값
row-reverse: 행축(우 => 좌)
flex-wrap
Flex Items 묶음 (줄 바꿈) 여부
no wrap: 묶음(줄 바꿈) 없음 -> 기본값
wrap: 여러 줄로 묶음
justify-content
주 축의 정렬 방법
flex-start: Flex Items를 시작점으로 정렬 -> 기본값
flex-end: Flex Items를 끝점으로 정렬
center: Flex Items를 가운데 정렬
align-content
교차 축의 여러 줄 정렬 방법
stretch: Flex Items를 시작점으로 정렬 ->기본값
flex-start: Flex Items를 시작점으로 정렬
flex-end: Flex Items를 끝점으로 정렬
center: Flex Items를 가운데 정렬
align-items
교차 축의 한 줄 정렬 방법(많이 사용한다.)
stretch: Flex Items를 교차 축으로 늘림 ->기본값
flex-start: Flex Items를 각 줄의 시작점으로 정렬
flex-end: Flex Items를 각 줄의 끝점으로 정렬
center: Flex Items를 각 줄의 가운데 정렬
order
Flex Item의 순서
0: 순서없음 -> 기본값
숫자: 숫자가 작을 수록 먼저
flex-grow
Flex Item의 증가 너비 비율
0: 증가 비율 없음 -> 기본값
숫자: 증가 비율
flex-shrink
1: Flex Container 너비에 까라 감소 비율 적용 -> 기본값
숫자: 감소 비율
flex-basis
Flex Item의 공간 배분 전 기본 너비(대부분의 경우 0으로 둔다.)
auto: 요소의 Content 너비 -> 기본값
단위: px em rem 등 단위로 지정
전환
transition
요소의 전환효과를 지정하는 단축 속성
transition: 속성명 지속시간 타이밍함수 대기시간
transition-property (속성명)
all: 모든 속성에 적용 -> 기본값
속성이름: 전환 효과를 사용할 속성 이름 명시
transition-duration (지속시간)
0s: 전환 효과 없음 -> 기본값
시간: 지속시간(s)을 지정
transition-timing-function (타이밍 함수)
전환 효과의 타이밍 함수 지정
ease: 느리게 - 빠르게 - 느리게
linear: 일정하게
ease-in: 느리게 - 빠르게
ease-out: 빠르게 - 느리게
ease-in-out: 느리게 - 빠르게 - 느리게
transition-delay (대기시간)
전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
0s: 대기시간 없음 -> 기본값
시간: 대기시간(s)을 지정
변환
transform
원근법 이동 크기 회전 기울임
2D 변환 함수
translate(x, y): 이동(x축, y축) - 단위: px
translateX(x): 이동(x축) - 단위: px
translateY(y): 이동(y축) - 단위: px
scale(x, y): 크기(x축, y축)
rotate(degree): 회전(각도) - 단위: deg
skewX(x): 기울임(x축) - 단위: deg
skewY(y): 기울임(y축) - 단위: deg
3D 변환 함수
perspective(n): 원근법(거리) - 단위:px
rotateX(x): 회전(x축) - 단위:deg
rotateY(y): 회전(y축) - 단위:deg
perspective
하위 요소를 관찰하는 원근 거리를 지정
단위: px등 단위로 지정
backface-visibility
3D 변환으로 회전된 요소의 뒷면 숨김 여부
visible: 뒷면 보임 -> 기본값
hidden: 뒷면 숨김
