width

CSS width 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정합니다.

min-width와 max-width 속성은 width를 덮어씁니다.

구문

/* <length> */
width: 300px;
width: 25em;

/* <percentage> */
width: 75%;

/* 키워드 */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content(20em);
width: auto;

/* 전역 값 */
width: inherit;
width: initial;
width: unset;

width 속성은 다음과 같이 지정합니다.

값

<length>
너비의 절댓값.
<percentage>
컨테이닝 블록 너비의 백분율. 컨테이닝 블록이 요소 너비에 영향을 받는 경우의 결과 레이아웃은 정해지지 않습니다.
auto
요소의 너비를 브라우저가 계산해 지정합니다.
max-content
본질적인 선호 너비.
min-content
본질적인 최소 너비.
fit-content(<length-percentage>
min(max-content, max(min-content, <length-percentage>))의 결과.

형식 구문

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>

예제

기본 너비

p.goldie {
  background: gold;
}
<p class="goldie">모질라 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p>

px과 em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class="px_length">픽셀 너비</div>
<div class="em_length">em 너비</div>

백분율

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">백분율 너비</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  width: max-content;
}
<p class="maxgreen">Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
  width: min-content;
}
<p class="minblue">Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p>

접근성 고려사항

페이지를 확대하거나 글꼴 크기를 늘렸을 때 width 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

명세

Specification Status Comment
CSS Box Sizing Module Level 4
The definition of 'width' in that specification.		 Editor's Draft
CSS Box Sizing Module Level 3
The definition of 'width' in that specification.		 Working Draft Added the max-content, min-content, fit-content keywords.
CSS Level 2 (Revision 1)
The definition of 'width' in that specification.		 Recommendation Precises on which element it applies to.
CSS Level 1
The definition of 'width' in that specification.		 Recommendation Initial definition.
초기값auto
적용대상all elements but non-replaced inline elements, table rows, and row groups
상속no
Percentagesrefer to the width of the containing block
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();

브라우저 호환성

BCD tables only load in the browser

같이 보기