반응형

IT/HTML

[HTML] data-tab을 이용하여 Tab 기능 만들기

data-tab태그 와 cnt의 id값을 공통으로 하여 연결시켜준다. HTML 01월31일 02월01일 02월02일 오늘의 할일 비타민 챙겨먹기 선풍기씻기 냉장고청소 오늘의 할일 홍삼먹기 연차 오늘의 할일 청소하기 화분물주기 CSS .container{margin:0 auto; width:80%;} .tab_tit{padding-top:20px; border-bottom:1px solid #777;} .tab_tit::after{content:''; display:block; clear:both;} .tab_tit li{float: left;width: 150px;height: 32px;text-align: center;line-height: 32px; cursor:pointer} .tab_tit li:..

2020.01.31 게시됨

IT/CSS

[css] easing 의 종류 및 사용방법

easing이란? - 애니메이션 을 자연스럽게 만든다. - 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피해야함 (사용자에게 갑갑한 느낌을 줄수 있음) 키워드 - ease : 시작과 종료를 부드럽게 - linear : 일정 - ease-in : 서서히 시작 - ease-out : 서서히 종료 - ease-in-out : 서서히 시작하여 서서히 종료 - cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정 - easeInQuad - easeOutQuad - easeInOutQuad - easeInCubic - easeOutCubic - easeInOutCubic - easeInQuart - ease..

2020.01.23 게시됨

IT/JavaScript

::스크롤시 애니메이션효과 라이브러리::AOS. js

AOS(Animate On Scroll Library) 페이지 스크롤을 했을 때 페이드, 회전 확대 등의 다양한 에니메이션 효과를 구현 한 라이브러리 ※ IE9 지원안함 ※ https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io //헤드에 아래코드 추가 //사용할 태그에 data-aos 추가/attribute="애니메이션 이름" //첫번째 방법 AOS //두번째 방법 AOS

2020.01.06 게시됨

반응형