🤔 박스 모델

1-blue·2021년 10월 8일

🪄 CSS 🪄

목록 보기

2/6

🤔 박스 모델

박스 모델이란 문서의 레이아웃을 결정할 때 기준이 되는 모델을 의미합니다.

기본적으로 컨텐츠의 크기를 정하는 속성은 margin, border, padding, width, height가 있습니다.
박스 모델에 따라서 이 속성들과 레이아웃이 어우러져서 width의 크기가 결정됩니다.

1. content-box

box-sizing: content-box;는 기본적으로 지정된 값이고 width의 크기를 width만으로 크기를 지정합니다.

2. border-box

box-sizing: border-box;는 border, padding, width를 합쳐서 width의 크기를 지정합니다.

위에 말을 단순 텍스트로만 보면 이해하기 힘들어 예시를 보여드리겠습니다.

html

<body>
  <div class="box border__box"></div>
</body>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px;
  background-color: blue;
}

.border__box {
  box-sizing: border-box;
}

위 예시에서 border__box를 제거하면 width와 height값이 160px이 되어버립니다.
그 이유는 기본값이 box-sizing: content-box;이라서

width를 100px
border은 10px인데 좌우합쳐서 20px
padding은 20px인데 좌우합쳐서 40px

가 적용되어 160px이 됩니다.

하지만 border__box를 적용하면

border은 10px인데 좌우합쳐서 20px
padding은 20px인데 좌우합쳐서 40px
width는 남은 크기만큼 차지 ( (20px + 40px) - 100px )

1-blue

블로그 이전했습니다 !! ( https://blog.story-dict.com )

이전 포스트

🤔 블록 서식 맥락

다음 포스트

🤔 박스 모델

🪄 CSS 🪄

🤔 박스 모델

1. content-box

2. border-box

🤔 블록 서식 맥락

🤔 컨테이닝 블록

0개의 댓글