box model

목차

• box-sizing
• box-shadow

---

box-sizing

HTML요소의 너비와 높이를 계산하는 방법을 지정함

 

border-box는 테두리와 안쪽 여백도 요소의 크기로 고려함

width를 100px으로 설정하고 테두리와 안쪽 여백을 추가하면,

contnet 영역이 줄어들어 총 너비 100px을 유지함

대부분의 경우 이편이 크기를 조절 할 때 쉬움

 

content-box는 기본 박스크기 결정법

요소의 width를 100px로 설정하면, content영역이 100px의 너비를 가지고

테두리와 안쪽 여백은 별도로 설정됨

.h1_1 {
    background-color: gray;
    margin: 10px;
    padding: 20px;
    border: 3px solid red;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
}

.h1_2 {
    background-color: gray;
    margin: 10px;
    padding: 20px;
    border: 3px solid red;
    width: 150px;
    height: 150px;
    box-sizing: content-box;
}

<div class="h1_1">박스 모델
    <br> (border-box)
</div>
<hr>
<div class="h1_2">박스 모델
    <br> (content-box)
</div>

---

 

box-shadow

박스모델에 그림자를 넣어줌

수평거리, 수직거리, 흐림정도, 번짐정도, 색상, inset(그림자를 박스 안으로 넣기) 순으로 설정

.div_3 {
    box-shadow: 10px 10px 15px 5px #000;
}

<div class="div_3">
    박스 모델(그림자 효과)
</div>

---

Github

Link