css 속성 공부, width, height, boxmodel

 

width

width 속성은 요소의 가로 크기를 정의하는 데 사용하는 속성이고, 정확히는 content 영역의 너비를 지정하는 것을 의미한다.

크기를 지정한다는 것은 같지만, 요소의 종류나 특징에 따라서 다르게 동작하기도 한다. 

 

 

요소의 가로 크기를 지정하는 width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다.

블록&인라인 강의에서 다룬 블록 레벨 요소와 인라인 레벨 요소의 특징을 되짚어보시기 바랍니다. 

 

width 속성

      기본 값 : 0

 

 

< 속성 값 >

auto	브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 width에 상대적인 크기를 지정합니다.

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

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

예를 들어,

 

<div class="box"> box </div>
 
.box {
  width: 100px;
  padding: 20px;
  border: 10px solid black;
}

위와 같이 선언되어있다면 요소의 총 가로 크기는 160px가 됩니다.

분명 width: 100px를 적용했는데 어떻게 160px가 된 걸까요?

앞선 설명에서 언급한 바와 같이 width는 padding, border 영역에 대해서 영향을 받기 때문이다.

 

 

식으로 나타내면,

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

 

 

 

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

 

<div class="parent">
  <div class="child">
    child
  </div>
</div>
 
.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 영역의 크기가 기준이라는 것을 기억!

 

 

---

부모가 인라인 레벨 요소일 때, 자식(블록 요소)이 width 값에 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산됩니다. 만일 최상단까지 블록 레벨 요소가 없으면 body를 기준으로 계산된다. 

 

 

See the Pen Untitled by sunah (@sunah) on CodePen.

 

 

---

 

height

 

height는 요소의 세로 크기를 정의하는 데 사용하는 속성이다. width와 마찬가지로 정확히는 content 영역의 높이를 지정하는 것이다.

기본적으로는 width의 동작 방식과 같게 동작하지만, % 값을 가졌을 때의 동작 방식이 조금 다르다.

 

 

height 속성

      기본 값 : 0

 

 

 

< 속성 값 > 

auto	브라우저 자동으로 계산하여 적용합니다. * 기본적으로 컨텐츠 영역의 내용만큼 높이를 가집니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 height에 상대적인 크기를 지정합니다. * 단, 부모 요소가 명시적으로 height 값이 있어야 합니다.

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

width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다.

 

 

---

%를 이용해서도 크기를 지정해보기

 

<div class="parent">
  <div class="child">
    child
  </div>
</div>
 
.parent {
  width: 200px;
  border: 10px solid black;
}
.child {
  height: 50%;
  background: red;
}

 

 

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

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

MDN에서 height 속성에 percent value에 대한 설명을 보면

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

여기서 말하는 Containing Block은 부모를 의미한다고 생각하시면 됩니다.

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

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

 

 

 

---