width

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

시도해보기

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

구문

css
/* <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>))의 결과.

형식 구문

width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-element> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

예제

기본 너비

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

px과 em

css
.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;
}
html
<div class="px_length">픽셀 너비</div>
<div class="em_length">em 너비</div>

백분율

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

max-content

css
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;
}
html
<p class="maxgreen">
  Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.
</p>

min-content

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

접근성 고려사항

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

명세

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values
초기값auto
적용대상all elements but non-replaced inline elements, table rows, and row groups
상속no
Percentagesrefer to the width of the containing block
계산 값a percentage or auto or the absolute length
Animation typea length, percentage or calc();

브라우저 호환성

BCD tables only load in the browser

같이 보기