✅박스 모델이란?

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(Box Model)이라고 부른다.

• content : 콘텐츠가 표시되는 영역
• padding : 콘텐츠롸 테두리 (border) 사이의 여백
• border : padding과 margin 사이의 테두리
• margin : 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 해당 박스와 다른 요소사이 공백역할을 한다.

1. width, heigth - 크기, 높이

• width : 요소의 너비
  • box-sizing이 border-box라면 테두리의 영역의 너비를 설정한다.
  • 초기값은 auto이다.
  
  
• height : 요소의 높이
  • box-sizing이 border-box라면 테두리의 영역의 높이를 설정한다.
  • 초기값은 auto이다.

width와 height는 display가 inline일 때 width, height 값을 주지 못한다.

2. 최소 / 최대 넓이, 높이

뷰포트에 따라서 더이상 늘어나거나 줄어들지 않게할 때 사용한다.
넓이, 높이 최대값과 최소값을 줄 때 사용한다.
반응형 웹을 만들때 사용한다.

• max-width
  • 최대 넓이를 적용한다.


• max-height
  • 최대 높이를 적용한다.


• min-width
  • 최소 넓이를 적용한다.


• min-height
  • 최소 넓이를 적용한다.

3. 여백 - margin

margin은 박스모델에 가장 바깥쪽 공간이다.
단축속성이다. 다양한 방법으로 표현이 가능하다.

margin 기본 동작구문

margin : top right bottom left

/* 동작구문 */
margin : top right bottom left

/* top:1px  right:2px  bottom:3px  left:4px */
margin : 1px 2px 3px 4px;

/* top과 bottom 1px  left와 right 2px */
margin : 1px 2px;

/* top:1px  left,right:4px  bottom:3px  */
margin : 1px 4px 3px;

4. margin collapsing(마진 상쇄)

마진 상쇄, 마진 겹침, 마진 중복 등등 으로 불리운다.
여러 블록(block) 요소들의 위/아래 margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합(상쇄)되는 현상이다.

마진 상쇄는 아래의 3가지 경우에 일어난다.

1. 인접형제
   • 두 형제 요소의 위/아래 여백이 만나 상쇄된다.


2. 부모-자식요소 간
   • 부모 블록에 border, padding inline content가 없어서 부모와 자식의 margin- top이 만나는 경우
   • 부모 블록에 border, padding, inline content가 없고, 부모-자식을 분리할 height값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우
   • 이 경우는 끊어줄 수 있는 요소가 단, 1px라도 있으면 collapsing이 일어나지 않는다.
   
   
3. 빈 블록
   • border, padding, content가 없고, height 또한 존재하지 않으면, 해당 블록의 margin-top과 margin-bottom이 상쇄된다.

5. 여백 - padding

박스모델에서 border를 기준으로 안쪽 여백을 padding이라고 한다.
padding도 margin과 같이 단축 속성이다.

padding 기본 동작구문

padding : top right bottom left

/* top:1px  right:2px  bottom:3px  left:4px */
padding : 1px 2px 3px 4px;

/* top과 bottom 1px  left와 right 2px */
padding : 1px 2px;

/* top:1px  left,right:4px  bottom:3px  */
padding : 1px 4px 3px;

6. border (shorthand) 단축속성

border는 padding영역과 content영역을 감싸고 있는 영역이다.
border도 단축속성이다.

border 기본 동작구문

border : width, style, color

• border는 세가지를 전부 다 입력하지 않아도 된다.
  하지만, 스타일을 지정하지 않으면 기본값이 none이 사용되어 테두리가 보이지 않는다.

border : 1px solid black

border : solid black

border : 3px dotted

7. border-radius

border-radius는 테두리 경계의 꼭짓점을 둥글게 만든다.
%를 사용하면 width와 height의 퍼센트만큼 적용된다.

border-radius 기본 동작 구문

• margin과 padding처럼 4가지 꼭짓점 별도로 설정할 수 있다. 왼쪽 위를 시작으로 시계방향으로 돈다.
  border-radius : 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래

border-radius: 2px 2px 4px 4px

// 값을 하나만 입력 시에는 4가지 꼭짓점에 다 적용이 된다.
border-radius: 100%

8. box-sizing

요소의 너비와 높이를 계산하는 방법을 지정한다.

box-sizing에는 두 가지 방법이 있다.

• content-box
  • box-sizing의 기본값이다.

box-sizing이 content-box인 경우에는

.box {
	width: 350px;
    border: 10px soild black
}

으로 style을 적용했다고 하면 content-box에 width가 350px이고 border가 10px이기 때문에 실제 요소에 크기는 width : 350px과 왼쪽, 오른쪽 border 10px씩 더해서 370px이 된다.

• border-box
  • border까지 포함하여 넓이가 적용이 된다.

이 말이 무엇이냐면 border 영역까지 포함하여 width값을 준다는 말이다.

.box {
	box-sizing : border-box;
	width: 350px;
    border: 10px soild black
}

이렇게 style을 적용하면 border 영역까지 포함한 width 값이 350px이기 때문에
width (350px)과 왼쪽, 오른쪽 border 각 10px (10px + 10px = 20px) 뺀 값
350px - 20px = 330px 이 값이 content-box의 크기가 된다.