버튼 클릭 시 이펙트와 음악 재생을 구현하는 HTML, CSS, JavaScript 예제를 제공하겠습니다. 이 예제는 버튼을 클릭하면 이펙트가 발생하고 음악이 재생되는 간단한 기능을 가진 프로그램입니다.
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>
<button id="effectButton">클릭하세요</button>
<audio id="audio" src="audio.mp3"></audio>
<script src="script.js"></script>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장하세요. 스타일 시트에서 버튼의 초기 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
button {
font-size: 24px;
padding: 10px 20px;
cursor: pointer;
}
3. JavaScript 파일 생성하기
버튼 클릭 시 이펙트와 음악을 재생하기 위한 JavaScript 파일을 생성합니다. 이 파일을 "script.js"로 저장하세요. JavaScript 파일에서 버튼 클릭 이벤트와 음악 재생을 처리합니다.
// script.js
const effectButton = document.getElementById("effectButton");
const audio = document.getElementById("audio");
effectButton.addEventListener("click", () => {
// 이펙트 처리 (예: 버튼 스타일 변경)
effectButton.style.backgroundColor = "red";
effectButton.style.color = "white";
// 음악 재생
audio.play();
});
4. 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. 버튼을 클릭하면 버튼 색상이 변경되고 음악이 재생됩니다.
'HTML 예제' 카테고리의 다른 글
| 텍스트 애니메이션: CSS로 텍스트가 글자 하나씩 나타나는 애니메이션 (0) | 2023.12.05 |
|---|---|
| 게임 미로: HTML과 JavaScript로 간단한 미로 게임 만들기 (0) | 2023.12.05 |
| 레인보우 그래디언트 배경: CSS로 페이지 전체에 레인보우 그래디언트 배경 생성 (0) | 2023.12.05 |
| 실시간 시계: JavaScript로 현재 시간을 실시간으로 표시 (0) | 2023.12.05 |
| 플립 카드: CSS로 카드 뒤집기 애니메이션 적용 (0) | 2023.12.05 |
