CSS 입문 기초

CSS 여백 및 패딩

CSS 여백 및 패딩 — 초급

여백 및 패딩

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

CSS에서 여백(margin)과 패딩(padding)은 웹 페이지의 레이아웃과 디자인에서 매우 중요한 역할을 합니다. 이 두 가지 속성은 요소 간의 간격을 조정하고, 콘텐츠가 어떻게 보이는지를 결정합니다. 여백은 요소의 외부 공간을, 패딩은 요소의 내부 공간을 조정합니다.

이 두 속성을 제대로 활용하지 않으면, 웹 페이지가 엉성하게 보이거나 요소들이 서로 붙어 있어 사용자 경험이 떨어질 수 있습니다. 예를 들어, 쇼핑몰 웹사이트에서 제품 정보와 구매 버튼이 너무 가까이 붙어 있다면, 사용자는 혼란스러워 하고 클릭하기 어려울 수 있습니다.

2. 핵심 개념 설명

여백 (Margin): 요소의 외부 공간으로, 다른 요소와의 간격을 조정합니다.

- 비유: 여백은 마치 사람들 사이의 거리와 같습니다. 두 사람 사이의 거리가 가까우면 불편하고, 적절한 거리가 유지되면 편안합니다.

패딩 (Padding): 요소의 내부 공간으로, 콘텐츠와 요소의 경계 사이의 간격을 조정합니다.

- 비유: 패딩은 마치 책의 표지와 페이지 사이의 공간과 같습니다. 페이지가 표지에 너무 가까우면 읽기 불편하죠.

용어	설명
Margin	요소의 외부 여백
Padding	요소의 내부 여백

3. 기본 코드 예제

여백과 패딩의 기본 사용법을 보여주는 간단한 CSS 코드입니다.

.box {
    margin: 20px; / 요소의 외부 여백을 20px 설정 /
    padding: 15px; / 요소의 내부 여백을 15px 설정 /
    background-color: lightblue; / 배경색 설정 /
}

실행 결과: .box 클래스가 적용된 요소는 외부에 20px의 여백과 내부에 15px의 패딩을 갖습니다.

margin: 20px;

- 요소의 외부에 20px의 여백을 추가하여, 다른 요소와의 간격을 넓힙니다.

padding: 15px;

- 요소의 내부에 15px의 여백을 추가하여, 콘텐츠가 요소의 경계와 너무 가까워지지 않도록 합니다.

background-color: lightblue;

- 요소의 배경색을 연한 파란색으로 설정하여, 여백과 패딩의 효과를 쉽게 확인할 수 있게 합니다.

4. 실전 활용 예제

쇼핑몰의 제품 카드: 제품 이미지와 설명, 가격이 담긴 카드형 레이아웃을 만들 때 여백과 패딩을 사용하여 각 제품 사이의 간격을 조정하고, 내용이 서로 붙지 않도록 합니다.

.product-card {
    margin: 30px; / 카드 간의 여백 /
    padding: 20px; / 카드 내부 여백 /
    border: 1px solid #ccc; / 테두리 설정 /
    background-color: white; / 배경색 설정 /
}

네비게이션 바: 메뉴 항목들 사이의 간격을 조정하기 위해 여백을 사용하고, 메뉴 항목의 텍스트와 배경 사이에 패딩을 사용하여 가독성을 높입니다.

.nav-item {
    margin: 10px; / 메뉴 항목 간 여백 /
    padding: 8px 15px; / 메뉴 항목 내부 여백 /
    background-color: #333; / 배경색 설정 /
    color: white; / 글자색 설정 /
}

5. 흔한 실수와 주의사항

여백과 패딩 혼동: 초보자는 여백과 패딩을 혼동하여 사용할 수 있습니다.

- 잘못된 코드:

   .element {
       padding: 20px; / 내부 여백을 20px로 설정 /
       margin: 20px; / 외부 여백을 20px로 설정 /
   }

- 올바른 코드:

   .element {
       margin: 20px; / 외부 여백을 20px로 설정 /
       padding: 20px; / 내부 여백을 20px로 설정 /
   }

여백이 겹치는 문제: 두 요소가 겹쳐서 여백이 합쳐지는 "여백 붕괴" 현상에 주의해야 합니다. 요소 간의 여백이 겹치지 않도록 설정하는 것이 중요합니다.

6. 정리

여백(margin)과 패딩(padding)은 웹 요소의 위치와 가독성을 결정짓는 중요한 요소입니다.
여백은 외부 공간, 패딩은 내부 공간을 조정합니다.
실무에서 다양한 레이아웃을 구성하는 데 필수적인 속성입니다.

다음에 학습할 주제로는 박스 모델(Box Model)을 추천합니다. 박스 모델을 이해하면 여백과 패딩을 더 효과적으로 사용할 수 있습니다.