[CSS] width

width

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

 

width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용된다.

→ <span>의 경우 인라인 레벨 요소이기 때문에 width를 지정하여도 적용되지 않음에 주의하자!

 

width의 속성

width: auto;  /* 기본값 */
width: 100px; /* 길이 */
width: 100%;  /* 퍼센트 */

auto : 브라우저에 의해 자동으로 계산하여 적용

length : 고정값으로 지정 (ex, px, em ...)

percent: 부모 요소의 width에 상대적인 크기를 지정

 

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

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

 

length로 지정

.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

 

percent로 지정

.parent {
  width: 300px;
  border: 20px solid red;
}
.child {
  width: 50%;
  padding: 20px;
  border: 10px solid black;
}

위와 같이 코드를 적용 했을 때 .child의 크기는 210px이 된다. 

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

     210px - 60px = 150px

     150px은 부모의 width가 300px이므로 300px의 50%인 150px이 width값으로 결정된다.

 

결국 %값일 때에는 부모의 width값에 대해서 계산되어지는데,이때 부모의 width는 content 영역의 크기를 의미한다. 부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준이라는 것을 기억하자. 

 

• box-sizing이라는 속성을 이용하면 padding, border 영역을 기준으로 크기를 가질 수 있도록 변경할 수 있다. 
• 부모가 인라인 레벨 요소일 때, 자식(블록요소)이 width 값에 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산된다. 만일 최상단까지 블록 레벨 요소가 없으면 body를 기준으로 계산된다.