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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: <gradient>
slug: Web/CSS/gradient
tags:
- CSS
- CSS Data Type
- CSS Images
- Graphics
- Layout
- Reference
- 그라데이션
- 그레이디언트
translation_of: Web/CSS/gradient
---
<div>{{CSSRef}}</div>
<p><strong><code><gradient></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("<image>")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.</p>
<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div>
<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
<p>CSS 그레이디언트는 <a href="/ko/docs/Web/CSS/image#no_intrinsic">원본 크기가 없습니다</a>. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.</p>
<h2 id="구문">구문</h2>
<h3 id="그레이디언트_함수">그레이디언트 함수</h3>
<p><code><gradient></code> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.</p>
<h4 id="선형_그레이디언트">선형 그레이디언트</h4>
<p>가상의 선을 따라 여러 색 사이를 전이합니다. {{cssxref("linear-gradient()")}} 함수를 사용해 생성합니다.</p>
<div class="hidden">
<pre class="brush: html"><div class="linear-gradient">선형 그레이디언트</div>
</pre>
<pre class="brush: css">div {
width: 240px;
height: 80px;
}</pre>
</div>
<pre class="brush: css">.linear-gradient {
background: linear-gradient(to right,
red, orange, yellow, green, blue, indigo, violet);
}</pre>
<p>{{EmbedLiveSample('선형_그레이디언트', 240, 80)}}</p>
<h4 id="원형_그레이디언트">원형 그레이디언트</h4>
<p>중심점으로부터 바깥으로 여러 색 사이를 전이합니다. {{cssxref("radial-gradient()")}} 함수를 사용해 생성합니다.</p>
<div class="hidden">
<pre class="brush: html"><div class="radial-gradient">원형 그레이디언트</div>
</pre>
<pre class="brush: css">div {
width: 240px;
height: 80px;
}</pre>
</div>
<pre class="brush: css">.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
</pre>
<p>{{EmbedLiveSample('원형_그레이디언트', 240, 80)}}</p>
<h4 id="반복_그레이디언트">반복 그레이디언트</h4>
<p>요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. {{cssxref("repeating-linear-gradient()")}}나 {{cssxref("repeating-radial-gradient()")}} 함수를 사용해 생성합니다.</p>
<div class="hidden">
<pre class="brush: html"><div class="linear-repeat">반복하는 선형 그레이디언트</div>
<br>
<div class="radial-repeat">반복하는 원형 그레이디언트</div>
</pre>
<pre class="brush: css">div {
width: 240px;
height: 80px;
}</pre>
</div>
<pre class="brush: css">.linear-repeat {
background: repeating-linear-gradient(to top left,
lightpink, lightpink 5px, white 5px, white 10px);
}
.radial-repeat {
background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}</pre>
<p>{{EmbedLiveSample('반복_그레이디언트', 220, 180)}}</p>
<h4 id="원뿔_그레이디언트">원뿔 그레이디언트</h4>
<p>원을 따라 여러 색 사이를 전이합니다. {{cssxref("conic-gradient", "conic-gradient()")}} 함수를 사용해 생성합니다.</p>
<div class="hidden">
<pre class="brush: html"><div class="conic-gradient">원뿔 그레이디언트</div>
</pre>
<pre class="brush: css">div {
width: 200px;
height: 200px;
}</pre>
</div>
<pre class="brush: css">.conic-gradient {
background: conic-gradient(lightpink, white, powderblue);
}
</pre>
<p>{{EmbedLiveSample('원뿔_그레이디언트', 240, 80)}}</p>
<h2 id="보간">보간</h2>
<p>색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 {{cssxref("<color>", "", "#transparent_키워드")}} 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.</p>
<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 Images', '#gradients', '<gradient>')}}</td>
<td>{{Spec2('CSS4 Images')}}</td>
<td>Adds conic-gradient.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.types.image.gradient")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/CSS/Using_CSS_gradients" title="Using gradients">CSS 그레이디언트 사용하기</a></li>
<li>그레이디언트 함수: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
</ul>
|
