무지개 색상 선형 그라데이션이란?
CSS의 linear-gradient() 함수를 활용하면 빨강, 주황, 노랑, 초록, 파랑, 남색, 보라까지 무지개의 일곱 가지 색상이 자연스럽게 이어지는 그라데이션 효과를 간단하게 구현할 수 있습니다. 진행 방향은 to right처럼 지정하고, 원하는 색상들을 쉼표로 나열하기만 하면 됩니다.
예제 코드
아래 코드를 실행하면 왼쪽에서 오른쪽으로 무지개 색상이 흐르는 그라데이션 배경을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<h2>선형 그라데이션</h2>
<div id="demo">Rainbow</div><br>
</body>
</html>
코드 설명
핵심이 되는 스타일 속성은 다음과 같습니다.
- to right — 그라데이션이 왼쪽에서 오른쪽 방향으로 진행됩니다.
to bottom,45deg등으로 방향을 자유롭게 변경할 수도 있습니다. - 색상 목록 — red부터 violet까지 무지개의 일곱 가지 색상이 순서대로 부드럽게 전환됩니다.
- height: 100px — 그라데이션 효과가 잘 보이도록 요소의 높이를 지정합니다.
각 색상 뒤에 백분율(예: red 10%)을 추가하면 색상이 전환되는 위치를 세밀하게 조절할 수 있으니, 원하는 느낌에 맞게 응용해 보세요.