자바스크립트 돋보기 기능 구현 3 JavaScript/jQuery 돋보기 3마지막 단계로 이전 포스팅에서 구현했던 돋보기 모양을 가져가면서, 원하는 배율을 조정하는 기능을 구현합니다.지난 포스팅에서 아주 약간만 손대보겠습니다.HTML / CSS역시 지난 포스팅과 완전히 같은 구조고, 배율로 사용할 data-zoom 속성만 추가했습니다. 3배로 놓아보고..CSS부분은 지난 포스팅에서 건드리지 않았으니 그대로 쓰면 되겠습니다. 123 Colored by Color ScriptercsJS변경/추가된 부분은 딱 3군데입니다. 주석으로 숫자가 달린 부분입니다. 배율로 설정할 data-zoom 값을 가져옵니다.background-size를 활용해 원하는 배율만큼 이미지를 확대해서 복사합니다.저번엔 이 부분에서 원본이미지 크기를 활용하느라 타겟너비를.. 자바스크립트 돋보기 기능 구현 2 Javascript/jQuery 돋보기 2 지난 포스팅에서 마우스 위치에 따라 사진을 확대하는 기능을 만들어 보았는데, 이번 포스팅에서는 아래 사진과 같이 진짜 돋보기라고 할 만한 것을 구현해보고자 합니다. HTML저번 포스팅과 구조는 동일한데 를 태그로 바꿨습니다.123 Colored by Color ScriptercsCSS별건 없고.. 지난 포스팅에서 돋보기가 추가되었습니다.저번 포스팅처럼 HTML 에는 없지만 자바스크립트로 추가될 거에요. 1234567891011121314151617181920212223242526* { margin: 0; padding: 0; box-sizing: border-box;}/* 감싸는 div */.wrap { position: relative; width: 500px.. 자바스크립트 돋보기 기능 구현 1 JavaScript / jQuery 돋보기 1쇼핑몰 등에 많이 쓰이는 이미지 돋보기 기능입니다.3단계에 걸쳐 마우스에 따른 이미지 확대 돋보기 모양 내의 이미지 확대돋보기 모양 내의 이미지 배율확대순서대로 기능을 확장시켜 봅시다.화장품 쇼핑하다가 아래 기능을 보고 따라해 봤습니다.HTML전체를 감싸는 div.wrap 과 이미지를 갖고 있는 div.target 입니다. data.scale은 확대비율로 쓸 값입니다. 2니까 2배가 되겠군요. 태그를 넣지 않고 그냥 data속성 처리했습니다.123 Colored by Color ScriptercsCSS항상 CSS가 문제죠.div.photo는 자바스크립트로 추가되어 마우스 hover/move 시 확대해 보여질 것입니다.123456789101112131415161.. webtoon-like 네이버웹툰 보다가 따라해봤다.스크롤 시 상,하단 네비를 숨긴다.컨텐츠 클릭시 상,하단 네비를 토글한다.화면 최상단이나 최하단에 닿으면 네비가 나타난다. 맨 위로 가는 버튼과 메뉴버튼이 있다. 자꾸 이 부분을 까먹어서 검색하게 된다. 1234//화면 최상단에 닿는지$(window).scrollTop() === 0 // 화면 최하단에 닿는지$(window).scrollTop() == $(document).height() - $(window).height()cs https://jsfiddle.net/ao86gsnm/9/ See the Pen Webtoon-like by kutar37 (@kutar37) on CodePen. 만든 김에 블로그에도 적용. https://saintsilver.github.io/we.. 여러개의 ppt파일 pdf 한번에 변환하기 이번에 수백 개의 ppt 파일을 일괄적으로 pdf 변환할 일이 있었는데, 찾아보다가 귀찮음을 감수하고 한 프로그램을 설치하게 되었습니다. 한 번 써보니 괜찮아서 공유드립니다. 물론 요즘 smallpdf와 같이 웹기반 컨버터 사이트들이 대세인 것은 압니다. 그러나 보통은 무료로 운영되기 때문에 광고가 덕지덕지 붙거나 여러 개의 파일을 일괄처리(batch)하는 것은 일정 기부금을 내야 가능하도록 하는 정책들을 사용하고 있습니다. 가끔 사용하기엔 물론 웹이 간편하지만 자주/많이 변환할 일이 있다면 한 번쯤 알아두는 것도 나쁘지 않을 것 같아요. 프로그램명은 Batch PPT to PDF Converter이며, 공식홈페이지는 이곳입니다. (사실 나중에 또 필요할 것 같아서 첨부) 라이센스를 구매하라고는 하는데,.. cmd에서 한글이 깨질 때 cmd에서 한글이 깨질 때 명령 프롬프트(cmd)를 사용할 때 한글이 깨져 보이는 경우. 생각없이 .bat 파일을 생성해서 일괄적으로 작업하려고 할 때나mysql 등의 database에 접속할 때 GUI 환경이 아니라 명령프롬프트로 접속할 때 한글이 깨지는 경우 활용하자.chcpcmd 창에 chcp를 입력하면 Active code page : 숫자가 뜬다.보통은 437로 설정되어 있을텐데 미국(영어)를 의미한다. 그럼 chcp 949 명령어를 통해 Code Page를 변경해보자.949는 한국어다. 정확히는 "한글 확장 완성형" 이라고 하는데, 그래서 똟딺뽫과 같은 한글도 깨지지 않고 나온다고 한다. 그러나 일반적으로는 chcp 65001을 쓴다. 65001은 흔히 아는 UTF-8 인코딩이다. 그러나 매번.. [javascript] 클립보드에 복사하기 [javascript] 클립보드에 복사하기종종 쓸 일이 있어서 저장용.document.execCommand()아래 브라우저타겟에 맞는다면 이게 간편한 방법이다. 브라우저 호환익스 : IE 9 +크롬 : 42 +파폭 : 41 +오페라 : 29 +사파리 : 미지원아닌데.. IE8 이하도.. 그럼 아래와 같은 꼼수를 쓰자. 프롬프트를 이용해 수동으로 복사하게 하는 구식. 스크롤스파이(scrollspy) 구현 스크롤스파이(scrollspy) 구현SPA(Single Page Application) 웹페이지에서 많이 쓰이는 스크롤스파이를 구현해보자. 가끔 혹자는 스크롤 네비게이션이라고도 부르는 것 같다. 스크롤스파이는 스크롤이 긴 페이지에서 유저가 길을 잃지 않게 도와주는 역할을 한다.카카오페이 홈페이지에 PC로 들어가면 어떻게 구현되어 있는지 확인할 수 있다. - 카카오페이 홈페이지 스텝 바이 스텝으로 구현해본다.아래 단계는 github에 커밋으로 구분되어 있다. 1단계global 스타일링은 최소한으로 하고, SPA 느낌만 내기 위해 태그 5개를 넣었다. 각 은 색깔로 구분했다. 2단계navigation dots를 만들기 위한 과 를 넣는다. href 속성에 #id가 있는데, 이것만으로도 클릭시 해당 섹션으로 .. 이전 1 ··· 6 7 8 9 10 11 12 ··· 24 다음
