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` 속성은 다음과 같이 지정합니다.

* `min-content`, `max-content`, `fit-content`, `auto` 키워드 중 하나.
* 하나의 `<length>` 또는 `<percentage>` 값.
### 값

* `<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,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--

### 기본 너비


```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` 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0
명세
--

| 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 |
| Percentages | refer to the width of the containing block |
| 계산 값 | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 박스 모델, `height`, `box-sizing`, `min-width`, `max-width`