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/max-width/index.html | 173 ++++++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 files/ko/web/css/max-width/index.html (limited to 'files/ko/web/css/max-width') diff --git a/files/ko/web/css/max-width/index.html b/files/ko/web/css/max-width/index.html new file mode 100644 index 0000000000..92f8727cbf --- /dev/null +++ b/files/ko/web/css/max-width/index.html @@ -0,0 +1,173 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

max-width CSS 속성은 요소의 최대 너비를 설정합니다. max-width는 {{cssxref("width")}} 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.

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

max-width가 {{cssxref("width")}}를 재설정하고, {{cssxref("min-height")}}가 max-width를 재설정합니다.

+ +

구문

+ +
/* <length> 값 */
+max-width: 3.5em;
+
+/* <percentage> 값 */
+max-width: 75%;
+
+/* 키워드 값 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* 전역 값 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

값

+ +
+
{{cssxref("<length>")}}
+
고정 길이로 나타낸 최대 너비.
+
{{cssxref("<percentage>")}}
+
컨테이닝 블록 너비에 대한 백분율로 나타낸 최대 너비.
+
+ +

키워드 값

+ +
+
none
+
최대 너비를 정하지 않음.
+
max-content {{experimental_inline()}}
+
본질적인 선호 높이.
+
min-content {{experimental_inline()}}
+
본질적인 최소 높이.
+
fill-available {{experimental_inline()}}
+
컨테이닝 블록의 높이에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)
+
fit-content {{experimental_inline()}}
+
max-content와 동일.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

다음 예제에서, 자식(child) 요소의 너비는 150픽셀과 부모(parent) 요소의 너비 중 더 작은 값이 됩니다.

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

fit-content 값을 사용하여 해당 요소의 내용이 필요로 하는 너비만 차지하도록 설정할 수 있습니다.

+ +
+ + +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

접근성 고려사항

+ +

페이지의 확대 또는 글씨 크기를 키운 후에도 max-width를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defines max-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

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