https://daneden.github.io/animate.css/


공식 사이트 (?)입니다. 





기본 사용법은 




<head> 태그안에


<head>
  <link rel="stylesheet" href="animate.min.css">
</head>



animate.min.css 를 로드합니다.



<div class="animated bounce">Example</div>



클래스 이름을 animated를 앞에 정의해주고 뒤에 애니매이션 속성을 

써주면 적용이 됩니다.  

(태그안에 직접적용시 DOM Element가 로드 될때 한번만 실행됩니다.)

이걸 좀더 반복하거나 이벤트를 주시려면 javascript 문법을 

따로 정의 해주셔야 합니다.




제이쿼리를 통해 로드 되거나 버튼을 클릭해서 이벤트를 bind 해서 

클래스명을 변경시켜 동작할수도 있습니다.




공식 Git-Hub 에서 메뉴얼을 살펴보면 더자세하게 나와있습니다. 

참고하시길 바랍니다.



https://github.com/daneden/animate.css



클래스 이름들은 밑에 나열한 클래스이름들을 이용하시면 되겠습니다.



Class Name
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat





블로그 이미지

잡코드맨

댓글을 달아 주세요

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


// 이곳은 테이블 꾸미기 딱좋은 사이트입니다 이용해보시면 오오오~ 할듯 히힛

http://www.ajaxload.info/


페이지 로딩될때 그림을 자동으로 생성해주는 사이트 입니다. 이용하실분 이용하세요



블로그 이미지

잡코드맨

댓글을 달아 주세요


Myblog.zip





수업시간에 했던 블로그 과제로 썼던 div 레이아웃 잡기 입니다.

필요하신분 쓰셔도 상관없습니다.


제일중요한 CSS 코딩은 blog_top 부분과 middle부분으로 나눴습니다.


div 태그는 블럭모드인데


가로로 나눌수있고. li태그를 이용하여 메뉴카테고리를 만들었습니다.


실행화면


>>>>>>













뭐이런식으로 짰는데.. 자세히 설명하기엔 제기 시간이없네요 !! 나중에 코드 분석 해보겠습니다


제소스 가져다 연습해보셔도 좋습니다...




블로그 이미지

잡코드맨

댓글을 달아 주세요



많은 분들이 div와 span태그의 차이점을 잘모르시는것 같아서 포스팅합니다.


HTML에서


div는 블럭모드이고 span 태그는  인라인모드다~ 라고들 하시는데


도대체 블럭모드는 무엇이고 인라인모드는 무엇인가?


밑에 그림으로 설명해드리겠습니다.






왼쪽이 CSS 준거고 오른쪽이 body 태그안에 있는 실체입니다.


id값을 div01 02 03 04 차례대로 주고


스타일시트에는 테두리를 각각 색상만다르고 실선으로 3px 만큼 기본으로 적용시켰고 가로세로값

잡아주었고. 보기편하게하기위에 margin을 전체적으로 10px씩 주었습니다.




자보이시죠? 자동적으로 div 태그는 div 태그들끼리에는 밑으로 붙습니다

블럭쌓듯이... 그래서 블록모드 또한 블럭모드라고 합니다.

이제 SPAN태그를 볼까요?




아이디값만 변경해주고 나머지는 그대로 적용시켰습니다.




아닛? 근데 span은 가로  들어갔네?!



span과 div 기능은 정말정말 똑같은데 차이점이라하면 저렇게 블럭모드 냐 인라인모드냐 차이입니다.

하지만 div 모드도 CSS 적용시키면 가로정렬도 가능하다는것!!!

다음 포스팅때는 div 레이아웃 잡는것을 배워보겠습니다


다음에 봐요~~~










블로그 이미지

잡코드맨

댓글을 달아 주세요

안녕하세요 냑쥐입니다 Tistory 블로그 첫 포스팅인데요 ㅎㅎ

 

네이버 블로그 하다가 옮겨왔습니다 .

 

http://blog.naver.com/ttylbj

 

일단은 2블로그 다운영할까 합니다 . 많은 관심 부탁드립니다 ㅎㅎ

 

 

 

 

 

css3.zip html5.zip
이클립스로 작성하였고
이걸로 인해서 개인공부도 하고 홈페이지의 제일중요한
div 배치공부도 나름 열심히했습니다.
CSS 공부하시는분들 보면 그래도 큰도움은 될듯 싶습니다.
모르는것 있으면 답글 달아주시면 아는선내에 답변드리겠습니다.

블로그 이미지

잡코드맨

Tag css, html, SIST, 쌍용

댓글을 달아 주세요