전체 글 (11) 썸네일형 리스트형 Bootstrap - Tab 외부 링크 활성화 컨텐츠 작업을 하면 탭을 쓰는 경우가 많다. 탭이 있는 페이지로 가면 대부분 첫번째 탭이 활성화 되어 보여진다. 간혹 다른 페이지에서 링크를 걸고 두번째, 세번째 탭을 활성화 시키고 보이도록 해야하는 경우가 생긴다. 이런경우 아래 소스를 참고하면 링크별로 탭을 활성화하여 노출 시킬수 있다. 우선 외부 페이지에서 링크를 걸어준다. 탭1 링크 탭2 링크 탭3 링크 탭4 링크 탭 페이지에는 기본적인 부트스트랩 탭 소스를 사용하고 아래 추가 작업을 해주면 된다. 탭01 탭02 탭03 탭04 탭01 탭02 탭03 탭04 scrollTop 애니메이션을 준 이유는 활성화된 탭이 브라우저의 상단에 위치하기에 홈페이지의 헤더가 안보이게 된다. 이걸 방지하고자 페이지 이동하자마자 스크롤을 올려준 것이다. Typed.js - 텍스트 타이핑 효과 개인 포트폴리오 사이트 메인에 있던 효과이며 텍스트가 타이핑되는 효과를 주는 라이브러리다. 여러 가지 옵션을 통해서 속도, 반복, 커서 모양, 애니메이션 효과 등 설정할 수 있다. 적용 방법은 js를 불러주고 아래 소스를 이용하면 된다. 자세한 내용은 아래 링크를 참고 mattboldt.com/demos/typed-js/ JavaScript Animated Typing with Typed.js | by Matt Boldt Another demo made with love by Matt Boldt. Installation # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower bower install typed.js Setup .. Bootstrap - Tab 아미나 빌더 기준으로 작업을 하면서 부트스트랩 기본 기능을 사용하는 경우가 많은데 그중 탭 기능이다. 탭01 탭02 탭03 탭04 탭01 탭02 탭03 탭04 www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp Bootstrap JS Tab Reference Bootstrap JS Tab JS Tab (tab.js) Tabs are used to separate content into different panes where each pane is viewable one at a time. For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial. The Tab Plugin Classes Class De.. Liquid Slider - 탭과 슬라이드 기능을 함께 사용 가능한 라이브러리 기본 탭기능에 슬라이드 기능과 네비게이션까지 옵션으로 제공해주고 있다. LH 판교 기업성장센터 프로젝트 메인의 대관시설 소개 영역에 적용했다. 필요에 따라 탭, 슬라이드만 뽑아서 쓰기도 하고 위 프로젝트처럼 같이 쓸 수 있다. pbgcenter.lh.or.kr/ LH 판교제2테크노밸리 기업성장센터 판교제2테크노밸리기업성장센터 세계로 향해 나가는곳, 세계적인 첨단 클러스터 pbgcenter.lh.or.kr 위는 적용사례이며 소스는 아래 링크를 참고 kevinbatdorf.github.io/liquidslider/examples/page1.html Liquid Slider Examples Slide 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ma.. Swiper - 스와이프가 가능한 슬라이더 주로 bxslider로 메인슬라이드를 쓰던 나를 더 편하고 다양하게 활용할 수 있게 해준 슬라이더다. 제공해주는 데모도 많고 Pagination progress를 활용해 모바일 인터페이스를 쉽게 표현하기도 했다. swiperjs.com/ 적용된 프로젝트가 많이 있지만 그중에 가장 적극적으로 쓴 프로젝트는 이브자리 메인 리뉴얼이다. brand.evezary.co.kr/ 이브자리몰 자면서 건강해지세요. 이브자리 공식 몰입니다. brand.evezary.co.kr 메인슬라이드, 베스트 아이템, 이미지 배너 등 한 페이지안에 다양한 데모를 적용하여 표현하였다. Slick - 다양한 데모를 제공해주는 반응형 슬라이더 프로젝트 메인이나 서브쪽에 여러개의 제품을 소개하거나 카드형 컨텐츠를 제작할 때 사용했다. 데모중에 Multiple Items를 많이 사용했으며 응용하여 메인 슬라이드에 적용하기도 했다. kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io FlexSlider 2 - 반응형 슬라이더 bxslider와 같이 많이 쓴 슬라이더이며 보통 모바일쪽 메인 슬라이드, 서브 컨텐츠 속 슬라이드로 사용했다. 이미지의 가로 사이즈에 따라 자동적으로 크기가 조절되며 소스 자체도 쉽고 기능이 이것저것 많이 있다. flexslider.woothemes.com/ FlexSlider 2 flexslider.woothemes.com bxslider - 기본 이미지 슬라이더 프로젝트를 진행하면서 PC용 메인 슬라이드로 제일 많이 쓴 슬라이더 중 하나이다. 제공하는 기능이 많은건 아니지만 기본적이면서도 옵션을 통해서 컨트롤 하기 쉬워 여기저기 프로젝트에 많이 쓴 기억이 있다. bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com Owl Carousel 2 - 터치 가능한 반응형 캐러셀 업무에 적용해 본적은 없지만 터치, 반응형 두가지를 만족하는 캐러셀 중 하나이다. owlcarousel2.github.io/OwlCarousel2/ Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs owlcarousel2.github.io Lorem Ipsum 사이트 Lorem Ipsum. 줄여서 립숨(Lipsum)이라고도 불린다. 출판이나 디자인 분야에서 폰트나 레이아웃 등의 예시를 보여줄 때 사용하는 글이다. - 출처: 위키백과 한글 Lorem Ipsum(간세네) - 문단, 표, 목록 등 여러 타입과 HTML 코드까지 같이 생성해 준다. guny.kr/stuff/klorem/ 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 guny.kr 한글입숨 - 심플하게 글을 생성해주며 문단, 길이를 지정할 수 있다. hangul.thefron.me/ 한글입숨 - 무의미한 한글 텍.. 이전 1 2 다음
