박스 모델(Box model)

박스 모델은 웹 페이지의 각 요소들을 마치 박스처럼 생각하는 CSS 구조입니다.

이 박스는 '내용(content)', '패딩(padding)', '테두리(border)', 그리고 '외부 여백(margin)' 4 부분으로 구성되어 있습니다.

상자 안의 초콜릿으로 박스 모델을 비유해 보겠습니다. 🍫

• 내용(content): 상자 안의 초콜릿 (실제 내용이 위치하는 영역)

• 패딩(padding): 초콜릿과 상자 경계 사이의 여백 (내용과 테두리 사이의 여백)

• 테두리(border): 상자 자체 (박스의 테두리)

• 외부 여백(margin): 초콜릿 상자와 다른 초콜릿 상자 사이의 공간 (다른 요소와의 간격)

박스 모델의 각 구성 요소에 대해 조금 더 자세히 알아보겠습니다.

구성 요소

1. Content (내용)

Content는 텍스트, 이미지 등 웹 페이지에서 실제로 보이는 부분입니다.

HTML

<!-- "내용 부분"이라는 텍스트 Content를 포함한 박스 -->
<div class="box">내용 부분</div>

CSS

.box {
  width: 200px; /* 박스의 너비를 200px로 지정 */
  height: 100px; /* 박스의 높이를 100px로 지정 */
}

2. Padding (안쪽 여백)

padding은 내용(Content)와 테두리(Border) 사이의 여백을 뜻합니다.

CSS

.box {
  padding: 20px; /* 모든 쪽(위, 오른쪽, 아래, 왼쪽)에 20px의 패딩을 줍니다. */
}

3. Border (테두리)

테두리는 박스의 경계선을 뜻합니다. CSS로 경계선의 두께, 스타일, 색상을 지정할 수 있습니다.

CSS

.box {
  border: 5px solid black; /* 두께가 5px이며, 실선 스타일, 검은색의 테두리 */
}

4. Margin (외부 여백)

margin은 테두리 바깥쪽의 여백으로, 다른 요소와의 간격을 만듭니다.

CSS

.box {
  margin: 15px; /* 박스 주위에 15px의 외부 여백 추가 */
}

CSS 박스 모델 예시

HTML

<div class="box">안녕하세요!</div>

CSS

.box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid blue;
  margin: 15px;
  background-color: yellow;
}

위 CSS 코드에 따라 .box 클래스를 가진 div 요소는 다음과 같은 특징을 갖습니다.

• "안녕하세요!" 라는 내용(Content)

• 내용과 테두리(Border) 사이에 20px의 안쪽 여백(Padding)

• 테두리는 5px 두께의 파란색 테두리

• 테두리 바깥에는 15px의 외부 여백(Margin)

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

강의 등록하기로그인하기