[CSS] CSS Units(px, em, rem, vw, vh, %)에 대해 알아보자❗️

CSS Units

1️⃣ Absolute length units

2️⃣ Relative length units

 

Absolute length units

어떤 상황에서든 항상 고정된 길이를 나타내는 단위

여러가지가 존재하지만 주로 px(모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위)이 사용된다.

 

Absolute length units의 문제점이 무엇일까?

컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 동일한 크기로 간주! 반응형 ❌

 

Relative length units

고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위

주로 사용되는 5가지에는 em, rem, vw, vh, %가 존재한다.

 

em - (동일 요소의 글꼴 크기)❌ → 부모 요소의 글꼴 크기

선택된 폰트 패밀리에 상관없이, 즉 선택된 폰트의 전혀 상관없이 항상 고정된 폰트 사이즈, 부모의 폰트 사이즈의 상대적으로 크기가 계산된다.

기본적으로 브라우저에서 html에 할당되는 폰트사이즈는 16px = 1em 이다.

ex) 부모의 폰트 사이즈 8em = 16px * 8, 자식 폰트 사이즈 0.5em = 부모의 폰트 사이즈 * 0.5 = 64px

 

rem - 루트 요소의 글꼴 크기

루트에 상대적으로 크기가 결정, 즉 최상위 요소 html 요소의 font-size 속성 값이 기준이 된다.

ex) 부모의 폰트 사이즈 8em = 16px * 8, 자식 폰트 사이즈 0.5rem = 16px(root) * 0.5 = 8px

 

vw, vh - viewport related

현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환

열려있는 화면 전체의 상대길이이므로 스크롤 바를 포함한 길이를 반환❗

ex) 현재 스크린 크기 height = 1000px, width = 500px

height: 50vh;

width: 50vw;

height = 500px, width = 250px

 

%

부모 요소의 크기에 맞춰 상대적 크기를 반환

스크롤 바를 포함하지 않은 현재 화면 길이만을 반환

 

요소의 너비와 높이에 따라서 사이즈 변경 - %, v*

폰트 사이즈에 따라서 사이즈가 변경 - em, rem