그래디언트

CSS 팟캐스트 - 021: 그라데이션 를 통해 개인정보처리방침을 정의할 수 있습니다.

구축할 사이트가 있고 상단에 제목, 요약, 버튼이 있는 인트로가 있습니다. 디자이너가 이 인트로에 보라색 배경의 디자인을 전달했습니다. 유일한 문제는 배경에 두 가지 음영의 보라색이 그라데이션으로 표시되는 것입니다. 어떻게 해야 할까요?

제목, 단락, 링크가 있는 어둡거나 연한 보라색 그라데이션 배경입니다.

처음에는 디자인 도구에서 이미지를 내보내야 할 것 같다고 생각할 수 있습니다. Cloud Shell에서 linear-gradient 드림 하세요.

그라데이션은 이미지로, 이미지를 사용할 수 있는 곳이라면 어디서나 CSS로 생성되며 색상, 숫자, 각도로 구성됩니다. CSS 그래디언트를 사용하면 두 색상 간에 매끄러운 그라데이션으로 원하는 것을 만들 수 있습니다. 여러 그라데이션을 섞고 반복하여 인상적인 아트워크를 만들 수 있습니다.

선형 그래디언트

브라우저 지원

  • Chrome: 26. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

소스

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

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

각도 또는 각도를 나타내는 키워드를 전달할 수도 있습니다. 키워드를 사용하는 경우 to 키워드 다음에 방향을 지정합니다. 즉, 흑백 그라데이션을 원한다면 왼쪽 (검은색)에서 오른쪽 (흰색)으로 향하고 각도를 첫 번째 인수로 to right로 지정합니다.

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

색상이 중지되고 인접한 색상과 혼합되는 위치를 정의하는 색상 중지 값입니다. 어두운 빨간색 음영에서 시작하여 45도 각도로 실행되는 그라데이션의 경우 더 밝은 빨간색으로 변경되는 경우 다음과 같습니다.

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

linear-gradient()에서 원하는 만큼 색상과 색상 변경을 추가할 수 있습니다. 각 그래디언트를 쉼표로 구분하여 그래디언트를 서로 중첩할 수 있습니다.

방사형 그래디언트

브라우저 지원

  • Chrome: 26. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

소스

원형으로 방사되는 그라데이션을 만들려면 radial-gradient() 드림 함수 단계가 도움이 될 것입니다. linear-gradient()와 유사합니다. 각도를 지정하는 대신 원하는 경우 위치와 끝 도형을 지정할 수 있습니다. 색상만 지정하면 radial-gradient()에서 위치를 center로 자동 선택합니다. 상자의 크기에 따라 원 또는 타원을 선택합니다.

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

그라데이션의 위치는 키워드 또는 숫자 값을 사용하는 background-position와 유사합니다. 방사형 그래디언트 크기에 따라 그래디언트의 종료 모양 크기가 결정됩니다. (원 또는 타원) 기본값은 farthest-corner입니다. 중앙에서 상자의 가장 먼 모서리와 정확하게 만나는 것입니다. 다음 키워드를 사용할 수도 있습니다.

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

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

원뿔 그라데이션

브라우저 지원

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 83 <ph type="x-smartling-placeholder">
  • Safari 12.1. <ph type="x-smartling-placeholder">

소스

원뿔 그라데이션은 상자에 중심점이 있고 위에서부터 시작합니다 (기본적으로). 360도 원을 그리며 회전합니다.

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

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

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

위치는 기본적으로 가운데입니다. 방사형 및 선형 그래디언트와 마찬가지로 포지셔닝은 키워드에 기반할 수 있지만 숫자 값으로 정의할 수 있습니다.

다른 그라데이션 유형과 마찬가지로 원하는 만큼 색상 경유지를 추가할 수 있습니다. 원뿔 그라데이션과 함께 이 기능의 좋은 사용 사례는 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 속성에 그라데이션 함수를 혼합할 수도 있습니다. 그래디언트를 원하는 만큼 정의할 수 있습니다. 기본 이미지를 추가할 수 있습니다. 예를 들어 여러 개의 선형 그래디언트를 함께 혼합하거나, 방사형 그래디언트를 2개의 선형 그래디언트와 혼합할 수 있습니다.

리소스

이해도 확인

경사에 관한 지식 테스트

그라데이션을 만드는 데 필요한 최소 색상 수는 몇 개인가요?

1
다시 시도해 보세요.
2
두 개 이상의 색상이 동일하고 단색으로 보일 수 있지만, 최소 2가지 색상이 필요합니다.
3
다시 시도해 보세요.
4
다시 시도해 보세요.

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

참
background-image 속성은 여러 그라데이션을 허용합니다. 쉼표로 구분하면 됩니다.
거짓
아, 하지만 할 수 있어요!