개발자로 살아남기-캐나다

CSS 강의 2편 - Box model(박스모델) 본문

카테고리 없음

CSS 강의 2편 - Box model(박스모델)

志者必得 2020. 12. 13. 03:46

css box model 박스모델

저번 강의에서 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을 열고 엘리먼트를 선택한 뒤에 스타일 탭에서 맨 아래위에 사진과 같은 이미지가 있는 것을 볼 수 있을 것입니다. 거기에서 한번 가지고 놀아보면서 어떻게 바뀌는지 직접 한번 해보세요.

0 Comments
댓글쓰기 폼