CSS width
속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, 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.
구문
/* <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>))
의 결과.
형식 구문
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 |
Percentages | refer to the width of the containing block |
Computed value | a percentage or auto or the absolute length |
Animation type | a length, percentage or calc(); |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.