CSS 박스 모델

1. 박스 모델(Box Model) 구조

CSS 박스 모델은 HTML 요소를 네 개의 영역으로 나눠 구성합니다. 각 영역은 다음과 같습니다

1. Content (내용) : 요소의 텍스트, 이미지, 콘텐츠가 표시되는 영역. width와 height로 크기를 조정.
2. Padding (안쪽 여백) : 콘텐츠와 테두리 사이의 공간.배경색이 content와 함께 적용.
3. Border (테두리) : 요소의 경계를 감싸는 테두리.
4. Margin (바깥 여백) : 요소와 다른 요소 사이의 외부 공간. 배경색이 적용되지 않음.

box-sizing

요소 크기를 계산할 때 어떤 영역을 포함할지 설정.

1. content-box (기본값): width와 height는 콘텐츠 영역만 포함. padding과 border는 크기에 추가로 더해짐.
2. border-box: width와 height에 padding과border가 포함. 요소 크기를 정확하게 제어 가능.

div {
  width: 200px;
  height: 100px;
  box-sizing: border-box;
  padding: 20px;
  border: 10px solid black;
}

1. content-box: 200px + 20px(padding) 2 + 10px(border) 2 = 260px
2. border-box: 200px (고정)

블록 요소와 인라인 요소의 차이

블록 요소 (Block Elements)

항상 새로운 줄에서 시작하고, 화면 전체의 너비를 차지. 기본적으로 너비(width)는 부모 요소의 100%를 가짐. width, height, margin, padding 모두 적용 가능.
대표 태그: div, p, h1 ~ h6, ul, li 등.

인라인 요소 (Inline Elements)

한 줄에 여러 요소가 나란히 배치됨. 콘텐츠 크기만큼 너비를 가짐. width와 height는 무시되고, margin과 padding은 수평 방향만 적용.
대표 태그: span, a, strong, em, img 등.