[CSS] box-sizing: border-box

 

배웠던 CSS코드를 다시 공부하는 도중..

눈에 띈 첫 줄

 

?

대체 이게 뭐였더라... 있어도 그만 없어도 그만일 것같은데..해서

알아보고 쓰는 글~

 

---

 

그러니까 이게 뭔가 했더니

내가 지정한 요소의 크기 범위를 지정해주는 것이었다.

 

웹 브라우저에서 F12를 누르면 나오는 이 창의 맨 아래 알록달록한 그림을 통해 알아보자

 

 

box-sizing은 아래의 두 가지 속성을 가질 수 있는데,

1. content-box
2. border-box

각각이 가지는 의미는 다음과 같다

 

1. content-box

요소 그 자체의 사이즈로 크기가 지정됨

 

예를들어 내가 <div>태그를 통해 어떤 요소의 사이즈를 아래와 같이 지정했다고 가정하자

<div>
    width: 200px;
    height: 100px;
</div>

 

만약 이에 대해 box-sizing: content-box를 적용했다면 어떤 기타 사항 (paddig, border) 을 추가해도 그와 상관 없이,

딱 내가 지정한 <div>태그 내의 요소에만 크기가 적용됨을 의미한다.

 

딱 이만큼

 

2. border-box

요소에 padding과 boder를 포함한 사이즈로 크기가 지정됨

 

content-box와 동일하게 width:200px, height:100px의 크기를 지정했다고 가정하자.

하지만 그때와는 다르게 이번에는 지정한 크기가

 

 

이렇게 지정이 된다! (margin은 포함하지 않음)

 

사실 당장에는 이게 뭐 중요하다고.. 할 수 있지만 나중에 CSS 요소를 훨씬 더 많이 추가하고 어쩌구 할 경우

content-box를 사용하게 되면 내가 생각한대로 구조가 맞춰지지 않고 어딘가 틀어지는 일이 많다고 하니

일단은 border-box 기준에 익숙해지기로 하자!