저번 강의에서 CSS 기본과 selector들을 알아보았습니다. 이번에는 CSS에 기초 개념인 Box model을 설명하려고 합니다. 제가 인턴으로 들어갈 때 받았던 질문인데 저는 그때 Box model을 처음 들어서 너무 당황했던 기억이 납니다. CSS를 조금 해보셨다면 Box model을 처음 들어봐도 나중에는 아~그거라는 말을 속으로 할 것 같습니다.
CSS Box model이 뭐지?
CSS에서 나오는 모든 박스는 4부분으로 이루어집니다.
- Content
- Padding
- Border
- Margin
Content
Content는 우리가 아무런 스타일을 적용하지 않았을 때 element가 가지는 공간입니다.
예를 들어 div에 width: 200px; height: 200px라는 인라인 스타일을 줬을 때 그 공간이 Content입니다.
Padding을 20px라고 주면 아래와 같이 적용됩니다.
위에 보는 것과 같이 border는 Padding 다음에 위치하고 있기 때문에 여기서 border를 적용시키게 되면
예를들어 border: 10px solid black;
이라고 줬을 때 220위 치에 border가 위치하게 되는 것입니다.
Margin은 마지막에 오게 됩니다.
Box model에서 중요한 점은 내가 주는 스타일이 선택된 박스에서 어디에 위치하는 것인지 아는 것입니다.
Box model과 관련된 css 중 하나는 box-sizing입니다. 모든 엘리먼트는 box-sizing이 content-box로 적용되어 있습니다.
{
width: 200px;
padding: 10px;
border: 1px solid;
}
content-box는 박스에 크기가 width + padding + border가 됩니다. 총 width = 211(200 + 10 + 1) px
border-box는 박스에 크기가 padding + border가 총 width에 맞춰지게 됩니다. 총 width = 200px
만약에 아래와 같이 만들고 싶다면 어떻게 해야 될까요? flexbox는 사용하지 않겠습니다.
간단히 만들어 보면 아래와 같습니다.
html.index
<div class="container">
<div></div><div></div><div></div>
</div>
index.css
.container {
width: 100%;
height: 200px;
}
.container div {
width: 33.33%;
height: 100%;
background: linear-gradient(90deg, rgba(161,196,253,1) 0%, rgba(194,233,251,1) 100%);
display: inline-block;
}
.container div:nth-child(odd) {
background: linear-gradient(90deg, rgba(255,154,158,1) 0%, rgba(254,207,239,1) 100%);
}
width를 33.33%로 줘서 100% 안에 3개 박스가 들어갈 수 있게 만들어 주고 display: inline-block을 줘서 한 줄에 넣어 줍니다. 여기서 div에 border나 padding을 준다면 어떻게 될까요? 공간이 부족해서 한줄에 있지 못하고 마지막 사각형은 다음 라인으로 넘어갈 것입니다. 왜냐하면 사각형의 크기가 width + padding + border가 되기 때문입니다. 그래서 33%가 넘어 버리게 되는 것이죠.
만약에 box-sizing을 border-box로 바꾼다면 어떻게 될까요? padding과 border가 width에 포함되기 때문에 첫 번째 줄에 위치할 수 있습니다.
잘 이해가 안 된다면 google dev tool을 열고 엘리먼트를 선택한 뒤에 스타일 탭에서 맨 아래위에 사진과 같은 이미지가 있는 것을 볼 수 있을 것입니다. 거기에서 한번 가지고 놀아보면서 어떻게 바뀌는지 직접 한번 해보세요.