가능세계
[CSS] 반응형 CSS 단위 총정리 - px, em, rem, %, vh, vw 본문
반응형 웹 사이트를 만드는 데 있어 CSS 단위는 중요한 요소입니다.
CSS 단위는 여러 가지가 있지만, 자주 사용되는 절대적인 값인 "px"과 상대적인 값인 "em, rem, %, vh, vw"로 분류할 수 있습니다.
절대적인 단위를 사용하면 어떤 디스플레이 화면을 사용하느냐에 상관없이 고정된 값으로 표시됩니다. 반면 상대적인 단위를 미디어 쿼리와 함께 사용하면 반응형 레이아웃을 만들 수 있습니다.
여러 가지 단위를 함께 살펴봅시다.
1. px
px은 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위를 말합니다. px을 적용하면 화면 크기 또는 부모 요소가 변경되어도 콘텐츠는 고정된 값으로 유지됩니다.
px 단위는 미세하게 조절 가능하고, 고정된다는 특정 때문에 주로 border 값에 사용되곤 합니다.
2. em
em 단위는 부모 요소의 font-size를 기준으로 상대적으로 값이 계산됩니다. 부모의 font-size에 곱하는 값이라고 생각할 수 있습니다.
예를 들어 부모 컨테이너가 font-size: 48px 일 때 자식 콘텐츠의 font-size: 1em이면, 1em은 48px을 나타냅니다.
em 단위는 margin이나 padding에 사용할 수 있습니다. 요소의 font-size에 따라 box 주위에 유연한 간격을 적용할 수 있기 때문입니다.
3. rem
rem 단위에서 "r"은 root를 의미합니다. 항상 루트(html)에 지정된 font-size에 따라서 상대적으로 크기가 결정됩니다.
기본적으로 브라우저에서 html에 할당되는 font-size는 16px입니다. 따라서 1rem == 16px이 됩니다.
반응형 디자인에는 주로 rem을 사용합니다. 그 이유는 html의 font-size를 조정함으로써 rem을 사용한 요소들의 크기를 한 번에 조정할 수 있기 때문입니다.
4. %
% 단위는 부모 요소의 크기를 기준으로 값이 계산됩니다. 정의된 부모 요소가 없다면 기본적으로 루트가 기준이 됩니다.
예를 들어, 부모 요소가 font-size: 20px이고, 자식 요소가 font-size: 50% 이면 자식 요소의 font-size는 10px이 됩니다.
5. vw, vh
vw와 vh는 각각 뷰포트(viewport) 너비와 높이의 1/100입니다. 이때, 뷰포트는 웹 페이지에서 사용자가 볼 수 있는 화면의 영역이며, 뷰포트의 값은 스크롤바를 포함한 값입니다.
1vh는 뷰포트 높이의 1%와 같습니다.