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

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

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

{{cssxref("min-height")}}와 {{cssxref("max-height")}} 속성은 height를 덮어씁니다.

+ +

구문

+ +
/* 키워드 */
+height: auto;
+
+/* <length> */
+height: 120px;
+height: 10em;
+
+/* <percentage> */
+height: 75%;
+
+/* 전역 값 */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

값

+ +
+
{{cssxref("<length>")}}
+
높이의 절대값.
+
{{cssxref("<percentage>")}}
+
컨테이닝 블록 높이의 백분율.
+
border-box {{experimental_inline}}
+
앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 보더 박스에 적용.
+
content-box {{experimental_inline}}
+
앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 콘텐츠 박스에 적용.
+
auto
+
브라우저가 요소의 너비를 계산하고 선택.
+
fill {{experimental_inline}}
+
글쓰기 방향에 따라 fill-available 인라인 크기 또는 fill-available 블록 크기를 사용.
+
max-content {{experimental_inline}}
+
본질적인 선호 높이.
+
min-content {{experimental_inline}}
+
본질적인 최소 높이.
+
available {{experimental_inline}}
+
컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.
+
fit-content {{experimental_inline}}
+
다음 중 더 큰 값. +
    +
  • 본질적인 최소 너비
    • +
  • 본질적인 선호 너비와 사용 가능한 너비 중 작은 값
    • +
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<div id="taller">제 키는 50픽셀입니다.</div>
+<div id="shorter">제 키는 25픽셀입니다.</div>
+<div id="parent">
+  <div id="child">
+    제 키는 부모의 절반입니다.
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

결과

+ +

{{EmbedLiveSample('예제', 'auto', 240)}}

+ +

접근성 고려사항

+ +

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

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#width-and-height', 'height')}}{{Spec2('CSS3 Box')}}Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Lists height as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Initial definition.
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Adds new sizing keywords for width and height.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

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