단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다.
절대 길이(absolute unit)
절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다.
px ( 1pixels = 1/96th of 1 inch ) - Default
절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다.
여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서,
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다.
pt ( 1points - 1/72 of 1 inch )
컴퓨터가 없던 시절부터 있던 단위입니다.
인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다.
웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다.
그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아닙니다.
예를 들면 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px 로 보이게 됩니다.
상대 길이(relative unit)
상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다.
%
부모의 값(상위요소)에 대해서 백분율로 환산한 크기를 갖게 됩니다.
em
1em은 현재 요소의 폰트 크기와 동일합니다.(구체적으로는 대문자 M의 너비와 같습니다.)
1em의 기본적인 font-size는 16px 이지만 폰트크기는 부모로부터 상속받으므로 em의 크기는 달라질 수 있습니다.
(1em=16px) 사용하고 싶은 단위가 em인 경우 16으로 나누어 계산하면 됩니다.
ex: 1.25em = 20px
rem
root의 font-size를 기준으로 값을 환산합니다.
vw
viewport의 width값을 기준으로 1%의 값으로 계산됩니다.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
CSS values and units
This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through th
developer.mozilla.org
위의 두 사진을 비교해보자.
"안녕px" "안녕pt"는 글씨크기를 유지 (사진 크기 차이는 있을수 있으나 실제론 동일함) 했지만
"안녕em"과 "안녕 %"은 글씨크기가 현저히 달라졌다.
왜그럴까?
상위요소인 <div>에 폰트사이즈를 설정해 주었기 때문에
상대길이 단위인 em / % 가 상위요소의 글씨 사이즈에 맞게 변화되었고
절대길이 단위인 px / pt는 상위요소와 상관없이 본연의 값을 유지하기 때문이다.
CSS 단위별 폰트 사이즈 표 ( px / pt / em / % )
| Pixels |
Points |
Ems | Percent |
| 8px | 6pt | 0.5em | 50% |
| 9px | 7pt | 0.55em | 55% |
| 10px | 7.5pt | 0.625em | 62.50% |
| 11px | 8pt | 0.7em | 70% |
| 12px | 9pt | 0.75em | 75% |
| 13px | 10pt | 0.8em | 80% |
| 14px | 10.5pt | 0.875em | 87.50% |
| 15px | 11pt | 0.95em | 95% |
| 16px | 12pt | 1em | 100% |
| 17px | 13pt | 1.05em | 105% |
| 18px | 13.5pt | 1.125em | 112.50% |
| 19px | 14pt | 1.2em | 120% |
| 20px | 14.5pt | 1.25em | 125% |
| 21px | 15pt | 1.3em | 130% |
| 22px | 16pt | 1.4em | 140% |
| 23px | 17pt | 1.45em | 145% |
| 24px | 18pt | 1.5em | 150% |
| 26px | 20pt | 1.6em | 160% |
| 29px | 22pt | 1.8em | 180% |
| 32px | 24pt | 2em | 200% |
| 35px | 26pt | 2.2em | 220% |
| 36px | 27pt | 2.25em | 225% |
| 37px | 28pt | 2.3em | 230% |
| 38px | 29pt | 2.35em | 235% |
| 40px | 30pt | 2.45em | 245% |
| 42px | 32pt | 2.55em | 255% |
| 45px | 34pt | 2.75em | 275% |
| 48px | 36pt | 3em | 300% |
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
| CSS속성_백그라운드(Background) (0) | 2020.03.25 |
|---|---|
| CSS속성_색상(Color) / HTML Color Names (0) | 2020.03.25 |
| CSS 속성의 정의와 syntax(문법) 확인 방법 (0) | 2020.03.24 |
| CSS_캐스케이딩 (Cascading) (0) | 2020.03.24 |
| CSS_상속 (0) | 2020.03.23 |
댓글