fixed 2

자바스크립트) 스크롤 이벤트를 활용한 배너의 absolute 와 fixed 설정 변경

안녕하세요. 찐망고 입니다. 오늘은 보그코리아 웹사이트의 마지막 하단 섹션을 클론 해 볼 건데요. 보그 코리아 (Vogue Korea)컬렉션부터 스타일, 쇼핑, 뷰티, 라이프스타일, 셀러브리티까지 지금 가장 핫한 트렌드 소개www.vogue.co.kr 하단섹션은 왼쪽과 오른쪽으로 나뉘어서왼쪽 섹션은 grid나 flex를 이용한 리스트섹션, 그리고 오른쪽은 배너모양의 이미지가 한 장 있어요.스크롤 시 오른쪽 이미지가 고정되어 푸터섹션에 도착할 때까지 움직입니다.   오른쪽 배너이미지는 처음엔 absoulte였다가 다시 fixed로 변경할 예정이고,fixed변경 시 좌표값이 부모요소 기준에서 뷰포트 기준으로 변경되므로그 부분을 염려해서 CSS작업을 해볼 예정이에요 왼쪽과 오른쪽을 저렇게 fix클래스 요소로 ..

WEB/JS코드 2024.09.27

적응형 pc) header요소 fixed인 경우 가로 스크롤

안녕하세요 찐망고입니다. 아.. 정말 매일매일 포스팅하시는 분 리스펙 바쁘니까 바로 본론에 들어가서 적응형 사이트를 만들다보면 pc와 mobile사이트를 따로 작업하게 되는데, pc의 해상도 기준을 최소 1366정도 잡거든요.. 그 이하 해상도에선 가로스크롤이 생기게요~ 문제는 header가 position: fixed인 경우 width길이만큼 고정이 되어버린다는 거죠~ 가로 스크롤을 이동해도 헤더는 움직이지 않습니다 저걸 무시하고 마크업 하는 분들도 있고, 움직이게는 했는데 전체 메뉴가 보이지 않게 셋팅한 사이트들도 많더라구요 이렇게 가로스크롤을 해도 nav가 제대로 보이는 게 좋겠죠? // HTML 제목 // CSS header { position: fixed; width: 100%; z-index:..

WEB/JS코드 2023.06.05