width

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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;
width: auto;

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

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

• available, min-content, max-content, fit-content, auto 키워드 중 하나.
• 하나의 <length> 또는 <percentage>. 선택적으로 border-box, content-box 키워드를 뒤에 덧붙일 수 있음.

값

<length>

너비의 절대값.

<percentage>

컨테이닝 블록 너비의 백분율. 컨테이닝 블록이 요소 너비에 영향을 받는 경우의 결과 레이아웃은 정해지지 않습니다.

border-box

앞선 <length> 또는 <percentage>가 요소의 보더 박스에 적용.

content-box

앞선 <length> 또는 <percentage>가 요소의 콘텐츠 박스에 적용.

auto

브라우저가 요소의 너비를 계산하고 선택.

fill

글쓰기 방향에 따라 fill-available 인라인 크기 또는 fill-available 블록 크기를 사용.

max-content

본질적인 선호 너비.

min-content

본질적인 최소 너비.

available

컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.

fit-content

다음 중 더 큰 값.

• 본질적인 최소 너비
• 본질적인 선호 너비와 사용 가능한 너비 중 작은 값

형식 구문

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

예제

기본 너비

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 */
}

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

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}

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

접근성 고려사항

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

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0

명세

브라우저 호환성

같이 보기

• box model, height, box-sizing, min-width, max-width