[CSS] CSS 단위 정리

헷갈렸던 CSS 단위 개념을 이번 글에서 정리해보려고 한다.

 

📏 CSS 주요 단위 정리

1. px - 픽셀

• css를 작성할 때 가장 기본적으로 사용하는 단위이다.
• 화면의 실제 픽셀 수를 의미한다.

 

2. em - 부모의 폰트 크기를 기준으로 하는 상대 단위

• 부모 요소의 폰트 크기를 기준으로 크기 비율이 정해진다.
• 한 가지 유의할 사항은 부모>자식>후손 요소가 중첩될수록 계산이 누적되기 때문에 주의해야한다.

/* 부모 요소 */
body {
  font-size: 16px;
}

/* 자식 요소 */
h1 {
  font-size: 2em; /* 32px */
}

/* 후손 요소 */
span {
  font-size: 2em; /* 64px: 2em x 32px */
}

 

3. rem - 루트 요소(html)의 폰트 크기를 기준으로 하는 상대 단위

• html 태그의 폰트 크기를 기준으로 해서 em보다 예측이 쉽다.

/* 부모 요소 */
body {
  font-size: 16px;
}

/* 자식 요소 */
h1 {
  font-size: 2em; /* 32px */
}

/* 후손 요소 */
span {
  font-size: 2em; /* 32px */
}

 

4. % - 부모 요소의 크기에 따라 변화하는 백분율

• 부모 요소의 크기에 따라 유동적으로 크기가 결정된다.
• 너비, 높이, 폰트 등 다양한 속성에 사용할 수 있다.

.container {
  width: 1000px;
}

.child {
  width: 50%; /* 500px */
}

 

5. vw, vh - viewport를 기준으로 하는 단위

• 1vw = 뷰포트 너비의 1%
• 1vh = 뷰포트 높이의 1%

모바일 웹을 구현할때 100vh를 사용하면

모바일 브라우저의 주소창이나 하단 UI로 인해 가려지는 경우가 생긴다.

이럴 때 사용하면 좋은 단위가 바로 lvh, svh, dvh이다.

단위	의미
lvh	주소 창이 사라졌을 때 높이를 계산한 값 → 사용자 화면의 최대 크기
svh	주소창이 보이고 있을 때의 높이를 계산한 값 → 사용자 화면의 최소 크기
dvh	동적으로 변하는 뷰포트 높이를 기준으로 계산한 값 → 원하는 화면을 구현하기에 가장 이상적임

 

6. vmin, vmax - viewport의 짧은 쪽 / 긴 쪽을 기준으로 하는 단위

• 1vmin = 뷰포트 너비/높이 중 작은 쪽의 1%
• 1vmax = 뷰포트 너비/높이 중 큰 쪽의 1%

vmin, vmax는 정리하면서도 이걸 언제 사용하는 걸까 궁금했는데,

찾아보니 가로/세로 회전이 일어나는 화면 비율이 자주 바뀌는 환경에서 사용한다고 한다.

 

📚 참고 자료

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units

https://web.dev/blog/viewport-units?hl=ko