eunyo의 it이야기

이미지맵 반응형 적용방법 이미지에 링크를 삽입할 때, 이미지맵(image map)을 사용합니다. 이때 이미지맵은 css로 반응형 제작이 어렵기 때문에 스크립트로 수정해줘야하는데요. 플러그인으로 간단하게 처리하는 방법에 대해 알아보겠습니다. [github] https://github.com/stowball/jQuery-rwdImageMaps GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin Responsive Image Maps jQuery Plugin. Contribute to stowball/jQuery-rwdImageMaps development by creating an account on GitHub. github..

animate.css는 애니메이션 라이브러리이다. css를 통해 직접 만들수도 있지만 이를 이용하면 더욱 간편하게 사용가능하다. 공식사이트 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 설치방법 npm $ npm install animate.css --save cdn 혹은 깃허브에서 다..

컨테이너에 맞게 이미지 크기를 조절해주는 jQuery 플러그인입니다. 반응형에서도 이미지가 깨지지않게 해주고, 사용법도 쉽고 간단합니다. 1. js파일 다운로드 https://github.com/karacas/imgLiquid GitHub - karacas/imgLiquid: jQuery plugin to resize images to fit in a container. jQuery plugin to resize images to fit in a container. - GitHub - karacas/imgLiquid: jQuery plugin to resize images to fit in a container. github.com 깃허브 홈페이지에 가서 js파일을 다운로드 받아줍니다. 2. js파일 연..

차트를 그릴 때 좋은 c3.js의 사용법과 옵션 등에 대해 알려드리겠습니다. d3를 기반의 플러그인입니다. chart의 font-family color 등 여러가지 항목들을 css로 커스텀이 가능해서 무료 차트중에서는 확장성이 높은편입니다. 01. c3 설치 https://github.com/c3js/c3/releases/tag/v0.7.20 Release v0.7.20 · c3js/c3 Changes Fix config subchart_axis_x_show (#2806) Fix pan of y-axis when zoomed and rotated=true #2799 (#2805) github.com C3의 깃허브에서 c3를 설치해줍니다. 02. JS/CSS 추가 아래의 코드는 c3 css와 js파일 cd..

무료 차트(chart) 플러그인 웹을 제작하다 보면, 차트가 필요한 경우가 종종 있습니다. 간단한 막대그래프같은 경우에는 html, css로 그려내도 되지만, 보통은 chart의 플러그인을 사용하여 구현합니다. 그럼 무료로 사용가능한 차트 플러그인에 대해 알아보겠습니다. 1. chart.js (www.chartjs.org/) 차트플러그인 중에서 유일하게 사용해본 chart.js 입니다. 차트플러그인 중에서 꽤 유명한 편이라 국내에서도, 해외에서도 예제들을 많이 찾아볼 수 있습니다. 간단한 차트를 표현하기에는 좋지만, 커스텀하기가 불편해서 정말 간단한 차트만 그리기 좋은 차트입니다. 2.C3.js (c3js.org/) c3는 생성할 때 각 요소에 일부 클래스를 제공하여, 사용자 정의 스타일을 적용할 수 있..

Chart.js로 막대 그래프 그리기 간단하게 표를 그리기 쉬운 플러그인인 chart.js의 막대 그래프(bar chart) 그리는 방법과 옵션에 대해 알려드리겠습니다. chart.js 는 간단한 차트를 그리기에는 용이하지만, chart.js 기본 옵션에 있는 스타일 외의 커스터마이징이 까다롭거나 한정적이라는 단점이 있습니다 :) 저도 사용하면서 몇번 머리가 아팠는데요.. 사용해보고, 홈페이지 찾아 본 여러 막대그래프 예제 올려드립니다. 혹시 다른 필요한 예제가 있다면 댓글남겨주세요 :) 우선, chart.js의 사용법을 모르신다면 아래의 포스팅을 참고해주세요 :) chart.js 시작하기 [차트플러그인]chart.js 시작하기 사용법, 옵션 차트를 사용할 때 사용하기 좋은 플러그인인 chart.js의 ..

편리한슬라이드 플러그인인 스와이프 슬라이드는 아마 많은분들이 사용하고 있을거라고 생각이 드는데요. 분명 크롬에서는 작동을 하는데, 익스플로러에서 작동이 안되는 경우가 있습니다. 그때의 해결방법을 알려드리겠습니다. swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com swiper slider 슬라이드 익스플로러 오류 해결 방법 이유는 간단합니다. 스와이퍼 슬라이드에서 익스플로러를 이제 지원하지 않기 때문입니다. 그렇기 때문에..

parallax.js 플러그인입니다. 패럴랙스 스크롤링 효과는 스크롤의 움직임에 따라 콘텐츠가 반응하여 시간차 움직임을 보이는 효과입니다. 아래 사이트에서 다운받거나 옵션을 확인해보세요 :) pixelcog.github.io/parallax.js/ [사용방법] 01. 설치 jquery와 함께 parallax.js를 추가해주세요. 02. html 마크업 해당 영역에 class="parallax-window" , data-parallax="scroll" data-image-src="이미지 경로"를 추가해줍니다. 자바스크립트로 호출할 경우에는 아래항목을 추가해주시면 됩니다. $('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'}); 03. css 추가..

차트를 사용할 때 사용하기 좋은 플러그인인 chart.js의 사용법과 옵션을 알려드리겠습니다. Chart.js는 강력한 오픈소스 라이브러리로 활용성이 높아요 :) 01. 우선 GitHub에서 Chart.js 파일을 다운받아 설치해줍니다. github.com/chartjs/Chart.js chartjs/Chart.js Simple HTML5 Charts using the tag. Contribute to chartjs/Chart.js development by creating an account on GitHub. github.com chart.js 사이트안에 많은 예제 파일과 사용법이 있으니까 참고하세요 :) 02. JS 연결을 해줍니다. npm 연결 다운받은 파일로 연결 03. 페이지에 컨버스를 삽입한..

isotope.js는 항목별로 볼 수 있는 필터와 이미지 정렬을 해주는 플러그인입니다. 포트폴리오 형태나 제품 소개 항목에 넣으면 보기 좋게 정렬을 시켜줘요! 다운로드와 샘플은 아래의 해당 사이트에서 해주시면 됩니다 :) https://isotope.metafizzy.co/ Isotope · Filter & sort magical layouts Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save License Commercial license If you want to..