▼ HTML, JavaScript더보기 Link 네이버 접속하기 // 브라우저의 기본 동작const link = document.querySelector("#link");const checkbox = document.querySelector("#checkbox");const input = document.querySelector("#input");const text = document.querySelector("#text");대부분의 이벤트는 발생하는 순간 각 태그별로 혹은 문서 전체적인 측면에서브라우저가 기본적으로 갖고 있는 어떠한 동작들을 수행한다. ▼ 사용자가 웹 페이지를 사용하면서 흔하게 접하는 이벤트 태그는 클릭했을 때 href 속성에 담긴 주소로 웹 페이지 이동checkbox는 클릭을 ..

▼ HTML, CSS, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 구름이 산책 게임 독서 청소 .item { margin: 10px 0; cursor: pointer;}.done { opacity: 0.5; text-decoration: line-through;}// 이벤트 위임 (Event Delegation)const list = document.querySelector("#list");for (let item of list.children) { item.addEventListener("click", function (e) { ..

▼ HTML, CSS 문서더보기 content 오늘 할 일 list 자바스크립트 공부 구름이 산책 게임 독서 청소 body * { padding: 7px 10px; margin: 5px 8px; color: #ffffff; font-size: 12px; background-color: rgba(0, 0, 0, 0.4);}h1 { font-size: 20px; font-weight: 500;}아래는 각 요소별로 클릭 타입에 이벤트 핸들러들을 등록한 상태이다.// 이벤트 버블링 (Event Bubbling)const cont..

▼HTML, JavaScript 문서더보기 click me! // 이벤트 객체 (Event Object)const myInput = document.querySelector("#myInput");const myBtn = document.querySelector("#myBtn");사용자가 키보드와 마우스를 통해서 컴퓨터의 모든 동작을 다루기 때문에 웹 페이지에서 일어날 수 있는 이벤트도 대부분 키보드, 마우스 이벤트로 이루어진다. 키보드로 제어할 수 있는 대표적인 이벤트인 '키다운'과 마우스로 제어할 수 있는 대표적인 이벤트인 '클릭'의 이벤트 핸들러를 등록해보자// 이벤트 객체 (Event Object)const myInput = document.queryS..

▼ HTML 문서더보기 JS Hi HTML Hello 버튼 클릭 이벤트에서 이벤트 핸들러를 등록하는 두 가지 방법이 있다고 했을 때, - LinkDom 요소 접근하여 onclick 프로퍼티 활용HTML 태그에 onclick 속성 활용또한 HTML 태그에서 직접 이벤트를 다루는 일은 잘 사용하지 않으며 문제도 많아 잘 쓰이지 않는다고 했다.다시한번 onclick 동작 구조를 살펴보기위해 각 버튼에 적용해보자면//이벤트 핸들러 등록하기let btn = document.querySelector("#myBtn");btn.onclick = function () { console.log("Hi");};이렇게 등록한 이벤트 핸들러가 잘 동작하는 것을 확인할 수 있..

이전 글 까지만해도 표준 속성을 사용하여 HTML 태그의 속성을 다루었다.하지만 자바스크립트로 태그를 다루다보면 아래와 같이 표준이 아닌 속성을 사용할 때가 있다.  이러한 비표준 속성을 어떤 식으로 다룰 수 있는지 확인해보자.▼ HTML, CSS, JavaScript 문서더보기 Progream : Name : status : 상태 변경: 방해금지 게임중 접속중  [status] { padding: 5px 10px;}[status="방해금지"] { background-color: #FF6767; color: #FFFFFF;}[status="게임중"] { background-color: #5f62ff; color: #FFFFFF;}[status="접속중..

▼ HTML, CSS, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 .done { opacity: 0.5; text-decoration: line-through;}// 스타일 다루기const today = document.querySelector('#today');const tomorrow = document.querySelector('#tomorrow'); style 프로퍼티▼ style 프로퍼티를 활용하여 글자에 취소선 및 배경 적용하기//st..

▼ HTML, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 // HTML 속성 (HTML attribute)const tomorrow = document.querySelector('#tomorrow');const item = tomorrow.firstElementChild;const link = item.firstElementChild;// id 속성console.log(tomorrow);console.log(tomorrow.id);// class 속..

▼HTML, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 // 노드 삭제와 이동const today = document.querySelector('#today');const tomorrow = document.querySelector('#tomorrow');노드 삭제 - remove 메소드 ▼ 원하는 노드를 선택해서 remove 메소드를 호출하여 노드 삭제// 노드 삭제와 이동const today = document.querySelector('#today');const tomorrow = document.querySelector('#tom..

▼ HTML,JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 const today = document.querySelector('#today');today.innerHTML = '처음' + today.innerHTML;today.innerHTML = today.innerHTML + '마지막';today.outerHTML = '이전' + today.outerHTML; const newToday = document.querySelector('#today');newToday.outerHTML = newToday.outerHTML + '다음';▼ i..