클래스 관련 이벤트
.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 는 미디어쿼리에 둘러싸여 있음
'Think Factory > 프론트엔드 실무' 카테고리의 다른 글
4주차 (0) | 2015.05.30 |
---|---|
3주차 (0) | 2015.05.16 |
1주차 (0) | 2015.05.09 |