Dseok의 실전 예제로 웹개발 한방에 끝내기

웹개발, 혼자 하려니 막막하고 힘드시죠? 저 또한 그렇습니다. 힘든 웹개발... 실전 예제를 통해 함께 공부해요!!!!😁📕

HTML 2

[Dseok의 코딩스터디] JavaScript로 입력값을 받아 리스트 추가하고 리스 랜덤 깜빡이기 기능 구현

📌 개요HTML의 요소에 사용자가 값을 입력하면 리스트()가 동적으로 추가됩니다. 이후, 추가된 요소들 중 랜덤하게 선택된 요소가 3초마다 깜빡이는 효과를 구현합니다.이 기능은 JavaScript의 DOM 조작 및 이벤트 처리를 활용하여 구현됩니다. 📌 구현 목표사용자가 에 값을 입력하고 버튼을 누르면 요소가 생성됨생성된 요소를 객체로 관리하여 랜덤하게 선택3초마다 무작위로 선택된 요소가 깜빡이는 효과 적용📌 HTML 구조 랜덤 깜빡이기 기능 추가   📌 코드 설명✅ 1. 사용자 입력값을 리스트에 추가addButton.addEventListener("click", () => { const value = inputField.value.trim(); /..

HTML 2025.03.02

[Dseok의 코딩스터디] html data- 속성 사용하기 | 정의, 사용법 및 실전 예제

📌 data- 속성이란?data- 속성은 HTML 요소에 사용자 정의 데이터를 저장할 때 사용하는 속성입니다. 이 속성을 활용하면 HTML에 추가적인 정보를 포함하고, JavaScript를 통해 쉽게 접근하여 조작할 수 있습니다.✅ 기본 문법제품data-id="1234" → 사용자 정의 데이터 iddata-category="electronics" → 사용자 정의 데이터 categoryJavaScript에서 .dataset을 사용하면 이 데이터를 가져오거나 변경할 수 있습니다. 📌 data- 속성의 장점✅ HTML 요소에 추가 데이터를 저장 가능 (별도 변수 없이 관리 가능)✅ CSS, JavaScript와 쉽게 연동 가능✅ 서버와의 데이터 연동에도 활용 가능 (AJAX, JSON) 📌 data- 속..

HTML 2025.02.23