CSS 팟캐스트 - 021: 그라데이션
를 통해 개인정보처리방침을 정의할 수 있습니다.
구축할 사이트가 있고 상단에 제목, 요약, 버튼이 있는 인트로가 있습니다. 디자이너가 이 인트로에 보라색 배경의 디자인을 전달했습니다. 유일한 문제는 배경에 두 가지 음영의 보라색이 그라데이션으로 표시되는 것입니다. 어떻게 해야 할까요?
처음에는 디자인 도구에서 이미지를 내보내야 할 것 같다고 생각할 수 있습니다.
Cloud Shell에서
linear-gradient
드림
하세요.
그라데이션은 이미지로, 이미지를 사용할 수 있는 곳이라면 어디서나 CSS로 생성되며 색상, 숫자, 각도로 구성됩니다. CSS 그래디언트를 사용하면 두 색상 간에 매끄러운 그라데이션으로 원하는 것을 만들 수 있습니다. 여러 그라데이션을 섞고 반복하여 인상적인 아트워크를 만들 수 있습니다.
선형 그래디언트
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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()
에서 원하는 만큼 색상과 색상 변경을 추가할 수 있습니다.
각 그래디언트를 쉼표로 구분하여 그래디언트를 서로 중첩할 수 있습니다.
방사형 그래디언트
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
도 원하는 만큼 추가할 수 있습니다.
원뿔 그라데이션
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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개의 선형 그래디언트와 혼합할 수 있습니다.
리소스
- Conic.css - 유용한 원뿔 기울기 모음
- 그라데이션에 관한 MDN 가이드
- 그래디언트 생성기
이해도 확인
경사에 관한 지식 테스트
그라데이션을 만드는 데 필요한 최소 색상 수는 몇 개인가요?
요소의 배경으로 여러 그라데이션을 사용할 수 있나요?