CSS에서 repeating-linear-gradient() 함수는 선형 그라디언트(linear gradient)를 일정한 패턴으로 반복하여 표현할 때 사용합니다. 일반적인 linear-gradient()와 달리, 지정한 색상 구간이 요소 전체를 채울 때까지 자동으로 반복되기 때문에 줄무늬 패턴이나 배경 장식을 손쉽게 만들 수 있습니다.
기본 문법
background: repeating-linear-gradient(방향 또는 각도, 색상1 위치1, 색상2 위치2, ...);
첫 번째 인자에는 그라디언트의 진행 방향(예: to right, to bottom)이나 각도(예: 45deg)를 지정하고, 이후에는 색상과 정지 위치(color stop)를 나열합니다.
사용 예제
아래 코드는 repeating-linear-gradient() 함수를 적용하여 초록색, 주황색, 밤색이 반복되는 선형 그라디언트 배경을 구현하는 예시입니다.
<!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)이 20%까지, 주황색(orange)이 40%까지, 밤색(maroon)이 다시 40%부터 시작되며, 이 색상 패턴이 div 요소의 세로 방향으로 계속 반복됩니다.