CSS 입문 기초

CSS CSS 단위 (px, em, rem 등)

CSS CSS 단위 (px, em, rem 등) — 초급

CSS 단위 (px, em, rem 등)

1. 도입 (왜 배워야 하는가)

CSS의 단위는 웹 디자인에서 매우 중요한 요소입니다. 웹 페이지의 레이아웃, 글꼴 크기, 여백 등을 조절하는 데 사용되며, 사용자가 콘텐츠를 어떻게 경험할지를 결정짓는 핵심 요소입니다.

만약 이 단위에 대한 이해가 부족하다면, 다양한 화면 크기와 해상도에서 웹 페이지가 어떻게 보일지를 고려하지 않고 디자인할 수 있습니다. 결과적으로, 모바일 기기에서 글자가 너무 작거나, 여백이 비정상적으로 출력되는 등의 문제가 발생할 수 있습니다. 이는 사용자 경험을 저하시켜, 방문자가 사이트를 떠나게 만들 수 있습니다.

2. 핵심 개념 설명

CSS에서 주로 사용되는 단위는 다음과 같습니다:

단위	설명	비유
px	픽셀 단위로, 고정된 크기를 가짐.	화면에서의 단일 점처럼, 고정된 크기의 사각형.
em	현재 요소의 글꼴 크기를 기준으로 한 상대 단위.	나무가 자라듯, 부모 요소에 따라 크기가 변하는 나무의 가지.
rem	루트 요소(html)의 글꼴 크기를 기준으로 한 상대 단위.	뿌리가 자라는 나무처럼, 항상 같은 기준에서 자라나는 가지.
%	부모 요소의 크기를 기준으로 한 상대 단위.	부모의 크기에 따라 달라지는 아이들처럼, 비율에 따라 자라는 애들.

이 단위들은 모두 서로 다른 방식으로 크기를 정의하며, 각각의 특성에 따라 사용해야 할 상황이 다릅니다.

3. 기본 코드 예제

.body {
    font-size: 16px; / 기본 글꼴 크기를 16픽셀로 설정 /
}

h1 {
    font-size: 2em; / h1은 부모 요소의 글꼴 크기의 2배 /
}

p {
    font-size: 1rem; / p는 루트 요소(html)의 글꼴 크기와 동일 /
}

.body 클래스의 font-size를 16픽셀로 설정합니다.
h1 태그는 부모 요소의 글꼴 크기의 2배인 32픽셀로 설정됩니다.
p 태그는 루트 요소(html)의 글꼴 크기와 동일한 16픽셀로 설정됩니다.

4. 실전 활용 예제

예제 1: 반응형 웹 디자인

쇼핑몰 웹사이트에서 제품 설명을 작성할 때, em 단위를 사용하여 글꼴 크기를 설정하면, 사용자가 글꼴 크기를 조정할 때 내용이 함께 조정됩니다.

.product-description {
    font-size: 1.2em; / 부모 요소의 글꼴 크기보다 20% 커짐 /
}

예제 2: 레이아웃 조정

그리드 레이아웃을 설정할 때, 여백(margin)과 패딩(padding)을 rem 단위를 사용해 설정하면, 화면 크기에 따라 유연하게 조정됩니다.

.container {
    padding: 2rem; / 기본 글꼴 크기의 2배 만큼의 패딩 /
}

5. 흔한 실수와 주의사항

실수 1: 고정 단위 사용

잘못된 코드:

.title {
    font-size: 30px; / 모든 화면에서 동일하게 보임 /
}

올바른 코드:

.title {
    font-size: 2rem; / 루트 글꼴 크기에 따라 유연하게 조정됨 /
}

실수 2: 단위 혼용

잘못된 코드:

.button {
    width: 100px; 
    padding: 1em; 
}

올바른 코드:

.button {
    width: 10rem; / 모두 같은 기준으로 설정 /
    padding: 1rem; 
}

6. 정리

CSS의 단위는 웹 디자인에서 중요한 역할을 하며, 각 단위의 특성을 이해해야 합니다.
px, em, rem, %는 모두 다른 상황에서 유용하게 사용될 수 있습니다.
반응형 디자인을 위해서는 em이나 rem 단위를 사용하는 것이 좋습니다.

다음에 학습하면 좋은 주제는 CSS Flexbox와 Grid입니다. 이 두 주제는 레이아웃을 효과적으로 제어하는 데 도움을 줍니다.