[CSS] box-sizing과 레이아웃 리셋(border-box)

box-sizing

box-sizing: content-box | border-box | initial | inherit

• content-box : 콘텐트 영역을 기준으로 크기를 정한다.
• border-box : 테두리를 기준으로 크기를 정한다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

width와 height는 엘리먼트의 컨텐츠의 크기를 지정한다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다.

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있다. 때때로 HTML 문서가 갖는 기본 스타일이 레이아웃을 잡는데 방해가 되기도 한다.

아래와 같은 코드를 전체 엘리먼트에 적용하면 기본 스타일링이 제거되어 디자인 한대로 구현이 가능하다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}