본문 바로가기

💛 Frontend/💛 Frontend : JavaScript2

[JavaScript] 텍스트 필드에 입력한 값을 화면에 추가하고 삭제하기 (투두리스트) ✅ 목표텍스트 필드 값에 값을 입력하면 아래 li에 내용이 추가된다.추가된 li를 클릭하면 '삭제하시겠습니까?' confrim 창이 뜨고 '확인'을 누르면 삭제된다.#appendChild #createTextNode # createElement #이벤트위임 ✅ Html Web Programming 공부할 주제를 기록해 보세요 주제 추가 추가할게요 label의 for과 input의 id를 맞춰줍니다. label의 for 속성은 해당 레이블이 어떤 입력 요소와 연결되어 있는지 알려줍니다.사용자가 label을 클릭하면 해당 입력 필드에 포커스가 가게 됩니다. 때문에 특히 모바일 기기에서 입력 필드보다 레이블을 클릭하여 사용자.. 2025. 2. 3.

[Javascript] 버튼 하나로 다크 모드 설정하기 (toggle) 오늘 해 볼 실습입니다. ✅ 목표버튼 하나를 클릭하면서 다크모드, 라이트모드를 변환합니다.다크모드, 라이트모드의 자바스크립트 작성 시 toggle을 사용합니다. 먼저, html 코드를 작성합니다.이 실습은 다크모드, 라이트변환 자바스크립트 실습을 위한 것이니 html은 간단히 하겠습니다. ✅ Html가운데 중앙 정렬로 div 박스를 만듭니다.오른쪽 상단에 버튼을 고정합니다. Web Programming HTML CSS Javascipt 다크 모드 body 전체에 클래스를 주어 버튼을 누를 때마다 body 전체의 배경색, 글자 색을 한번에 변경합니다.body 클래스에 light-mode 클래스를 추가합니다.버튼이 눌릴 때 dar.. 2025. 2. 3.

이전 1 다음

티스토리툴바