POTATO THAT WANT TO BE HUMAN

[CSS] box-sizing - 테두리 영역의 크기를 결정하는 속성 본문

FRONTEND/CSS

[CSS] box-sizing - 테두리 영역의 크기를 결정하는 속성

녜힝 2022. 5. 10. 13:45
반응형

ㅊCSS에서는 box-sizing이라는 속성이 있습니다.

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지는 정하는 속성입니다.

 

  • content-box : content 영역을 기준으로 크기를 정합니다. (기본값)
  • border-box : 테두리를 기준으로 크기를 정합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

 

CSS에서 각 태그의 영역은 Box Model로 구성됩니다.

content : 글씨가 삽입되는 영역

padding : content와 border 사이 영역

border : 테두리 영역

margin : border와 다른 태그 사이 영역

 

 

🤔 content-box 

box-sizing을 content-box로 지정하면 width 및 height 크기는 오직 content 영역만을 의미합니다.

예시를 통해 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 30px;
            padding: 20px;
            border: 5px solid #303030;
        }
    </style>
</head>
<body>
    <div>
        content-box
    </div>
</body>
</html>

box-sizing 을 지정하지 않아 기본값인 content-box가 적용된 상태입니다.

content-box로 지정되었기 때문에 

border와 padding을 제외한 content의 영역의 width, height가 200px 로 설정됐습니다.

 

 

🤔 border-box

box-sizing을 border-box로 지정하면 width 및 height 크기의 값은 content뿐만 아니라 border과 padding의 넓이까지 포함한 영역을 의미합니다.

예시를 통해 살펴보겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
        div {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            margin: 30px;
            padding: 20px;
            border: 5px solid #303030;
        }
    </style>
</head>
<body>
    <div>
        content-box
    </div>
</body>
</html>

box-sizing이 border-box로 적용된 상태입니다.

 

border-box로 적용됐을 시 content와 border와 padding을 포함한 값이 200px로 설정됐습니다. 

2*(border 5px) + 2*(padding 20px) + content 150px = 200px

 

 

 

 

참고한 글

https://dasima.xyz/css-box-sizing-content-box-vs-border-box/

반응형

'FRONTEND > CSS' 카테고리의 다른 글

[CSS] CSS의 단위 (%, em, rem, vw, vh, vmin, vmax)  (0) 2022.05.12
[CSS] 형제 선택자 + , ~ 사용법  (0) 2022.05.12
[CSS] float를 취소하기 위한 clearfix 이용하기  (0) 2022.05.08
[CSS] :nth-child()와 :nth-of-type()  (0) 2022.05.05
[CSS] text-indent (텍스트 들여쓰기, 내어쓰기)  (0) 2022.05.03
'FRONTEND/CSS' Related Articles more
Comments