CSS 단위: 100px vs 100vh - 차이점과 활용 사례

웹 개발 시 CSS 단위를 이해하고 적절하게 사용하는 것은 매우 중요합니다. 특히 100px과 100vh는 서로 다른 특징을 지니며, 웹 요소의 크기를 지정할 때 각각 다른 상황에서 유용합니다. 이번 포스트에서는 100px과 100vh의 차이점과 활용 사례에 대해 알아보겠습니다.

1. 100px란 무엇인가?

100px은 고정된 크기를 나타내는 절대 단위입니다.

• 의미: 요소의 크기를 100 픽셀로 지정함을 의미합니다.
• 특징: 해상도나 화면 크기에 관계없이 고정된 크기를 유지합니다.
• 사용 사례: 버튼, 아이콘 등 고정된 크기가 필요한 요소에 적합합니다.

예제 코드:

<div style="height: 100px; width: 100px; background-color: lightblue;">
  100px 사각형
</div>

2. 100vh란 무엇인가?

100vh는 뷰포트 높이를 기준으로 계산되는 상대 단위입니다.

• 의미: 현재 뷰포트 높이의 100%를 의미하며, 화면의 세로 크기를 기준으로 합니다.
• 특징: 화면 크기에 따라 요소의 크기가 동적으로 변경됩니다.
• 사용 사례: 전체 페이지를 채우는 배경이나 반응형 레이아웃에 적합합니다.

예제 코드:

<div style="height: 100vh; width: 100%; background-color: lightgreen;">
  화면 전체 높이
</div>

3. 차이점 요약

단위	의미	특징	사용 사례
100px	고정된 픽셀 단위	해상도와 관계없이 동일한 크기 유지	버튼, 아이콘, 고정 크기 요소
100vh	뷰포트 높이 기준 단위	화면 크기에 따라 크기 동적 변경	전체 배경, 반응형 레이아웃

두 단위는 각각의 특성과 용도에 맞게 사용해야 합니다. 고정된 크기를 원할 때는 100px, 화면 크기에 따라 반응하는 레이아웃을 원할 때는 100vh를 선택하세요.

웹 개발 시 적절한 단위를 사용함으로써 사용자 경험을 최적화하고, 다양한 화면에서 일관된 디자인을 유지할 수 있습니다.