display:flex
flex container 안에 flex item이 존재
justify-content
→ 가로정렬
•
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
•
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
•
center: 요소들을 컨테이너의 가운데로 정렬합니다.
•
space-between: 요소들 사이에 동일한 간격을 둡니다.
•
space-around: 요소들 주위에 동일한 간격을 둡니다.
align-items
→ 세로 정렬
•
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
•
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
•
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
•
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
•
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
felx direction
•
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
•
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
•
column: 요소들을 위에서 아래로 정렬합니다.
•
column-reverse: 요소들을 아래에서 위로 정렬합니다.
order
order: n 의 형태로 순서 지정 가능(기본값은 0)
align-self
align-items의 값을 해당 item에만 적용
flex-wrap
•
nowrap: 모든 요소들을 한 줄에 정렬합니다.
•
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
•
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex-flow
flex-wrap과 flex-direction 같이 사용 가능
align-content
•
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
•
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
•
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
•
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
•
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
•
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
CSS 적용 우선순위
1.
inline이 우선
2.
위 보다 아래 선언된 것이 우선
3.
아이디가 클래스보다 우선
4.
구체적인 표현이 우선
5.
!important가 가장 우선
6.
모두 !important라면 1~4에 따라 적용
7.
javascript로 지정한 css는 inline으로 들어간다.
z-index
요소가 겹칠 때 사용
BEM
block element modifier
표준 css 명명법, 마크업 방법
테일윈드
클래스명으로 스타일 적용
ex) md:h-[200px] lg:hidden 등
