사용자의 이름을 입력받아 환영 메시지를 표시하는 간단한 로그인 기능을 만들어봅니다.로그인 후 입력 폼이 사라지고, 이름이 포함된 메시지가 나타납니다.1. HTML 구조 2. CSS 스타일.hidden { display: none;}3. JavaScript 기능 구현const loginForm = document.querySelector("#login-form");const loginInput = document.querySelector("#login-form input");const greeting = document.querySelector("#greeting");const HIDDEN_CLASSNAME = "hidden";function o..

공부/WEB 2025. 3. 3. 13:41

안녕하세요! 오늘은 JavaScript에서 CSS 클래스를 보다 유용하게 다루는 방법을 배운 내용을 정리해보겠습니다. 특히, classList.toggle()을 활용하여 스타일을 동적으로 변경하는 방법을 집중적으로 살펴보겠습니다.1. classList.toggle()이란?기본적으로 classList.toggle()은 특정 클래스를 추가하거나 제거하는 기능을 합니다.📌 기본 문법element.classList.toggle("class-name");element: 클래스를 추가/제거할 HTML 요소class-name: 추가 또는 제거할 클래스명요소에 해당 클래스가 없다면 추가, 있다면 제거하는 기능을 합니다.2. JavaScript로 CSS 스타일 변경하기아래 코드에서는 사용자가 요소를 클릭할 때마다 파..

공부/WEB 2025. 2. 17. 22:55

안녕하세요! 오늘은 JavaScript에서 CSS를 변경하는 방법에 대해 배운 내용을 정리해보겠습니다. JavaScript를 사용하면 특정 HTML 요소의 스타일을 동적으로 변경할 수 있습니다. 특히, 이벤트 리스너(Event Listener) 와 함께 사용하면 사용자의 동작에 반응하는 인터랙티브한 웹페이지를 만들 수 있습니다.1. JavaScript로 CSS 변경하는 방법JavaScript에서 CSS 스타일을 변경하는 가장 기본적인 방법은 element.style.property 를 사용하는 것입니다.📌 기본 문법element.style.속성명 = "값";예를 들어, 특정 요소의 글자 색상을 변경하려면 다음과 같이 작성할 수 있습니다.element.style.color = "blue";2. 클릭할 때..

공부/WEB 2025. 2. 17. 12:40

안녕하세요! 오늘은 자바스크립트 이벤트 리스너(Event Listener) 두 번째 파트로, window 객체를 활용한 이벤트 감지 방법을 배운 내용을 정리해보겠습니다. 특히, 창 크기 변경, 복사 감지, 인터넷 연결 상태 감지 등의 이벤트를 처리하는 방법을 살펴보겠습니다.1. window 객체와 이벤트 리스너window 객체는 브라우저 창 전체를 의미하는 객체로, 다양한 이벤트를 감지할 수 있습니다. 예를 들어, 창 크기 변경(resize), 복사(copy), 오프라인 상태(offline) 감지 등이 가능합니다.📌 기본 문법window.addEventListener("이벤트명", 이벤트핸들러);window 객체를 사용하면 문서(body)뿐만 아니라 브라우저 전체에서 발생하는 이벤트를 감지할 수 있습니..

공부/WEB 2025. 2. 16. 09:53