[CSS 수업] 5강 - 박스 모델 이해하기
안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 웹 디자인의 핵심 개념 중 하나인 박스 모델(Box Model)에 대해 배워봅니다.
웹 페이지를 구성하는 모든 요소는 보이지 않는 사각형 박스로 렌더링되며, 이 박스를 이해하면 CSS의 핵심을 꿰뚫을 수 있습니다.
728x90
박스 모델이란?
박스 모델(Box Model)은 HTML 요소를 구성하는 구조로 다음과 같은 4가지 요소로 이루어져 있습니다:
- 콘텐츠(Content): 텍스트나 이미지 등 실제 내용을 담는 부분
- 패딩(Padding): 콘텐츠와 테두리 사이의 내부 여백
- 테두리(Border): 박스를 감싸는 선
- 마진(Margin): 박스와 주변 요소 사이의 외부 여백
시각적 구조
콘텐츠 영역 (200x100)
위 박스는 아래 코드로 구성되어 있습니다:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}이 구성은 다음과 같은 역할을 합니다:
- width/height: 콘텐츠 크기를 지정
- padding: 내부 여백 20px
- border: 2px 두께의 실선 테두리
- margin: 외부 요소와의 간격 10px
박스 모델 정리
- 콘텐츠: 실질적인 내용 (텍스트/이미지)
- 패딩: 내부 여백, 콘텐츠와 테두리 사이
- 테두리: 요소를 둘러싸는 선
- 마진: 외부 여백, 다른 요소와의 거리
이 네 가지를 조합하여 박스의 크기, 위치, 간격을 조절할 수 있습니다.