[html/css] Box-sizing 속성

box-sizing 속성

 

box-sizing 속성은 컨텐츠 영역에 border와 padding 을 포함시켜주는 속성이다.

보통 css box model을 계산할 때 width + (padding*2) + (border*2) + (margin*2) 라는 공식으로 계산하지만,

box-sizing 속성을 이용하면 padding과 border를 컨텐츠영역(width/height)안에 포함시켜주어 계산하기 쉬워진다.

<기본값>
box-sizing : content-box;

<padding과 border를 컨텐츠영역에 포함> ★★★
box-sizing : border-box;

 

 

속성을 활용하기 전, div에 속성을 부여하여 기본 틀을 만들어 주겠다.

 

---

 

 

box1과 box2에 각각 다른 속성을 부여하여 차이를 확인해보자.

 

1. content-box 일 때, 부여하지 않았을 때와 마찬가지로 가로 300px + (padding 20px *2) + (border 10px *2) 총 너비가 360px이 된다.

2. border-box 일 때, padding과 border가 컨텐츠영역에 포함이 됐기 때문에 기존 영역크기와 같이 총 너비가 300으로 나오는것을 볼 수 있다.

 

content-box(좌), border-box(우)

 

---

 

box-sizing 속성 응용하기

 

 

현재까지 글자를 박스 정 중앙에 정렬하기 위해 line-height 속성을 활용했다.

하지만, 컨텐츠 내용이 두 줄 이상 들어가는 경우엔 이 방식으로 정렬하는 것이 불가능하다.

이럴 경우에 Padding을 이용하여 정렬한다.

한 문장일 경우 중앙정렬

 

 

부모태그를 활용하기 위해, 아래와 같은 내용을 추가했다.

<div>
    <img src="링크" alt="설명" />
    <div>
         <h3>제목</h3>
         <p>내용</p>
    </div>
</div>

 

이와 같이 만들었을 때,

직전에 만들었던 'box1,2' 의 div 속성으로 인해, 내용이 틀을 벗어나는 것을 확인할 수 있다.

 

이를 바로 잡기 위해 div에 새로운 클레스 명을 부여하고 수정해 보도록 하겠다.

div가 총 2번 부모태그로써 쓰이는데, 각각 con과 title로 명명하여 속성을 부여한다.
먼저, 가장 큰 부모태그인 con을 먼저 수정해 보겠다.

.con{
    width: 400px;                    - 너비
    height : auto;                    - 높이를 알 수 없을 때, auto로 작성한다.
    text-align: center;             - 글자 정렬을 센터로
    color: #fff;                         - 글자 색상
    boder-radius: 20px;          - 상자 둥글기
    margin: 20px;                    - 마진
    padding: 20px;                  - 패딩
    box-sizing: border-box;     - 패팅과 보더를 컨텐츠로 포함
}

수정 후 'con'이 'tittle'을 감싸고 예쁘게 중앙 정렬한 것을 볼 수 있다.

이제, 이미지 사이즈를 불필요한 여백을 조정하도록 하겠다.

img{
    width: 100px;
    display: block;
    margin: 0px auto;
}

 

이미지 파일의 경우 이미지가 정비율이 아닐 경우도 있기 때문에 사이즈를 바꿀 때 대부분 너비만 조정한다.
높이는 너비에 따라 자동으로 바뀐다. 
현재 이미지 파일은 inline-block속성으로 inline 속성은 margin 과 padding을 적용 할 수 없기 때문에
display를 이용하여 block 속성으로 변경해준다.

block 속성으로 바꾸는 순간 이미지가 왼쪽으로 치우치게 되는데
inline 속성들에게 적용되어있던 가운데 정렬이 block 속성이 되면서 풀렸기 때문이다.
margin 값을 주어 다시 가운데 정렬을 시키도록 하겠다.  

margin: 0px(상,하) auto(좌,우);

 

margin 좌,우 값을 auto로 주면 자동으로 가운데 정렬이 된다.

marign으로 가운데 정렬 할 때에는 무조건 '자식태그'에 적용시켜야한다.

부모를 기준으로 자식을 가운데로 위치시키는 것이기 때문이다.

 

이제 박스에서 벗어나있는 h3와 p태그를 조정해 보도록 하겠다.

먼저 배경색과 테두리선을 없애준다.

.title{
    background-color: transparent;
    border: none; 
}

 

위 그림을 보면 줄간격으로인해 글자가 상자 밖으로 튀어나가 있는 것을 볼 수 있다.

h3, p 에게 line-height 를 적용한 적이 없는데 줄간격이 긴 이유는 속성의 상속 때문이다.

현재 h3,과 p에게는 div 속성에게 적용해 놓은 line-height가 300px로 적용되어있다.

이를 수정하기 위하여 title로 명명된 부모태그에게 line-height 속성을 다시 부여할 것이다.

line-height는 1 혹은 1.6과 같은 소수점의 숫자로 단위없이 쓸 수 있다.

 

 

그렇게 완성된 파일을 보면, 현재 title 파일이 con 파일을 기준으로 왼쪽과 오른쪽 여백의 크기가 다르고 아래의 빈 여백이 많은 것을 볼 수 있다.

이를 조정하기 위하여 width와 height의 값을 다시 주도록 한다.

<부모박스를 기준으로 100%채우기>
width: 100%

<높이를 내용에 맞춰 자동으로 조정하기>
height: auto;

 

 

현재 모든 div 에는 padding과 margin 이 들어가있다.

이 때문에 title 에도 div 속성이 적용되어 옆으로 박스가 튀어나오게 된 것이다.

컨텐츠 내용에는 padding과 margin이 필요 없기 때문에, 값을 0으로 주면 con 박스 안에 제대로 정렬되어 들어가는 것을 볼 수 있다.