타닥타닥 민타쿠

마우스 커서를 가져가면 파일 선택 버튼이 보이고, 이미지 파일을 선택하면 해당 이미지를 화면에 보여주는 미리보기 기능을 구현하는 방법에 대해 알아보겠다. HTML 레이아웃 id 기준으로, - imgBox : 마우스 오버를 감지할 곳이다. - imgTag : 이미지 미리보기를 나타낼 곳이다. - inputImg : 파일을 입력 받을 input 태그이다. jpg, png 형식만 accept 로 지정해 해당 확장명의 파일 선택을 유도한다. onchange 시 파라미터로 this 를 넘겨주며 loadFile 함수를 실행한다. 마우스 오버 감지 $('#imgBox').on('mouseover', function() { $('#inputImg').show(); }); $('#imgBox').on('mouseout'..

두괄식으로 말해서, 1. movePage 함수 선언 function movePage(navigator) { var pageUrl = $(navigator).attr("url"); if (pageUrl !== location.pathname) { history.pushState({ path: pageUrl }, null, pageUrl); var popStateEvent = new PopStateEvent('popstate', { state: null }); dispatchEvent(popStateEvent); // event 발생시키기 } } 이동하려는 url 정보를 받아 path 라는 이름으로 history.state 에 저장하고, popstate 이벤트를 발생시킨다. 2. onclick 에 moveP..