CSS 박스모델

모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Content, Padding, Border, Margin으로 구성되어 있으며 브라우저는 박스 모델 크기(dimension)와 프로퍼티(색, 배경, 모양 등) 위치를 근거로 렌더링한다. 모든 박스모델 관련 프로퍼티는 상속되지 않는다.

Box 모델을 구성하는 Content, Padding, Border, Margin

명칭	설명
Content	요소의 텍스트나 이미지 등 실제 내용이 위치하는 영역.
Padding	Border 안쪽에 위치하는 요소의 내부 여백 영역.
Border	테두리 영역으로 border의 프로퍼티 값은 테두리 두께를 의미한다.
Margin	Border 바깥에 위치하는 요소의 외부 여백 영역. 배경색을 지정할 수 없다.

width / height 프로퍼티

• 요소의 너비와 높이를 지정하기 위해 사용된다. 이때 지정되는 요소의 너비와 요소는 Contents 영역을 대상으로 한다.
• 지정한 영역보다 실제 내용물이 더 크다면 넘치게 된다.
• overflow: hidden;을 지정하면 넘친 콘텐츠를 감출 수 있다.
• width와 height 프로퍼티의 초기값은 auto이다. 상황에 따라 브라우저가 적당한 width와 height 값을 계산한다.
• 명시적으로 높이나 너비값을 지정하기 위해서는 px, % 등의 크기단위를 사용한다.

margin / padding 프로퍼티

• top, right, left, bottom 4개의 방향에 대해서 지정할 수 있다.
• margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치시킬 수 있다.
• 브라우저의 너비보다 요소가 더 크면 스크롤바가 생성되기 때문에 max-width 프로퍼티를 사용할 수 있다. 이 프로퍼티를 사용하게 되면브라우저 너비가 요소의 너비보다 좁아질 때 자동으로 요소의 너비가 줄어든다. (min-width: 요소 너비의 최소값 지정)

border 프로퍼티

border-style

테두리선 스타일을 지정한다. 프로퍼티 값의 갯수에 따라 top, right, left, bottom에 지정 가능하다.

dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden

border-width

테두리의 두께를 지정한다. 프로퍼티 값의 갯수에 따라 top, right, left, bottom에 지정 가능하다. border-style과 함께 사용하지 않으면 적용되지 않는다.

border-color

테두리의 색상을 지정한다. 프로퍼티 값의 갯수에 따라 top, right, left, bottom에 지정 가능하다. border-style과 함께 사용하지 않으면 적용되지 않는다.

border-radius

테두리 모서리를 둥글게 표현하도록 지정한다. 값의 길이를 나타내는 단위(px, em 등)와 %를 사용한다. 각각의 모서리에 개별로 지정할 수도 있고, 한번에 지정할 수도 있다. 타원형도 가능하다.

각각의 모서리에 타원형 둥근 모서리 축약 설정

.border-rounded {
  border-radius: 50px 50px 0 0 / 25px 25px 0 0;
}

border

border-width, border-style, border-color를 한번에 설정하기 위한 shorthand 프로퍼티이다.

box-sizing 프로퍼티

width, height 프로퍼티의 대상 영역을 변경할 수 있다. 기본값은 content-box이다. box-sizing 프로퍼티는 상속되지 않는다.

키워드	설명
content-box	width, height 프로퍼티 값은 content 영역을 의미한다. (기본값)
border-box	width, height 프로퍼티 값은 content 영역, padding, border가 포함된 값을 의미한다.

box-sizing 프로퍼티는 상속되지 않으므로 box-sizing 프로퍼티를 사용하도록 하려면 아래와 같이 정의하여야 한다.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

---

REFERENCE
https://poiemaweb.com/css3-box-model