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
|
---
title: <percentage>
slug: Web/CSS/percentage
tags:
- CSS
- CSS Data Type
- Layout
- Reference
- Web
translation_of: Web/CSS/percentage
---
<div>{{CSSRef}}</div>
<p><strong><code><percentage></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("font-size")}} 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.</p>
<div class="note"><strong>참고:</strong> 계산된 값만 상속받을 수 있습니다. 따라서 부모 속성이 백분율 값을 사용하더라도 전달되는 값은 실제값(예컨대 너비의 {{cssxref("<length>")}} 값은 픽셀)이며 백분율 값은 접근할 수 없습니다.</div>
<h2 id="구문">구문</h2>
<p><code><percentage></code> 자료형은 {{cssxref("<number>")}}와 그 뒤의 백분율 기호(<code>%</code>)로 표기합니다. 선택적으로 하나의 <code>+</code> 또는 <code>-</code> 기호로 부호를 표기할 수 있지만, 음의 값은 어떤 속성에서도 유효하지 않습니다. 다른 CSS 단위와 마찬가지로 숫자와 기호 사이에 공백은 없습니다.</p>
<h2 id="보간">보간</h2>
<p>애니메이션에서 <code><percentage></code> 자료형의 값은 유동소수점 실수를 사용해 보간됩니다. 보간의 속도는 애니메이션과 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정합니다.</p>
<h2 id="예제"><strong>예제</strong></h2>
<h3 id="width와_margin-left"><code>width</code>와 <code>margin-left</code></h3>
<pre class="brush: html"><div style="background-color:blue;">
<div style="width:50%; margin-left:20%; background-color:lime;">
width: 50%, margin-left: 20%
</div>
<div style="width:30%; margin-left:60%; background-color:pink;">
width: 30%, margin-left: 60%
</div>
</div>
</pre>
<p>{{EmbedLiveSample('width와_margin-left', '600', 140)}}</p>
<h3 id="font-size"><code>font-size</code></h3>
<pre class="brush: html"><div style="font-size:18px;">
<p>원본 텍스트 (18px)</p>
<p><span style="font-size:50%;">50%</span></p>
<p><span style="font-size:200%;">200%</span></p>
</div>
</pre>
<p>{{EmbedLiveSample('font-size', 'auto', 160)}}</p>
<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 Values', '#percentages', '<percentage>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>No significant change from CSS Level 2 (Revision 1).</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No change from CSS Level 1.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#percentage-units', '<percentage>')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.types.percentage")}}</p>
|
