CSS로 선형 그래디언트 반복하기
CSS에서 선형 그래디언트를 반복해서 표현하려면 repeating-linear-gradient() 함수를 사용하면 됩니다. 일반적인 linear-gradient() 함수와 문법은 거의 같지만, 마지막 색상 정지점(color stop)까지의 그라디언트 패턴이 요소 전체에 걸쳐 자동으로 반복된다는 점이 다릅니다.
아래 예제 코드를 직접 실행해 보면서 동작을 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
background: repeating-linear-gradient(red, yellow 30%, green 30%);
}
</style>
</head>
<body>
<h2>Linear Gradient</h2>
<div id = "demo">Repeating Linear Gradients</div><br>
</body>
</html>
위 코드에서는 빨강(red)에서 시작해 30% 지점에 노랑(yellow)을 지정하고, 같은 30% 위치에 초록(green)을 배치했습니다. 노랑과 초록의 색상 정지점이 동일한 위치에 있기 때문에 두 색 사이에 부드러운 전환 없이 뚜렷한 경계가 생기고, 이 패턴이 요소 전체에 걸쳐 반복되어 줄무늬 효과가 나타납니다.
활용 팁
- 줄무늬 효과: 서로 다른 두 색상 정지점을 같은 위치에 지정하면 경계가 선명한 스트라이프 패턴을 손쉽게 만들 수 있습니다.
- 방향 조절:
repeating-linear-gradient(45deg, ...)처럼 각도를 지정하면 대각선 방향의 반복 그라디언트도 구현할 수 있습니다. - 반복 주기 조절: 색상 정지점의 퍼센트(%) 또는 px 값을 조정하면 패턴이 반복되는 간격을 원하는 대로 변경할 수 있습니다.