---
title: <number>
slug: Web/CSS/number
tags:
  - CSS
  - CSS Data Type
  - Layout
  - Reference
  - Web
translation_of: Web/CSS/number
---
<div>{{CSSRef}}</div>

<p><strong><code>&lt;number&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">자료형</a>은 숫자, 즉 정수 또는 실수를 표현합니다.</p>

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

<p><code>&lt;number&gt;</code> 구문은 {{cssxref("&lt;integer&gt;")}} 구문을 확장합니다. 소수점 이하 값은 <code>.</code> 뒤로 한 개 이상의 10진수 숫자를 붙여 표현하며, 정수 뒤에 이어 붙일 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.</p>

<h2 id="보간">보간</h2>

<p>애니메이션에서 <code>&lt;number&gt;</code> 자료형의 값은 유동소수점 실수를 사용해 보간합니다. 보간의 속도는 애니메이션과 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function" rel="nofollow">timing function</a>이 결정합니다.</p>

<h2 id="예제">예제</h2>

<h3 id="유효한_숫자">유효한 숫자</h3>

<pre class="syntaxbox example-good">12          &lt;integer&gt;는 &lt;number&gt;
4.01        양의 실수
-456.8      음의 실수
0.0         0
+0.0        0, 양의 부호
-0.0        0, 음의 부호
.60         앞의 0 없는 소수점 이하 값
10e3        과학적 표기법
-3.4e-2     복잡한 과학적 표기법
</pre>

<h3 id="유효하지_않은_숫자">유효하지 않은 숫자</h3>

<pre class="syntaxbox example-bad">12.         소수점 뒤에 최소 하나의 숫자가 존재해야 함
+-12.2      하나의 +/-만 허용
12.1.1      하나의 소수점만 허용
</pre>

<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', '#numbers', '&lt;number&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>No significant change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Explicit definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Implicit definition.</td>
  </tr>
 </tbody>
</table>

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

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

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{cssxref("&lt;integer&gt;")}}</li>
</ul>