디자인 정보

See the Pen 반응형 탭메뉴 by gahyun (@gahyun) on CodePen.

일반 탭메뉴처럼 생겼지만 모바일 사이즈에서는 위 사진처럼 변하는 탭메뉴 See the Pen Responsive Tap Menu by jaeheekim (@jaehee) on CodePen.

See the Pen Pure CSS Animated Mouse Scroll Icon by Deepak K Vijayan (@2xsamurai) on CodePen. See the Pen Scroll Down Icon Animation by Tsukasa Aoki (@TKS31) on CodePen.

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.

코딩할 때 select를 넣으면 select를 열기 전 상태는 css로 어느정도 커버가 가능한데 (색상 변경, 모양 변경, 기본 브라우저 스타일 제거, 화살표 모양 변경) 옵션박스는 그럴수가 없어서 보기 싫을때가 있다. 그럴 때 사용하기 좋은 셀렉트박스 플러그인이다. 자바스크립트 알못인 나도 썼을정도로 간단하고 쉽다. 사용법 jqueryniceselect.hernansartorio.com/ jQuery Nice Select Usage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compiled CSS... ...or, ideally, import the SASS source (if you use SASS) in yo..

디마크 사이트가 갑자기 사라져 아쉬운 마음에 작성해보았다. 내가 평소에 많이 이용했던 사이트 위주로! (생각나는대로 계속 추가할 예정) 영감 레퍼런스 핀터레스트 '수백만개의 아이디어'라는 소제목처럼 참고할 만한 다양한 주제의 이미지들이 많다. https://www.pinterest.co.kr/ 비핸스 포토샵을 만든 어도비가 운영하는 사이트로 작가와 예술가를 위한 sns https://www.behance.net/ 드리블 위 두 사이트들과 비슷한 느낌. 디자이너들이 자신의 작업물을 올려놓는 사이트이다. dribbble.com/ site inspire 퀄리티 높은 웹디자인 작품들이 게시되어 있다. www.siteinspire.com/ MOBBIN 해외 앱 디자인 레퍼런스를 확인할 수 있는곳 mobbin.de..

스와이프되는 슬라이드를 엄청나게 찾다가 알게된 slick slider 사용법도 간단한 편이다. 일단 여기서 파일을 다운 받아준다. 헤드에 추가해줄것 본문 코드 slick slider는 특별하게 class명을 지켜줘야 되는 것 없이 내가 원하는 클래스명을 사용하고 아래 script에 해당 클래스명을 넣어주면 내가 지정한 class의 자식 div요소들을 슬라이드 가능하게 해준다. 내가 사용한 슬라이드는 respansive slider로 브라우저 크기에 맞춰 요소 갯수를 조절해주는 것인데 아래 사이트에 들어가보면 여러 데모가 준비되어 있고 사용법도 제공되어 있으니 복붙만 해주면 간단히 사용할 수 있다. http://kenwheeler.github.io/slick/