Publishing 썸네일형 리스트형 HTML5 & Javasciprt : Drag&Drop 구현 (예제) Drag&Drop : File API파일을 다루기 위해선 HTML의 태그나, 드래그 앤 드롭을 사용해 사용자에게 파일을 받고, File API를 이용한다. 아래 움짤은 드래그 앤 드롭으로 파일을 받는 모습인데,본 포스팅에서는 이미지를 받되 한 단계 더 거쳐서 해당 이미지를 띄워주는 것까지 구현해본다.(서버상에서 이미지를 받아 경로를 리턴해주는 것이 아니라, 앞단에서 파일을 다룸)기본구조 기능구현을 위한 기본 구조는 아래와 같다.HTML이미지를 받아낼 단 하나! drag and drop your image!cscss굳이 이렇게 안해도 됩니다.. .content{ outline: 2px dashed #92b0b3 ; outline-offset:-10px; text-align: center; transitio.. Noto Sans Google에서 내놓은 Noto Sans. 한글 무료폰트의 갑은 네이버의 나눔시리즈가 아닐까? 하지만 가끔 해상도에 따라 다르게 보이거나 굵기에 따라, 혹은 특정 크기에서 일부 글자가 이상하게 보이는 경우가 있었다. 그리고 난 나눔고딕보다 나눔바른고딕을 좋아하는데, 나눔바른고딕은 구글폰트에 존재하지 않아서 cdn url로 받으면 너무 느리고, 굵기는 4종류뿐이고, 중세국어는 옛한글폰트를 따로 깔아야 되고.. 등등 사소한 아쉬움들이 있다. Noto sans는 폰트하나로 중세국어도 지원하고, 굵기가 7가지고, 모든 자모 조합에서 한글이 깨지지 않는다. (일반적인 한글폰트에서 깨지는 귏곩잢... 같은 글자도 깨지지 않고 지원한다) Apache 2.0 라이센스라서, 얼마든지 상업적 이용이 가능하다. 영화 포스터.. hammer.js: 모바일처럼 스크롤/스와이프 최근 터치스크린에서 돌아갈 웹앱(kiosk-like)을 구현하는 중,웹에서도 모바일처럼 드래그하면 스크롤이 이동하고 스와이프로 슬라이드쇼를 넘기고 핀치로 확대/축소도 가능해야 하며더블클릭으로도 확대/축소가 이루어져야 하는 등웹이지만 그냥 모바일이라고 착각하게 할만한 기능들이 필요했다. 구현되어있는 라이브러리가 있었다 ㅎ_ㅎ 아래 공식페이지에서 예제와 사용법을 볼 수 있다.https://hammerjs.github.io/ 용량도 7kb밖에 안되는데 위의 기능들 전부를 구현할 수 있다. (몇몇 기능은 브라우저에 제한이 있다)Usage아래는 스와이프만 갖다쓴 예.1234567891011121314151617 var element = document.getElementById("parent"); var mc =.. 슬라이드쇼 구현 (css/javascript/jquery) 슬라이드쇼 구현 (css/javascript/jquery)1. 기본흔하게 볼 수 있는 기본 슬라이드쇼. HTML의 기본 구조는이미지를 위한 태그이전, 다음으로 넘어가기 위한 태그순서와 현재 위치를 위한 태그로 이루어져 있으며, CSS로 슬라이드쇼를 위한 기본 모양이 잡혀 있다. 자바스크립트에서는 배열을 이용해 태그 혹은 태그를 클릭하는 이벤트가 발생할 때마다 반복문으로 전체 이미지를 display:none 해서 감추고, replace를 통해 모든 태그의 className에 active를 제거하는 단계가 포함된다. 그 뒤 현재 인덱스에 해당하는 에 active className을 추가하고, (CSS에 active 클래스 색지정이 되어 있다.)해당 태그에는 display:block으로 스타일을 변경해 사진이.. Custom Form tag Bootstrap4 적용. 아이콘을 위해 fontawesome의 css를 받아와야 하고, Fontawesome Icons 이 링크로 들어가 사용하고 싶은 아이콘을 골라 쓰면 된다. 사이드바 외부클릭시 숨기기 웹페이지에서 사이드바 바깥쪽을 클릭하면 사이드바가 사라지게 하는 기능을 구현해보자. 특히 모바일 사용자가 대다수를 차지하는 홈페이지에서는 UI 면에서 안그래도 좁은 사이드바에 X 버튼 혹은 닫기 버튼을 우겨넣을 필요가 없으니 네비게이션 본연의 기능에 집중할 수 있어 좋다. UX 면에서도 사용자가 닫기버튼을 누르기 위해 핸드폰 화면 최상단까지 손가락을 움직이는 수고를 덜어주는 장점이 있고, 모바일 앱에서 쓰이는 네비게이션(예: 안드로이드에서 쓰이는 Navigation Drawer)에서는 바깥쪽을 터치해 드로어를 닫는 기능이 기본적으로 포함되어 있으므로 경험이 있는 사용자라면 따로 설명이 필요없는 익숙한 기능이라 구현해놓으면 좋다. 뒤집어 말하면 사용자는 하던대로 사이드바 바깥쪽을 클릭했는데 닫히지 않으면 .. 무한 스크롤(Infinity Scrolling) 예제 6가지 무한 스크롤(Infinity Scrolling) 예제/구현 6가지원본은 이곳입니다. 아래는 번역입니다. 오타 및 오역은 댓글로 알려주세요. 인피니티 스크롤은 이제 흔한 기능이고 실제로 유용하게 사용되는 사례들을 찾을 수 있습니다. 우리가 페이지를 매기는 시스템을 쉽게 생각하기 힘든 몇몇 웹사이트들, 예를 들어 트위터나 페이스북같은 사이트들이죠. 다른 예로 인피티니 스크롤은 검색엔진에서도 유용하게 사용될 수 있습니다: 사용자가 원하는 링크를 찾지 못했을 때 계속해서 새로운 결과를 찾고 싶다면, 페이징 시스템은 검색속도를 늦출 것입니다. 만약 당신이 프로젝트에 인피니티 스크롤을 사용하고 싶다면, 여기 영감을 얻고 발전시킬 수 있는 6개의 데모가 있습니다. 마지막 예제를 제외하고 나머지는 jQuery로 쓰여졌.. 프리로더(preloader)의 사용과 구현 프리로더(preloader) 사용과 구현페이지로딩, 혹은 홈페이지를 처음 접속했을 때 사용자에게 지루함을 덜어주는 프리로더를 쉽고 간단하게 갖다 쓰자!Preview예제를 위해 구글에서 preloader라고 검색해서 무료로 공개되어 있는 gif 이미지를 다운받았다. 압축을 해제하면 사이즈별로 폴더가 있고 그 안에는 7개의 프리로더가 들어있는데 그 중 원하는 스타일의 gif 파일을 갖다 쓰면 된다.각자 프로젝트에 복사해 쓰자. png 파일도 부분별로 전부 제공하니 수정해서 쓸 수도 있다. 구현HTML 단! 하나! 위치는 전체 wrapper 역할의 최상단 div 바깥에..1csCSSposition을 처음에 absoulte로 잡았는데, height 100% 일때 스크롤바가 생겨서 fixed로 변경했다.12345.. 이전 1 2 3 다음
