CSS 그래디언트를 사용하여 텍스트에 레인보우 색상을 적용하는 HTML 예제 프로그램을 만들어보겠습니다. 이 예제에서는 background-clip 속성을 사용하여 텍스트에 그래디언트를 적용합니다.
1. HTML 파일 생성하기
먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>레인보우 텍스트</title>
</head>
<body>
<h1 class="rainbow-text">레인보우 텍스트</h1>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 텍스트에 레인보우 색상을 적용하는 스타일을 정의합니다.
/* styles.css */
.rainbow-text {
background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 36px;
}
3. 레인보우 텍스트 스타일링
위의 코드를 작성하면 "레인보우 텍스트"라는 제목이 포함된 웹 페이지가 생성됩니다. 이 텍스트에 레인보우 색상이 적용됩니다. linear-gradient를 사용하여 그래디언트 배경을 만들고, -webkit-background-clip 및 background-clip을 사용하여 텍스트에 배경을 적용하고, 텍스트의 색상은 투명으로 설정합니다.
4. 결과
테스트의 색깔이 글자마다 자연스럽게 바뀌어 있음을 볼수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 스크롤 이벤트: 스크롤 위치에 따라 요소가 나타나거나 사라지는 효과 (0) | 2023.12.05 |
|---|---|
| 회전하는 로고: CSS로 로고 이미지 회전 애니메이션 (0) | 2023.12.05 |
| 반짝이는 배경: CSS 애니메이션으로 배경 색상을 반짝이게 만들기 (0) | 2023.12.05 |
| 타자 효과: 글자 한 글자씩 나타나는 타자 효과 (0) | 2023.12.05 |
| 비밀 메시지: CSS로 텍스트 숨기고 호버(hover) 시 나타나게 하기 (0) | 2023.12.05 |
