인터랙티브 웹 개발 제대로 시작하기

인터랙티브 웹 개발 제대로 시작하기

(16개의 수강평)

263명의 수강생

55,000원

스튜디오밀
평생
초급, 중급, 활용
62개 수업, 총 10시간 21분
위시리스트 추가
2skyer 프로필

이벤트 함수를 기준으로 하는 js 2skyer 1일 전

선생님~ 신기하고 재밌네요ㅎㅎ

 

그러면 만약 제가 클릭을 했을 때 각 요소마다 여러가지 기능들이 있는 웹을 만든다고 가정할 때, 웹의 각 요소들 마다 변수들을 querySelector로 지정해서 하나하나 만들 필요없이 그것들을 포함하는 container만 지정하고 clickHandler 함수 하나를 만들어서 그 안에 if문과 e.target메소드를 이용해 해당 요소들 지정하고 각각의 기능들을 만들면 되는 건가요? 그렇게 하는 게 더 효율적인 건가요?

그러면 js를 이용해서 웹에 기능을 추가하고 싶을 때 각 변수들이 아닌 이벤트 함수를 기준으로 만들 수 있겠네요..! (클릭, 드래그 같은 선택하는 기능들 위주로)

0
So Heum Hwang 프로필

flex-basis So Heum Hwang 4일 전

flex-basis의 값은 항상 auto 아니면 0만 있는건가요?

또, flex-grow: 1; 이랑 flex-basis: 0;이 같이 있으면, flex-grow: 1 부분은 인식이 안되는건가요..?

0
So Heum Hwang 프로필

.world:hover So Heum Hwang 4일 전

코드를 똑같이 따라했는데, world 에 마우스를 올려 놓으면 바뀌는 것이 아니라 클릭을 해야지만 바뀌는 것은 어떤 점이 잘못된건가요 ㅠ??

0
빠아아아앙 프로필

영상 마지막 부분에서 transitionstart가 왜 안먹힐까요? 빠아아아앙 7일 전

 

코드를 따라 쓰면서 진행하던 상황이고

end일때는 정상적으로 됐는데

start는 어째서인지 무반응입니다 ㅜ

0
2skyer 프로필

align,justify의 items와 content의 차이점 2skyer 13일 전

안녕하세요 선생님

재밌고 다양하게 움직이는 웹사이트를 만들고 싶어서 이 강의를 수강했는데.

벌써부터 만족하고 잘 보고 있습니다.ㅎㅎ

강의를 보다가 궁금한게 생겨서 질문합니다

div 박스 안에 글을 가운데 배치하기 위해 align-items: center; 하고 justify-content: center;를 하셨는데

제가 궁금해서 이것저것 테스트해보니 align은 세로 정렬을 해주고 justify는 가로 정렬을 하는 건 알게 되었는데요.

그런데 align에서 content를 넣으면 정렬이 풀리고, justify에 items를 넣으면 마찬가지로 정렬이 풀리더라구요.

align과 justify의 차이점이 어떤 것이길래 align에는 items이 먹히고 justify에는 content가 먹히는지 알려주실 수 있을까요? 덤으로 items와 content의 차이점도 알려주시면 감사하겠습니다~~

1
ooo oo 프로필

질문있습니다~! ooo oo 1달 전

안녕하세요 이 강의를 보고 인터렉티브 웹에 관심이 많이 생겼는데요. 문제는 다른 예제로도 연습을 하고 싶은데 머릿속에서 구상이 잘 안되네요... 혹시 이런 예제들을 참고할만한 사이트가 있을까요..? 

1
임자영 프로필

css부분 수정한것 임자영 1달 전

1
임자영 프로필

선생님 동영상보면서 코드를 똑같이 작성했는데도 클릭이 안되어 답답합니다 임자영 1달 전

2
ooo oo 프로필

prototype 을 설명해주신 동영상이?? ooo oo 1달 전

어떤 동영상인지 가르쳐 주시면 감사드리겠습니다~!

1
youngmin kim 프로필

에니메이션 이미지는 youngmin kim 1달 전

누가 만들어주시나요?

1
ooo oo 프로필

잘보고 있습니다. 질문있습니다! ooo oo 1달 전

stage를 클릭했을때 문이 닫히지 않는건 성공했는데 

문이 열려있는 자기 자신을 클릭했을때 remove가 되는방법 알고싶어요..!

1
튼튼영어김포중앙본부 프로필

카드 3개가 동일한 class 로 적용을 해주었는데 보이는 각도가 다르게 나오는 이유가 뭘까요? 튼튼영어김포중앙본부 1달 전

world를 바라보는 위치가 다른건가요? 

1
Jeong Sora 프로필

자바스크립트 이벤트 다루기 - 이미지파일은 어디서 받을 수 있나요? Jeong Sora 1달 전

자바스크립트 이벤트 다루기 - 이미지파일은 어디서 받을 수 있나요?

1
Hwan Soo Lee 프로필

box 3개를 무빙 시키면서 click하면 지우는 코드인데 console에는 제대로 찍히는데 삭제가 다른 것이 될 때가 있고 크롬 브라우저가 죽어요. 뭐가 문제일까요? Hwan Soo Lee 1달 전

<!DOCTYPE html>
<html lang="en">

<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>Moving Box</title>
<style>
.stage {
width: 100vw;
height: 75vw;
background: #ffff00;
position: relative;
}

@keyframes moving {
from {
transform: translateX(0);
}

to {
transform: translateX(90vw);
}
}

.box {
position: absolute;
width: 100px;
height: 100px;
animation: moving infinite alternate;
}

.box:nth-of-type(1) {
background: red;
border-radius: 5rem;
left: 0;
top: 0;
animation-duration: 3s;
}

.box:nth-of-type(2) {
background: green;
left: 0;
top: 10vw;
transform: rotate(45deg);
animation-duration: 4s;
}

.box:nth-of-type(3) {
background: blue;
left: 0;
top: 20vw;
animation-duration: 5s;
}
</style>
</head>

<body>
<div class="stage">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
<script>
(function () {
const stage = document.querySelector('.stage');

function clickHanlder(e) {

console.log(e.target);
if (e.target.classList.contains('box')) {
stage.removeChild(e.target);
}

}
 
stage.addEventListener('click', clickHanlder);

})();
</script>
</body>

</html>
 

1
최우석 프로필

elem.removeChild문입니다,, ㅎㅎ 최우석 2달 전

elem.removeChild로는 바로 아래 단계의 엘리먼트만 지울 수 있는걸까요??

더 하위 엘리먼트를 삭제하려면 무슨 방법을 써야할까요!

2