인프런 커뮤니티 질문&답변
작성한 질문수
문이 이미지라면
작성
·
218
0
안녕하세요. 강의 보면서 혼자 열심히 연구 중인데,
예쁘게 바꾸어 보는 중에 문에 이미지를 추가 했더니 실행이 되지 않습니다.
door-body 태그안에 넣었는데, 백그라운드는 괜찮은데 img태그를 쓸 경우에는 어떻게 해야할까요?
const doorImg = document.querySelector('.door-body img'); 이렇게 변수를 써서
if (targetElem.classList.contains('doorImg')) {
이렇게 해보아도 안되고 , 비슷한 사례가 있는지 구글에 검색을 해보면서 4시간을 고민해보았지만 초보로서 도무지 찾을 수가 없네요 ㅠ_ㅠ
답변 기다리겠습니다.
<div class="door">
<div class="door-back">
<div class="ilbuni"></div>
</div>
<div class="door-body"><img src="images/ilbuni-door_0.png"></div>
</div>
답변 2
4
1분코딩
지식공유자
<img>를 추가하셨으니 이제는 클릭 이벤트객체의 target이 <img>가 될 것이므로,
해당 부분 처리하는 곳을 수정해주시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Interactive Web</title>
<link rel="stylesheet" href="css/reset.css">
<style>
img {
max-width: 100%;
}
.stage {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background: #333;
}
.door {
position: relative;
width: 100px;
height: 150px;
}
.door-back {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
}
.ilbuni {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: contain;
transform: translate3d(100%, 0, 0);
transition: 0.5s 0.5s;
}
.door:nth-child(1) .ilbuni { background-image: url(images/ilbuni_0.png); }
.door:nth-child(2) .ilbuni { background-image: url(images/ilbuni_1.png); }
.door:nth-child(3) .ilbuni { background-image: url(images/ilbuni_2.png); }
.door-body {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: 0.5s;
transform-origin: 0%;
cursor: pointer;
}
.door:nth-child(1) .door-body { background: rgba(255, 0, 0, 0.7); }
.door:nth-child(2) .door-body { background: rgba(0, 255, 0, 0.7); }
.door:nth-child(3) .door-body { background: rgba(0, 0, 255, 0.7); }
.door-opened .door-body {
transform: perspective(800px) rotateY(-110deg);
}
.door-opened .ilbuni {
transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div class="stage">
<div class="door">
<div class="door-back">
<div class="ilbuni"></div>
</div>
<div class="door-body">
<img class="door-img" src="images/ilbuni-door_0.png" alt="">
</div>
</div>
<div class="door">
<div class="door-back">
<div class="ilbuni"></div>
</div>
<div class="door-body">
<img class="door-img" src="images/ilbuni-door_0.png" alt="">
</div>
</div>
<div class="door">
<div class="door-back">
<div class="ilbuni"></div>
</div>
<div class="door-body">
<img class="door-img" src="images/ilbuni-door_0.png" alt="">
</div>
</div>
</div>
<script>
(function() {
const stageElem = document.querySelector('.stage');
// 현재 활성화된 아이템을 저장
let currentItem;
// 활성화
function activate(elem) {
elem.classList.add('door-opened');
currentItem = elem;
}
// 비활성화
function inactivate(elem) {
elem.classList.remove('door-opened');
}
function doorHandler(e) {
const targetElem = e.target;
if (currentItem) {
inactivate(currentItem);
}
if (targetElem.classList.contains('door-img')) {
activate(targetElem.parentNode.parentNode);
}
}
stageElem.addEventListener('click', doorHandler);
activate( document.querySelector('.door:nth-child(2)') );
})();
</script>
</body>
</html>
문 이미지 태그에 door-img라는 클래스를 넣었고요,
스크립트에서는
if (targetElem.classList.contains('door-img')) {
activate(targetElem.parentNode.parentNode);
}
이런 식으로 그에 맞게 바꾸어 주었습니다.
https://youtu.be/-fFNuNsR8q4
이벤트 위임 보강 파트에 연결된 영상인데요,
이 영상에 나오는 방식으로 만들어보시면 더 견고하게(구조가 수정되어도 상관없는) 코드로 만드실 수도 있답니다.
0
