1st revised - 2022년 9월 19일

절대단위(absolute unit) : css에서의 절대단위는 보통 px(픽셀), pt(포인트)를 많이 쓴다. 그렇지만 이 단위들은 화면의 크기가 변화해도 변하지 않기에 반응형 웹사이트에는 추천하지 않는다.

상대단위(relative unit) : 브라우저를 기준으로 폰트 사이즈가 유연하게 바뀐다.

---

📏css 단위

px

화면에 나타낼 수 있는 가장 작은 단위, 하나의 점.
절대적인 단위이므로 반응형 웹사이트에는 적절하지 않다.

em

요소의 글꼴 크기
em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위.
부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어려울 수 있다.
ex) 상위 태그의 폰트 크기가 16px 인경우, 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px 이 된다.

rem

루트 요소 (html)의 글꼴 크기
가장 최상위 요소인 html 크기에 비례하여 크기를 변경한다.
em과 다르게 현재 태그 위치를 기준으로 부모 태그의 폰트 사이즈는 전혀 관련이 없다.

em, rem 계산해주는 사이트 : http://pxtoem.com/

vw

viewport width
ex) 100vw == 브라우저 너비 100%
ex) 50vw == 브라우저 너비의 50%

vh

viewport height
ex) 100vh == 브라우저 높이 100%
ex) 50vh == 브라우저 높이의 50%

%

상대적 백분율
부모 기준으로 자식의 넓이를 %라고 한다.
ex) 부모 태그의 넓이가 1200px일때 자식에게 50%를 적용하면 자식 태그의 넓이는 600px이 된다.