initial commit

1 files changed, 160 insertions, 0 deletions

diff --git a/files/ko/web/css/gradient/index.html b/files/ko/web/css/gradient/index.html
new file mode 100644
index 0000000000..aebfab76bf
--- /dev/null
+++ b/files/ko/web/css/gradient/index.html
@@ -0,0 +1,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>&lt;gradient&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("&lt;image&gt;")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.</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>&lt;gradient&gt;</code> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.</p>
+
+<h4 id="선형_그레이디언트">선형 그레이디언트</h4>
+
+<p>가상의 선을 따라 여러 색 사이를 전이합니다. {{cssxref("linear-gradient()")}} 함수를 사용해 생성합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;선형 그레이디언트&lt;/div&gt;
+</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">&lt;div class="radial-gradient"&gt;원형 그레이디언트&lt;/div&gt;
+</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">&lt;div class="linear-repeat"&gt;반복하는 선형 그레이디언트&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="radial-repeat"&gt;반복하는 원형 그레이디언트&lt;/div&gt;
+</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">&lt;div class="conic-gradient"&gt;원뿔 그레이디언트&lt;/div&gt;
+</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("&lt;color&gt;", "", "#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', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Adds conic-gradient.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</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>