---
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>&lt;angle&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다.</span> {{cssxref("&lt;gradient&gt;")}}나 일부 {{cssxref("transform")}} 함수에서 사용합니다..</p>

<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div>



<h2 id="구문">구문</h2>

<p><code>&lt;angle&gt;</code> 자료형은 {{cssxref("&lt;number&gt;")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 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', '&lt;angle&gt;') }}</td>
   <td>{{ Spec2('CSS4 Values') }}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.types.angle")}}</p>