[CSS] #1-2 박스모델과 box-sizing

/* I found it should be written my post what I learned for fully understanding 
  so I am going to talk about the box model of CSS in Korean. 
  Hope you can also get my point. 😎 */

 

HTML웹페이지 문서의 골격을 만들고, CSS로 스타일링을 줄 때 우리는 박스모델이라는 개념을 접하게 된다.

하나의 콘텐츠가 웹 페이지 내부에 위치하게 될때, 하나의 콘텐츠는 박스모델을 갖는다. 

 

박스모델은 4개의 박스로 구성이 되어있는데, 콘텐츠박스 > 패딩박스 > 보더박스 > 마진박스로 감싸진다.

 

박스모델

 

박스를 만들 때 주의점이 하나 있다면, 원래 div박스에 width 값을 주면 패딩과 보더를 고려하지 않는다.

즉, 패딩 안쪽부분(=콘텐츠 박스)만 실제 width로 설정하는 것

 

위 그림을 보면 콘텐츠 박스만 실제 width라는 말이다.

그래서 가로세로 각각 100픽셀의 박스를 만들어도 패딩을 좌, 우, 위, 아래에 10픽셀씩 주면 실제 보여주는 박스의 폭이 패딩만큼 커지게 된다.

 

∴실제 보여지는 박스크기 = 콘텐츠 + 패딩 + 보더 (* 마진은 포함되지 않음)

 

그래서,

박스의 폭을 보더영역까지 설정해주고 싶을 때, box-sizing 속성을 사용할 수 있다.

.box{
  box-sizing: border-box; /* 박스의 폭은 border 까지 포함 */
  box-sizing: content-box; /* 기본값, 박스의 폭을 padding 안쪽까지 포함(즉, 콘텐츠영역만 포함) */
}

 

---

 

따라서, box-sizing: border-box; 라는 속성을 사용하여 border까지를 실제 박스의 폭으로 설정하면

패딩과 보더에 따라 늘어나는 영역을 고려하지 않고 CSS를 작성할 수 있다는 장점이 있다. ✌️