CSS 그라디언트에서 색상 정지점(color stop)의 위치는 백분율(%) 또는 절대 길이(px 등) 값으로 자유롭게 지정할 수 있습니다. 기본적으로 색상 정지점은 균등하게 배치되지만, 위치 값을 직접 지정하면 각 색상이 시작되고 끝나는 지점을 세밀하게 조절할 수 있어 더욱 풍부한 그라디언트 효과를 만들 수 있습니다.
예를 들어, 선형 그라디언트(linear-gradient)에서 색상 정지점 위치를 지정하는 구문은 다음과 같습니다.
background-image: linear-gradient(
rgb(61, 255, 2) 40%,
rgb(0, 174, 255) 80%,
rgb(255, 29, 29) 20%
);위 예시에서 첫 번째 색상은 요소 높이의 40% 지점까지 유지되고, 두 번째 색상은 80% 지점에 도달한 후 마지막 색상으로 전환됩니다.
예제 코드
다음은 CSS를 사용하여 선형 그라디언트의 색상 정지점 위치를 설정하는 전체 코드입니다. 균등하게 배치된 그라디언트와 위치 값이 지정된 불균형 그라디언트를 비교해 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.even {
height: 100px;
background-image: linear-gradient(
rgb(61, 255, 2),
rgb(0, 174, 255),
rgb(255, 29, 29)
);
}
.uneven {
height: 100px;
background-image: linear-gradient(
rgb(61, 255, 2) 40%,
rgb(0, 174, 255) 80%,
rgb(255, 29, 29) 20%
);
}
</style>
</head>
<body>
<h1>선형 그라디언트 색상 정지점 위치</h1>
<h3>균등하게 배치된 경우</h3>
<div class="even"></div>
<h3>위치 값이 지정된 경우</h3>
<div class="uneven"></div>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
