반응형
SMALL
📌 개요
HTML의 <input> 요소에 사용자가 값을 입력하면 리스트(<li>)가 동적으로 추가됩니다. 이후, 추가된 요소들 중 랜덤하게 선택된 요소가 3초마다 깜빡이는 효과를 구현합니다.
이 기능은 JavaScript의 DOM 조작 및 이벤트 처리를 활용하여 구현됩니다.
📌 구현 목표
- 사용자가 <input>에 값을 입력하고 버튼을 누르면 <li> 요소가 생성됨
- 생성된 <li> 요소를 객체로 관리하여 랜덤하게 선택
- 3초마다 무작위로 선택된 요소가 깜빡이는 효과 적용
📌 HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜덤 깜빡이기</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
display: inline-block;
transition: background 0.3s;
}
.blink {
background-color: yellow;
}
</style>
</head>
<body>
<h2>랜덤 깜빡이기 기능</h2>
<input type="text" id="itemInput" placeholder="추가할 항목 입력">
<button id="addItem">추가</button>
<ul id="itemList"></ul>
<script>
document.addEventListener("DOMContentLoaded", () => {
const inputField = document.getElementById("itemInput");
const addButton = document.getElementById("addItem");
const itemList = document.getElementById("itemList");
let items = [];
// 1️⃣ 리스트에 아이템 추가
addButton.addEventListener("click", () => {
const value = inputField.value.trim();
if (value) {
const li = document.createElement("li");
li.textContent = value;
itemList.appendChild(li);
items.push(li); // 객체로 저장
inputField.value = "";
}
});
// 2️⃣ 3초마다 랜덤 요소 깜빡이기
setInterval(() => {
if (items.length > 0) {
const randomIndex = Math.floor(Math.random() * items.length);
const randomItem = items[randomIndex];
randomItem.classList.add("blink");
setTimeout(() => {
randomItem.classList.remove("blink");
}, 1000);
}
}, 3000);
});
</script>
</body>
</html>
📌 코드 설명
✅ 1. 사용자 입력값을 리스트에 추가
addButton.addEventListener("click", () => {
const value = inputField.value.trim(); // 공백 제거
if (value) {
const li = document.createElement("li");
li.textContent = value;
itemList.appendChild(li); // <ul> 안에 추가
items.push(li); // 배열에 저장
inputField.value = ""; // 입력 필드 초기화
}
});✔️ 동작 과정:
- 버튼 클릭 시 input 필드에서 입력값을 가져옴
- 값이 비어 있지 않으면 새로운 <li> 요소 생성
- <li> 요소를 <ul> 내부에 추가
- items[] 배열에 저장하여 나중에 접근 가능하게 만듦
✅ 2. 3초마다 랜덤하게 요소 깜빡이기
setInterval(() => {
if (items.length > 0) {
const randomIndex = Math.floor(Math.random() * items.length);
const randomItem = items[randomIndex];
randomItem.classList.add("blink");
setTimeout(() => {
randomItem.classList.remove("blink");
}, 1000);
}
}, 3000);✔️ 동작 과정:
- setInterval()을 사용해 3초마다 실행
- items[] 배열에서 랜덤한 요소 선택
- classList.add("blink")를 사용해 배경색 변경 (깜빡임 효과)
- setTimeout()을 사용하여 1초 후 깜빡임 효과 제거
📌 마무리 🎯
- addEventListener()를 사용하여 사용자가 입력한 값을 리스트에 추가
- setInterval()을 사용하여 3초마다 랜덤한 요소를 선택하여 깜빡이게 함
- classList.add()와 classList.remove()를 사용하여 배경색을 변경하는 효과 적용
- Math.random()을 활용하여 랜덤한 요소를 선택하는 로직 구현
반응형
LIST
'HTML' 카테고리의 다른 글
| [Dseok의 코딩스터디] html data- 속성 사용하기 | 정의, 사용법 및 실전 예제 (0) | 2025.02.23 |
|---|