goal
css의 단위의 종류를 알고 개념에 대해서 이해한다.
1 ] (중요)CSS단위의 종류 : vw, vh (이외에도 다양한 종류가 존재)
다양한 단위를 알기위한 참고자료 : https://nykim.work/85
| 단위 | 설명 |
| 절대 단위 | px, pt |
| 상대 단위 | %, em, rem, ch, vw, vh |
- rem : root의 글자 크기를 중심으로 배로 증가시킨다.
- root는 1rem이며, 상대적 크기 증가를 하고 싶으면 2rem으로 조절
- 자주 사용한다.
- vw (viewport Width) : 뷰포트를 기준으로 하는 너비의 단위
- 1vw = 뷰포트 너비의 1% (만약, 500px너비의 뷰포트인 경우, 1vw = 5px)
- viewport란, 브라우저에서 사용자에게 보이는 부분을 말한다.
- vh (viewprot height) : 뷰포트를 기준으로 하는 높이의 단위
- 1vh = 뷰포트 너비의 1% (만약, 500px높이의 뷰포트인 경우, 1vh = 5px)
'Markup-language > CSS' 카테고리의 다른 글
| CSS :) [중요] 레이아웃 구성하기!! display: flex, flex(felx-direction/grow/shink/basis), justyfy-content, align-items (0) | 2022.04.28 |
|---|---|
| CSS :) [중요] Selector (외부자료) (0) | 2022.04.27 |
| CSS :) display의 옵션 flex를 이해하자 (외부자료) (0) | 2022.04.27 |
| CSS :) [중요] 태그의 성질(block/inline)변경, display -> 레이아웃 구성의 중요 요소 (0) | 2022.04.27 |
| CSS :) HTML에 CSS 적용시키기 (인라인/내부/외부 스타일) (0) | 2022.04.27 |