position:fixed가 안먹히는 이슈

youtube api를 연동하여 갤러리 페이지를 만드는 중에

이 thumbnail을 클릭하면 popup에 영상이 뜨도록 자바스크립트에서 동적으로 pop 창을 만들어주려했다

 

<div class="sectionCont">
	<div id="youtube"></div>
</div>

html은 이게 끝인데 이게 끝인 이유는 list에 해당하는 마크업은 javascript에서 만들어주었기 때문...!

result += `
        <article class='youtubeCont'>
          <a href="${el.snippet.resourceId.videoId}" class="pic">
            <img src="${el.snippet.thumbnails.high.url}">
          </a>
          <div class="con">
            <h2>${title}</h2>
            <span>${date}</span>
          </div>
      </article>
      `;

저 #youtube안에 이렇게 동적으로 페이지를 그려주었음..!

 

const youtubeList = document.querySelector("#youtube");

//이벤트 위임 클릭시 pop 모달생성
youtubeList.addEventListener("click", (e) => {
  e.preventDefault();

  if (!e.target.closest("a")) return;

  const vidId = e.target.closest("a").getAttribute("href");

  //동적으로 pop 생산
  let pop = document.createElement("figure");

  pop.classList.add("pop");

  pop.innerHTML = `
      <iframe src="https://www.youtube.com/embed/${vidId}" frameborder="0" width='100%' height='100%' allowfullscreen></iframe>
      <span class='btnClose'>close</span>
    `;
  youtubeList.append(pop);
});

이게 내가 만들어준 popup인데 유투브 리스트를 클릭했을 때 기존에 걸려있던 a태그 이벤트를 막고

유투브리스트 안에 내가 찾은 타겟 안에 a태그와 클릭한 유투브리스트 안의 a태그가 일치하지 않으면 클릭이벤트가 발생하지 않게 했다

그리고 위에서 a태그의 href 값을 vidID라는 변수 안에 담아주고  popup은 figure태그를 만들어 그 안에 iframe과 span태그로 영상과 클릭버튼을 만들어주었음!

그리고 youtubeList 안에 append로 popup창을 밀어넣었다 

 

figure.pop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh;
    overflow: hidden;
    iframe{
      width: 100%;
      height: 90%;
    }
    .btnClose {
      position: absolute;
      top: 20px;
      right: 20px;
      color: #fff;
      cursor: pointer;
    }
}

이 pop창을 position으로 띄워서 화면 꽉차게 만들어주려고 했기 때문에 css를 이렇게 주었는데

 

왜죠...?

왜 fixed가 안먹히나요....이때까지는 내가 스크립트를 잘못짠 줄알고 스크립트만 미친듯이 괴롭혔다ㅋㅋㅋㅋㅋ

내가 경로를 잘못탔나..싶어가지고 변수도 괜히 바꿔보고..position이 안먹힌게 마크업이랑 스타일 때문인지도 모르고....바보...

 

스크립트만 건드린지 1시간이 지났을 때 z-index도 안먹히는게 이상한 것이다 그래서 스타일을 봤는데 혹시 부모요소에 transform이 있어서 고정이 안되나 라는 생각이 들었다...^^

 

#youtube {
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(100px);
    transition: 1s;
    &.on {
      opacity: 1;
      transform: translateY(0);
    }
}

부모 요소에 transform을 주어 화면이 로드 된 후 on 클래스를 주어 리스트들이 스르륵 올라오는 효과를 주기 위해 transform을 주었었는데 내가 pop까지 이 #youtube안에 넣어서 transform때문에 pop이 안먹혔나보다... 효과를 제거할 수는 없으니 #youtube 상위에 div태그로 한번 더 감싸주고 그 상위 태그에 append.pop을 해주었다

 

먹힘... 역시 transform이 문제였다 저번에도 transform때문에 한번 헤맸었는데ㅋㅋㅋㅋㅋㅋ

나는 뭔가 문제가 생기면 transition이나 transform이 문제인가보다...ㅎㅎ 앞으로 마크업할 때 한번 더 감싸주던가 해야지....

프론트개발자가 html,css를 잘 익혀야 하는 이유를 또한번 느끼고....눈물을 흘렸다