[CSS]박스사이징(box-sizing) 활용하기

레이아웃을 만들다보면, 테두리, 패딩등 때문에 사이즈가 헷갈리기 시작한다. 

그  때 css속성으로 'box-sizing' 과 'clac()'를 활용하면 좋을 것 같다. 

 

2020/03/13 - [퍼블리싱/HTML&CSS] - [CSS]div 3개 레이아웃 만들기( calc() 사용법)

[CSS]div 3개 레이아웃 만들기( calc() 사용법)

---

.box{box-sizing: content-box / border-box}

- box-sizing:content-box : 기본값, 콘텐츠사이즈에는 width, height만 포함하고, padding, margin, border를 포함하지 않음

ex)

.box {

width: 200px ;

height:200px;

padding:20px;

border:1px solid #000;

box-sizing:content-box } 라면

박스의 사이즈는 width200px + padding 양쪽 20px + 20px + border 양쪽 1px +1px = 242px 입니다.

 

- box-sizing:border-box : width과 height 사이즈 안에 padding과 border 값을 포함된다. * margin 는 포함되지 않음

ex)

.box {

width: 200px ;

height:200px;

padding:20px;

border:1px solid #000;

box-sizing:border-box } 

박스의 사이즈는 contents 158px + padding 양쪽 20px + 20px + border 양쪽 1px +1px = 200px 입니다.

즉 width:200px을 기준으로 콘텐츠의 사이즈를 줄여, padding과 border사이즈를 width안에 넣습니다. (heigth도 동일)

두 박스는 width:200px으로 같지만 , 박스전체의 사이즈는 242px과 200px으로 차이가 납니다. 

레이아웃을 짤 때  box-sizing:border-box 를 사용하면 가로 세로값이 여백사이즈와 선사이즈의 따라 증가하지 않기 때문에 좀 더 쉽게 레이아웃을 만들 수 있습니다.