해상도별 이미지 교체 window resize

반응형 웹사이트 제작 시 해상도 처리 및 감지 방법에는 2가지가 있다. CSS의 미디어쿼리 사용 Javascript의 $(window).width();와 if문 사용 CSS로는 미디어쿼리와 background 속성을 이용해 해상도별 이미지를 수정할 수 있지만 마크업을 수정할 순 없다. 이때 Javascript로 브라우저의 가로 값을 계산하여 해상도별로 마크업을 수정해줄 수 있다. resize event // jQuery $(window).resize(function(){ // script }); // JavaScript - addEventListener window.addEventListener('resize', function(event) { // script }, true); // JavaScript..

2022.01.11

jQuery scroll 스크롤 끝을 확인하는 방법

브라우저 창 끝 이벤트 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()) { alert('End of Window'); } }); DIV 끝 이벤트 $("#inside").scroll( function() { var elem = $("#inside"); if ( elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { alert("End of Yellow"); } });

2021.12.21