24.08.02 js 팀프로젝트 진행상황 / troubleshooting

오늘은 디테일 페이지 반응형 작업을 진행하였다.

@media를 사용하여 화면 너비에 따른 반응형 작업을 할 예정이었다.

width값을 의도적으로 줄이며 작아져야 할 부분을 체크하여 진행하였다.

하지만 역시나 문제가 발생했다. 

const backgroundImage = document.createElement("img");
backgroundImage.className = "backgroundPoster";
backgroundImage.src = `https://image.tmdb.org/t/p/w500${backdrop_path}`;
$detailContainer.appendChild(backgroundImage);

바로 배경에 깔아주는 포스터와 메인 박스에서 문제가 생긴 것이었다.

문제는 메인박스에 적용되어있던 position:absolute였고, 해당 부분을 삭제하고, backgroundPoster도 새 태그 하나를 만들어 position : absolute와 z-index: -1을 지정하여 해결 하였다.

 

시간이 남아 캐러셀 작업도 진행할 예정이다.

시간이 없었다... 이상하게 x축 스크롤이 생겨 반응형의 문제인가 싶어 이것저것 만져보다가

별점부분의 blankStar의 width가 100%인데, position이 absolute라서 화면을 넓히는 것이었다...

 

해당 부분을 수정하여 버그를 잡아냈을땐 알고리즘 세션의 시작이었다

주말의 내가 알아서 할것이다.