[비전공자를 위한 HTML/CSS] (29) CSS 속성- width속성과 height 속성

width 속성

  : content 영역의 너비를 지정하는 속성으로 inline-level 요소를 제외한 모든 요소에 적용된다.  (기본값: 0)

 

<속성값>

• auto  :  브라우저에 의해 자동으로 계산된 값이 적용.
• length : 고정값 지정. (px, em, ...)
• percent : 부모요소의 width에 상대적인 크기를 지정. (with는 content 영역 값.)

 

width에 auto가 아닌 특정한 값을 지정하면, margin 영역을 제외한 모든 영역에 대해 영향을 받는다. (content, padding, border)

.box{
  width: 100px;
  border: 10px solid;
  padding: 20px;
}

width는 padding, border 영역에 영향을 받기 때문에 100이 아닌 160이 나온다.

  content + padding + border = 100px + (20px *2) + (10px * 2) = 160px

 

.parent{
  width: 300px;
  border: 20px solid red;
}

.child{
  width: 50%;
  padding: 20px;
  border: 10px solid;
}

150px + 60px = 210px

 

padding + border = (20px * 2) + (10px * 2) = 60px

부모의 width가 300px 이므로, .child width는 50% 이므로 150px이다. 

 

즉, %값일때는 부모의 width 값에 대해서 계산되어진다. 이때 부모의 width는 content 영역의 크기이다. 

 

 

부모가 inline-level 요소일때

  : 자식(블록 요소)이 width 값의 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산. 만약 최 상단 가지 블록 레벨 요소 없으면 body를 기준으로 계산.

.contain{
  width: 300px;
  background-color: silver;
  color: white;
}
.inlineBox{
  display: inline;
  height: 100px;
  background-color: darkorange;
}
.inner{
  width: 50%;
  height: 50px;
  background-color: olive;
}

.contain{
  width: 300px;
  background-color: silver;
  color: white;
}
.inlineBox{
  display: inline-block;
  height: 100px;
  background-color: darkorange;
}
.inner{
  width: 50%;
  height: 50px;
  background-color: olive;
}

.contain{
  width: 300px;
  background-color: silver;
  color: white;
}
.inlineBox{
  display: block;
  height: 100px;
  background-color: darkorange;
}
.inner{
  width: 50%;
  height: 50px;
  background-color: olive;
}

 

 

height

  : 요소의 높이 값을 지정 content 영역의 높이를 지정한다.  기본값: 0

 

<속성값>

• auto  :  브라우저가 자동으로 계산한다.( *기본적으로 content 영역의 내용만큼 높이를 가진다.)
• length  :  고정값으로 지정.(px, em, ...)
• %(percent)  :  부모 요소의 height에 상대적인 크기를 지정. (단, 부모요소가 명시적으로 height 값 갖고있어야 함.)

 

auto가 아닌 특정한 값을 height 로 지정하면, width속성과 마찬가지로 margin 영역을 제외한 모든영역(content, padding, border)에 대해 영향을 받는다.

 

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 15px solid black;
}

 

 

부모가 height 값이 명시되지 않은경우

.parent{
  width: 200px;
  border: 10px solid;
}
.child {
  height: 50%;
  background-color: red;
}

 

 

부모가 명시된 height 값이 없으므로 자식의 height: 50% 이지만,  height: auto 와 차이가 없다.  

 

 

부모가 height 값이 명시된 경우

.parent{
  width: 200px;
  height: 200px;
  border: 10px solid;
}
.child {
  height: 50%;
  background-color: red;
}

 

 

 

 

 

width와 height는 box-sizing속성 이용하여 기준값을 padding 영역, border 영역으로 바꿀 수 있다.