[CSS] 11)박스 모델 변경 (#content-box #border-box)

Codecademy front-end engineer course

DAY11

• Learn CSS: The Box model [Lesson2) Changing The box model]

---

**

h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}

-padding의 영향으로 높이는 220px, 너비는 320px이 된다.

또한 border의 영향으로는 최종적으로 212px x 312px이 된다.

-> the border thickness and padding are added to the overall dimensions of the box.

그렇게 되면 정확한 박스 사이즈를 예측하기 어려워짐.

 

 

[해결법]

1. The box-sizing property controls the box model used by the browser. 
2. The default value of the box-sizing property is content-box. 
3. The value for the new box model is border-box.
4. The border-box model is not affected by border thickness or padding.

 

- Box Model: Content-Box [컨텐츠 박스]

 

- 컨텐츠 박스라는 default style sheet가 있음. 그것을 활용하면 문제 해결 가능.

 

 

 

-Box Model: Border-Box [테두리 박스]

:The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.

* {
  box-sizing: border-box;
}
 
h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}

아래 그림처럼 박스 모델 안에서 패딩과 border만 변경해도 나머진 일정하게 함.

 

 

 

 

-개발자 툴을 통해서 박스 모델 확인하기