CSS 단위

CSSpx&rememvwvhvminvmaxchex
avatar
2025.04.10
·
3 min read

px

픽셀 단위로 지정한다.


%

부모 태그를 기준으로 %단위로 지정한다.


rem(root em)

최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html태그이다.


em

현재의 font-size를 정의한다.
body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다.


vw

뷰포트의 너비 값이다.
요소의 너비 값은 100분의 1의 단위이다.
(예: 너비 값이 1000px 일 때 1vw10px)


vh

뷰포트의 높이 값이다.
요소의 높이 값은 100분의 1의 단위이다.
(예: 높이 값이 900px 일 때 1vh9px)


vmin & vmax

vh와 vw이 늘 뷰포트의 너비 값과 높이 값에 상대적인 영향을 받는다면 vmin과 vmax는 너비 값과 높이 값에 따라 최대, 최소 값을 지정할 수 있다.
(예: 너비 값이 1100px, 높이 값이 700px일 때 1vmin7px이 되고 1vmax11px이 된다.)
(예: 너비 값이 800px, 높이 값이 1200px일 때 1vmin8px이 되고 1vmax12px이 된다.)


ch

제로 문자인 0의 너비 값의 고급 척도로 정의된다.
(예: 너비가 40ch는 40개의 문자열을 포함하고 있다는 뜻)


ex

현재 폰트의 x (소문자x)의 높이 값이다.







- 컬렉션 아티클