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로 설정하면 오른쪽 상단이 됩니다.
각도 인수는 선형 및 방사형 그라데이션과 같은 모든 유형의 각도 값을 허용합니다.
기본 위치는 중앙입니다. 방사형 및 선형 그라데이션과 마찬가지로, 배치는 키워드 기반이거나 숫자 값으로 정의할 수 있습니다.
다른 그라데이션 유형과 마찬가지로 색상 중지점을 원하는 만큼 추가할 수 있습니다. 원뿔형 그라데이션을 사용한 이 기능의 좋은 사용 사례는 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를 원형 그라데이션과 혼합할 수 있습니다.
리소스
- Conic.css - 유용한 원뿔 그라데이션 모음
- MDN 경사 가이드
- 그라디언트 생성기
이해도 확인
그라데이션에 대한 지식 테스트
그라데이션을 만들기 위해 필요한 최소 색상 수는 얼마인가요?
요소에 배경으로 여러 그라데이션을 사용할 수 있나요?
background-image 속성은 여러 그라데이션을 허용하며, 그라데이션을 쉼표로 구분하면 됩니다.