CSS 단위
CSS에서는 다양한 단위들이 사용됩니다. 오늘은 CSS에서 쓰이는 단위들을 알아보겠습니다.
01. px
해상도에 따라 달라지는 기본 단위로서 다음과 같이 표현합니다.
font-size: 12px;
02. %
부모 요소의 글자 크기를 100% 기준으로 계산한 %단위로 다음과 같이 표현합니다.
font-size: 150%;
특별한 설정이 없다면 기본값인 16px이 100%가 되므로 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다.
03. em
부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로 다음과 같이 표현합니다.
font-size: 1.5em;
특별한 설정이 없다면 기본값인 16px이 1em이 되므로, 1.5em은 24px(16px*1.5=24px)이 됩니다. 만약 부모 요소가 10px이었다면 1.5em은 15px이 될 것입니다.
[글자 크기를 각 단위로 환산했을 때]
| px | % | em | pt |
|---|---|---|---|
| 6px | 37.50% | 0.375em | 5pt |
| 7px | 43.80% | 0.438em | 5pt |
| 8px | 50% | 0.500em | 6pt |
| 9px | 56.30% | 0.563em | 7pt |
| 10px | 62.50% | 0.625em | 8pt |
| 11px | 68.80% | 0.688em | 8pt |
| 12px | 75.00% | 0.750em | 9pt |
| 13px | 81.30% | 0.813em | 10pt |
| 14px | 87.50% | 0.875em | 11pt |
| 15px | 93.80% | 0.938em | 11pt |
| 16px | 100% | 1.000em | 12pt |
04. rem
rem은 em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. rem의 r은 root 즉, html 요소를 뜻하므로 html 요소에서 지정한 글자 크기가 1rem이 됩니다.
font-size: 1.5rem;
05. vw, vh
vw는 뷰포트 너비값의 100분의 1 단위, vh는 뷰포트 높이값의 100분의 1 단위입니다. 다음 예문은 글자 크기가 뷰포트 너비의 10% 크기라는 의미입니다.
font-size: 10vw;
'CSS' 카테고리의 다른 글
| [CSS]요소 숨기기 (8) | 2022.08.25 |
|---|---|
| [CSS]색상 표현 방법 (4) | 2022.08.23 |
| [CSS]이미지 스프라이트 / IR 효과 / 백그라운드 표현 (7) | 2022.08.20 |
| [CSS]강아지 애니메이션 (3) | 2022.08.18 |
| [CSS]SCSS (2) | 2022.08.18 |
댓글