Dog foot print

[css] box-sizing에 대하여 본문

CSS

[css] box-sizing에 대하여

개 발자국 2019. 7. 23. 00:17

우리 자스민 그룹원들이 공부를 매일 안 해서 조금 걱정이다...  아마 내가 이 글을 오늘 단톡방에 올려도 클릭해서 보지 않을 것 같다. 만약 이글을 자스민 그룹원들이 본다면 호형 멋쟁이라고 카톡에 올려주길 바란다. 

 

box-sizing 

box모델은 다음과 같이 ''content, padding , border, margin " 으로 이루어져 있다.

출처 : mdn 모질라

 

우리는 box모델의 크기를 제어하기 위해서 width 나 height를 적용한다. 그러나  해당 box모델에 padding 값이나 border 값을 할당한다면 우리가 주었던 width와 height 값을 넘어서 padding + border + width 값으로 해당 box 모델이 결정된다. 

 

 

그러나 개발자가 padding을 사용하더라도 boder + padding + content 의 값이 width 가 되도록 설정 하고 싶을 수 있다. 이럴때 사용하는 속성이 box-sizing 속성이다. 

 

box-sizing 속성은 content-box ,와 border-box로 나뉘는데 차이점은 다음과 같다. 

 

content-box : content = width, box size = padding + border + content;

 

border-box : width = border + content + padding ; box size = width ;

 

 

 

 

그렇기에 해당 블루 클래스에 box-sizing: border-box 를 할당하고 padding 을 할당하면 해당 박스의 크기는 width만큼 유지된다. 

 

// padding 을 width 보다 크게 하면 해당 박스의 width 보다 커지게 된다. 

 

전체

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
  * {
    margin-left: 10px;
  }
  div { 
    width: 100px;
    height: 100px;
    display: inline-block;

  }
  .coral{
    background-color: coral;
  }
  .blue{
    background-color: blue;
    padding : 150px;
    box-sizing: border-box;
  }
</style>
</head>
<body>
  <h1>Box-Sizing</h1>
  <div class="blue"></div>
  <div class="coral"></div>
</body>
</html>
반응형

'CSS' 카테고리의 다른 글

[css] position 속성  (0) 2019.07.23
[css] 간단한 head 만들어보기  (0) 2019.07.09
[css]반응형 웹을 만들기 위한 media-query  (0) 2019.07.08
[css] 세로 중앙에 아이템 배치하기  (0) 2019.07.07
[css] flex-box  (1) 2019.07.06
'CSS' Related Articles more
Comments