2주차

클래스 관련 이벤트

.addClass() .removeClass() .toggleClass()

button에 onclick 이벤트는 전역변수를 유발하므로 지양해야 함

이벤트 명령 방법 세 가지 

.click / .on / .bind

제이쿼리를 이용한 요소 추가

$("<div></div>")

$("<div/>")

요소 추가 이벤트

appendTo() .prepentTo()

벤더프리픽스

-webkit- 구글 크롬, 사파리, 안드로이드, iOS

-moz- 파이어폭스

-o- 오페라

-ms- 사파리

이미지 폰트 모음

http://fortawesome.github.io/Font-Awesome/

timing function

linear / ease-in / ease-out / ease-in-out

transform : 2d transform / 3d transform

-> 2d transform : translateX() (X축 이동), translateY() (Y축 이동), rotate() (회전), scale() (확대/축소)

-> 3d transform : 

animate

.fa-cog:hover{

-webkit-animation: rotateAni 3s infinite linear alternate;

}

@-webkit-keyframes rotateAni{

from{

-webkit-transform: rotate(0deg);

}

to{

-webkit-transform: rotate(360deg);

}

}

3d css transforms

https://desandro.github.io/3dtransforms/

css3maker.com

http://www.css3maker.com/index.html

부트스트랩

http://getbootstrap.com/

부트스트랩 테마

http://bootswatch.com/

부트스트랩 grid system

extra small	small (min 768px)	medium(min 992px)	large (min 1200px)
xs	sm	md	lg
phone	tablet	desktop	large desktop

화면 사이즈를 기준으로 extra small, small, medium, large로 구분

12를 기준 ex. 3은 25%, 4는 33%, 6은 50% ...

sm, md, lg 는 미디어쿼리에 둘러싸여 있음