CSS를 사용하여 페이지 전체에 레인보우 그래디언트 배경을 생성하는 예제를 제공하겠습니다. 이 예제는 HTML 및 CSS를 사용하여 레인보우 색상 그래디언트를 적용하는 방법을 보여줍니다.
1. HTML 파일 생성하기
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>
<div class="rainbow-background">
<!-- 내용을 이곳에 추가하세요 -->
</div>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장하세요. 스타일 시트에서 레인보우 그래디언트 배경을 정의합니다.
/* styles.css */
body {
margin: 0;
padding: 0;
overflow: hidden; /* 페이지 전체를 커버하기 위해 스크롤 막음 */
}
.rainbow-background {
width: 100%;
height: 100vh; /* 뷰포트 높이 만큼 배경 설정 */
background: linear-gradient(45deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3);
background-size: 600% 600%; /* 그래디언트 크기 설정 */
animation: rainbow 10s linear infinite; /* 애니메이션 적용 */
}
@keyframes rainbow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
위 코드에서는 레인보우 색상의 그래디언트 배경을 만들기 위해 linear-gradient를 사용하고, 애니메이션 효과를 부여하기 위해 @keyframes를 사용합니다.
3. 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. 페이지에 레인보우 그래디언트 배경이 적용되고, 애니메이션으로 움직이는 것을 볼 수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 게임 미로: HTML과 JavaScript로 간단한 미로 게임 만들기 (0) | 2023.12.05 |
|---|---|
| 이펙트 버튼: 버튼 클릭 시 이펙트와 음악 재생 (0) | 2023.12.05 |
| 실시간 시계: JavaScript로 현재 시간을 실시간으로 표시 (0) | 2023.12.05 |
| 플립 카드: CSS로 카드 뒤집기 애니메이션 적용 (0) | 2023.12.05 |
| 무한 스크롤: 스크롤할 때마다 새로운 내용을 불러와 보여주는 기능 (0) | 2023.12.05 |
