그라데이션

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 background-image 속성(및 background 단축형 속성의 image 값), list-style-image 속성, 생성된 콘텐츠 등 이미지를 허용하는 모든 속성에서 CSS3(Cascading Style Sheets, Level 3) 그라데이션을 지원합니다. 그라데이션은 CSS3 이미지 값 및 대체된 콘텐츠 모듈의 그라데이션 섹션에 지정된 대로 작동하며, 이 글을 쓰는 시점에 후보 권고안입니다.

그라데이션은 한 색에서 다른 색으로 매끄럽게 전환하는 이미지입니다. Internet Explorer 10은 선형, 원형 및 타원형 CSS3 그라데이션을 지원합니다. 각 그라데이션은 그라데이션 선과 둘 이상의 중단점으로 지정됩니다. 각 중단점에는 고유한 색이 있으며, Windows Internet Explorer는 각 중단점 집합 사이의 영역을 한 색에서 다른 색으로의 연속적인 전환으로 채웁니다.

선형 그라데이션

선형 그라데이션에서는 색이 선을 따라 매끄럽게 전환됩니다. 선형 그라데이션을 만들려면 먼저 그라데이션이 따를 그라데이션 선을 지정하고 둘 이상의 색 중단점을 쉼표로 구분하여 지정합니다. 기본 선형 그라데이션 구문은 다음과 같습니다.

linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

함수설명

linear-gradient()

그라데이션 선과 둘 이상의 중단점 색 및 오프셋을 지정하여 선형 그라데이션을 지정합니다.

가능한 속성 값은 다음과 같습니다.

<angle>

옵션. 그라데이션 선이 가정해야 하는 각도로, 숫자와 각도 단위 지정자로 표현됩니다(예: "deg").

"0deg"는 위쪽을 가리키고 양수 각도는 시계 방향으로 증가합니다. 따라서 "90deg"는 오른쪽을 가리키고, "180deg"는 아래쪽을 가리킵니다.

각도를 제공하지 않으면 그라데이션 선이 <side-or-corner>에 지정된 모서리나 측면의 반대쪽 모서리나 측면에서 시작됩니다.

<side-or-corner>

그라데이션의 끝 모서리나 측면을 지정하는 옵션 값입니다. 이 값은 "to"로 시작하고, 그 뒤에 다음 키워드 중 한두 개가 추가됩니다. 한 키워드를 포함하면 끝 측면이 지정되고, 두 키워드는 끝 모서리를 지정합니다.

  • 다음 값은 첫 번째 값으로만 사용할 수 있습니다.
    • left  그라데이션이 왼쪽에서 끝나도록 지정합니다.
    • right  그라데이션이 오른쪽에서 끝나도록 지정합니다.
  • 다음 값은 두 번째 값으로만 사용할 수 있습니다.
    • top  그라데이션이 맨 위에서 끝나도록 지정합니다.
    • bottom  그라데이션이 맨 아래에서 끝나도록 지정합니다.
  • 키워드나 각도를 포함하지 않는 것은 "to bottom"과 같습니다.
<color-stop>

둘 이상의 색 중단점이 필요합니다. 각 색 중단점에는 한두 개의 구성 요소(색 구성 요소 및 선택적 위치 구성 요소)가 있습니다.

첫 번째 구성 요소는 그라데이션 중단점의 색 구성 요소를 정의합니다. 각 중단점에는 지정된 색이 있으며 각 중단점 사이의 영역이 한 색에서 다른 색으로의 연속된 색 전환으로 채워집니다. 이 값은 지원되는 임의 색 값일 수 있습니다.

각 중단점에는 그라데이션 선에서 색 중단점을 배치할 위치를 나타내는 선택적 백분율이나 지원되는 길이 값이 포함될 수 있습니다. "0%"(또는 "0px", "0em" 등)는 시작 지점(또는 측면)을 나타내고, "100%"는 끝 지점(또는 측면)을 나타냅니다.

 

다음 선형 그라데이션(background-image 속성의 인수로 사용됨)에는 세 개의 색 중단점이 있습니다.

  • 첫 번째 색 중단점은 오른쪽 위에 있으며, 왼쪽 아래로 확장되는 그라데이션 선을 정의합니다. 첫 번째 중단점은 노란색 음영입니다.
  • 두 번째 색 중단점은 그라데이션 선의 중간 지점이며 녹색 음영입니다.
  • 마지막 색 중단점은 그라데이션 선의 80% 지점이며 파란색 음영입니다. 이 중단점부터 그라데이션 선 끝까지(80%와 100% 사이)는 이 파란색 음영이 유지됩니다.

그라데이션 선은 사각형의 오른쪽 위 모서리에서 시작하고 왼쪽 아래 모서리에서 끝납니다. 실제 각도는 그라데이션이 채우는 요소의 크기에 따라 달라집니다.

오른쪽 위 모서리에서 시작하는 선형 그라데이션 예제

background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);


동일한 크기 상자(250px×150px)와 함께 각도를 사용하여 이 그라데이션을 복제하려면 다음을 지정합니다.


background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%);

물론, 채우기 영역의 크기가 변경되면 이러한 두 그라데이션이 다르게 표시됩니다. 그라데이션을 지정하는 방법을 결정할 때 이 점을 명심하세요. "to bottom left"를 지정하여 정의된 첫 번째 그라데이션은 여기서 450px-by-150px 상자 안에 표시됩니다.

첫 번째 사각형보다 넓은 사각형의 선형 그라데이션 이미지

"210deg"룰 지정하여 정의된 두 번째 그라데이션은 여기서 동일한 크기 상자 안에 표시됩니다.

노란색을 더 많이 표시하는 넓은 사각형의 다른 그라데이션 이미지

방사형 그라데이션

선의 한쪽에서 다른 쪽으로 진행되는 선형 그라데이션과 반대로, 방사형 그라데이션은 단일 지점부터 시작하여 원 또는 타원을 이루면서 바깥쪽으로 매끄럽게 확장됩니다. 방사형 그라데이션을 지정하려면 먼저 중심점을 정의하고 최종(또는 100%) 원 또는 타원의 크기와 모양(타원인 경우)을 정의한 다음 그 사이의 색 중단점을 쉼표로 구분하여 정의합니다. 기본 방사형 그라데이션 구문은 다음과 같습니다.

radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

함수설명

radial-gradient()

먼저 중심점을 정의하고 최종(또는 100%) 원이나 타원의 크기와 모양(타원의 경우)을 정의한 다음 사이의 중단점을 쉼표로 구분하여 정의하는 방법으로 방사형 그라데이션을 지정합니다.

가능한 속성 값은 다음과 같습니다.

<shape>

그라데이션의 끝 모양을 지정하는 선택적 값입니다. 이 값을 생략하면 size 매개 변수가 단일 길이 값인 경우 끝 모양이 원이고, 그렇지 않으면 타원입니다.

  • ellipse  그라데이션이 타원 모양이 되도록 지정합니다.
  • circle  그라데이션이 원 모양이 되도록 지정합니다.
<size>

그라데이션 끝 모양의 크기를 지정하는 선택적 값입니다. 이 값을 생략하면 기본적으로 farthest-corner로 지정됩니다.

  • <length(s)>  

    공백으로 구분된 한두 개의 길이 값 또는 두 개의 백분율입니다.

    지정된 길이 값은 원의 반지름을 나타냅니다.

    두 값(길이 또는 백분율)이 지정된 경우 첫 번째 값은 가로 반지름을 나타내고, 두 번째 값은 세로 반지름을 나타냅니다.

    백분율 값은 해당 그라데이션 상자의 크기를 기준으로 합니다. 백분율은 타원형 그라데이션의 크기를 지정하는 데만 사용할 수 있고 원형 그라데이션의 크기를 지정하는 데 사용할 수 없습니다.

    음수 값은 잘못된 값입니다.

  • closest-side  원형 그라데이션의 경우 이 값은 끝 모양이 중심에 가장 가까운 상자의 측면과 정확하게 일치하도록 원 크기임을 나타냅니다. 타원형 그라데이션의 경우 그라데이션 모양은 중심에 가장 가까운 상자의 세로 및 가로 측면과 정확하게 일치하도록 타원 크기입니다.
  • closest-corner  중심에서 가장 가까운 상자의 모서리와 정확하게 일치하도록 그라데이션 모양의 크기를 지정합니다. 타원형 그라데이션의 경우 그라데이션 모양은 closest-side가 지정된 경우와 동일한 너비 대 높이 비율을 갖습니다.
  • farthest-side  중심에서 가장 먼 상자의 측면이나(원형 그라데이션의 경우) 가장 먼 세로 및 가로 측면(타원형 그라데이션의 경우)과 일치하도록 그라데이션 모양의 크기가 지정된다는 점을 제외하고 closest-side와 유사합니다.
  • farthest-corner  중심에서 가장 먼 상자의 모서리와 정확하게 일치하도록 그라데이션 모양의 크기를 지정합니다. 타원형 그라데이션의 경우 그라데이션 모양은 farthest-side가 지정된 경우와 동일한 너비 대 높이 비율을 갖습니다.
<position>

그라데이션의 중심을 지정하는 선택적 값입니다. 이 값은 background-position 속성과 동일한 값을 가질 수 있습니다. 이 값을 생략하면 기본적으로 center로 지정됩니다.

<color-stop>

둘 이상의 색 중단점이 필요합니다. 각 색 중단점에는 한두 개의 구성 요소(색 구성 요소 및 선택적 위치 구성 요소)가 있습니다.

첫 번째 구성 요소는 그라데이션 중단점의 색 구성 요소를 정의합니다. 각 중단점에는 지정된 색이 있으며 각 중단점 사이의 영역이 한 색에서 다른 색으로의 연속된 색 전환으로 채워집니다. 이 값은 지원되는 임의 색 값일 수 있습니다.

두 번째 구성 요소는 그라데이션 레이(linear-gradient의 그라데이션 선과 유사하지만 중심에서 바깥쪽을 가리킴)에서 색 중단점을 배치할 위치를 나타내는 선택적 백분율 또는 소수 값입니다. "0%"는 그라데이션 레이 시작을 나타내고, "100%"는 그라데이션 레이가 끝 모양과 교차하는 지점을 나타냅니다. 예를 들어 값이 "20%"이면 선의 처음부터 시작하여 그라데이션 레이 길이의 20% 지점에 색 중단점을 배치해야 합니다. 값이 음수일 수 있으며, 이 경우 값에 지정한 색이 그라데이션 중심에서 다음 색으로 전환되는 중이므로 중심에 표시되는 색은 지정한 색과 다음 색 사이의 임의 색입니다. 값이 100%보다 클 수 있으며, 이 경우 그라데이션 중심에서 그만큼 더 떨어진 위치를 지정합니다.

 

다른 방사형 그라데이션 구문을 사용하여 동일한 결과를 생성할 수 있는 경우도 많습니다. 예를 들어 다음 세 가지 예제는 모두 250×150 픽셀 div 요소에 적용될 경우 여기 표시된 이미지를 생성합니다.

250-by-150 픽셀 사각형에 적용된 단순 타원형 그라데이션


background-image: radial-gradient(yellow, blue);

background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);

background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);

다음 예제는 이전 예제와 유사하지만 원형 그라데이션이 지정되었습니다.

250-by-150 픽셀 사각형에 적용된 단순 원형 그라데이션

background-image: radial-gradient(circle, yellow, blue);

다음 예제에서는 세 가지 색이 지정되어 있습니다. 선언 중 하나는 여기에 표시된 이미지를 생성합니다.

세 개의 색 중단점이 지정된 타원형 그라데이션

background-image: radial-gradient(#FFF133, #16D611, #00A3EF);

background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);

물론, 그라데이션 상자의 중심이 아닌 위치에서 방사형 그라데이션을 시작할 수도 있습니다. closest-side 또는 farthest-side 키워드를 사용하여 끝 모양이 각각 그라데이션 상자의 가장 가까운 측면이나 가장 먼 측면과 일치하도록 그라데이션의 크기를 지정합니다.

왼쪽 맨 아래 모서리에서 시작하고 세 개의 색상이 포함된 방사형 그라데이션

background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);

다음 예제에서는 그라데이션 상자 왼쪽부터 40px, 그라데이션 상자 위쪽부터 50px 위치에 그라데이션 중심을 설정합니다. 첫 번째 예제는 그라데이션의 끝 모양이 그라데이션 상자의 가장 가까운 측면(즉, 위쪽과 왼쪽)에서 정의되도록 closest-side를 사용합니다.

그라데이션 상자의 왼쪽 위 모서리에 포함된 세 가지 색의 작은 타원형 그라데이션

background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

두 번째 예제는 그라데이션의 끝 모양이 그라데이션 상자의 가장 먼 측면(즉, 오른쪽과 아래쪽)에서 정의되도록 farthest-side를 사용합니다.

그라데이션 상자의 오른쪽 아래에서 끝나는 세 가지 색의 큰 타원형 그라데이션

background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

원형 그라데이션과 함께 closest-side 또는 farthest-side를 사용하는 경우 그라데이션 상자의 가장 먼 측면에 의해 크기가 결정됩니다. 다음 closest-side 예제에서 해당 측면은 왼쪽입니다.

그라데이션 상자의 왼쪽 위 모서리에 포함된 세 가지 색의 작은 원형 그라데이션

background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

다음 farthest-side 예제에서 원형 그라데이션의 크기는 그라데이션 상자의 오른쪽에 의해 결정됩니다.

그라데이션 상자의 오른쪽에서 끝나는 세 가지 색의 큰 원형 그라데이션

background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

반복 그라데이션

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 선형 및 방사형 그라데이션 반복도 제공합니다. 각 반복 그라데이션 속성의 구문은 반복하지 않는 형제 항목과 같습니다.

기본 반복 선형 그라데이션 구문은 다음과 같습니다.

repeating-linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

함수설명

repeating-linear-gradient()

그라데이션 선과 둘 이상의 중단점 색 및 오프셋을 지정하여 반복되는 선형 그라데이션을 지정합니다.

가능한 속성 값은 다음과 같습니다.

<angle>

옵션. 그라데이션 선이 가정해야 하는 각도로, 숫자와 각도 단위 지정자로 표현됩니다(예: "deg").

"0deg"는 위쪽을 가리키고 양수 각도는 시계 방향으로 증가합니다. 따라서 "90deg"는 오른쪽을 가리키고, "180deg"는 아래쪽을 가리킵니다.

각도를 제공하지 않으면 그라데이션 선이 <side-or-corner>에 지정된 모서리나 측면의 반대쪽 모서리나 측면에서 시작됩니다.

<side-or-corner>

그라데이션의 끝 모서리나 측면을 지정하는 옵션 값입니다. 이 값은 "to"로 시작하고, 그 뒤에 다음 키워드 중 한두 개가 추가됩니다. 한 키워드를 포함하면 끝 측면이 지정되고, 두 키워드는 끝 모서리를 지정합니다.

  • 다음 값은 첫 번째 값으로만 사용할 수 있습니다.
    • left  그라데이션이 왼쪽에서 끝나도록 지정합니다.
    • right  그라데이션이 오른쪽에서 끝나도록 지정합니다.
  • 다음 값은 두 번째 값으로만 사용할 수 있습니다.
    • top  그라데이션이 맨 위에서 끝나도록 지정합니다.
    • bottom  그라데이션이 맨 아래에서 끝나도록 지정합니다.
  • 키워드나 각도를 포함하지 않는 것은 "to bottom"과 같습니다.
<color-stop>

둘 이상의 색 중단점이 필요합니다. 각 색 중단점에는 한두 개의 구성 요소(색 구성 요소 및 선택적 위치 구성 요소)가 있습니다.

첫 번째 구성 요소는 그라데이션 중단점의 색 구성 요소를 정의합니다. 각 중단점에는 지정된 색이 있으며 각 중단점 사이의 영역이 한 색에서 다른 색으로의 연속된 색 전환으로 채워집니다. 이 값은 지원되는 임의 색 값일 수 있습니다.

각 중단점에는 그라데이션 선에서 색 중단점을 배치할 위치를 나타내는 선택적 백분율이나 지원되는 길이 값이 포함될 수 있습니다. "0%"(또는 "0px", "0em" 등)는 시작 지점(또는 측면)을 나타내고, "100%"는 끝 지점(또는 측면)을 나타냅니다.

 

repeating-linear-gradient 함수 구문은 linear-gradient 함수 구문과 같습니다.

마지막 색 중단점에 도달하면 그라데이션이 첫 번째 색 중단점에서 다시 시작되어 반복됩니다. 첫 번째 및 마지막 색 중단점에 대해 동일한 색을 지정하여 각 반복 그룹 사이에 색이 갑자기 변경되지 않도록 하는 것이 좋습니다.

반복되는 선형 그라데이션 예제는 다음과 같습니다. 두 가지 색(파랑 및 노랑) 사이에 전환됩니다.

두 가지 색의 반복되는 선형 그라데이션 이미지

background-image: repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px);

기본 반복 방사형 그라데이션 구문은 다음과 같습니다.

repeating-radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

함수설명

repeating-radial-gradient()

먼저 중심점을 정의하고 최종(또는 100%) 원이나 타원의 크기와 모양(타원의 경우)을 정의한 다음 사이의 중단점을 쉼표로 구분하여 정의하는 방법으로 반복되는 방사형 그라데이션을 지정합니다.

가능한 속성 값은 다음과 같습니다.

<shape>

그라데이션의 끝 모양을 지정하는 선택적 값입니다. 가능한 값은 공백으로 구분된 두 개의 길이 값(또는 백분율)이나 다음 키워드 중 하나입니다. 이 값을 생략하면 size 매개 변수가 단일 길이 값인 경우 끝 모양이 원이고, 그렇지 않으면 타원입니다.

  • ellipse  그라데이션이 타원 모양이 되도록 지정합니다.
  • circle  그라데이션이 원 모양이 되도록 지정합니다.
<size>

그라데이션 끝 모양의 크기를 지정하는 선택적 값입니다. 이 값을 생략하면 기본적으로 farthest-corner로 지정됩니다.

  • <length(s)>  

    공백으로 구분된 한두 개의 길이 값 또는 두 개의 백분율입니다.

    지정된 길이 값은 원의 반지름을 나타냅니다.

    두 값(길이 또는 백분율)이 지정된 경우 첫 번째 값은 가로 반지름을 나타내고, 두 번째 값은 세로 반지름을 나타냅니다.

    백분율 값은 해당 그라데이션 상자의 크기를 기준으로 합니다. 백분율은 타원형 그라데이션의 크기를 지정하는 데만 사용할 수 있고 원형 그라데이션의 크기를 지정하는 데 사용할 수 없습니다.

    음수 값은 잘못된 값입니다.

  • closest-side  원형 그라데이션의 경우 이 값은 끝 모양이 중심에 가장 가까운 상자의 측면과 정확하게 일치하도록 원 크기임을 나타냅니다. 타원형 그라데이션의 경우 그라데이션 모양은 중심에 가장 가까운 상자의 세로 및 가로 측면과 정확하게 일치하도록 타원 크기입니다.
  • closest-corner  중심에서 가장 가까운 상자의 모서리와 정확하게 일치하도록 그라데이션 모양의 크기를 지정합니다. 타원형 그라데이션의 경우 그라데이션 모양은 closest-side가 지정된 경우와 동일한 너비 대 높이 비율을 갖습니다.
  • farthest-side  중심에서 가장 먼 상자의 측면이나(원형 그라데이션의 경우) 가장 먼 세로 및 가로 측면(타원형 그라데이션의 경우)과 일치하도록 그라데이션 모양의 크기가 지정된다는 점을 제외하고 closest-side와 유사합니다.
  • farthest-corner  중심에서 가장 먼 상자의 모서리와 정확하게 일치하도록 그라데이션 모양의 크기를 지정합니다. 타원형 그라데이션의 경우 그라데이션 모양은 farthest-side가 지정된 경우와 동일한 너비 대 높이 비율을 갖습니다.
<position>

그라데이션의 중심을 지정하는 선택적 값입니다. 이 값은 background-position 속성과 동일한 값을 가질 수 있습니다. 이 값을 생략하면 기본적으로 center로 지정됩니다.

<color-stop>

둘 이상의 색 중단점이 필요합니다. 각 색 중단점에는 한두 개의 구성 요소(색 구성 요소 및 선택적 위치 구성 요소)가 있습니다.

첫 번째 구성 요소는 그라데이션 중단점의 색 구성 요소를 정의합니다. 각 중단점에는 지정된 색이 있으며 각 중단점 사이의 영역이 한 색에서 다른 색으로의 연속된 색 전환으로 채워집니다. 이 값은 지원되는 임의 색 값일 수 있습니다.

두 번째 구성 요소는 그라데이션 레이(linear-gradient의 그라데이션 선과 유사하지만 중심에서 바깥쪽을 가리킴)에서 색 중단점을 배치할 위치를 나타내는 선택적 백분율 또는 소수 값입니다. "0%"는 그라데이션 레이 시작을 나타내고, "100%"는 그라데이션 레이가 끝 모양과 교차하는 지점을 나타냅니다. 예를 들어 값이 "20%"이면 선의 처음부터 시작하여 그라데이션 레이 길이의 20% 지점에 색 중단점을 배치해야 합니다. 값이 음수일 수 있으며, 이 경우 값에 지정한 색이 그라데이션 중심에서 다음 색으로 전환되는 중이므로 중심에 표시되는 색은 지정한 색과 다음 색 사이의 임의 색입니다. 값이 100%보다 클 수 있으며, 이 경우 그라데이션 중심에서 그만큼 더 떨어진 위치를 지정합니다.

 

repeating-radial-gradient 함수 구문은 radial-gradient 함수 구문과 같습니다.

마지막 색 중단점에 도달하면 그라데이션이 첫 번째 색 중단점에서 다시 시작되어 반복됩니다. 첫 번째 및 마지막 색 중단점에 대해 동일한 색을 지정하여 각 반복 그룹 사이에 색이 갑자기 변경되지 않도록 하는 것이 좋습니다.

다음 선언은 반복되는 원형 그라데이션을 만듭니다.


background-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

세 가지 색의 반복되는 원형 그라데이션 이미지

다음 선언은 반복되는 타원형 그라데이션을 만듭니다.


background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);


세 가지 색의 반복되는 타원형 그라데이션 이미지

API 참조

Gradients

샘플 및 자습서

CSS 그라데이션 샘플

Internet Explorer 테스트 드라이브 데모

CSS Gradient Background Maker
Irish Spring

IEBlog 게시물

IE10의 접두사가 없는 CSS3 그라데이션
IE10 Release Preview에서 웹 안정성 향상
IE10 Platform Preview 1의 CSS3 그라데이션

사양

CSS 이미지 값 및 바뀐 콘텐츠 모듈 수준 3(영문): 섹션 4

 

 

표시:
© 2014 Microsoft