플렉스 (정렬) Container
display
- flex : 블록요소처럼 flex container 정의
- inline-flex : 인라인 요소처럼 flex container 정의
flex-directrion
- row (default)
- row-reverse
columncolumn-reverse
flex-wrap : flex items 묶음 여부
- Norwap (default) : 묶음(줄 바꿈) 없음
- wrap : 여러 줄로 묶음 => 칸이 모자라면 줄 바꿈
justify-content : 주 축의 정렬 방법
- flex-start (default) : flex items를 시작점으로 정렬
- flex-end : flex items를 끝점으로 정렬
- center : flex items를 가운데 정렬
align-content : 교차 축의 여러 줄 정렬 방법 (두 줄 이상 있을 때)
-
stretch (default) : flex items를 시작점으로 정렬 => 늘어나려는 성질
-
flex-start : flex items를 시작점으로 정렬
-
flex-end : flex items를 끝점으로 정렬
-
center : flex items를 가운데 정렬
align-items : 교차 축의 한 줄 정렬 방법 (content보다 많이 씀)
-
stretch (default) : flex items를 교차축으로 늘림
-
flex-start : flex items를 각 줄의 시작점으로 정렬
-
flex-end : flex items를 각 줄의 끝점으로 정렬
-
center : flex items를 각 줄의 가운데 정렬
플렉스 (정렬) Items
order => html 구조를 바꾸지 않아도 순서 변경 가능
- 0 (default) : 순서 없음
- 숫자 : 숫자가 작을수록 먼저
flex-grow : flex item의 증가 너비 비율 => 남을 때 증가 비율
- 0 (default) : 증가 비율 없음
- 숫자 : 증가 비율
flex-shrink : flex item의 감소 너비 비율 => 넘칠 때 감소 비율
- 1 (default) : 증가 비율 없음
- 숫자 : 증가 비율
flex-basis : flex item의 공간 배분 전 기본 너비
- auto (default) : 요소의 content 너비
- 단위 : px, em, rem 등 단위로 지정
- 0으로 설정 => 시각적으로 비율에 맞게 나옴
전환
transition: 속성명 *지속시간(필수) 타이밍함수 대기시간
-
transition-property
- all: 모든 속성에 적용
- 속성이름 : 전환 효과를 사용할 속성 이름 명시
-
transition-duration
- 0s (default) : 지속 시간 없음
- 시간
-
transitiom-timing-function
- ease(default) : 느 - 빠 - 느
- linear : 일정
- ease-in : 느 - 빠
- ease-out : 빠 - 느
- ease-in-out: 느 - 빠 - 느
-
transition-delay : 대기 시간 지정
- 0s (default) : 대기 시간 없음
- 시간 : 대기 시간 지정
변환
transform: 변환함수1 변환함수2 변환함수3 ...;
transform: 원근법 이동 크기 회전 기울임;
2D 변환함수
-
px
-
translate(x, y) : 이동(x축, y축)
-
translateX(x) : 이동(x축)
-
translateY(y) : 이동(y축)
-
scale(x, y) : 크기(x축, y축)
- 특정 단위 입력 X => 배수 의미
-
-
deg
-
rotate(degree) : 회전(각도)
-
skewX(x) : 기울임(x축)
-
skewY(y) : 기울임(y축)
-
3D 변환함수
-
px
- perspective(n) : 원근법(거리) => 제일 앞에 명시
-
deg
-
rotateX(x) : 회전(x축)
-
rotateX(y) : 회전(y축)
-
perspective 속성 vs. 함수
-
perspective: 600px
-
적용 대상 : 관찰 대상의 부모
-
기준점 설정 : perspective-origin
-
-
transforrm: perspecctive(600px)
-
적용 대상 : 관찰 대상
-
기준점 설정 : transform-origin
-
backspace-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부
- visible(default) : 뒷면 보임
- hidden : 뒷면 숨김
