CSS에서 선형 그래디언트를 일정한 패턴으로 반복하고 싶다면 repeating-linear-gradient() 함수를 사용하면 됩니다. 이 함수는 일반적인 linear-gradient()와 사용 방식이 비슷하지만, 지정한 색상 구간이 요소 전체에 걸쳐 자동으로 반복되어 줄무늬나 스트라이프 패턴을 손쉽게 만들 수 있다는 점이 다릅니다.
repeating-linear-gradient() 기본 문법
함수 안에는 각 색상과 해당 색상이 차지하는 위치(백분율 또는 픽셀)를 순서대로 지정합니다. 마지막 색상 구간이 끝나면 처음부터 다시 반복됩니다.
background: repeating-linear-gradient(색상1 위치1, 색상2 위치2, ...);
예제
아래 코드는 초록색, 주황색, 밤색으로 구성된 반복 선형 그래디언트를 300px 높이의 div 요소에 적용한 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 300px;
background: repeating-linear-gradient(green 20%, orange 40%, maroon 40%);
}
</style>
</head>
<body>
<p>반복 선형 그래디언트 예제</p>
<div id = "demo"></div>
</body>
</html>실행 결과 설명
위 예제에서는 초록색(green)이 0%부터 20%까지, 주황색(orange)이 20%부터 40%까지 채워지고, 밤색(maroon)이 40% 지점에서 시작해 즉시 다음 반복 구간으로 넘어갑니다. 이 과정이 요소의 세로 방향 전체에 걸쳐 계속 반복되어 규칙적인 색상 띠가 만들어집니다.
각도를 함께 지정하면 가로줄무늬뿐 아니라 대각선 무늬도 만들 수 있습니다. 예를 들어 repeating-linear-gradient(45deg, green 20%, orange 40%)처럼 작성하면 45도 방향의 반복 스트라이프가 생성됩니다.