1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: height
slug: Web/CSS/height
tags:
- CSS
- CSS Property
- Reference
translation_of: Web/CSS/height
---
<div>{{CSSRef}}</div>
<p><strong><code>height</code></strong> CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, {{cssxref("box-sizing")}}이 <code>border-box</code>라면 테두리 영역의 높이를 설정합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div>
<p>{{cssxref("min-height")}}와 {{cssxref("max-height")}} 속성은 <code>height</code>를 덮어씁니다.</p>
<h2 id="구문">구문</h2>
<pre class="brush:css no-line-numbers">/* 키워드 */
height: auto;
/* <length> */
height: 120px;
height: 10em;
/* <percentage> */
height: 75%;
/* 전역 값 */
height: inherit;
height: initial;
height: unset;
</pre>
<h3 id="값">값</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>높이의 절대값.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이의 백분율.</dd>
<dt><code>border-box</code> {{experimental_inline}}</dt>
<dd>앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 보더 박스에 적용.</dd>
<dt><code>content-box</code> {{experimental_inline}}</dt>
<dd>앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 콘텐츠 박스에 적용.</dd>
<dt><code>auto</code></dt>
<dd>브라우저가 요소의 너비를 계산하고 선택.</dd>
<dt><code>fill</code> {{experimental_inline}}</dt>
<dd>글쓰기 방향에 따라 <code>fill-available</code> 인라인 크기 또는 <code>fill-available</code> 블록 크기를 사용.</dd>
<dt><code>max-content</code> {{experimental_inline}}</dt>
<dd>본질적인 선호 높이.</dd>
<dt><code>min-content</code> {{experimental_inline}}</dt>
<dd>본질적인 최소 높이.</dd>
<dt><code>available</code> {{experimental_inline}}</dt>
<dd>컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.</dd>
<dt><code>fit-content</code> {{experimental_inline}}</dt>
<dd>다음 중 더 큰 값.
<ul>
<li>본질적인 최소 너비</li>
<li>본질적인 선호 너비와 사용 가능한 너비 중 작은 값</li>
</ul>
</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="taller">제 키는 50픽셀입니다.</div>
<div id="shorter">제 키는 25픽셀입니다.</div>
<div id="parent">
<div id="child">
제 키는 부모의 절반입니다.
</div>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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%;
}
</pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample('예제', 'auto', 240)}}</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p>페이지를 확대하거나 글꼴 크기를 늘렸을 때 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">height</span></font> 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#width-and-height', 'height')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Lists <code>height</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#height', 'height')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
<td>{{Spec2('CSS3 Sizing')}}</td>
<td>Adds new sizing keywords for width and height.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.height")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/en-US/docs/CSS/box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
</ul>
|
