event (3) 썸네일형 리스트형 [Navbar] Navbar color change animation - Html, CSS, JS ⭐ Navbar color change animation Navbar 높이만큼 스크롤 했을 때 투명한 Navbar의 색이 변하는 애니메이션 See the Pen oNYzoPp by Eunji Jeon (@emcjrl) on CodePen. E U N J I Home About Skills Work Contact * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; margin: 0; box-sizing: border-box; } a { text-decoration: none; color: #ffffff; } button { background-color: transparent; cursor: pointer; border: none.. [Navbar] Sliding Menu Indicator - Html, CSS, JS Sliding Menu Indicator See the Pen ExNxVJy by Eunji Jeon (@emcjrl) on CodePen. Html Home About Books Portfolio Contact CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: Georgia, "Times New Roman", Times, serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .navbar { position: relative; display: flex; } .navbar a { position: relative;.. [JS] Event flow - capturing과 bubbling Event flow 이벤트가 발생하면 capturing phase -> target phase -> bubbling phase 순으로 이벤트를 감지한다. Click Me const outer = document.querySelector('.outer'); const middle = document.querySelector('.middle'); const button = document.querySelector('button'); outer.addEventListener('click', event => { console.log(`outer: ${event.currentTarget}, ${event.target}`); }); // outer: [objectHTMLDivElement], [object HTML.. 이전 1 다음
