CSS - 박스 크기 지정

박스의 컨텐츠 영역 크기를 지정할 때는 다음 속성을 이용합니다.

속 성	설 명
width	박스의 가로 크기. 기본 값 auto <크기> | <백분율> | auto 중 하나
height	박스의 세로 크기. 기본 값 auto <크기> | <백분율> | auto 중 하나
line-height	요소들의 줄 간격을 지정. nomal | <크기> | <백분율> 중 하나
max-height	요소의 최대 높이를 지정. none | <크기> | <백분율> 중 하나
max-width	요소의 최대 너비를 지정. none | <크기> | <백분율> 중 하나
min-height	요소의 최소 높이를 지정. <크기> | <백분율> 중 하나
min-width	요소의 최대 너비를 지정. <크기> | <백분율> 중 하나
box-sizing	크기를 content 영역까지 할지 padding 영역까지 할지를 지정. content-box: 크기를 content 영역까지만... 기본 값 border-box: 크기를 padding 영역까지만…. width + height 크기는 content 영역까지가 실제 크기이지만 box-sizing 을 설정하면 width + height + padding 가 실제 크기가 됨

<style>
div {
  width: 100px;
  height: 100px;
  
  color: white;
  background: red;
}
</style>

<div>하보니 PHP</div>

하보니 PHP

다음은 box-sizing 의 예제입니다. width를 100px로 하고, padding을 50px로 하면 박스의 실제 크기는 200px가 됩니다. 그러나 box-sizing 을 설정하면 padding영역을 포함하여 박스의 실제 크기는 100px가 됩니다.

<style>
.hh1 {
  width: 100px;
  height: 100px;
  
  color: white;
  background: red;
}
.hh2 {
  /* border 영역까지의 크기로 설정.*/
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 50px;

  color: white;
  background: red;
}
</style>

<div class="hh1">하보니 PHP</div>
<br/>

<div class="hh2">하보니 PHP</div>

하보니 PHP

하보니 PHP