[CSS][길이 단위] %, vw, vh

웹 레이아웃을 유연하게 만들려면 고정값보다는 상대 단위를 적극적으로 활용해야합니다.

이번 포스팅에서는 이전에 알아보았던 em, rem와 다른 상대 단위인 %, vw, vh에 대해서 간략하게 알아보겠습니다.

✅ %

🔥 정의

상대단위중 하나인 %는 부모 요소의 너비와 높이를 100%로 삼아 상대적인 크기를 계산합니다.

가로치수는 width를 참조하고, 세로치수는 height를 참조합니다.

• margin-, padding- 는 width를 기준으로 참조합니다

🔥 기본 사용법

/* 부모 폭의 80 % */
.wrapper {
  width: 80%;
}
/* 부모 높이의 5 % */ 
.item {
  margin-top: 5%;
}

• 레이아웃이 부모 크기에 맞춰 자연스럽게 비레하여 늘어납니다.

🔥 사용 권장 상황

• 카드 그리드처럼 부모 컨테이너 폭에 비례해야 하는 요소
• 내부 여백과 간격을 부모 대비 n%로 맞춰야 할 때

🔥 주의 사항

• 부모 크기가 0이면 해당 요소도 값이 0이 됩니다.
• 중첩 구조가 깊어질수록 실제 픽셀 값을 추적하기 어려워집니다.

✅ vw (Viewport Width)

🔥 정의

vw는 뷰포트 너비를 의미하며 vw단위는 뷰포트 너비(width)의 1%에 해당합니다.

만약 사용자 화면 너비가 1200px라면 1vw는 12px이 됩니다.

⇒ 100vw은 1200px

🔥 기본 사용법

/* 화면 너비의 6 % */
h1 {
  font-size: 6vw;
}
/* 왼쪽 패딩 */
.side {
  padding-left: 4vw;
}

🔥 사용 권장 상황

• 유동적인 타이포그래피 : font-size를 vw로 정의한다면 화면이 넓어질수록 글꼴도 비례해서 확대가 됩니다.
• 좌우 여백이 화면 폭과 함께 변해야 할 경우에 유용합니다.

🔥 주의 사항

• 극도로 작은 화면이라면 글자가 지나치게 작아지는 경우가 있을 수 있습니다.

✅ vh (Viewport Height)

🔥 정의

vh는 vw와 비슷한 개념으로서 viewport의 height에 비례하는 크기입니다. (뷰포트 높이)

vh단위는 뷰포트 높이(height)의 1%에 해당합니다.

만약 사용자 화면의 높이가 1000px라면 1vh는 10px이 됩니다.

⇒ 100vh는 1000px

🔥 기본 사용법

/* 화면을 꽉 채우는 배너 */
.hero {
  height: 100vh;
}
/* 세로 간격 */
.spacer {
  margin-top: 10vh;
}

🔥 사용 권장 상황

• 풀스크린
• 배너/섹션

🔥 주의 사항

• 모바일 브라우저에서 스크롤시 주소창과 툴바가 생기고 사라지는 경우 실제 높이가 달라져 레이아웃이 튀는 형상이 있을 수 있습니다.
• 최신 브라우저에서는 dvh를 지원하므로 height: 100dvh로 교체하여 문제를 줄일 수 있습니다.