▼ HTML, CSS 문서더보기 mousemove mouseover / mouseout cell-1 cell-2 cell-3 cell-4 * { box-sizing: border-box;}body { padding: 50px;}.box { display: flex; width: 350px; height: 350px;}#box1 { justify-content: center; align-items: center; margin-bottom: 40px; font-size: 35px; background-color: #acfffc;}#box2 { flex-flow: row wrap; position: relative; padding: 35px; background-co..

▼ HTML, CSS, JavaScript 문서더보기 #mouse { width: 240px; height: 390px; border: 1px solid #333333; border-radius: 150px; overflow: hidden;}#btns { display: flex; position: relative; width: 100%; height: 150px; border-bottom: 1px solid #333333;}#btn0 { width: calc(50% - 1px); height: 100%; border-right: 1px solid #333333;}#btn1 { position: absolute; left: 50%; top: 50..

▼ 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..