티스토리 뷰

Language/CSS

[CSS] box-sizing 속성

무화과(Fig) 2022. 6. 12. 20:06

목차

 

1. box-sizing 속성값

2. 예시

3. 정리

4. 퀴즈

 

 

 

1. box-sizing 속성값

box-sizing는 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다.

 

width와 height는 엘리먼트의 컨텐츠 크기를 지정한다.

 

그러나 테두리가 있는 경우 테두리 두께로 인해 원하는 크기를 찾기 어렵다. 따라서 box-sizing 속성 중 border-box를 지정하면 이를 해결할 수 있다.  

 

 

 

2. 예시

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
      body {
        margin: 0px;
      }
      div {
        margin: 20px;
        padding: 20px;
        border: 20px solid black;
        width: 500px;
      }
      .content-box {
        box-sizing: content-box;
      }
      .border-box {
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="content-box">
      <p>content-box</p>
    </div>
    <div class="border-box">
      <p>border-box</p>
    </div>
  </body>
</html>

 

 

결과:

 

width가 500px로 동일하지만 box-sizing 속성에 따라 크기가 다른 것을 볼 수 있다.

 

content-box는 테두리를 제외한 부분이 500px이지만 border-box는 테두리를 포함한 부분이 500px이기 때문에 border-box가 예측이 쉽다.

 

 

 

3. 정리

- border-box: 개발자가 지정한 크기가 요소(element) + padding + border 의 크기이다. (margin 제외) 

 

- content-box: 개발자가 지정한 크기가 요소(element) 만의 크기이다. (padding, border, margin제외)

 

 

 

4. 퀴즈

box-sizing 속성을 border-box로 지정하면  테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다.

( O / X )

 

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

[CSS] flex 속성 정리 (flex-basis, flex-grow, flex-shrink)  (0) 2024.03.12
[CSS] active와 focus의 차이  (0) 2023.10.20
[CSS] overflow  (0) 2023.07.27
[CSS] transform(translate, scale, rotate, skew)  (0) 2023.07.26
[CSS] position (relative, absolute)  (0) 2022.06.03