1.3.1 px, rem, em

반응형 웹 디자인을 구현하기 위해 가장 중요한 것은 적절한 단위를 사용하는 것입니다. CSS에서 주로 사용되는 단위들 중 px, rem, em은 각기 다른 특징을 지니고 있으며, 이들을 잘 활용하면 다양한 화면 크기에 맞춘 웹사이트를 만들 수 있습니다.

1. px (픽셀)

px는 고정 픽셀 단위로, 화면의 크기와 관계없이 항상 동일한 크기를 유지합니다. 예를 들어, 글자의 크기를 16px로 설정하면 어떤 디바이스에서든 그 글자는 16픽셀 크기로 표시됩니다. 이러한 특성 때문에 px 단위는 반응형 웹에서는 잘 사용되지 않습니다.

2. rem (루트 em)

rem은 루트 요소(html)의 글꼴 크기를 기준으로 하는 상대 단위입니다. 예를 들어, 루트 요소의 글꼴 크기가 16px이라면, 1rem은 16px입니다. rem 단위를 사용하면 부모 요소의 스타일에 영향을 받지 않으며, 전체 레이아웃을 쉽게 조정할 수 있습니다. 이로 인해 반응형 웹 디자인에서 널리 사용됩니다.

3. em

em 단위는 현재 요소의 글꼴 크기를 기준으로 하는 상대 단위입니다. 부모 요소의 글꼴 크기와 관계가 있기 때문에 이 단위는 복잡한 상황에서 규모 조정이 어려울 수 있습니다. 예를 들어, 부모 요소가 20px이고 자식 요소의 크기를 2em으로 설정하면 자식 요소는 40px가 됩니다. 따라서, em 단위는 신중히 사용해야 합니다.

실습

다음 예제를 통해 px, rem, em을 활용한 스타일링을 실습해봅시다. 아래와 같은 HTML 구조가 주어졌다고 가정할 때:

<div class="container">
    <h1>Responsive Web Design</h1>
    <p>Learn how to use units effectively.</p>
</div>

여기에 CSS를 추가하여 각 단위의 효과를 확인하도록 하겠습니다.

.container {
    font-size: 16px; /* 기본 font size */
}

h1 {
    font-size: 2rem; /* 32px (16px * 2) */
}

p {
    font-size: 1.2em; /* 19.2px (16px * 1.2) */
}

.another-text {
    font-size: 18px; /* 18px fixed */
}

위 예제에서 rem과 em을 사용하여 글자의 크기를 다르게 설정하였습니다. 각 단위를 시각적으로 비교하면서 어떤 상황에 어떤 단위를 사용하는 것이 적합한지 파악해 보세요.