From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/width/index.html | 200 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 files/ko/web/css/width/index.html (limited to 'files/ko/web/css/width') diff --git a/files/ko/web/css/width/index.html b/files/ko/web/css/width/index.html new file mode 100644 index 0000000000..130c81148a --- /dev/null +++ b/files/ko/web/css/width/index.html @@ -0,0 +1,200 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/width +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/width.html")}}
+ + + +

{{cssxref("min-width")}}와 {{cssxref("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 속성은 다음과 같이 지정합니다.

+ + + +

값

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

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

기본 너비

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

{{EmbedLiveSample('기본_너비', '500px', '64px')}}

+ +

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>
+ +

{{EmbedLiveSample('px과_em', '500px', '64px')}}

+ +

백분율

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

{{EmbedLiveSample('백분율', '500px', '64px')}}

+ +

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>
+ +

{{EmbedLiveSample('max-content_2', '500px', '64px')}}

+ +

min-content

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

{{EmbedLiveSample('min-content_2', '500px', '155px')}}

+ +

접근성 고려사항

+ +

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

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Added the max-content, min-content, fit-content keywords.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Precises on which element it applies to.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Initial definition.
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.width")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf