6.1.4 단위
CSS 속성에는 다양한 단위의 값을 사용할 수 있는데, 단위는 절대 단위와 상대 단위로 나뉩니다. 절대 단위는 어떤 환경이라도 동일한 크기로 보이는 단위를 말하고, 상대 단위는 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위를 말합니다. 앞으로 자주 사용하게 될 CSS 단위를 살펴봅시다.
● 절대 단위
절대 단위는 px(pixel) 한 가지로, 모니터의 화면을 구성하는 사각형 1개의 크기를 의미합니다. CSS에서 사용할 수 있는 크기 단위 중 가장 기본입니다. 웹 브라우저에서 다른 단위로 값을 지정하더라도 결국 px 단위로 환산되어 계산됩니다.
● 상대 단위
CSS에서 자주 사용하는 상대 단위는 다음과 같습니다.
표 6-2 상대 단위
|
단위 |
설명 |
|
% |
해당 속성의 상위 요소 속성값에 상대적인 크기를 가집니다. |
|
em |
부모 요소의 텍스트 크기에 상대적인 크기를 가집니다. |
|
rem |
html 태그의 텍스트 크기에 상대적인 크기를 가집니다. |
|
vw |
뷰포트의 너비를 기준으로 상대적인 크기를 가집니다. |
|
vh |
뷰포트의 높이를 기준으로 상대적인 크기를 가집니다. |
각 단위의 사용법은 font-size 속성을 예시로 설명하겠습니다. font-size 속성은 텍스트 크기를 지정하는 속성입니다.