CSS에서는 다양한 사이즈 단위를 사용하여 웹 페이지의 요소들을 정확하게 조절할 수 있습니다.
이러한 단위들은 절대적인 크기를 나타내는 것과 상대적인 크기를 나타내는 것까지 다양하며
상황에 따라 적절히 선택하여 사용할 수 있습니다.
주요 사이즈 단위
* 절대 단위: px, cm, mm, in 등이 있으며, 화면에서 고정된 크기를 나타냅니다.
* 상대 단위: em, rem, %, vw, vh 등이 있으며, 다른 요소나 뷰포트의 크기에 따라 변화합니다.
사이즈 단위별 표기법
* px (픽셀)
- 예)font-size: 14px;는 글자 크기를 14픽셀로 설정합니다.
* em
- 예) font-size: 1.2em;는 부모 요소의 글자 크기에 1.2배를 적용합니다.
* % (퍼센트)
- 예) width: 50%;는 부모 요소의 너비의 50% 크기로 설정합니다.
* vw/vh (뷰포트 너비/높이의 백분율)
- 예) width: 80vw;는 뷰포트 너비의 80% 크기로 설정합니다.
* rem (루트 em)
- 예) font-size: 2rem;은 <html>의 폰트 크기의 2배 크기로 설정합니다.
* vmin (뷰포트 최소)
- 예) width: 75vmin;은 뷰포트의 너비와 높이 중 더 작은 쪽의 75% 크기로 설정합니다.
* vmax (뷰포트 최대)
- 예) width: 100vmax;은 뷰포트의 너비와 높이 중 더 큰 쪽의 100% 크기로 설정합니다.
* ex
- 예) font-size: 2ex;는 현재 글꼴의 소문자 x의 높이의 2배 크기로 설정합니다.
* ch (문자의 너비)
- 예) width: 10ch;는 '0' 문자의 너비 10개만큼의 크기로 설정합니다.
'웹개발 > front-end' 카테고리의 다른 글
| SPA(single page application)에서 웹팩을 사용하는 이유 (0) | 2024.03.25 |
|---|---|
| [React]URL 페이지 연결하기 (0) | 2024.03.25 |
| [React]리액트 개발 중에 빈번하게 발생하는 문제점! (0) | 2024.03.25 |
| [React]JSX 기초 (0) | 2024.03.22 |
| [react]기초 (0) | 2024.03.22 |