Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 그라디언트

그라디언트는 일반적으로 웹 페이지를 미학적으로 보기 좋게 만드는 데 사용됩니다. 일반 색상을 사용하여 상자의 스타일을 지정하는 대신 그라디언트를 사용하면 두 개 이상의 색상 간의 전환을 표시할 수 있으므로 시각적으로 더 매력적이고 눈길을 끌 수 있습니다.

CSS에서 그라디언트를 사용하려면 선형 그라디언트와 방사형 그라디언트의 두 가지 속성을 사용할 수 있습니다. 이러한 속성을 사용하면 각각 선형 및 방사형 그래디언트를 만들 수 있습니다.

이 튜토리얼에서는 CSS에서 선형 및 방사형 그래디언트를 만드는 방법에 대해 몇 가지 예를 들어 설명합니다. 이 튜토리얼을 마치면 CSS에서 그라디언트를 만드는 전문가가 될 것입니다.

CSS 그라디언트

디자인에서 그라디언트는 둘 이상의 색상 간의 전환입니다. 그라디언트는 간단한 전환일 수 있지만 각도, 여러 색상을 포함할 수 있으며 다양한 방식으로 스타일을 지정할 수 있습니다.

CSS에서 지원하는 두 가지 유형의 그라디언트가 있습니다. 이것들은:

  • 선형 그래디언트
  • 방사형 기울기

선형 그라디언트는 위에서 아래로 또는 왼쪽에서 오른쪽으로 두 개 이상의 색상 간에 전환을 만듭니다. 방사형 그라디언트는 모양과 같은 원점에서 방사되는 색상 전환입니다.

CSS에서 그라디언트는 배경 CSS 속성을 사용하여 정의됩니다. 이 속성은 웹 요소의 배경을 만드는 데 사용되며 background-color 및 background-image를 포함한 CSS 배경 속성의 약어입니다.

다음은 background 속성을 사용하는 구문입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

background: typeOfBackground;

이제 CSS에서 그라디언트를 만들 준비가 되었습니다. 선형 그라디언트에 대해 논의하는 것으로 시작하겠습니다.

CSS 선형 그라디언트

선형 그라디언트는 직선을 따라 두 개 이상의 색상 간의 전환입니다.

예를 들어 선형 그라데이션 배경은 요소의 왼쪽에서 오른쪽, 위에서 아래로 또는 왼쪽 아래에서 오른쪽 위 모서리로 나타날 수 있습니다. 기본적으로 그라디언트는 위에서 아래로 표시되지만 그라디언트의 사용자 지정 방향을 지정할 수 있습니다.

선형 그라디언트에는 전환에 포함하려는 색상인 색상 정지점이 있습니다. 선형 그래디언트로 지정하는 색상 수에는 제한이 없습니다.

다음은 CSS의 선형 그래디언트 함수 구문입니다.

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

이 구문에서 방향은 그라디언트의 방향을 나타내고 color1, color 2 등은 그라디언트의 색상 정지점을 나타냅니다.

CSS에서 선형 그래디언트의 몇 가지 예를 살펴보겠습니다.

위에서 아래로 그라디언트

상자의 위에서 아래로 나타나는 그라디언트를 만들고 싶다고 가정합니다. 이것은 linear-gradient()로 생성된 기본 그라디언트입니다. 재산.

그라디언트는 #00C9FF(밝은 파란색) 색상에서 시작하여 #92FE9D(밝은 녹색) 색상에서 끝나야 합니다. 다음은 그래디언트를 만드는 데 사용할 수 있는 코드입니다.

.gradient {
	background: linear-gradient(#00C9FF, #92FE9D);
}

코드 반환:

CSS 그라디언트

왼쪽에서 오른쪽으로 그라데이션

반면에 왼쪽에서 오른쪽으로 색상 전환을 표시하는 그라디언트를 만들 수 있습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

.gradient {
	background: linear-gradient(to right, #00C9FF, #92FE9D);
}

코드는 다음을 반환합니다.

CSS 그라디언트

왼쪽에서 오른쪽으로 두 색상 간의 그라디언트 전환. 이 전환은 to left를 지정했기 때문에 발생합니다. 그라디언트의 방향으로. 또는 그라디언트가 오른쪽에서 왼쪽으로 나타나도록 하려면 to left를 사용할 수 있습니다. to right 대신 우리 코드에서.

대각선 기울기

linear-gradient()를 사용하여 대각선 그라디언트를 만들 수 있습니다. 그래디언트의 수평 및 수직 시작점을 지정하여 속성을 지정합니다.

오른쪽 하단으로 전환되는 그라디언트를 만들고 싶다면 to bottom right를 지정하면 됩니다. 당신의 그라데이션으로. 또는 왼쪽 상단으로 전환되는 그라디언트를 원하면 to top left를 사용할 수 있습니다. 당신의 그라데이션으로.

상자의 오른쪽 상단으로 전환되는 그라디언트를 생성한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

.gradient {
	background: linear-gradient(to top right, #00C9FF, #92FE9D);
}

코드 반환:

CSS 그라디언트

그라디언트는 왼쪽 하단의 밝은 파란색으로 시작한 다음 상자 오른쪽 상단의 녹색으로 전환됩니다.

색상 정지

지금까지 그라디언트는 두 가지 색상 사이에서만 전환되었습니다. 그러나 여러 색상 간에 전환되는 더 복잡한 그라디언트를 만들려는 경우 두 개 이상의 색상을 지정할 수 있습니다.

색상 #00D2FF(연한 파란색)에서 #92FE9D(연한 녹색), #3A47D5(진한 파란색)로 전환되는 그라디언트를 생성한다고 가정합니다. 이 전환은 왼쪽에서 오른쪽으로 이루어져야 합니다. 다음 코드를 사용하여 이 그래디언트를 만들 수 있습니다.

.gradient {
background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5);
}

코드는 다음을 반환합니다.

CSS 그라디언트

이 예에서 그라디언트는 왼쪽에서 오른쪽으로 세 가지 다른 색상 사이에서 전환됩니다.

각도

이전 예에서 사전 정의된 방향(예:오른쪽 상단에서 왼쪽 하단)을 사용하여 그라디언트를 생성했습니다. 그라디언트가 표시되는 방식을 더 많이 제어하려면 사용자 정의 각도를 사용할 수 있습니다.

각도는 방향을 지정하는 위치 대신 선형 그라데이션의 첫 번째 값으로 지정되어야 합니다.

#00C9FF와 #92FE9D 사이의 전환을 120도 각도로 만들고 싶다고 가정합니다. 다음 코드를 사용하여 수행할 수 있습니다.

.gradient {
	background: linear-gradient(120deg, #00C9FF, #92FE9D);
}

코드는 다음을 반환합니다.

CSS 그라디언트

이 예에서는 왼쪽에서 오른쪽으로 120도 각도로 파란색과 녹색 사이를 전환하는 그라디언트를 지정했습니다. 예를 들어 40도 각도로 전환되는 그라디언트를 만들고 싶다면 40deg를 지정할 수 있습니다. 우리의 각도로.

투명 그라데이션

CSS 그라디언트는 RGBA 색상을 사용하여 다소 투명하게 만들 수 있습니다.

RGBA 색상은 RGB(빨간색, 녹색, 파란색) 방식을 사용하여 색상을 표현합니다. 그러나 RGBA 색상에는 색상의 투명도를 정의하는 알파라는 추가 매개변수가 포함됩니다. 알파 매개변수의 값은 0과 1 사이여야 합니다(값이 낮을수록 색상이 더 투명해집니다).

색상 #00C9FF와 #92FE9D 사이에 왼쪽에서 오른쪽으로 그라데이션을 만들고 싶다고 가정합니다. 첫 번째 색상은 50% 투명으로 시작해야 하고 최종 색상은 30% 투명해야 합니다. 다음 코드를 사용하여 이 그라디언트를 만들 수 있습니다.

.gradient {
	background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7));
}

코드는 다음을 반환합니다.

CSS 그라디언트

이것을 이전 그라디언트와 비교하면 색상이 더 투명하다는 것을 알 수 있습니다. 이 예에서는 16진수 값을 사용하는 대신 RGBA 값을 사용하여 색상을 지정했습니다.

첫 번째 색상(파란색)의 알파 값으로 0.5를 지정하여 색상을 50% 투명하게 만듭니다. 두 번째 색상(녹색)의 알파 값으로 0.3을 지정하여 색상을 70% 투명하게 만듭니다(알파 값이 낮을수록 색상이 더 투명하게 나타납니다).

하드 라인

일반적으로 그라디언트를 만들 때 그라디언트의 색상 간에 부드럽고 점진적인 전환이 필요합니다. 그러나 그라디언트에서 두 색상을 구분하는 그라디언트 선을 만들려는 경우 하드 선을 지정하여 그렇게 할 수 있습니다.

하드 라인을 지정하려면 다음 구문을 사용해야 합니다.

linear-gradient(direction, hard-line, colors);

따라서 검은색과 녹색 그라디언트의 중간에 단단한 선이 나타나도록 하려면 black 50%를 사용할 수 있습니다. , green 50% 하드 라인으로. 또는 파란색과 분홍색 그라데이션을 통해 70%로 나타나는 단단한 선을 갖고 싶다면 blue 70%를 사용할 수 있습니다. , pink 30% 하드 라인으로.

다음은 그라디언트의 중간 지점에 검은색 단단한 선이 있는 그라디언트의 예입니다.

.gradient {
	background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);
}

코드는 다음을 반환합니다.

CSS 그라디언트

이 이미지에서 그라디언트의 중간에 하드 스톱 위치가 생성되었음을 알 수 있습니다.

CSS 방사형 그라디언트

방사형 그라디언트는 원점에서 방사되는 둘 이상의 색상 간의 전환입니다. 선형 그래디언트의 원점은 타원 또는 원입니다.

방사형 그라디언트에는 최소 2개의 색상 정지점이 있어야 하며 그라디언트에 포함할 수 있는 색상 정지점 수에는 제한이 없습니다. 방사형 그래디언트 구문은 다음과 같습니다.

background: radial-gradient(shape size position, start color, next colors …, final color);

이 구문을 분석해 보겠습니다.

  • 모양 방사형 개체의 모양입니다(기본적으로 이것은 타원입니다).
  • 크기 방사형 개체의 모양 크기입니다(기본적으로 가장 먼 모서리).
  • 위치 방사형 개체의 위치입니다(기본적으로 중심).
  • 시작 색상 그라디언트의 첫 번째 색상입니다.
  • 다음 색상 ... 시작 색상과 최종 색상 사이의 색상입니다.
  • 최종 색상 그라디언트의 마지막 색상입니다.

이제 CSS에서 방사형 그래디언트를 만드는 구문을 알고 몇 가지 예를 살펴볼 수 있습니다.

기본 방사형 그라데이션

#4B6CB7과 #D9E7FF 사이의 타원 및 전환인 방사형 그래디언트를 생성한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

.gradient {
	background: radial-gradient(#4B6CB7, #D9E7FF);
}

코드는 다음을 반환합니다.

CSS 그라디언트

이 예에서는 두 가지 색상과 그라디언트의 기본값을 사용하여 방사형 그라디언트를 만들었습니다. 따라서 기본값을 사용했기 때문에 그라디언트의 간격이 균일하고 방사형 개체의 위치는 상자 중앙에 있으며 방사형 개체는 타원입니다.

다양한 색상 정지

방사형 그라디언트로 작업할 때 고유한 색상 정지점을 지정할 수 있습니다. 즉, 그라디언트의 다른 색상 간 전환이 기본 부드러운 전환이 아니라 그라디언트의 특정 위치에서 발생합니다.

#4B6CB7에서 #D9E7FF, #9198E5로 전환되는 방사형 그래디언트를 만들고 싶다고 가정합니다. 첫 번째 색상은 그라디언트의 25%를 차지해야 하고 중간 색상은 그라디언트의 50%를 차지해야 하며 마지막 색상은 그라디언트의 25%를 차지해야 합니다.

다음 코드를 사용하여 이 그래디언트를 만들 수 있습니다.

.gradient {
	background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);
}

코드는 다음을 반환합니다.

CSS 그라디언트

코드에서 지정한 지점에서 세 가지 색상 사이의 그라디언트 전환. 이 효과를 달성하기 위해 먼저 그라디언트에 포함할 색상을 지정한 다음 색상이 설명해야 하는 그라디언트의 양을 지정했습니다. 예를 들어 중간 색상인 #D9E7FF는 그라디언트의 50%를 차지합니다.

다양한 모양

기본적으로 방사형 그래디언트에 대해 설정된 모양은 타원입니다. 그러나 그라디언트를 원으로 만들 수도 있습니다. 모양 값 circle을 지정하면 됩니다. 당신의 그라디언트를 위해.

#4B6CB7과 #D9E7FF 사이에서 전환되는 그라디언트를 만들고 싶다고 가정합니다. 방사형 그래디언트의 중심점은 원이어야 합니다. 다음 코드를 사용하여 이 그라디언트를 만들 수 있습니다.

.gradient {
	background: radial-gradient(circle, #4B6CB7, #D9E7FF);
}

코드는 다음을 반환합니다.

CSS 그라디언트

이 예에서는 #4B6CB7 색상과 #D9E7FF 색상 사이에 방사형 그래디언트를 만들었습니다. 방사형 그래디언트의 중심점은 타원이 아니라 원입니다.

방사형 그라데이션 위치

방사형 그래디언트의 중심 개체 위치를 변경할 수 있습니다. 방사형 그래디언트에서 중심 개체의 위치를 ​​결정하는 데 사용되는 네 가지 키워드가 있습니다. 이것들은:

  • 가장 가까운 코너
  • 가장 먼 모서리
  • 가장 가까운 쪽
  • 가장 먼 쪽

50px 50px 위치에서 가장 먼 모서리에 나타나는 원형 방사형 그래디언트를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

.gradient {
	background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);
}

코드는 다음을 반환합니다.

CSS 그라디언트

이 예에서 방사형 그래디언트 중심점은 50px 50px 위치의 가장 먼 모서리에 나타납니다. 중심점이 왼쪽 상단 모서리에 있음을 알 수 있습니다. 이는 그라디언트가 의도한 대로 작동하고 있음을 보여줍니다. 그런 다음 그라디언트가 코드에서 지정한 다음 색상으로 바깥쪽으로 전환됩니다.

결론

그라디언트는 CSS에서 둘 이상의 색상 사이의 전환을 만드는 데 사용됩니다. CSS에서 사용되는 두 가지 주요 그라디언트 유형은 선형 그라디언트와 방사형 그라디언트입니다.

이 자습서에서는 예제를 참조하여 CSS에서 선형 및 방사형 그래디언트를 만드는 방법과 각 그래디언트 유형에서 제공하는 다양한 속성을 사용하여 이러한 그래디언트를 사용자 지정하는 방법에 대해 설명했습니다. 이제 전문가처럼 CSS 그라디언트 작업을 시작하는 데 필요한 지식을 갖추었습니다!