찐망고'S 퍼블리싱그리고디자인

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

안녕하세요 찐망고입니다. 스크롤을 내리다 보면 어느 틈인가 나타나는 탑버튼.. 다시 스크롤을 올리면 사라지는데요 그거 해볼 거임 이전 탑버튼애니메이션도 참고해 주시고요 자바스크립트 top 버튼 애니메이션 안녕하세요 찐망고입니다. 웹사이트에서 페이지가 길어질 때 나오는 top버튼 top버튼을 누르면 자연스럽게 페이지위로 올라가는 애니메이션을 적용해 볼까 합니다. 제이쿼리에는 animate()라는 메 uiweb.tistory.com jQuery // top버튼 애니메이션 $(".topBtn").click(function() { $("html, body").animate({ scrollTop: 0 }, 500); return false; }) // 스크롤 이벤트 $(".topBtn").hide(); $(win..

안녕하세요 찐망고입니다. 얼마전 setInterval()을 이용하여 숫자 카운팅하는 포스팅을 했었는데요 2023.06.28 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); 안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 uiweb.tistory.com 아무래도 저런 작업을 main문서에 넣다보면 스크롤 이벤트도 막 하고 싶잖아요? 다알아요 하고싶은거.. 물론 스크롤이벤트가 가능한 플러그인..