박스 모델이란?
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 33번째.
CSS에서 모든 HTML 요소는 박스 모델(Box Model)을 따르는 사각형 박스로 취급됩니다. 이 모델은 네 가지 주요 부분으로 구성됩니다:
- 콘텐츠 – 박스 내부의 실제 텍스트, 이미지 또는 기타 콘텐츠입니다.
- 패딩(Padding) – 콘텐츠와 테두리 사이의 공간입니다. 요소의 크기를 키우지만 배경색은 그 내부에 유지됩니다.
- 테두리(Border) – 패딩과 콘텐츠를 감싸는 선입니다. 다양한 스타일, 색상, 너비를 가질 수 있습니다.
- Margin – 요소를 다른 요소와 구분하는 테두리 외부의 공간입니다.
박스 모델(Box Model)을 이해하는 것은 웹 디자인에서 간격과 레이아웃을 제어하는 데 도움이 됩니다! 🚀
치트 시트
CSS 박스 모델(CSS Box Model)은 모든 HTML 요소를 네 개의 부분으로 구성된 직사각형 상자로 취급합니다:
- 콘텐츠(Content) – 상자 내부의 실제 텍스트, 이미지 또는 기타 콘텐츠
- 패딩(Padding) – 콘텐츠와 테두리 사이의 공간
- 테두리(Border) – 패딩과 콘텐츠를 둘러싸는 선
- 마진(Margin) – 테두리 바깥의 공간으로, 요소를 다른 요소와 구분함
직접 해보기
이 레슨에는 코드 챌린지가 없습니다.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
