CSS 단위

각 요소의 크기를 지정할 때 사용하는 단위에 대해서 알아보자.

절대 길이 단위

외부에 영향을 받지 않는 고정된 단위를 말한다.

px(픽셀)

px(Picture Element)은 디지털 화면에서 이미지를 표현하는 가장 작은 단위로, 화소라고 부르기도 한다.

p {
	width: 200px;
	height: 300px;
}

px 단위의 단점

우리는 다양한 디바이스를 통해 웹에 접근한다.
하지만 모든 디바이스가 동일한 픽셀값을 제공하지 않는다.
절대 단위를 사용하는 경우, 요소가 디바이스의 픽셀의 밀도마다 다른 크기, 위치로 보일 수 있다.

상대 길이 단위

다른 요소나 뷰포트의 크기 등 외부의 영향을 받아 상대적으로 크기가 변하는 단위이다.

%(퍼센트) 단위

%는 부모의 해당 속성값을 기준으로 한다.

p {
	width: 20%;
	height: 30%;
}

이 때 높이 값은 부모의 높이가 지정이 되어있을 때 사용이 가능하다.

vw, vh(뷰포트) 단위

vw(viewport width)와 vh(viewport height)는 뷰포트를 기준으로 하는 단위이다.
이 때 뷰포트란 브라우저 창의 크기를 말한다.
뷰포트 너비의 100% 크기를 표시하고 싶을 땐 100vw와 같이 표시한다.

p {
	width: 30vw;
	height: 50vh;
}

vmin, vmax(최소/최대 뷰포트) 단위

화면의 너비와 높이를 비교하여 작은 값(min), 큰 값(max)을 기준으로 하는 백분율이다.
만약 가로가 200, 세로가 500이라면 vmin은 가로인 200, vmax는 세로인 500 기준으로 퍼센트가 적용된다.

p {
	width: 70vmin;
	height: 30vmax;
}

em, rem(상대적 글꼴 크기) 단위

em은 부모 요소를, rem(root em)은 루트 요소인 html 태그를 기준으로 글자크기(font-size) 값의 배율 단위이다.
일반적으로 html 태그의 font-size는 16px이다.

<!-- index.html -->
<div>
  <p></p>
</div>

/* style.css */
div {
	font-size: 1.5rem; // 16 * 1.5 = 24px
}

p {
	font-size: 2em; // 24 * 2 = 48px
}

rem 단위를 사용하여 폰트 사이즈를 설정한 경우 기준 폰트 사이즈를 수정하면 일괄적으로 변경 처리할 수 있어 유지보수에 용이하다.

em, rem?

em과 rem 각각 어느 때에 사용하면 좋을지 알아보자.

1. 레이아웃 구성 요소(여백, 컨테이너 너비) = rem
   페이지 전체에서 일관된 간격을 유지하기 위해 rem을 사용하는 것이 좋다.
2. 텍스트 관련 속성 = rem
   가독성과 접근성을 보장하기 위해서 rem을 사용한다.
3. 컴포넌트 내부 요소(패딩, 마진) = em
   부모 요소의 크기에 비례하도록 여백을 줄 때는 em을 사용하는 것이 좋다.

이 외 단위

글에 작성하지 않지만 사용이 가능한 단위가 있기도 하다.
하지만 자주 사용하는 단위는 아니기 때문에 궁금할 때 확인해보는 것도 좋을 거 같다.
mdn CSS 단위