단위
1. px
- 픽셀값
2. em
- 부모의 font-size를 기준으로 하는 상대적인 size
ex) 부모의 font-size: 10px; 일때 자식의 font-size:1.5em 일떄 font-size: 15px가 됨
3. rem (root em)
- 최상위 태그의 font-size를 기준으로 함 (보통 html 태그에서 지정된 font-size)
4. vw, vh
-
vh = viewport height
-
vw = viewport width
-
브라우저의 width, height의 크기를 100으로 나눈 값이다.
ex)브라우저의 width가 1000px이라면 vw는 1000을 100으로 나눈 값인 10px이 된다. -
모바일 반응형에 유용하게 쓸 수 있는 단위
5. vmin/ vmax
-
viewport를 기준으로 하는 단위
-
vmin = 더 작은거를 적용
-
nmax = 더 큰 거를 적용
ex) 1200px * 600px viewport가 있을 때 1vw = 12px 과 1vh = 6px이 되므로
1vmin = 1vh = 6px
1vmax = 1vw = 12px
의 결과값을 가지게 된다
flex wrap
MDN = https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap
컨테이너가 아이템들의 폭보다 작아질때 어떻게할지 결정
기본값은 nowrap으로 창을 줄여도 아이템들이 밑으로 안내려가고 사라지지만
wrap으로 하면 창크기를 줄이면 내려감
자주 사용하는 속성 값
- flex-wrap: nowrap; / Default value /
- flex-wrap: wrap;
- flex-wrap: wrap-reverse;
-
wrap - flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치
-
nowrap - 기본 설정값으로, flex-container 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치
-
wrap-reverse - wrap 속성값과 동일, but 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치
FE