width 속성의 이해

width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.

이 크기의 기준은 기본적으로 콘텐츠 영역의 너비입니다.
그러나, 요소의 크기를 계산할 때 크기의 기준을 설정하는 box-sizing이 border-box로 설정되어 있다면 테두리 영역까지의 너비가 기준이 됩니다.

CSS 데모: width 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    width: <길이> | <백분율(%)> | <키워드>
}

구문

CSS 
/* <길이> 단위 값 */
width: 120px;
width: 13rem;
width: 15rem;

/* <백분율(%)> 단위 값 */
width: 50%; /* 컨테이닝 블록 너비의 50% */
width: 100%; /* 컨테이닝 블록 너비의 100% */

/* <키워드> 값 */
width: auto; /* 초깃값 */
width: max-content;
width: min-content;
width: fit-content;

/* 전역 값 */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

값

width 속성은 다양한 형태의 값을 사용할 수 있습니다.
이를 설명과 예제로 정리하면 다음과 같습니다.

<길이> 단위 값

길이 단위의 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.
  • vh
  • vw
절대적 <길이> 단위
  • px
  • CSS에서 사용 가능한 절대적 길이 단위
예제
HTML 
<p>width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.</p>
CSS 
p {
    width: 100px;
    background-color: gold;
}
실제 적용된 모습

<백분율(%)> 단위 값

컨테이닝 블록(containing block)의 너비에 대한 백분율로 정의합니다. (음수 값은 유효하지 않습니다.)

예제
HTML 
<div class="parent">
    <p class="child">부모 요소(컨테이닝 블록)의 너비에 대한 백분율로 정의합니다.</p>
</div>
CSS 
.parent {
    background-color: silver;
}
.child {
    width: 50%;
    background-color: gold;
}
실제 적용된 모습

auto

초깃값이며, 브라우저가 너비를 자동으로 결정합니다.
이때 브라우저가 너비를 결정하는 요인은 크게 두 가지입니다.

  • 일반적인 문서 흐름에 배치된 요소
  • 일반적이지 않은 문서 흐름에 배치된 요소
일반적인 문서 흐름에 배치된 요소

일반적인 문서 흐름에 배치된 요소는 display 속성 값이 어떻게 설정되어 있는지에 따라 달라집니다.

display: block, display: flex, display: grid

display: block, display: flex, display: grid 등으로 설정된 요소는 부모 컨테이너의 너비를 꽉 채웁니다. 이 때, 부모 요소에 안쪽 여백을 설정하는 padding이 있거나, 자식 요소인 자신에 바깥쪽 여백인 margin이 있으면, 이 여백들과 함께 꽉 채우게 됩니다.

단, <img>, <iframe>, <input>, <button> 등과 같은 대체 요소는 콘텐츠의 너비와 동일합니다.

display: inline

display: inline 값이 설정된 요소들 중에서 대체 요소에만 적용이 가능하고 너비는 콘텐츼의 너비와 동일합니다.

display: inline-block, display: inline-flex, display: inline-grid

display: inline-block, display: inline-flex, display: inline-grid 등으로 설정된 요소는 콘텐츠의 너비와 동일합니다.

일반적이지 않은 문서 흐름에 배치된 요소

일반적이지 않은 문서 흐름이란 다음과 같은 경우입니다.

  • float이 설정된 경우
  • position: absolute 또는 position: fixed가 설정된 경우
  • 플렉스 박스의 아이템으로 사용되는 경우
  • 그리드 박스의 아이템으로 사용되는 경우

이러한 경우에는 일반적인 문서 흐름을 벗어나 독자적인 레이아웃으로 배치되기 때문에 설정되어 있는 display 속성 값과는 상관없이 다음과 같이 결정됩니다.

  • float이 설정된 경우에는 콘텐츠의 폭(fit-content 크기)이 너비가 됩니다.
  • position: absolute 또는 position: fixed가 설정된 경우에는 left와 right 속성의 값이 모두 auto 값이 아닌 값으로 지정되어 있을 경우에는 그 차이의 폭이 너비가 됩니다. 이 경우를 제외하면 콘텐츠의 폭(fit-content 크기)이 너비가 됩니다.
  • 플렉스 박스의 아이템으로 사용되는 경우에는 플렉스 컨테이너에 설정된 레이아웃에 따라 달라집니다.
  • 그리드 박스의 아이템으로 사용되는 경우에는 그리드 컨테이너에 설정된 레이아웃에 따라 달라집니다.

max-content

width 속성에서 max-content 값은 텍스트나 인라인 콘텐츠의 경우, 오버플로가 발생하더라도 전혀 자동 줄바꿈(soft-wrapping)을 수행하지 않고, 텍스트나 인라인 콘텐츠를 모두 펼쳐서 표시할 수 있는 이상적으로 충분히 차지할 수 있는 가장 작은 크기를 의미합니다. 블록 콘텐츠는 그 고유 너비를 그대로 의미합니다.

max-content는 그 콘텐츠가 차지하는 최적의 충분한 너비만큼 요소의 크기를 맞추는 역할을 합니다.
예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 max-content</p>
    <p class="child">width의 max-content 값의 이해</p>
    <p class="child">width의 max-content 값은 그 콘텐츠가 차지하는 최적의 충분한 너비만큼 요소의 크기를 맞추는 역할</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: max-content;
    background-color: gold;
}
실제 적용된 모습
주의할 점

위 예제에서 적용된 모습을 보면 알 수 있듯이, max-content는 해당 요소의 콘텐츠 길이만을 고려하여, 너비를 설정합니다. 컨테이닝 블록(containing block)의 너비나 레이아웃 제약 조건은 고려하지 않습니다.

만약 해당 요소의 max-content 값으로 구현되는 콘텐츠의 너비가 컨테이닝 블록(containing block)의 너비보다 클 경우에는 오버플로(overflow, 경계를 넘어섬)가 발생하여 콘텐츠가 컨테이닝 블록(containing block)의 경계를 넘어설 수 있습니다.

min-content

width 속성에서 min-content 값은 해당 요소의 콘텐츠인 텍스트나 인라인 콘텐츠의 경우 자동 줄바꿈(soft-wrapping)할 수 있으면 모두 줄바꿈하여 가장 큰 단어나 인라인 콘텐츠만큼 작아짐을 의미합니다.

이 값은 컨테이닝 블록(containing block)의 너비나 레이아웃에 영향을 받지 않으며, 콘텐츠 자체만을 기준으로 계산됩니다.

예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 min-content</p>
    <p class="child">width의 min-content 값의 이해</p>
    <p class="child">codingeverybody{} 모든 사람을 위한 코딩 학습서입니다.</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: min-content;
    background-color: gold;
}
실제 적용된 모습

fit-content

width 속성에서 fit-content 값은 컨테이닝 블록(containing block)의 너비나 레이아웃 제약을 고려하여,
요소의 너비를 min-content와 max-content 사이의 적합한 값으로 설정합니다.

예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 fit-content</p>
    <p class="child">width의 fit-content 값의 이해</p>
    <p class="child">containing block의 너비나 레이아웃 제약을 고려하여 min-content와 max-content 사이의 적합한 값으로 설정합니다.</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: fit-content;
    background-color: gold;
}
실제 적용된 모습

min-width와 max-width와의 관계

주의할 점

display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)일 경우와 table rows(<tr>), row groups(<thead>, <tbody>, <tfoot>)인 요소에서는 width 속성이 적용되지 않습니다.

HTML 
<span>display가 inline</span>
CSS width: 50px;은 적용되지 않습니다. 
span {
    display: inline; /* 이 값을 지정하지 않아도 span 요소의 display 초깃값은 inline이다. */
    width: 50px;
    background-color: gold;
}

width: 50px;은 적용되지 않습니다. 자신 요소의 보여지는 콘텐츠의 너비가 적용됩니다.

실제 적용된 모습

table columns(<col> ), column groups(<colgroup>)인 요소에서는 width가 min-width처럼 작동합니다.

형식 정의

width 속성의 형식 정의
초깃값 auto
적용 요소
  • 일반적인 문서 흐름에서는 대체되지 않은 display: inline을 제외한 모든 요소
  • float이 설정된 모든 요소
  • position: absolute 또는 position: fixed가 설정된 모든 요소
  • 플렉스 박스의 아이템인 모든 요소
  • 그리드 박스의 아이템인 모든 요소
하지만, table rows(<tr>), row groups(<thead>, <tbody>, <tfoot>)는 제외
상속 아니오
애니메이션 <길이> 단위 값, <백분율(%)> 단위 값, calc()로 계산된 값

브라우저 호환성

width 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
width 1 12 1 1
max-content 46 79 66 11
min-content 46 79 66 11
fit-content 46 79 94 11

명세서

width 속성의 명세서 사양
명세서 사양
width CSS Box Sizing Module Level 4
#width-height-keywords

참고문헌

같이 보기