그래디언트

빌드할 사이트가 있고 상단에 제목, 요약, 버튼이 있는 인트로가 있다고 가정해 보겠습니다. 디자이너가 이 인트로의 배경이 보라색인 디자인을 전달했습니다. 유일한 문제는 배경에 보라색 두 가지 색상이 그라데이션으로 사용되어 있다는 점입니다. 어떻게 해야 하나요?

제목, 단락, 링크가 있는 어두운 보라색에서 연한 보라색으로 그라데이션된 배경

처음에는 디자인 도구에서 이미지를 내보내야 한다고 생각할 수 있지만 대신 linear-gradient를 사용하면 됩니다.

그라데이션은 이미지이며 이미지를 사용할 수 있는 모든 곳에서 사용할 수 있지만 CSS로 만들어지며 색상, 숫자, 각도로 구성됩니다. CSS 그라데이션을 사용하면 두 색상 간의 부드러운 그라데이션부터 여러 그라데이션을 혼합하고 반복하여 인상적인 아트워크까지 만들 수 있습니다.

선형 그래디언트

linear-gradient() 함수는 두 개 이상의 색상으로 된 이미지를 점진적으로 생성합니다. 여러 인수를 사용하지만 가장 간단한 구성에서는 다음과 같이 몇 가지 색상을 전달하면 자동으로 균등하게 분할하면서 혼합합니다.

.my-element {
    background: linear-gradient(black, white);
}

각도를 나타내는 각도 또는 키워드를 전달할 수도 있습니다. 키워드를 사용하려면 to 키워드 뒤에 방향을 지정합니다. 즉, 왼쪽 (검은색)에서 오른쪽 (흰색)으로 이어지는 흑백 그래디언트를 원한다면 첫 번째 인수로 각도를 to right로 지정하면 됩니다.

.my-element {
    background: linear-gradient(to right, black, white);
}

색상이 중지되고 인접한 색상과 혼합되는 위치를 정의하는 색상 중지 값입니다. 어두운 빨간색 음영으로 시작하여 45도 각도로 진행되는 그라디언트의 경우 그라디언트 크기의 30% 에서 더 밝은 빨간색으로 변경됩니다. 다음과 같이 표시됩니다.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

linear-gradient()에 원하는 만큼 색상과 색상 중지점을 추가할 수 있으며, 각 그라데이션을 쉼표로 구분하여 그라데이션을 서로 겹쳐서 적용할 수 있습니다.

방사형 그래디언트

원형으로 발산하는 그라데이션을 만들려면 radial-gradient() 함수를 사용합니다. linear-gradient()와 유사하지만 각도를 지정하는 대신 원하는 경우 위치와 끝 모양을 지정합니다. 색상만 지정하면 radial-gradient()가 위치를 center로 자동 선택하고 상자의 크기에 따라 원 또는 타원을 선택합니다.

.my-element {
    background: radial-gradient(white, black);
}

그라데이션의 위치는 키워드 또는 숫자 값을 사용하는 background-position와 유사합니다. 방사형 그라데이션의 크기는 그라데이션의 끝 모양(원 또는 타원)의 크기를 결정하며 기본값은 farthest-corner입니다. 즉, 상자의 중심에서 가장 먼 모서리를 정확하게 만납니다. 다음 키워드도 사용할 수 있습니다.

  • closest-corner는 그라데이션 중심에 가장 가까운 모서리를 만납니다.
  • closest-side는 그라데이션의 중심에 가장 가까운 상자의 측면과 만나게 됩니다.
  • farthest-sideclosest-side와 반대의 작업을 실행합니다.

linear-gradient와 마찬가지로 원하는 만큼 색상 중지점을 추가할 수 있습니다. 마찬가지로 radial-gradients도 원하는 만큼 추가할 수 있습니다.

원뿔 그라데이션

원뿔형 그라데이션은 상자에 중심점이 있으며 기본적으로 상단에서 시작하여 360도 원형으로 진행됩니다.

.my-element {
    background: conic-gradient(white, black);
}

conic-gradient() 함수는 위치 및 각도 인수를 허용합니다.

기본적으로 각도는 0도이며 맨 위 중앙에서 시작됩니다. 각도를 45deg로 설정하면 오른쪽 상단이 됩니다. 각도 인수는 선형 및 방사형 그라데이션과 같은 모든 유형의 각도 값을 허용합니다.

기본 위치는 중앙입니다. 방사형 및 선형 그라데이션과 마찬가지로, 배치는 키워드 기반이거나 숫자 값으로 정의할 수 있습니다.

다른 그라데이션 유형과 마찬가지로 색상 중지점을 원하는 만큼 추가할 수 있습니다. 원뿔형 그라데이션을 사용한 이 기능의 좋은 사용 사례는 CSS로 원형 차트를 렌더링하는 것입니다.

반복 및 믹스

각 그라데이션 유형에는 반복 유형도 있습니다. 이러한 역할은 repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()입니다. 반복되지 않는 함수와 유사하며 동일한 인수를 사용합니다. 차이점은 정의된 그라데이션을 반복하여 상자를 채울 수 있는 경우 두 크기를 모두 고려하여 반복된다는 점입니다.

그라데이션이 반복되지 않는 것처럼 보이면 색상 중지 중 하나의 길이를 설정하지 않았을 수 있습니다. 예를 들어 색상 중지 길이를 설정하여 repeating-linear-gradient로 줄무늬 배경을 만들 수 있습니다.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

background 속성에서 그라데이션 함수를 혼합하고 배경 이미지와 마찬가지로 원하는 만큼 그라데이션을 정의할 수도 있습니다. 예를 들어 여러 개의 linear-gradient를 함께 혼합하거나 두 개의 linear-gradient를 원형 그라데이션과 혼합할 수 있습니다.

리소스

이해도 확인

그라데이션에 대한 지식 테스트

그라데이션을 만들기 위해 필요한 최소 색상 수는 얼마인가요?

1
4
3
2

요소에 배경으로 여러 그라데이션을 사용할 수 있나요?

거짓