[CSS] 박스모델이란?

한효찬·2024년 8월 30일

html요소가 표출되는 브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다.
따라서 그 안의 웹 요소들 또한 필수적으로 개별적인 너비와 높이를 가진다.

가장 기본적인 요소라고 할 수 있는 너비와 높이를 '박스'라고 표현하며 이 박스 요소를 모두 포함해서 '박스 모델'이라고 한다.

박스 모델에는 다양한 속성들이 있다.

  • 콘텐츠 영역 : 요소 내 포함된 콘텐츠 표시. width, height
  • 안 쪽 여백 : 테두리 안에서 콘텐츠 주변을 감싸는 여백. padding
  • 경계선(테두리) : 콘텐츠와 안 쪽 여백을 둘러싸는 테두리. border
  • 바깥쪽 여백 : 테두리 바깥에서 요소를 감싸는 여백. margin

profile
hyohyo

0개의 댓글