[CSS] 박스를 구성하는 요소

# border 테두리
-심미적인 용도 외에도 개발과정에서도 매우 의미있게 사용된다.
각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할수 있도록 만든다.

border: 1px solid red;

-테두리두께(border-width)/ 테두리 스타일(border-style)/ 테두리 색상(border-color)

- 둥근모서리: border radius

-border style

# margin (바깥여백)
-값이 4개면 top, right, bottom, left (시계방향)
 값이 2개면 top와 bottom, left와 right (10px 20px이면 top=bottom=10, left=right=20)
 값이 1개면 모든 방향
 위의 내용은 padding도 동일하다.
-margin은 음수값 가능하다. 
 음수값 설정하면 다른 엘리먼트와 간격이 줄어들거나 겹칠수도 있다.

# padding (안쪽여백)
-border를 기준으로 박스 내부의 여백.
-값이 4개면 top, right, bottom, left (시계방향)
 값이 2개면 top와 bottom, left와 right (10px 20px이면 top=bottom=10, left=right=20)
 값이 1개면 모든 방향
 위의 내용은 margin도 동일하다.
-배경색이나 border를 적용하면 padding을 더욱 선명하게 확인할수있다

<박스를 벗어나는 콘텐츠처리>
-박스의 height 속성에 콘텐츠가 차지하는 공간보다 작은 값을 지정해라
만약 커서 밖으로 빠져나온다면
- overflow: auto;
설정하면 콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다.
넘치는 내용을 숨기고 싶으면 overflow: hidden;

<박스크기 측정 기준>
1. 여백과 테두리 두께를 포함해서 박스 크기를 계산해서 만든다
2. * {
  box-sizing: border-box;
}
 이걸적용하면 모든박스에서 여백과 테두리를 포함한 크기로 계산된다.
content-box는 박스의 크기를 측정하는 기본값이다.
border-box를 권장한다.

border-box인 경우 box의 높이: height + padding-top + padding-bottom + border-top + border-bottom
content-box인 경우 box의 높이: height