24.04.02 11:47 작성
·
141
0
섹션5에서 제공 중인 파일을 모두 받아 봤습니다.
그런데 이벤트 위임 보강 영상에서 보이는 delegation.html이 안 보입니다..
혹시 제가 못 찾은걸까요??
답변 2
0
2024. 05. 01. 09:31
아, 제가 확인이 늦었습니다. 아래 소스를 사용하시면 됩니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Delegation</title>
<link rel="stylesheet" href="../reset.css">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes pointer-ani {
0% { transform: scale(0); }
50% { transform: scale(1); }
100% { transform: scale(1.5); opacity: 0; }
}
.pointer {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
background: url('../images/ilbuni2.png') no-repeat 0 0 / cover;
transform: scale(0);
animation: pointer-ani 0.5s linear;
}
.menu {
display: flex;
margin-top: -10vh;
padding: 2em;
border-radius: 20px;
background: #eee;
}
.menu-btn {
display: inline-flex;
align-items: center;
margin: 0 1em;
padding: 0.5em 1em 0.5em 0.5em;
border: 5px solid white;
border-radius: 20px;
outline: 0;
font: 900 1.2rem NotoSans;
background: linear-gradient(0deg, rgba(223,210,0,1) 0%, rgba(255,240,0,1) 24%, rgba(255,240,0,1) 70%, rgba(255,255,255,1) 100%);
box-shadow: rgba(0,0,0,0.1) 0 0 0 1px inset;
}
.btn-label {
text-shadow: rgba(255,255,255,1) 0 1px 0;
/*pointer-events: none;*/
}
.icon {
width: 60px;
/*pointer-events: none;*/
}
</style>
<script src="IlbuniPointer.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => new IlbuniPointer());
</script>
</head>
<body>
<div class="menu">
<button class="menu-btn" data-value="1">
<img class="icon" src="../images/ilbuni1.png" alt="">
<span class="btn-label">일분이 1</span>
</button>
<button class="menu-btn" data-value="2">
<img class="icon" src="../images/ilbuni2.png" alt="">
<span class="btn-label">일분이 2</span>
</button>
<button class="menu-btn" data-value="3">
<img class="icon" src="../images/ilbuni3.png" alt="">
<span class="btn-label">일분이 3</span>
</button>
</div>
<script>
const menu = document.querySelector('.menu');
function clickHandler(event) {
let elem = event.target;
while (!elem.classList.contains('menu-btn')) {
elem = elem.parentNode;
if (elem.nodeName == 'BODY') {
elem = null;
return;
}
}
console.log(elem.dataset.value);
}
menu.addEventListener('click', clickHandler);
</script>
</body>
</html>
0
안녕하세요, 인프런 AI 인턴입니다.
BONGJUN님, 강의 자료와 관련하여 문의 주셨군요.
강의 자료는 강의실에 진입하신 후, 강의 동영상을 클릭하시고 상단 바나 목차 내에 있는 구름 아이콘을 확인해 주시기 바랍니다. 강의마다 강의자료가 위치한 섹션이 다를 수 있으니 이 점 참고하시어 관련 파일을 찾아보시기 바랍니다.
더 자세한 사항은 다음 링크를 통해 확인하실 수 있습니다: 강의 자료 다운로드 정보
원하는 답변을 찾지 못하셨다면, 홈페이지 하단의 ‘문의하기’에서 직접 문의해주세요. 최대한 빠르게 답변드리도록 하겠습니다!