사용할 때마다 조금씩 헷갈리는 css에서 자주 사용되는 단위들에 대해 정리하고자 한다!
절대 길이 단위
절대 길이 단위는 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주된다. (px, pt, cm, mm 등)
px
가장 기본적으로 사용되는 단위로, 픽셀이라는 고정 값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말한다. 가장 기본이 되는 단위이기 때문에 다른 단위들의 기준이 된다.
상대 길이 단위
%(percent)
부모 엘리먼트에 대한 상대적인 크기를 설정한다.
em
부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말한다.
부모의 기본 폰트 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다.
ex) 부모 폰트 크기가 16px이라면, 1.5em은 24px에 해당
rem (root em)
html에서 root element의 폰트 크기를 1rem으로 놓고, 그에 대한 상대적인 크기를 설정한다.
vh & vw (vertical height & vertical width)
vh와 vw는 각각 vertical height, vertical width의 약자이다. 이것들은 뷰포트(웹페이지에서 사용자가 볼 수 있는 영역, 주로 브라우저창의 크기)의 높이와 너비에 비례한다. 반응형 페이지를 만들 때 유용하게 사용되는 단위이다.
1vh는 실제 높이값의 1/100을 나타낸다.
ex) 즉 화면 높이가 1000px이면 1vh는 10px
ex) 최대 높이값을 만들고 싶다면 100vh
이 단위는 항상 눈에 보이는 디스플레이의 일정 비율을 차지하도록 만들어지기 때문에 사용자가 화면의 크기를 임의로 줄였다 늘였다 해도, 콘텐츠가 화면의 일정 비율을 항상 차지하게 해서 예쁜 구조를 유지할 수 있게 해준다는 장점이 있다.
vmin & vmax
vh와 vw가 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin과 vmax는 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있다.
뷰포트의 너비, 높이 중 '작은' 혹은 '큰' 길이를 기준으로 값이 동적으로 설정된다.
ex) 브라우저의 크기가 1100px 너비, 700px 높이일 때, 1vmin은 7px이 되고 1vmax는 11px이 된다.
ex
현재 폰트 문자 x의 height 값이다. 폰트의 중간 지점을 알아내기 위해 자주 사용한다.
