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
|
---
title: <angle>
slug: Web/CSS/angle
tags:
- CSS
- CSS Data Type
- Data Type
- Layout
- Reference
- Web
- 자료형
translation_of: Web/CSS/angle
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code><angle></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다.</span> {{cssxref("<gradient>")}}나 일부 {{cssxref("transform")}} 함수에서 사용합니다..</p>
<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div>
<h2 id="구문">구문</h2>
<p><code><angle></code> 자료형은 {{cssxref("<number>")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위처럼 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 <code>0</code> 뒤에는 단위를 붙이지 않아도 됩니다.</p>
<p>선택적으로 <code>+</code>, <code>-</code> 부호를 표시할 수 있습니다. 양의 부호는 시계방향 회전을, 음의 부호는 시계 반대방향 회전을 나타냅니다. 정적 속성에선 하나의 각도를 다른 각도로 표현할 수 있습니다. 예컨대 <code>90deg</code>는 <code>-270deg</code>, <code>1turn</code>은 <code>4turn</code>과 동일합니다. 그러나 동적 속성, 즉 {{cssxref("animation")}}이나 {{cssxref("transition")}}에서는 결과가 달라집니다.</p>
<h3 id="단위">단위</h3>
<dl>
<dt><code><a id="deg" name="deg">deg</a></code></dt>
<dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EB%8F%84_(%EA%B0%81%EB%8F%84)">도 단위</a>로 나타냅니다. 1회전은 <code>360deg</code>입니다. 예: <code>0deg</code>, <code>90deg</code>, <code>14.23deg</code></dd>
<dt id="grad"><code><a id="grad" name="grad">grad</a></code></dt>
<dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%A0%88%EC%9D%B4%EB%93%9C">그레이드</a>로 나타냅니다. 1회전은 <code>400grad</code>입니다. 예: <code>0grad</code>, <code>100grad</code>, <code>38.8grad</code></dd>
<dt id="rad"><code><a id="rad" name="rad">rad</a></code></dt>
<dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EB%9D%BC%EB%94%94%EC%95%88">라디안</a>으로 나타냅니다. 1회전은 2π 라디안으로 약 <code>6.2832rad</code>입니다. <code>1rad</code>는 180/π<code>deg</code>입니다. 예: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code></dd>
<dt id="turn"><code><a id="turn" name="turn">turn</a></code></dt>
<dd>각도를 회전의 수로 나타냅니다. 1회전은 <code>1turn</code>입니다. 예: <code>0turn</code>, <code>0.25turn</code>, <code>1.2turn</code></dd>
</dl>
<h2 id="Examples" name="Examples">예제</h2>
<h3 id="시계_방향_우측_90도">시계 방향 우측 90도</h3>
<table style="width: 100%;">
<tbody>
<tr>
<td><img alt="Angle90.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5704/=Angle90.png"></td>
<td><code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></td>
</tr>
</tbody>
</table>
<h3 id="반대로_회전">반대로 회전</h3>
<table style="width: 100%;">
<tbody>
<tr>
<td><img alt="Angle180.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5706/=Angle180.png"></td>
<td><code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td>
</tr>
</tbody>
</table>
<h3 id="시계_반대_방향_우측_90도">시계 반대 방향 우측 90도</h3>
<table style="width: 100%;">
<tbody>
<tr>
<td><img alt="AngleMinus90.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5707/=AngleMinus90.png"></td>
<td><code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td>
</tr>
</tbody>
</table>
<h3 id="회전_없음">회전 없음</h3>
<table style="width: 100%;">
<tbody>
<tr>
<td><img alt="Angle0.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5708/=Angle0.png"></td>
<td><code>0 = 0deg = 0grad = 0turn = 0rad</code></td>
</tr>
</tbody>
</table>
<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('CSS4 Values', '#angles', '<angle>') }}</td>
<td>{{ Spec2('CSS4 Values') }}</td>
<td></td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Values', '#angles', '<angle>') }}</td>
<td>{{ Spec2('CSS3 Values') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.types.angle")}}</p>
|
