11장 flex 기반 동영상 웹 페이지 제작하기

Iris·2021년 12월 15일
0
post-thumbnail

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021


마우스 포인터를 올리면 동영상 재생하기

// 모든 article 요소를 변수 items에 저장
const items = document.querySelectorAll("article");

// article 요소의 개수만큼 반복
for (let el of items) {
  // 현재 반복하는 article 요소에 mouseenter 이벤트 발생
  el.addEventListener("mouseenter", (e) => {
    // 자식 요소인 video 재생
    e.currentTarget.querySelector("video").play();
  });

  // 현재 반복하는 article 요소에 mouseleave 이벤트 발생
  el.addEventListener("mouseleave", (e) => {
    // 자식 요소인 video 일시 정지
    e.currentTarget.querySelector("video").pause();
  });
}

목록을 클릭하면 영상 소개 페이지 보여주기

const aside = document.querySelector("aside");
const close = aside.querySelector("span");

for (let el of items) {
  // 현재 반복하는 article 요소에 mouseenter 이벤트 발생
  el.addEventListener("click", (e) => {
    // 제목과 본문의 내용, 그리고 video 요소의 src 값을 변수에 저장
    let tit = e.currentTarget.querySelector("h2").innerText;
    let txt = e.currentTarget.querySelector("p").innerText;
    let vidSrc = e.currentTarget.querySelector("video").getAttribute("src");

    // aside 요소 안쪽 콘텐츠에 위의 변수를 적용
    aside.querySelector("h1").innerText = tit;
    aside.querySelector("p").innerText = txt;
    aside.querySelector("video").setAttribute("src", vidSrc);

    // aside 요소 안쪽의 동영상을 재생하고 aside 요소에 on을 붙여 패널 활성화
    aside.querySelector("video").play();
    aside.classList.add("on");
  });

  // close 요소 클릭 시
  close.addEventListener("click", () => {
    // aside 요소에 클래스 on을 제거해 비활성화하고 안쪽의 영상을 재생 정지
    aside.classList.remove("on");
    aside.querySelector("video").pause();
  });
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

flex를 활용하여 요소들을 배치하는 법을 복습했다. hover 효과를 적용해 마우스가 요소 위에 올라갔을 때 변화를 주며 활동적인 웹 페이지를 제작했다.

profile
👩🏻‍💻 Web Front-end Developer

0개의 댓글