코드공부방

window resize event 텀을 두고 실행하기 (resize end event) window resize 이벤트안에 어떠한 코드를 넣으면 매 resize시마다 이 코드가 실행된다. 의도적으로 매 resize마다 코드를 실행해야 하는 경우도 있지만, 그렇지 않은 경우라면 이는 매우 비효율적이고 때에 따라서는 브라우저에 과부하를 줄 수도 있다. 윈도우 리사이즈시 console.log을 찍어보자. 아래 코드를 보자. //Javascript window.addEventListener('resize', function(){ console.log('resize event!'); }); //jQuery $(window).on('resize', function(){ console.log('resize even..

window popup 새창(팝업창) 열기, 띄우기 (javascript window.open()) 예전엔 아주 많이 사용했던 윈도우 팝업(window popup)창, 요즘은 보기 힘들다. 주로 내부 시스템, 관리자 같은 곳에 쓰이는 편이다. 가끔 필요할때마다 검색해서 사용하다가 그냥 정리해서 갖고 있으면 좋을 것 같아서 정리해본다. 사용방법은 window객체의 open메소드를 사용하면 된다. //Javascript window.open('경로', '팝업 이름', '옵션'); 아래는 팝업창 함수 사용 예제이다. 팝업창 열기 //javascript function openWindowPop(url, name){ var options = 'top=10, left=10, width=500, height=600,..

jQuery(제이쿼리) 동적으로 생성된 요소 이벤트 및 index(인덱스) 가져오기 한 개발자분이 ajax를 통해 동적으로 불러온 이미지 리스트 중 선택된 이미지를 삭제하는 것을 jQuery코드로 구현하고 있는데 클릭 이벤트 발생부터 애를 먹고 있었다. 해당 UI와 HTML코드는 아래와 같다. 동적으로 불러온 이미지 목록이 아니었다면 아래와 같이 클릭한 X버튼이 속한 li태그의 삭제기능 jQuery코드로 구현할 수 있다. //Javascript $('.car-image-list li .btn-delete').on('click', function(){ $(this).parent('li').remove(); }); 하지만 ajax등을 통해 후에 불러와진 목록이라면 삭제버튼의 클릭이벤트 부터 먹통이 될 것이다..

쿠키(cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기 웹사이트 작업을 하다보면 항상 들어가는 기능이 있다. 바로 공지사항 등을 레이어팝업이나 페이지 최상단에 노출시키고 매번 노출시키면 사용자가 번거로울 수 있으니 하루동안은 해당 배너가 뜨지 않도록 해주는 "오늘 하루 보지 않기", "오늘 하루동안 안보기"로 불리우는 기능이다. 오늘 하루 보지 않기 기능이 들어간 사이트는 쉽게 찾아볼 수 있다. 이 기능을 구현하는 방법에는 여러가지가 있을 수 있을 것이라 생각된다. 이 글에서는 복잡하지 않고 정말 쉬운방법인 제이쿼리 쿠키(jQuery Cookie)를 가지고 기능을 구현해보려 한다. 사실 마땅한 기능명이 없으니 오늘 하루 보지 않기 기능이라고 하는거지 쿠키(cookie)를 가지고 여러가지 기능을 ..

lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy) 웹사이트를 제작하게되면 자연스럽게 페이지내 수 많은 이미지 및 동영상등 미디어 콘텐츠를 사용되게 된다. 그러한 미디어 콘텐츠들은 눈으로 보기엔 좋지만 당연히 리소스를 많이 차지하게 되며, 이는 사이트의 성능에도 영향을 끼치고 나아가서는 사용자로 하여금 불편함을 주게된다. 사용자에게 중요하지 않은 (눈에 보이지 않는) 이미지를 먼저 로딩시키느라 사용에게 중요한 (눈에 보이는) 화면을 보여주지 못하고 있을 수 있다는 것이다. 아래 이미지를 보면 임의로 40개의 이미지 목록을 보여주는 페이지를 만들었는데 로드 시 이미지의 순서와 관계없이 뒤죽박죽 모든 이미지를 로드하느라 서버가 바쁜 것을 확인할 수 있다. (브라우저 개발자도구..

스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트 상단, 하단에 모두 고정 메뉴나 콘텐츠가 있는 경우 모바일 환경에서는 콘텐츠를 볼 수 있는 영역이 좁아 부담스러울 수 있다. 따라서 사용자가 스크롤을 올리는지, 내리는지 체크하여 하단고정메뉴를 노출 또는 비노출 처리하여 콘텐츠를 볼 수 있는 영역을 유동적으로 넓힐 수 있다. Scroll check Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ..

무한스크롤 (Infinity Scroll) UI 구현하기 쇼핑몰이나 상품 또는 게시글 목록에서 갯수가 많아지면 자연스럽게 페이징(Page nate, pagenation 등으로도 불리운다) 처리를 하게 된다. 근데 PC에서 쓰이는 페이징 UI를 모바일로 그대로 가져올 경우, 원하는 페이지로 넘어가기 위하여 숫자버튼을 눌러야 하는데 매우 불편하다. 때문에 모바일에서는 보통 상품 목록을 화면에 노출시킬때 Infinity Scroll UI / 무한스크롤 UI를 사용한다. 모든 상품을 한번에 불러올 경우 페이지 로딩 속도에도 문제가 생기기 때문에 최초 특정 갯수 만큼만 노출 로드시킨 뒤, 사용자가 스크롤을 하면서 최초 노출시킨 목록을 다 보게되면 또 특정 갯수만큼의 목록을 로드하여 사용자로하여금 별도의 행동없이 ..

레이어팝업을 띄우면 뒤쪽 콘텐츠의 스크롤을 막아달라는 요청이 간혹 있다. (그냥 스크롤이 가능하게 되길 희망하는 클라이언트도 있다.) /* CSS */ .hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;} //Javascript function scrollDisable(){ $('html, body').addClass('hidden'); } function scrollAble(){ $('html, body').removeClass('hidden'); } 레이어팝업을 띄우는 함수안에 위와 같은 함수를 만들어 넣어주면 된다. 위 함수는 html과 body태그에 "height:100%; overflow:hid..