CSS에서 박스라 함은 <div>, <p>, <h1>~<h6>등 문단을 이루는 요소를 말합니다. 문단을 구성하는 요소들은 크기와 여백을 지정할 수 있는데 이와 관련된 CSS 속성들을 박스모델이라고 합니다.

#01. CSS 관점에서의 HTML태그 분류

분류	설명	예시
Block Level 요소	문단을 구성하는 형태. 같은 태그를 연속해서 사용할 경우 문단을 구성하므로 줄바꿈되어 표시된다.	`<p>`, `<div>`, `<h1>~<h6>`, `<ol>`, `<ul>`, `<li>` 등
Inline Level 요소	문장을 구성하는 형태. 같은 태그를 연속해서 사용할 경우 문장을 구성하기 때문에 줄 바꿈 없이 표시된다.	`<span>`, `<font>`, `<strong>`, `<b>`, `<u>`, `<i>`, `<address>` 등
대체요소	이미지, 입력요소 등 텍스트가 아닌 다른 형태로 표시되는 요소로서 Inline Level에 속한다.	`<img>`,`<input>`,`<select>`,`<textarea>` 등

박스라 함은 block-level요소를 의미하는 것으로 가장 대표적인 요소에는 <div>가 있다.

CSS의 박스모델은 박스의 크기를 구성하는데 영향을 주는 속성들을 말한다.

#02. 박스의 크기를 구성하는 기본 속성

속성	설명	값
width	내용 영역의 가로 폭	px단위, %단위
height	내용 영역의 세로 높이	px단위, %단위
border	박스의 테두리	굵기 종류 색상
padding	테두리와 내용영역 사이의 여백	여백 사이즈에 대한 px단위

1) 가로, 세로 크기

박스의 넓이 width는 특별히 명시하지 않을 경우 자신이 속한 부모를 가득 채운다.

박스의 높이 height는 특별히 명시하지 않을 경우 자신이 포함하고 있는 내용만큼만 형성된다. 내용이 없다면 높이도 0이다.

2) border 속성

border: 굵기 종류 색상;

종류

none : 투명
solid : 직선
dotted : 점선
dashed : 끊긴선

border값의 세분화

구분	종류	값
위치에 따라	`border-top`, `border-left`, `border-bottom`, `border-right`	`굵기 종류 색상`을 공백으로 구분
속성에 따라	`border-width`, `border-color`, `border-style`	`굵기 종류 색상`중 하나

3) padding

기술하는 값에 따른 구분

구분	설명	예시
하나의 값	상,하/좌,우 모두 같은 값이 부여된다.	`padding: 10px;`
두 개의 값	첫 번째 값은 상,하를 의미. 두 번째 값은 좌,우를 의미한다.	`padding: 10px 20px;`
네 개의 값	상단부터 시계방향으로 회전하면서 부여	`padding: 10px 20px 30px 40px;`

위치에 따른 속성 구분

아래의 속성들은 단 하나의 값만을 갖는다.

속성	설명
padding-left	왼쪽 여백
padding-right	오른쪽 여백
padding-top	상단 여백
padding-bottom	하단 여백

#03. 박스의 크기 구성

1) 박스의 크기는 관련 속성들의 총합으로 이루어 진다.

테두리와 여백은 내용영역(width,height)의 크기 바깥으로 형성된다.

구분	구성
가로넓이	border-left + padding-left + width + padding-right + border-right
세로높이	border-top + padding-top + height + padding-bottom + border-bottom

2) 중첩 관계에서의 박스 크기

자식요소의 크기 총 합은 부모 요소의 width, height를 벗어날 수 없다.
자식요소의 width, height를 %로 부여할 경우 부모의 width, height를 기준으로 한다.

그러므로 width나 height를 100%로 부여한 상태에서 border와 padding을 적용하면 부모 영역을 벗어나게 된다.

3) box-sizing 속성

값	설명
`content-box`	border와 padding이 width/height 영역 밖에 설정된다.
`border-box`	border와 padding이 width/height 영역 안에 설정된다. (권장)

웹 페이지 제작시 아래와 같이 모든 태그에 대해 설정하면 박스의 크기 계산에 편리하다.

* {
    box-sizing: border-box;
}

4) auto값의 사용

width 속성에 사용하는 경우.

부모 요소의 width에서 현재 자신의 padding, border 크기를 뺀 나머지를 자동으로 계산하여 갖는다. (실질적인 100% 처리 효과.)

height 속성에 사용하는 경우

자신이 포함하고 있는 내용만큼 높이를 구성한다.(박스의 기본특성)

5) 화면을 가득 채우는 박스 만들기

width, height는 부모요소를 기준으로 크기를 갖기 때문에 “박스 > body > html” 순으로 부모에게도 100% 크기를 부여해야 한다.

<body>태그가 갖는 기본 여백을 제거한다.
```
 body { padding: 0; margin: 0; }
```
박스에게 width, height를 100%로 부여하기 위해서는 박스의 부모요소의 크기를 부여해야 기준으로 삼을 수 있다.
박스의 부모 요소는 <body>태그 이고 <body>의 부모 요소는 <html>이므로 이 두 요소에게 모두 크기를 부여한다.
```
 html, body { width: 100%; height: 100%; }
```

6) 박스의 가변 크기 지정

속성	설명
min-width	최소 넓이 지정. 내용이 없더라도 이 속성이 지정한 만큼 넓이가 보장된다.
max-width	최대 넓이 지정. 이 속성의 값 이상 커지지 않는다.
min-height	최소 높이 지정.
max-height	최대 높이 지정

7) 자신을 벗어나는 내용에 대한 처리 방법

overflow 속성

속성	설명
visible	기본값. 벗어나는 내용이 부모 요소를 벗어나도록 그대로 둔다.
scroll	벗어나는 내용에 대하여 스크롤 처리한다. 이 속성이 부여되면 부모 요소는 항상 스크롤바의 트랙을 표시한다.
hidden	벗어나는 내용에 대하여 화면에 표시되지 않도록 잘라낸다.
auto	내용이 벗어나지 않을 경우에는 박스의 기본 모양대로 표시되지만, 내용이 벗어날 경우에는 scroll처리 된다.

overflow속성은 x축, y축을 모두 처리한다.
가로 혹은 세로 방향만 처리하고자 하는 경우 overflow-x, overflow-y 속성을 사용할 수 있다.

호쌤코딩클럽

[CSS] 박스모델