Seongwon Lim

[HTML/CSS] box-sizing 개념 및 사용 방법 본문

HTML-CSS

[HTML/CSS] box-sizing 개념 및 사용 방법

limsw 2022. 7. 14. 22:18
반응형

서론

이번 글에서는 CSS 스타일 속성 중 하나인 box-sizing 속성의 개념과 사용 방법에 대해서 간단하게 살펴볼 예정이다.

box-sizing 이란?

box-sizing은 박스의 크기를 표현하는 방식을 변경할 수 있는 속성으로, 박스 레이아웃 설계 시 많이 사용되고 있다.

특히, 초기에 정해둔 너비(width)와 높이(height) 값을 넘어가지 않게 해주는 명령어인 box-sizing: border-box; 는 레이아웃을 구성할 때 굉장히 많이 쓰이고 있으므로 해당 명령어를 중심으로 예제를 살펴보고자 한다.

 

.box {
	width: 400px;
	height: 600px;
        margin: 10px;
	padding: 20px;
	border: 10px solid red;
}

위와 같은 스타일 속성을 가지는 박스 클래스(div 태그)가 있다고 생각해보자.

 

해당 클래스의 구조를 브라우저 개발자 도구를 통해 살펴보면 다음과 같은 결과를 얻을 수 있다.

우리가 정의한 박스 클래스의 너비와 높이는 400x600 이었다.

그러나 실제로 해당 박스가 차지하는 너비와 높이는 480x680이다.

 

그 이유는 상하좌우에 들어간 margin, padding, border 값을 포함하여 박스를 배치하기 때문이다.

박스 클래스의 전체 크기 = 정의한 박스의 크기 + padding 값 + margin 값 + border 값

 

다시 말해서 위와 같은 스타일을 가지고 있는 박스 클래스가 있는 경우 실제 너비와 높이는 다음과 같다.

 

  • 실제 너비 : 400px + 40px(padding의 좌,우 20px) + 20px(border의 좌,우 10px) + 20px(margin 좌,우 10px) = 480px
  • 실제 높이 : 600px + 40px(padding의 상,하 20px) + 20px(border의 상,하 10px) + 20px(margin 상,하 10px) = 680px

따라서 초기 레이아웃을 설계할 때 margin, padding, border 속성을 고려하지 않고 박스의 크기만 생각하여 레이아웃을 배치하게 되면 나중에 스타일을 적용할 때 원하는 레이아웃이 제대로 나오지 않는 경우가 발생한다.

 

예시를 통해 이해해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>box-sizing example</title>

    <style>
        .box {
            width: 600px;
            height: 210px;
            border: 1px solid red;
        }

        .box div {
            border: 5px solid blue;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

해당 예제 코드는 box 태그의 자식 요소들인 div 태그를 가로 정렬을 시키는 것이 목표이다.

 

float:left;를 통해서 자식 요소들을 가로 배치 하려고 했지만 .box의 너비는 600px인데 div 태그들은 width: 200px 에다가 border 좌,우 5px씩 포함하기 때문에 실제로는 210px이 된다.

 

따라서 위의 HTML 코드를 실행시키면 다음과 같은 결과가 나온다.

 

어떻게 해야 자식 요소들을 가로 배치를 할 수 있을까?

해결방법 1 - 부모의 너비(width)를 늘리기

첫 번째 방법은 .box 태그의 너비를 직접 증가시키는 것이다.

자식 요소 하나의 너비는 210px 이므로 총 3개의 자식 요소를 가로로 배치시키기 위해서는 630px 이상의 박스 크기가 필요하다.

 

따라서 다음과 같이 .box 태그의 코드를 수정하면 원하는 목표를 달성할 수 있다.

        .box {
            width: 630px; /*600px 에서 630px로 직접 변경*/
            height: 210px;
            border: 1px solid red;
        }

코드를 수정한 뒤 실행 결과는 다음과 같다.

하지만 첫 번째 방법은 그다지 효율적인 해결 방법이 아니다. 레이아웃이 복잡하게 구성되어 있는 경우 위처럼 정적으로 특정 태그의 너비, 높이를 변경하면 다른 요소들의 레이아웃 배치가 이상해질 수 있다.

해결방법 2 - box-sizing: border-box; 사용하기

이번에는 이번 글에서 다루고자 했던 box-sizing 속성을 이용해서 동적으로 너비를 제어하여 문제를 해결해보고자 한다.

        .box {
            width: 600px; /*원래대로 600px로 수정*/
            height: 210px;
            border: 1px solid red;
        }

        .box div {
            border: 5px solid blue;
            width: 200px;
            height: 200px;
            float: left;
            box-sizing: border-box; /*해당 부분 추가*/
        }

box-sizing: border-box;는 정의한 너비, 높이값이 안쪽의 여백(margin, padding) 및 테두리(border) 값을 포함하여 구성한다.

 

  • 참고로 box-sizing의 기본 값은 content-box; 이며 생략 시 기본 값으로 설정된다.

먼저 box-sizing: content-box;를 했을 때 자식 요소의 구성을 살펴보면 다음과 같다.

 

초기 정의한 너비와 높이 200x200에 상하좌우 패딩이 5px씩 추가된 것을 확인할 수 있다.

 

이번에는 box-sizing: border-box;를 했을 때의 결과를 살펴보자.

왼쪽 그림을 보면 초기에 정의했던 너비와 높이가 200x200이 190x190으로 축소된 것을 확인할 수 있다.

border-box는 여백이나 테두리 값을 포함하여 초기 너비와 높이로 구성한다고 했기 때문이다.

 

예제에서 테두리 값을 상하좌우에 5px씩 넣었으므로 너비는 200-(좌,우 각각 5px) = 190px

높이 또한 200-(상,하 각각 5px) = 190px 으로 동적으로 너비와 높이를 조정한 것이다.

'HTML-CSS' 카테고리의 다른 글

[HTML/CSS] 가상 요소 :before :after 개념 및 사용 방법  (0) 2022.07.22
[HTML/JS] 버튼 클릭 시 페이지 맨 위로 이동하기  (0) 2022.07.18
[HTML/CSS] 드롭다운(Drop-down) 애니메이션 구현하기  (0) 2022.05.10
[HTML/CSS] 블러(Blur) 애니메이션 구현하기  (0) 2022.05.09
[HTML/CSS] 글자 호버링 시 밑줄 효과 구현하기  (0) 2022.05.08
'HTML-CSS' Related Articles more
Comments