Publishing 썸네일형 리스트형 custom radio button 아래처럼 가로로 된 radio button을 쓸 일이 있어서 저장용. 본래의 라디오버튼은 left -9999px로 숨겨버리고, 라디오버튼과 연결된 label을 사용합니다.label의 for 속성을 빼먹으면 작동하지 않으니 주의합니다. 자바스크립트 돋보기 기능 구현 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.. 스크롤스파이(scrollspy) 구현 스크롤스파이(scrollspy) 구현SPA(Single Page Application) 웹페이지에서 많이 쓰이는 스크롤스파이를 구현해보자. 가끔 혹자는 스크롤 네비게이션이라고도 부르는 것 같다. 스크롤스파이는 스크롤이 긴 페이지에서 유저가 길을 잃지 않게 도와주는 역할을 한다.카카오페이 홈페이지에 PC로 들어가면 어떻게 구현되어 있는지 확인할 수 있다. - 카카오페이 홈페이지 스텝 바이 스텝으로 구현해본다.아래 단계는 github에 커밋으로 구분되어 있다. 1단계global 스타일링은 최소한으로 하고, SPA 느낌만 내기 위해 태그 5개를 넣었다. 각 은 색깔로 구분했다. 2단계navigation dots를 만들기 위한 과 를 넣는다. href 속성에 #id가 있는데, 이것만으로도 클릭시 해당 섹션으로 .. 비밀번호 보기/숨기기 기능구현 비밀번호 보기/숨기기 기능구현최근엔 비밀번호 정책이 엄격해져서, 비밀번호 최소길이는 보통 8자가 기본이고 대문자를 섞으라거나 특수문자를 섞으라는 요구를 하는 곳이 많다. 모바일에서 특히 이런 복잡한 비밀번호를 입력하다보면 나도 모르게 비밀번호가 틀리는 경우가 많고, 어떤 과정을 진행중 비밀번호가 틀렸는데 과정이 초기화되고 리다이렉트 되버리는 상황을 겪는 경우도 있다. 그래서 눈 모양으로 비밀번호 입력창 옆에 자리한 아이콘을 누르면, 내가 지금까지 입력한 비밀번호가 보였다가 다시 *로 바꾸는 기능이 존재하는 곳들이 있으면 반갑기도 하다. IE 11에서는 기본적으로 브라우저에 내장된 기능이기도 하다. (추가) 최근 구글 로그인에 이 기능이 생겼다! 생각보다 구현은 매우 간단하다. 따라할 것도 없이 예제만 보.. "맨 위로" 버튼 구현하기 "맨 위로" 버튼 구현하기SPA 웹페이지나 댓글이 200개 300개 달린 페이지에서 사용자가 직접 맨 위로 되돌아가기 위해 스크롤을 직접 이동하는 것은 고역이다. 특히 모바일로 접속한 사용자라면 더더욱 그렇다.모바일 삼성인터넷 앱은 맨 위로 가는 기능이 내장되어 있지만 모바일 크롬 등은 아직 그런 기능이 없기 때문이다. 그래서 요즘엔 어딜 들어가든 대부분 맨 위로 가는 버튼이 존재하는데, 가끔 이게 없는 사이트를 들어가면 성질이 뻗칠 때가 있다. (대부분 블로그들) 현재 내 블로그에도 적용되어 있다. (우측 하단)1. 태그와 #가장 쉬운 방법은 태그를 사용하는 것이다.아래와 같은 태그 하나만으로 페이지 맨 꼭대기까지 이동시켜준다. #만 사용되면 그것은 곧 자기 페이지 자체를 의미한다.1맨 위로cs 그러나.. 이전 1 2 3 다음
