CSS에서 퍼센트를 픽셀로 변환하는 방법: 단계별 가이드

웹페이지 스타일을 지정하는 데 10분 이상 시간을 써본 적이 있다면, 아마도 CSS의 전형적인 장벽을 마주했을 것입니다. 바로 50% 너비의 div가 실제로 몇 픽셀인지 정확히 알아내려는 순간이죠.

때로는 CSS가 계량이 그저 “밀가루 적당히”, “물 약간”으로만 적혀 있는 요리 레시피를 따르는 것처럼 느껴지기도 합니다. 여러분은 정확한 숫자를 원하지만, CSS는 상대적인 비율만 제공하니까요.

다행인 점은 백분율(퍼센트)을 픽셀로 변환하는 것이 마법처럼 어려운 일은 아니라는 것입니다. 알고 보면 그저 기초적인 산수일 뿐이며, CSS 백분율의 황금률 한 가지만 이해하고 나면 다시는 레이아웃 크기를 짐작할 필요가 없어집니다.

단계별로 하나씩 자세히 살펴보겠습니다.

계산을 시작하기 전에, 먼저 CSS가 어떻게 사고하는지 알아야 합니다.

벽에 커다란 빈 액자가 걸려 있다고 상상해 보세요. 그 액자의 너비는 1000픽셀입니다. 사진에게 그 공간의 50%를 차지하라고 지시하면, 액자의 절반(500픽셀)을 차지하게 됩니다.

CSS에서 그 액자에 해당하는 것을 부모 컨테이너(parent container)라고 부릅니다. CSS의 백분율 값은 독립적으로 존재하지 않습니다. 항상, 예외 없이 자신의 직계 부모 기준의 백분율입니다.

부모 컨테이너의 크기를 모르면 자식 요소의 픽셀 값을 계산할 수 없습니다. 아주 간단하죠!

부모 컨테이너의 픽셀 너비(또는 높이)를 알면 계산은 매우 명확해집니다. 공식은 다음과 같습니다.

(부모의 픽셀 크기 × 백분율) ÷ 100 = 목표 픽셀

예를 들어 부모 <div>의 너비가 800px이고, 자식 <div>의 너비를 75%로 지정하고 싶다고 해봅시다.

자식 컨테이너는 정확히 600픽셀 너비로 렌더링됩니다.

실제 상황을 예로 들어보겠습니다. 여러분은 래퍼(wrapper) 안에 메인 콘텐츠 영역과 사이드바가 나란히 배치된 전형적인 블로그 레이아웃을 만들고 있습니다.

HTML 코드는 다음과 같습니다:

<div class="wrapper">
  <div class="main-content">This is the article.</div>
  <div class="sidebar">This is the sidebar.</div>
</div>

CSS 코드는 다음과 같습니다:

.wrapper {
  width: 1200px; 
}

.main-content {
  width: 70%;
}

.sidebar {
  width: 30%;
}

1단계: 부모 요소 확인하기

.main-content와 .sidebar의 부모 요소는 모두 .wrapper입니다.

2단계: 부모의 픽셀 값 찾기

CSS를 보면 .wrapper는 1200px로 고정되어 있습니다.

3단계: 계산하기

브라우저의 개발자 도구에서 이 요소들을 검사해 보면 정확히 840px과 360px로 계산된 것을 확인할 수 있습니다.

이상적인 환경이라면 이 계산 방식이면 충분합니다. 하지만 CSS에는 계산을 뒤흔드는 까다로운 개념이 있습니다. 바로 박스 모델(box model)입니다.

기본적으로 박스 너비를 50%로 설정한 뒤 패딩을 20px 추가하면, CSS는 그 50%에 20px를 더합니다. 결과적으로 박스가 계산했던 것보다 넓어져서 레이아웃 전체가 다음 줄로 깨져 내려가게 됩니다.

해결책: 항상 box-sizing: border-box;를 사용하세요.

* {
  box-sizing: border-box;
}

border-box는 브라우저에게 “내가 50%라고 할 때는 패딩과 테두리를 포함한 전체 크기가 50%라는 뜻이야. 알아서 계산해 줘”라고 말하는 것과 같습니다. 이를 통해 픽셀 변환을 정확하게 유지하고 레이아웃이 깨지는 것을 방지할 수 있습니다.

참고: 마진(Margin)은 여전히 박스 외부에 적용되므로 별도로 고려해야 합니다!

CSS를 작성할 때마다 계산기를 꺼내고 싶지 않으신가요? 표준 부모 컨테이너 너비를 기준으로 자주 사용되는 백분율 치트 시트를 준비했습니다.

백분율을 픽셀로 변환하는 것은 결국 부모 컨테이너가 무엇인지 찾아내는 과정일 뿐입니다. “액자”의 크기를 알고 나면 그 안의 내용물 크기를 맞추는 것은 식은 죽 먹기가 됩니다.

그리고 정확히 반대로 고정된 픽셀 값에서 백분율을 계산해야 하는 경우에는, 암산할 필요 없이 간단한 픽셀에서 백분율로 변환기 를 활용하면 됩니다.

Leave feedback about this Cancel Reply