eunyo의 it이야기

홈페이지를 만들다보면 슬라이드 기능을 자주 사용하는데요. 이때 사용하기 좋은 슬라이더 라이브러리인 slick slider를 알아보겠습니다. https://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 1. 설치(CDN) 홈페이지에서 다운로드받거나, cdn을 사용해주시면 됩니다. cdn 주소는 head에 넣어주시고 jquery와 함께 사용해주셔야 합니다! ..

안녕하세요. 오늘은 간단하게 스크롤을 내렸을때 애니메이션 효과를 줄 수 있는 라이브러리를 알아보겠습니다. aos.js로 쉽게 스크롤 애니메이션을 구현할 수 있습니다. aos.js는 간단한 추가만으로 구현이 가능하기 때문에 어렵지 않게 스크롤 애니메이션 구현이 가능합니다. 1. 설치 우선 aos.css와 aos.js를 불러옵니다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 위의 홈페이지에서 직업 다운로드 받아서 넣어주셔도 됩니다. 2. 코드 다음은 html, css, js 코드입니다. [html] 위의 홈페이지를 참고하면..

input checkbox는 바로 css 커스텀이 안됩니다. 그렇기 때문에 label을 이용해 css 커스텀이 필요합니다. 해당 코드는 아래와 같습니다. [html] 체크박스 [css] .check input[type="checkbox"] { -webkit-appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; width: 20px; height: 20px; cursor: pointer; outline: none !important; border: 1px solid #9999; vertical-align: middle; } .check input[type="checkbox"]::before {..

웹사이트를 제작하다보면 그라데이션 배경이나 버튼을 사용할 때가 있습니다. 이때 사용하면 좋은 사이트입니다. css를 자동으로 생성해주기 때문에 간편하게 사용할 수 있습니다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 그라데이션 방향, 투명도, 색상 모두 지정 가능합니다.

안녕하세요 오늘은 스크롤내리면 나타나는 애니메이션 라이브러리인 wow.js의 사용법에 대해 알아보려고 합니다. 간단한 사용법과 다양한 애니메이션효과를 제공합니다. 공식사이트 https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk 설치방법 https://github.com/graingert/wow GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page Reveal CSS animation as you scroll down a page. Contribute to graingert/WOW development by creating an account on GitHub. g..

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 혹은 깃허브에서 다..

안녕하세요 오늘은 스크롤내리면 상단(fixed)고정, 스타일 변경되는 메뉴 예제입니다. HTML LOGO 메뉴1 메뉴2 메뉴3 메뉴4 visual CSS /* reset */ *{margin: 0;padding: 0;} ul li{list-style: none;} a {text-decoration: none;color: inherit;} #header{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;transition: all 0.5s} #header .gnb ul{display: flex;} #header .gnb ul li{margin-right: 20px} #header .gnb ul li:last-ch..

안녕하세요. 요즘 자주 보이는 풀 드롭다운 메뉴입니다. gnb와 햄버거메뉴가 함께 있는 스타일입니다. [html] LOGO 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 [css] /* reset css */ html{font-size: 10px} body{font-size: 1.6rem} *{margin: 0;padding: 0;} ul li, ol li{list-style: none;} a{text-decoration: none;color: inherit;} #head..

초보자를 위한 코인,가상화폐 용어 정리 안녕하세요. 오늘은 코인 초보자를 위한 비트코인 용어를 정리해보려고합니다. 하락세를 찍고 다시 비트코인 가격이 상승하면서, 신규로 코인을 하시는 분들이 계실텐데요. 요즘에는 은행이자가 저금리를 넘어서 무금리라는 말이 나올정도이죠. 자금 재테크를 위해서 주식이나, 코인시장에 눈독을 들이시는 분들이 더 많으신 것 같아요. 그럼 지금부터 코인, 가상화폐의 용어에 대해서 알려드리겠습니다. 1. 대장(머장) 대장은 코인의 대장격인 비트코인을 의미합니다. 2. 알트코인 알트코인은 비트코인을 제외한 코인을 의미합니다. 3. 메이저코인 메이저 코인은 주식에 비교하면 우량주를 뜻합니다.코인 중에서 시가 총액이 높은 코인을 의미합니다. 시가 총액이 큰 코인이다보니 다른 알트코인보다는..

[Github] 깃허브 데스크탑 협업 사용법 많은 곳에서 협업 툴로 Github를 사용하고 있고, 저 역시 Github를 사용하고 있습니다. 회사에서도 git을 사용할 수 있는 사람을 선호하는 만큼, 깃허브의 사용방법은 알고계시는 것이 좋습니다. 그럼 깃허브 사용방법에 대해 알려드리기 전에, 우선 깃허브란 무엇인지에 대해 알아보겠습니다. 깃허브[Github]란? 깃허브(GitHub) 데스크탑 셋팅방법 깃허브(GitHub) 데스크탑 사용방법 깃허브(GitHub) 데스크탑 협업방법 깃허브[Github]란? 깃허브(Github)는개발자 중 70%가 사용한다는 말이 있을 정도로 대부분의 개발자들이 사용하며, 협업 기능을 지원하는 형상관리 툴입니다. 개발에서 소스 코드를 효과적으로 관리할 수 있도록 해주는 툴이죠..