CSS 팟캐스트 - 021: 그라데이션
빌드할 사이트가 있고 맨 위에 제목, 요약, 버튼이 있는 인트로가 있다고 가정해 보겠습니다. 디자이너가 이 인트로에 보라색 배경의 디자인을 제공했습니다. 유일한 문제는 배경에 그라데이션으로 두 가지 음영의 보라색이 있다는 것입니다. 어떻게 해야 할까요?
처음에는 이를 위해 디자인 도구에서 이미지를 내보내야 한다고 생각할 수 있지만 대신 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-side는closest-side와 반대로 작동합니다.
linear-gradient와 마찬가지로 원하는 만큼 색상 경유지를 추가할 수 있습니다.
마찬가지로 radial-gradients도 원하는 만큼 추가할 수 있습니다.
원뿔 그라데이션
원뿔 그라데이션은 상자에 중심점이 있으며 기본적으로 상단에서 시작하여 360도 원을 그리며 이동합니다.
.my-element {
background: conic-gradient(white, black);
}
conic-gradient() 함수는 위치 및 각도 인수를 허용합니다.
기본적으로 각도는 0도이며 중앙에서 상단부터 시작합니다.
각도를 45deg로 설정하면 오른쪽 상단 모서리가 됩니다.
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개의 선형 그래디언트를 혼합할 수 있습니다.
자료
- Conic.css - 유용한 원뿔 그라데이션 모음
- 경사에 대한 MDN 가이드
- 그라데이션 생성기
학습 내용 확인하기
경사에 관한 지식 테스트
그라데이션을 만드는 데 필요한 최소 색상 수는 몇 개인가요?
요소에 여러 개의 그라데이션을 배경으로 사용할 수 있나요?
background-image 속성에는 많은 그라데이션이 허용되므로 쉼표로 구분하기만 하면 됩니다.