CSS의 그라데이션 배경

  2. 어떻게
  3. CSS 하우투
  4. CSS의 그라데이션 배경
Naila Saad Siddiqui 2023년6월20일
CSS CSS Background
  1. CSS 그라디언트
  2. 색상 배치
  3. 그라데이션 각도 변경
  4. 결론
CSS의 그라데이션 배경

이 간단한 가이드는 HTML 요소에 대한 무지개와 같은 그라데이션 배경을 정의하는 데 사용할 수 있는 CSS 속성의 사용에 관한 것입니다.

CSS 그라디언트

CSS 그래디언트를 사용하여 둘 이상의 지정된 색상 간에 매끄러운 전환을 표시할 수 있습니다. CSS는 세 가지 그라데이션 유형을 식별합니다.

  • 선형 그라디언트(왼쪽, 오른쪽, 위, 아래, 대각선으로 이동)
  • 둥근 그라데이션(중심으로 정의)
  • CONIC Gradients(중심점을 중심으로 회전)

그라디언트는 배경 및 이미지가 사용되는 모든 곳에서 사용할 수 있습니다. 그라디언트는 동적으로 생성되기 때문에 이전에 비슷한 효과를 얻는 데 사용된 비트맵 그래픽 이미지 파일이 필요하지 않습니다.

그라디언트는 즉시 크기를 조정할 수 있으며 브라우저에서 생성하기 때문에 비트맵 이미지보다 확대할 때 더 잘 보입니다.

선형 그래디언트로 시작하여 모든 그래디언트 유형에 적용되는 기능에 대해 설명합니다. 거기에서 방사형 및 원추형 그라데이션으로 이동합니다.

선형 그라데이션

선형 그래디언트를 생성하려면 최소 두 개의 색상 정지점을 정의하는 것이 가장 좋습니다. 부드러운 전환을 만드는 데 필요한 일부 색상을 정의합니다.

이러한 색상을 색상 정지점이라고 합니다. 그라데이션 효과와 함께 시작점과 방향(또는 각도)을 지정할 수 있습니다.

구문 - 선형 기울기:

background-image: linear-gradient(direction, color1, color2, ...);

원하는 수의 색상을 지정할 수 있습니다. 방향도 선택적 인수입니다. 기본적으로 방향은 위에서 아래로 선형입니다.

다음 HTML 페이지에는 높이가 100px인 div와 그라데이션 배경 이미지가 포함되어 있습니다.

<head>
<style>
#myBlock {
  height: 100px;
  background-image: linear-gradient(yellow, grey);
}
</style>
</head>
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

그래디언트의 방향을 지정하지 않았으므로 방향에 대한 값이므로 위에서 아래 방향으로 설정됩니다.

또한 이름이나 각도로 방향을 지정할 수도 있습니다. 다음 예제에서는 왼쪽에서 오른쪽 방향으로 그래디언트를 설정합니다.

#myBlock {
  height: 100px;
  background-image: linear-gradient(to right,blue,pink);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

대각선 위치에서 방향을 지정할 수 있습니다. 이를 위해서는 가로 방향과 세로 방향의 시작 위치를 지정해야 합니다.

#myBlock {
  height: 100px;
  background-image: linear-gradient(to bottom right,grey,yellow,orange);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

색상 설정을 더 잘 제어하기 위해 방향 각도를 지정할 수 있습니다.

#myBlock {
  height: 100px;
  background-image: linear-gradient(160deg,grey,yellow,orange);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

색상 배치

색상 정지점은 기본 위치에 있을 필요가 없습니다. 0, 1 또는 2%의 값을 지정하여 각각의 위치를 조정할 수 있습니다.

백분율로 지정된 위치의 시작점과 끝점은 각각 0%와 100%입니다. 그러나 필요한 경우 원하는 결과를 얻기 위해 해당 범위 밖의 값을 사용할 수 있습니다.

위치를 지정하지 않으면 해당 특정 색상 정지점의 위치가 자동으로 결정됩니다. 첫 번째 및 마지막 색상 정지점은 각각 0% 및 100%에 있으며 추가 색상 정지점은 인접한 색상 정지점 사이의 중간에 있습니다.

세 가지 색상을 사용하고 세 가지 방법으로 위치를 지정한 다음 예를 고려하십시오. 하나는 px로, 하나는 백분율로, 마지막 하나는 위치가 적절하게 설정되도록 그대로 둡니다.

#myBlock {
  height: 100px;
   background: linear-gradient(to right, yellow 28px, red 77%, magenta);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

방사형 그라데이션

선형 그래디언트와 달리 방사형 그래디언트는 중심점에서 바깥쪽으로 방사됩니다. 그 중심점의 위치는 당신에게 달려 있으며 타원형 또는 원형으로 만들 수도 있습니다.

선형 그래디언트와 유사하게 방사형 그래디언트는 두 가지 색상만 사용하면 됩니다. 기본적으로 그래디언트의 중심은 50% 표시에 있으며 상자의 종횡비와 일치하도록 타원형입니다.

구문 - 방사형 그라데이션:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

예를 들어 다음 CSS 코드는 세 가지 색상으로 방사형 그래디언트를 만듭니다. 위치나 모양을 지정하지 않으면 중심점부터 모든 색상이 고르게 퍼집니다.

#myBlock {
  height: 100px;
   background: radial-gradient(red, yellow, magenta);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

방사형 그래디언트의 크기 조정

방사형 그래디언트는 선형 그래디언트와 달리 크기를 지정할 수 있습니다. closest-corner, closest-side, farthest-corner 및 farthest-side 값이 옵션에 있으며 farthest-corner가 기본값으로 제공됩니다.

타원과 원에는 길이와 백분율을 포함한 추가 크기 옵션이 있습니다. 다음 예는 해당 출력과 함께 다양한 크기를 보여줍니다.

#myBlock {
  height: 100px;
   background-image: radial-gradient(closest-side at 65% 50%, magenta, yellow, beige);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

#myBlock {
  height: 100px;
   background-image: radial-gradient(farthest-side at 65% 50%, magenta, yellow, beige);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

원추 기울기

Conic Gradient는 정의된 중심점을 기준으로 색상이 회전하는 그라데이션 유형입니다(중심에서 방사되는 것이 아님). 파이 차트와 컬러 휠은 원추형 그래디언트의 두 가지 예이지만 바둑판과 좀 더 흥미로운 효과를 만드는 데 사용할 수도 있습니다.

원추 기울기 구문은 방사형 기울기 구문과 동일합니다. 그러나 색상 정지점은 절대 길이가 아니라 도 및 백분율 단위로만 정의해야 합니다.

또한 그래디언트 중심에서 나오는 그래디언트 선이 아니라 그래디언트 호 주위에 배치해야 합니다.

구문 - 원뿔 기울기:

background-image: conic-gradient([angle] [position,] color [degree], color [degree], ...);

기본 위치와 각도는 각각 0과 중심입니다.

예를 들어, 정도를 지정하지 않으면 그래디언트의 색상이 중심점 주위에 고르게 분포됩니다.

#myBlock {
  height: 100px;
   background-image: conic-gradient(red, yellow, cyan);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

원추 기울기의 위치

방사형 그래디언트와 유사하게 원추형 그래디언트에서 중심점의 위치를 지정할 수도 있습니다.

다음 코드 예제에서는 중심점의 위치와 모든 색상의 정도를 지정합니다.

#myBlock {
  height: 100px;
   background-image: conic-gradient(at 10% 40%, cyan 10%, magenta 30%, yellow 50%);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

그라데이션 각도 변경

정의하는 색상 목록은 일반적으로 원 주위에 고르게 분포됩니다. 원추형 그래디언트의 시작 각도를 지정하려면 from 키워드를 사용하고 그 뒤에 각도를 지정하십시오.

색상 정지점 뒤에 각도나 길이를 추가하여 색상 정지점에 대해 다른 위치를 지정할 수도 있습니다. 다음 예제에서는 원추형 그래디언트의 중심을 설정하기 위한 각도를 정의합니다.

#myBlock {
  height: 100px;
   background-image: conic-gradient(from 48deg, red, orange 40%, yellow 65%, green);
}

<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>

<div id="myBlock"></div>
</body>

결론

그라데이션 배경을 설정할 수 있는 여러 옵션이 있습니다. 모든 예제에서와 같이 div 요소의 그라데이션 배경을 설정했습니다.

유사한 패턴으로 이 배경은 배경 이미지의 적용을 지원하는 모든 HTML 요소로 설정할 수 있습니다.

관련 문장 - CSS Background