CSS: Box Model -2

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

CHANGING THE BOX MODEL

Why change the Box Model?

box model에는 box dimenstion과 관련한 제한이 있다.

이러한 제한은 예제로 가장 잘 설명된다.

<h1>Hello World</h1>

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

위의 예에서 heading 요소의 box에는 solid, black, 1 pixel thick border이 있다.

box의 높이는 200픽셀이고 상자의 너비는 300픽셀이다.

box content의 네 면 모두에 10픽셀의 padding이 설정되었다.

 

현재 box model에서는 border 두께와 padding이 상자 크기에 영향을 미칩니다.

10픽셀의 패딩은 상자의 높이를 220픽셀로, 너비를 320픽셀로 높인다.

다음으로, 1픽셀 두께의 테두리는 높이가 222픽셀, 너비가 322픽셀로 증가한다.

 

이 box model에서 border 두께와 padding이 box의 전체 크기에 추가된다.

이렇게 하면 box의 크기를 정확하게 조정하기가 어렵다.

시간이 지남에 따라 웹 페이지의 모든 콘텐츠를 배치하고 관리하는 것도 어려워질 수 있다.

이 과정에서는 이 문제를 완전히 피하는 다른 기술을 사용하는 방법에 대해 알아보도록 하자.

---

Box Model: Content-Box

CSS의 많은 속성은 기본값을 가지고 있으므로 스타일시트에 명시적으로 설정할 필요가 없다.

 

예를 들어, 텍스트의 기본 font-weight는 normal이지만, 이 property-value 쌍은 일반적으로 stylesheet에 지정되지 않는다.

 

브라우저가 가정하는 box model에 대해서도 마찬가지이다.

CSS에서 box-sizing property은 웹 페이지를 해석할 때 브라우저가 사용해야 하는 box model의 유형을 제어한다.

 

이 property의 default value는 content-box이다.

border 두께와 padding의 영향을 받는 것과 동일한 box model이다.

Actual rendered width /출처: https://content.codecademy.com/courses/updated_images/htmlcssdiagram_contentbox_Updated_1.svg

---

Box Model: Border-Box

전체 box model을 재설정하고 새 box model인 border-box를 지정할 수 있다.

* {
  box-sizing: border-box;
}

예제의 코드는 box model을 모든 HTML 요소에 대한 border-box로 재설정한다.

이 새 box model은 기존의 box model에 존재하는 dimenstion 문제를 방지한다.

 

이 box model에서는 box의 높이와 너비가 고정된 상태로 유지된다.

border 두께와 padding이 box 내부에 포함되므로 box의 전체 dimemsion은 변하지 않는다.

<h1>Hello World</h1>

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

예시에서 box의 높이는 200픽셀이고 너비는 300픽셀이다.

border 두께와 padding은 box 안에 완전히 남아게 된다.

Width property / 출처: https://content.codecademy.com/courses/web-101/htmlcss1-diagram__borderbox.svg

 

---

참고

• https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-improved-styling-with-css/modules/fecp-learn-css-the-box-model/cheatsheet

Improved Styling with CSS: Learn CSS: The Box Model Cheatsheet | Codecademy

• https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-improved-styling-with-css/modules/fecp-learn-css-the-box-model/articles/f1-devtools-box-model

| Codecademy