width/height 속성

percent

부모 요소의 width에 상대적인 크기를 지정합니다.

width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,

그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padding, border) 

예를 들어,

.box { width: 100px;

       padding: 20px;

       border: 10px solid black;

}

100px content + ( 20px * 2) padding + ( 10px * 2 ) border = 160px 가 된 것입니다. 

또한, width는 %를 이용해서도 크기를 지정할 수 있습니다.

 

.parent { width: 300px;

            border: 20px solid red; }

.child { width: 50%;

        padding: 20px;

        border: 10px solid black;

}

 

정답은 210px 입니다.

우선, padding (20px * 2) + border (10px * 2) = 60px 입니다.

210px - 60px = 150px 이며, 150px은 부모의 width가 300px이므로 300px의 50%인 150px이 width값으로 결정된 것입니다.

결국 %값일 때에는 부모의 width값에 대해서 계산되어지는데,

이때 부모의 width는 content 영역의 크기를 의미합니다.

부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준이라는 것을 기억하시면 됩니다.

 

height속성

 

parent { width: 200px;

          border: 10px solid black; }

.child { height: 50%;

         background: red; }

 

위와 같이 코드를 적용 했을때,  .child 의 높이는 어떻게 적용 될까요?

 

실제로 확인해보면, height: auto일 때와 height: 50%일 때 차이가 없는 것을 확인할 수 있습니다.

왜 두 값의 차이가 없는 걸까요?

"Containing Block의 높이에 대한 백분율로 높이를 정의합니다."고 나와 있습니다.

즉 현재 위의 코드에서는 부모가 명시적인 높이 값을 가지고 있지 않기 때문에

자식의 높이를 %값으로 지정해줘도 적용되지 않았던 것입니다.

 

부모 코드에 height: 200px로 명시적으로 높이 값을 지정해주면,

위와 같이 %값이 적용되는걸 볼 수 있습니다.

 

※ 부모 요소 높이 값을 지정해야 자식요소 %가 적용된다.※

 

※높이를 계산할 때는※

 
box-sizing 계산방법
h100 + p20*2 + b10*2 =160px;