[CSS] CSS의 박스모델에 대해 설명하세요

💡 웹 브라우저에서 모든 HTML 요소들은 박스의 형태로 간주하고 화면에 배치하게 됩니다. 그 중에서도 CSS의 박스 모델에서는 HTML 요소를 감싸는 하나의 박스의 특징을 설정하게 됩니다. 이 박스는 실제 내용이 위치하는 content, 안쪽 여백에 해당하는 padding, 테두리인 border, 바깥 여백인 margin에 해당됩니다.

css의 박스 모델

• 웹페이지에 배치하는 모든 HTML 엘리먼트를 직사각형 박스로 모이는 영역입니다.
• content, padding, border, margin 영역으로 나눌 수 있습니다
  • contents : 요소의 텍스트나 이미지 등 실제 내용이 위치하는 영역
  • padding : 안쪽 여백
  • border : 테두리
  • margin : 바깥 여백

박스의 크기

박스의 크기를 결정하기 위해서는 2가지의 기준을 바탕으로 선택하게 된다.

• box-sizing : content 영역 기준으로 할지(content-box), 테두리 기준(border-box)
• content-box는 테두리와 안쪽 여백은 이에 더해집니다.
  • width를 contents size로
  • 콘텐츠 영역을 기준으로
• border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
  • border까지를 포함한 실제 width의 넓이
  • 테두리를 기준으로

• 경험 :
  • HTML의 구조를 파악하기 위해 border을 사용해서 봤음
  • css를 만지기 전 *{padding:0 margin:0 box-sizing: border box} 로 초기화합니다.