[CSS] 박스 모델

🎓 박스 모델

CSS에서 박스 모델은 디자인과 레이아웃을 말할 때 사용된다. windows, 크롬 기준 f12키를 눌러 현재 페이지의 박스를 확인할 수 있으며 margin, border, padding, content 순으로 구성되어 있다.  

Margin

p {
    margin: top right bottom left;
    margin: (top&bottom) (left&right);
    margin: (top&right&bottom&left);
}

Border

p {
    border: border-width border-style border-color;
}

Padding

p {
    padding: top right bottom left;
}

 

🎓 박스 크기 측정 기준

css 기본 설정

css에서는 요소가 화면에 나타날 때 기본적으로 요소의 width와 height 값에 padding과 border의 값은 포함되지 않고 나타난다. 때문에 요소에 같은 width와 height 값을 주어도 padding이나 border 값에 따라 실제로 화면에 나타나는 크기는 달라진다. (box-sizing: content-box;)

box-sizing: border-box 적용

요소들이 같은 width와 height를 가질 때 화면에 같은 크기로 나타나고, padding과 border는 지정된 박스의 width, height 값 안에서 나타나도록 하기 위해 box-sizing 속성을 사용할 수 있다.

* {
    box-sizing: border-box;
 }

unversal selector를 이용해 전체 요소에 대해 박스 크기의 측정 기준으로 border-box를 적용해 padding과 border를 포함시키도록 한다. 이 설정으로 요소의 width는 요소의 content+padding+border 값이 된다.