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