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
|
---
title: <integer>
slug: Web/CSS/integer
tags:
- CSS
- CSS Data Type
- Reference
- Web
translation_of: Web/CSS/integer
---
<div>{{CSSRef}}</div>
<p><strong><code><integer></code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("<number>")}}의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} 등 다양한 속성에서 사용할 수 있습니다.</p>
<h2 id="구문">구문</h2>
<p><code><integer></code> 자료형은 하나 이상의 0부터 9까지의 10진수 숫자로 구성하며, 선택적으로 <code>+</code>, <code>-</code>로 부호를 표시할 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.</p>
<div class="note"><strong>참고:</strong> 공식적으로 정해진 <code><integer></code> 값의 범위는 없습니다. Opera 12.1은 최대 2<sup>15</sup>-1, IE는 2<sup>20</sup>-1, 그 외 브라우저는 더 큰 값도 지원합니다. CSS3 Values 논의 중 최소한의 범위를 설정하자는 말이 많아서 가장 최근인 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">2012년 4월 LC 단계</a>에서는 [-2<sup>27</sup>-1; 2<sup>27</sup>-1]으로 결정했습니다. 2<sup>24</sup>-1과 2<sup>30</sup>-1처럼 다른 값도 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">제안</a>됐습니다. 하지만 최신 명세는 범위를 지정하고 있지 않습니다.</div>
<h2 id="보간">보간</h2>
<p>애니메이션에서 <code><integer></code> 자료형의 값은 이산적으로 1씩 변화합니다. 계산은 유동소수점 실수를 사용하며 최종 결과인 이산값은 <a href="https://ko.wikipedia.org/wiki/%EB%B0%94%EB%8B%A5_%ED%95%A8%EC%88%98%EC%99%80_%EC%B2%9C%EC%9E%A5_%ED%95%A8%EC%88%98" title="http://en.wikipedia.org/wiki/Floor_function">버림 함수</a>를 사용해 얻습니다. 보간의 속도는 애니메이션과 연결된 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/single-transition-timing-function" rel="nofollow">타이밍 함수</a>가 결정합니다.</p>
<h2 id="예제">예제</h2>
<h3 id="유효한_정수">유효한 정수</h3>
<pre>12 양의 정수 (부호 표시 없음)
+123 양의 정수 (+ 부호)
-456 음의 정수
0 0
+0 0, 양의 부호
-0 0, 음의 부호
</pre>
<h3 id="유효하지_않은_정수">유효하지 않은 정수</h3>
<pre class="example-bad">12.0 정수를 표현하지만 <interger>가 아닌 <number>
12. 소수점은 불허
+---12 하나의 +/-만 허용
ten 글자는 불허
_5 특수문자는 불허
\35 유니코드 이스케이프 문자는 정수를 표현하더라도 불허 (\35: 5)
\4E94 아라비아 숫자 외의 다른 표현은 이스케이프 후에도 불허 (\4E94: 일본어 五).
3e4 과학적 표기법 불허
</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Values', '#integers', '<integer>')}}</td>
<td>{{Spec2('CSS4 Values')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS3 Values', '#integers', '<integer>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Explicit definition.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '', '<integer>')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Implicit definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("css.types.integer")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{cssxref("<number>")}}</li>
</ul>
|
