From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/gradient/index.html | 160 +++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/ko/web/css/gradient/index.html (limited to 'files/ko/web/css/gradient') 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: +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Graphics + - Layout + - Reference + - 그라데이션 + - 그레이디언트 +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

<gradient> CSS 자료형은 {{cssxref("<image>")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.

+ +
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
+ + + +

CSS 그레이디언트는 원본 크기가 없습니다. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.

+ +

구문

+ +

그레이디언트 함수

+ +

<gradient> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.

+ +

선형 그레이디언트

+ +

가상의 선을 따라 여러 색 사이를 전이합니다. {{cssxref("linear-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}
+ +

{{EmbedLiveSample('선형_그레이디언트', 240, 80)}}

+ +

원형 그레이디언트

+ +

중심점으로부터 바깥으로 여러 색 사이를 전이합니다. {{cssxref("radial-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
+ +

{{EmbedLiveSample('원형_그레이디언트', 240, 80)}}

+ +

반복 그레이디언트

+ +

요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. {{cssxref("repeating-linear-gradient()")}}나 {{cssxref("repeating-radial-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.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);
+}
+ +

{{EmbedLiveSample('반복_그레이디언트', 220, 180)}}

+ +

원뿔 그레이디언트

+ +

원을 따라 여러 색 사이를 전이합니다. {{cssxref("conic-gradient", "conic-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+
+ +

{{EmbedLiveSample('원뿔_그레이디언트', 240, 80)}}

+ +

보간

+ +

색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 {{cssxref("<color>", "", "#transparent_키워드")}} 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#gradients', '<gradient>')}}{{Spec2('CSS4 Images')}}Adds conic-gradient.
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.image.gradient")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf