🔵 실습 1 더보기

이벤트리스너 웹 페이지의 상호 작용을 처리할 수 있게 해 줌 특정 사용자 행동에 응답하는 역할 // 버튼 클릭 시 메시지 출력 function showMessage() { alert('안녕하세요!'); } // 웹 페이지 로딩 시 실행 window.onload = function() { // 버튼에 이벤트 리스너 추가 var button = document.getElementById('myButton'); button.addEventListener('click', showMessage); }; Click 이벤트 리스너 사용자가 요소를 클릭할 때 발생 element.addEventListener('click', function() {...}); Change 이벤트 리스너 입력 필드나 선택 상자 등의 값이 ..

document 웹 페이지의 문서 객체 모델(Document Object Model, DOM)을 나타내는 JavaScript의 내장 객체 중 하나 HTML 문서의 구조를 표현하고, JavaScript를 통해 이 구조에 접근하고 조작할 수 있게 해주는 인터페이스를 제공 웹 페이지의 전체 문서를 나타내며, 해당 문서 내의 요소들에 접근하고 조작할 수 있는 다양한 메서드와 속성을 제공 JavaScript로 HTML 문서를 동적으로 조작 * 요소 선택 document.getElementById( ) 지정된 ID를 가진 요소를 선택 var myElement = document.getElementById('myId'); document.getElementsByClassName( ) 지정된 클래스를 가진 모든 요소를..

HTML + CSS + JavaScript = 사용자와 상호 작용이 가능하며 시각적으로 매력적인 디자인을 가진 웹 애플리케이션 생성 가능 * HTML 웹페이지의 구조를 정의하는 마크업 언어 텍스트, 이미지, 링크, 표, 목록 등의 요소를 사용하여 문서의 구조를 표현 각 요소는 태그(tag)로 표시 여는 태그와 닫는 태그의 쌍으로 구성 ex) 안녕하세요! 이것은 HTML 예제입니다. * CSS HTML로 작성된 요소들의 스타일을 정의하는 스타일 시트 언어 텍스트의 색상, 폰트, 크기, 배경색, 레이아웃 등을 지정하여 웹 페이지의 디자인 꾸미기 선택자(selector)를 사용하여 특정 HTML 요소에 스타일을 적용 body { font-family: 'Arial', sans-serif; background-..