🟨 JavaScript/응용하여 자동화or문제해결하기

문제해결 : hash값 받아서 scroll 조정하기

상황 A 페이지에서 a태그 여러개에 링크를 걸어서 누르면 B페이지의 각각 다른 위치로 연결되게 하려고 한다. (여기서 A페이지와 B페이지는 각기 다른 HTML이다.) A페이지 제목1 제목2 제목3 제목4 ... B페이지 컨텐츠 제목 1 컨텐츠 ... 컨텐츠 제목 2 컨텐츠 ... 컨텐츠 제목 3 컨텐츠 ... 컨텐츠 제목 4 컨텐츠 ... 컨텐츠 제목 5 컨텐츠 ... ... 문제 항상 상단에 css가 fixed로 고정되는 header가 있어서 링크로 이동했을 시 원하는 정확한 위치의 처음부터 보이지 않고 중간부터 보이는 현상이 있었다. 조건 A페이지에서 a태그를 누르면 B페이지의 해당 해시아이디를 가진 h4가 header 바로 아래 오도록 스크롤이 이동되어야 한다. 해결 B페이지에서 아래 코드를 실행시..

자동화 : 팝업 높이 계산해서 아래로 쌓기

상황 매번 새로운 팝업이 올라올 때마다 1200px 아래의 팝업 top값을 그 위 팝업의 높이값만큼 수동으로 업데이트하고 있던 상황이었다. 위의 형태의 팝업이 있으며, 각 팝업은 absolute로 표시된다. 팝업 ID 번호는 유연하며, ID 번호는 항상 변경될 수 있다. (관리자사이트에서 사용자인 클라이언트가 맘대로 써넣는다) 각 팝업이 브라우저 너비 1200px 이하로 떨어지면 첫 번째 팝업이 위에서 아래로 순서대로 배치된다. 하단 배치는 css top:npx로 제어되며, 첫 번째 팝업은 top:60px로 시작하고 두 번째 팝업은 top:(위에 있는 팝업의 높이 값 + 20px)로 계산되어야 한다. 1차 해결 const popups = document.querySelectorAll('[id^="pop_..