개발나라 스용공주

[HTML] box-sizing 속성 / 요소의 크기를 계산하는 방법에 대한 기준 본문

WEB/HTML & CSS

[HTML] box-sizing 속성 / 요소의 크기를 계산하는 방법에 대한 기준

스용공주 2024. 7. 30. 21:54
728x90
728x90

이번 글은 box-sizing에 대한 내용이다.

 

우선 box-sizing이란?

요소의 크기를 계산하는 방식으로 콘텐츠 영역의 크기를 어떻게 계산할지에 대한 기준을 정하는 것이다.

 

 

 

 

 

아래 코드는 box-sizing : border-box를 요소 B에 해당하는 border에만 적용한 예제이다.

아래 사진은 실행결과이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
        * {
            margin : 0;
            padding : 0;
        }
        .a {
            border : palevioletred 10px solid;
            width : 200px;
            height : 100px;
            padding : 30px;
        }
        .b {
            border : skyblue 10px solid;
            width : 200px;
            height : 100px;
            padding :30px;
            box-sizing : border-box;
        }
    </style>
</head>
<body>
    <div class = "a">요소 A</div>
    <br>
    <div class = "b">요소 B</div>
</body>
</html>

실행결과

 

 

 

 

 

위의 코드를 보면 '요소 A'와 '요소 B' 모두 width 값은 200px이고 height 값은 100px이고 border 선 굵기도 10px이고 padding 두께도 30px로 똑같지만 상자의 크기가 다른 것을 확인할 수 있다.

 

그 이유는 box-sizing을 border-box로 하느냐 content-box로 하느냐에 따라 달라지기 때문이다.

 

  • content-box (기본값) : content 자체의 크기를 우리가 설정한 width와 height의 크기로 만든 것이다. (즉, 가로 : content 200 + padding 30 + border 10 = 280px / 세로 : content 100 + padding 30 + border 10 = 180px )

 

  • border-box : 상자의 테두리를 구성하는 border와 콘텐츠 사이의 공간인 padding과 콘텐츠의 총 너비를 우리가 설정한 width와 height로 만들어내는 것. (즉, 가로 : content + padding + border = 200px / 세로 : content + padding + border = 100px )

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML] 화장품 공식 판매 사이트 만들기  (0) 2024.07.28
[HTML] 글씨에 줄 긋기 / <del>태그  (0) 2024.07.28
[HTML] 깜빡거리는 글씨 만들기 - 애니메이션을 활용한 글씨 깜빡임 생성  (0) 2024.07.28
[HTML] position을 활용한 개체 이동 / position의 relative, absolute  (0) 2024.07.27
[HTML] 개체 중앙에 배치하기 / Justify-content와 align-items  (0) 2024.07.27
'WEB/HTML & CSS' Related Articles more
Comments