Your SlideShare is downloading. ×
쉬운 예제 중심의 HTML5 / CSS / MediaQuery / JQuery 강의
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

쉬운 예제 중심의 HTML5 / CSS / MediaQuery / JQuery 강의

4,407
views

Published on

HTML5 / CSS / MediaQuery / JQuery 강의를 담고 있는 자료입니다. …

HTML5 / CSS / MediaQuery / JQuery 강의를 담고 있는 자료입니다.
웹을 처음 접하는 디자이너를 위해 만든 자료입니다.

Published in: Design

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,407
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
52
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5
  • 2. <!DOCTYPE html> HTML5문서라는 선언 <html> …</html> HTML을 시작하고, 끝낸다는 표시를 하는 태그 <head> …</head> HTML의 정보를 담는 부분의 시작과 끝을 표시하는 태그. 이 태그는 <html></html> 안에 넣어야만 한다. <title> … </title> 이 홈페이지의 제목을 쓰는 태그로 두 태그의 중간에 글을 넣는다. 이 태그 안에 쓴 내용이 브라우저 창의 왼쪽 상단에 나오게 된다. 이 태그는 <head></head> 안에 넣어야만 한다. <!DOCTYPE html> <html lang=“ko”> <head> <meta charset=“utf-8”> <title> HTML5 기초</title> </head> <body> Hello HTML5 안녕! </body> </html>
  • 3. <body> …</body> HTML 페이지의 내용을 담는 그릇인 태그로 내용은 <body>와 </body> 안에 모두 넣어야만 한다. 예에서 볼 수 있듯이 body 태그 안에는 다양한 속성을 넣을 수 있게 된다. * 속성은 각각의 태그안에 위치하면서 태그의 특징을 추가로 넣어줄 때 사용하는 것이며, 각 태그마다 넣을 수 있는 속성 이 정해져 있다. body 같은 경우는 bgcolor, text, alink, link, vlink, background 등이 있고, table과 같은 태그의 경우 width, height, cellpadding, cellspacing, border 와 같은 속성을 추가해 줄 수 있다. <body bgcolor="#FF8D5E" TEXT="#ff2020" LINK="#202020" VLINK="#202020" ALINK="#202020"></body> bgcolor 바탕 화면의 컬러를 나타낸다. bgcolor 대신 혹 은 추가로 background라는 태그로 그림을 바 탕에 둘 수도 있다. text 텍스트의 색을 나타내는 속성으로 뒤의 색은 RGB의 16진수 형태로 색을 넣는다. 이 컬러는 포토샵의 컬러팔레트에서 찾아낼 수 있다. link 하이퍼링크가 적용된 텍스트의 컬러를 나타낸 다. vlink와 alink alink는 누르는 순간 텍스트의 컬러, vlink는 한 번 눌리고 나서의 텍스트 컬러를 나타낸다. <body background="a.gif">
  • 4. <center></center> 이 태그 안에 위치한 텍스트나 그림들은 중간으로 배치가 바뀐다. <img> 이미지를 불러오는 태그이며, 사용은 예와 같이 한다. 다른 태그와 다르게 뒤에 </img>와 같이 태그를 닫지 않 는다. 하이퍼링크가 걸릴 경우에는 속성으로 border="0"을 추가해 준다. <img src="b.jpg" border="0"> <a> …</a> 하이퍼링크를 사용하기 위해서 쓰는 태그로, 사용은 아래의 예와 같이 한다. * 하이퍼링크는 페이지간의 이동을 용이하게 하기 위해 만들어진 기능으로, html이라는 언어는 이 기능으로 인하여 광 범위한 사용자를 가지게 되었다. 책에 있는 인덱스 기능을 모든 페이지에 넣을 수 있기 때문에 비선형적인 인터랙션이 가능하다는 장점이 있다. <a href="b.html">b페이지로 가기</a> <font> ...</font> <b> ...</b> <i> ...</i> 텍스트를 사용할 때 텍스트의 색이나 크기를 결정하기 위해서 각각의 텍스트 앞과 뒤에 쓰는 태그다. 이 태그의 경우 CSS(Cascading Style Sheet)라는 속성과 섞이면 다양한 텍스트 효과를 낼 수 있다. <b>는 볼드체를 쓸 때, <i>는 이탤릭체를 쓸때 텍스트 앞뒤를 태그로 열고 닫아주면 된다. <font color="#ff1000" size="3">텍스트 일반 속성 정하기</font> <font color="#3020a0" style="font-size: 9pt; font-family:돋움;">스타일 속성이 적용된 텍스트</font>
  • 5. <br> html에서 엔터를 한번 넣어주는 기능으로 그대로 <br>이라고 쓴다. 이미지 뒤에 엔터를 넣어주기 위해서 <br clear="all">의 형식을 사용하기도 한다. <table><tr><td> …</td></tr></table> <table>태그는 HTML에서 가장 중요한 태그로, 페이지의 레이아웃을 결정하는 가장 큰 기능을 한다. 페이지의 편집 그리드를 만들기 위해서 대부분의 웹페이지에서 수차례 겹친 형태로 사용한다. <table width="100" height="100" border="1"><tr><td></td></tr></table> <table>은 표를 만들겠다는 의미다. 여기에 width="100" height="100"이라고 기입하면 가로 세로 100픽셀 크기의 표가 된다는 의미가 된다. 또 border=“1”이라고 쓰면 1픽 셀의 테두리를 그어주겠다는 뜻도 된다. <tr>은 표안에 한줄을 만들겠다는 뜻이다. 만약 <tr>을 써주지 않고 <table>만 만들어주면 표가 만들어지지 않 는 문제가 생긴다. <td>는 표의 <tr>안에만 위치 할 수 있으며, 동시에 한 칸을 의미한다. 쓰여있는 한줄을 그대로 보면 100*100 픽 셀의 표에 한줄, 한칸만 넣어주게 된다. <table width="100" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#ff0000"> cellpadding은 표의 매 칸마다 몇 픽셀의 여분 공간을 두 겠는지에 대한 정의를 해준다. cellspacing은 표의 테두리 공간을 몇 픽셀로 하겠는지에 대한 정의를 하는 곳이다.
  • 6. <tr height="100" width="100" bgcolor="#0000ff"> tr 안에는 세로와 가로 크기를 픽셀 기준으로 정할 수 있고, 동시에 한 줄의 색도 정할 수 있는 속성을 넣을 수 있다. <td width="100" height="100" bgcolor="#ffff00" align="center" valign= "bottom"> td 안에는 정렬에 대한 속성을 넣어 줄 수 있다. align은 가로 정렬로 left, center, right의 값을 통해 가로로 왼쪽에 둘지 중간에 배치할지, 그리고 오른쪽에 배치할지를 넣어 줄 수 있고, valign을 통해서 top, middle, bottom의 값을 통해 상단, 중간, 하단 배치를 결정할 수 있다. <table cellpadding="10" cellspacing="5" border="0" width="300" height="100" bgcolor="#404040"> <tr><td width="150" height="100" align="right" valign="middle" bgcolor="#ff0000">우측중간</td> <td width="150" height="100" align="left" valign="top" bgcolor="#ffff00">좌측상단</td></tr> </table> 예시 1)
  • 7. <table cellpadding="1" cellspacing="1" border="0" width="300" height="200" bgcolor="#404040"> <tr><td width="100" height="100" align="right" valign="middle" bgcolor="#ff0000">우측중간</td> <td width="200" height="100" align="left" valign="top" bgcolor="#ffff00">좌측상단</td></tr> <tr><td width="100" height="100" align="left" valign="bottom" bgcolor="#ffffff"> 좌측하단</td> <td width="200" height="100" align="center" valign="middle" bgcolor="#ffff00">정중앙</td></tr> </table> 예시 2)
  • 8. <td colspan="2" width="300" height="100" bgcolor="#ffff00" align="center" valign= "bottom"> 엑셀이나 워드의 표에서는 두칸이상의 공간을 하나로 합치는 기능이 있다. html에서도 이런 기능이 있는데 rowspan과 colspan이 이런 기능이다. colspan은 가로로 몇칸을 합칠지 결정 하는 속성이고, rowspan은 세로로 몇칸을 합칠지를 결정하는 기능이다. <table cellpadding="0" cellspacing="0" border="0" width="300" height="200" bgcolor="#404040"> <tr><td colspan="2" width="300" height="100" align="right" valign="middle" bgcolor="#ff0000">가로로두 칸</td></tr> <tr><td width="100" height="100" align="left" valign="bottom" bgcolor="#ffffff"> 좌측하단</td> <td width="200" height="100" align="center" valign="middle" bgcolor="#ffff00">정중앙</td></tr> </table> 예시 1)
  • 9. <table cellpadding="0" cellspacing="0" border="0" width="300" height="300" bgcolor="#404040"> <tr><td width="100" height="100" align="right" valign="middle" bgcolor="#ff0000">우측중간</td> <td rowspan="2" width="200" height="200" align="left" valign="top" bgcolor="#ffff00">세로로두칸 </td></tr> <tr><td width="100" height="100" align="left" valign="bottom" bgcolor="#ffffff"> 좌측하단</td></tr> <tr><td width="100" height="100" align="center" valign="top" bgcolor="#efefef"> 중앙상단</td> <td width="200" height="100" align="center" valign="bottom" bgcolor="#3905ef">중앙하단</td></tr> </table> 예시 2)
  • 10. <style> …</style> 페이지의 전체적인 CSS속성을 관리하는 곳으로, 페이지의 테두리 여백에서부터 전체적인 폰트의 종류에서 하 이퍼링크될 텍스트의 특징까지 다양한 부분의 스타일을 정해줄 수 있다. 물론 이 곳을 통해서 특별한 명칭으로 속성의 이름을 정해준 다음 사용하기도 한다. 스타일 속성을 페이지 안에 예제와 같이 써서 입력할 수도 있지 만 가끔은 독립된 파일로 구성해서 불러와서 사용할 수도 있다. 현재 대부분의 웹싸이트는 독립된 파일로 구성 된 스타일 속성을 불러와서 사용하고 있다. 스타일은 매우 광범위하기 때문에 아래의 예에서 볼 수 있는 정도 로만 사용하기로 한다. <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>Hello</title> <style> A { text-decoration:none;} A:hover {color:#202020;text-decoration:underline;} BODY {margin-top:0px ; margin-bottom:0px ; margin-left:0px ; margin-right:0px } TD,TH,BODY { font-size: 18pt; font-family:verdana;} .cursor { cursor: hand} </style> </heaD> <body bgcolor="#FF8D5E" TEXT="#202020" LINK="#202020" VLINK="#202020" ALINK="#202020" marginwidth="0" marginheight="0" margintop="0" marginleft="0"> <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"> <tr><Td width="100%" height="100%" align="center" valign="middle"> <a href="a.html"><b><font color="#ffffc0">Hello World</font></b></a> </td></tr> </table> </body> </html> 예시)
  • 11. CSS
  • 12. <link href=“css/style.css” rel=“stylesheet”/> css폴더 안의 style.css 파일을 불러와 style 속성으로 사용한다는 뜻이며, 여러 줄을 작성해 여러 개의 파일 첨 부도 가능하다. <!DOCTYPE html> <html lang=“ko”> <head> <meta charset=“utf-8”> <title> HTML5 기초</title> <link href=“css/style.css” rel=“stylesheet”/> </head> <body> Hello HTML5 안녕! </body> </html> * 이후로 모든 예시는 css폴더를 만든 후 style.css라는 파일을 저장하고, 해당 파일을 수정해 확인해봅니다.
  • 13. body { ... } body 태그안에 들어가 있는 속성들을 수정하기 위해서 body { ..속성 내용들.. } 이런 형태의 구성을 사용한다. 만약 <h1> 이라는 태그 안에 들어가 있는 정보의 속성을 수정하려면 h1 { .... } 이렇게 작성한다. body { font-family : 돋움, Dotum, Sans-Serief; font-size : 15px; line-height : 18px; background-size : cover; background : url('./image/bg.gif'); color : #ff0000; background-color:#ffff00; }
  • 14. <a class=“hyper” href=“http://google.co.kr”> class 속성 HTML5 코드 CSS 코드 <a class="hyper" href="http://google.co.kr"> <img class="logo" src="css/image/logo. gif" alt="google.co.kr" width="150" height="60"> </a> body { font-family : 돋움, Dotum, Sans-Serief; font-size : 15px; line-height : 18px; background-size : cover; background-color : #ffff00; } a.hyper { position : absolute; top : 15px; left : 10px; display : block; width : 300px; height : 170px; border : 1px solid #000000; background : url('./image/bg. gif') no-repeat 1px 1px; background-size : cover; } a.hyper .logo { position : relative; top : 20px; left : 110px; } a.hyper:hover { border : 3px solid #ff0000; } a.hyper:active, a.hyper:focus { background-color:#0000ff; }
  • 15. Mediaquery – responsive-web
  • 16. 반응형 웹 반응형 웹은 간단히 mediaquery라는 CSS코드만으로도 제작이 가능하다. <!DOCTYPE html><html lang="kr"> <head> <meta charset="utf-8" /> <title>안녕 반응형 웹</title> <link rel="stylesheet" type="text/css" href="mediaquery.css" /> </head> <body> <center> <img class="headline" src="headline.jpg" border="0“> <div class="boxes"> <div class="navi"> ... </div> <div class="contents"> ... </div> <div class="contents2"> ... </div> </div> </center> </body> </html> HTML5 코드
  • 17. 반응형 웹 반응형 웹은 간단히 mediaquery라는 CSS코드만으로도 제작이 가능하다. CSS 코드 @media all and (min-width:784px) { … } @media all and (min-width:480px) and (max-width:784px) { … } @media all and (max-width: 480px) { … } 화면 가로 사이즈가 최소 784px 일 때. 즉 화면 사이즈가 784보다 커졌을 때는 중괄호 { } 안에 있 는 스타일을 적용하라는 의미 화면 가로 사이즈가 480보다 크고 784보다 작은 사이즈일 때 중괄호 { } 안에 있는 스타일을 적용 하라는 의미 화면 가로 사이즈가 480보다 작은 사이즈일 때 중괄호 { } 안에 있는 스타일을 적용하라는 의미 화면 가로 사이즈가 최소 784px 일 때. 즉 화면 사이즈가 784보다 커졌을 때는 중괄호 { } 안에 있 는 스타일을 적용하라는 의미 아래의 코드 세 세트를 mediaquery.css에 넣어주고 중괄호 안의 내용만 바꿔주면 responsive-web 을 구현할 수 있다.
  • 18. 반응형 웹 반응형 웹은 간단히 mediaquery라는 CSS코드만으로도 제작이 가능하다. @media all and (min-width:784px) { img.headline { width: 784px; } div.boxes { background-color:#ddd; width:784px; } div.navi{ background-color:#000; float:left; width:100px; height:500px; margin-right:10px; } div.contents{ background-color:#f00; float:left; width:330px; height:500px; margin-right:7px; } div.contents2{ background-color:#0f0; float:right; width:330px; height:500px; margin-right:7px; } } @media all and (min-width:480px) and (max-width:784px) { img.headline { width: 100%; } div.boxes { background-color:#ddd; width:100%; } div.navi{ background-color:#000; float:top; height:60px; width:98%; } div.contents{ background-color:#f00; float:middle; height:200px; width:98%; } div.contents2{ background-color:#0f0; float:bottom; height:200px; width:98%; } } @media all and (max-width: 480px) { img.headline { width: 100%; } div.boxes { background-color:#ddd; width:100%; } div.navi{ background-color:#000; float:top; height:60px; width:98%; } div.contents{ background-color:#f00; float:bottom; height:300px; width:98%; } div.contents2{ display:none; } } mediaquery.css
  • 19. 화면 예시)
  • 20. JQuery
  • 21. jQuery란? JavaScript와 CSS를 이용한 다이나믹한 웹사이트를 쉽게 제작할 수 있도록 도와주는 스크립트 라이브러리로 http://jquery.com/에서 다운로드 받아 제작하는 웹사이트에 바로 JQuery기능들을 적용할 수 있다. jQuery는 MIT License하에 배포되고 있는 오픈소스 프로젝트이며, 카피라이트 헤더를 삽입하는한 상업적 / 비상업적 사 용이 모두 허용된다. jQuery Install http://jquery.com/에서 jquery-1.9.1.min.js (버전이 다를 수 있음)을 다운로드 받아 본인의 개발 디렉토리 안에 위치시킨다. 물론 자유롭게 배치해도 무방하다. <head> <script src="jquery-1.9.1.min.js"></script> </head> 만약 다운로드가 어렵거나 네트워크에 언제나 연결된 상태라면 아래와 같이 직접 연결도 무방하다 <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> </head>
  • 22. jQuery 기본 문법 $( A ).action( B ) "A 라는 HTML 문서의 특정 요소가 action이라는 행동을 했을 때 B 를 행하라"의 기본 형식을 따른다. $(this).hide() - 현재 요소를 화면에서 없애버려라 $("p").hide() - <p> 요소를 화면에서 몽땅 없애버려라 $(".test").hide() - class="test"라는 속성을 가진 요소를 찾아 화면에서 몽땅 없애버려라 $("#test").hide() - id="test"인 요소를 찾아 화면에서 없애버려라 문서가 준비되었는지 확인한 후, 이제 스크립트를 활성화시킬 때 $(document).ready(function(){ // jQuery 함수와 문법들이 이곳에 들어갑니다. }); $(document)는 현재의 창에 떠있는(있을 예정인) 문서를 의미한다. 문서가 준비되면, "function() { ... } 아래의 ... 부분에 있는 내용을 실행(준비)하시오"라는 의미다. 어떤 형식이든 뭔가 작동하길 바란다면 function () { ... } 부분을 소괄호 안에 집어 넣어야 한다. 소괄호 안에서 엔터를 쳐도 아무 문제없이 작동하니 작동시 혼동하지 않으려면 글줄 정리를 잘해야만 한다.
  • 23. 이벤트 click : 마우스가 클릭되었을 때 dblclick : 마우스 더블클릭 시 scroll : 마우스 스크롤이 움직이면 mouseenter : 마우스가 HTML화면안으로 들어왔을 때 mouseleave : 마우스가 HTML화면에서 떠났을 때 keypress : 키가 눌렸을 때 keydown : 키가 눌리는 순간 keyup : 키를 눌렀다 떼었을 때 submit : 문서의 form에서 확인버튼을 눌렀을 때 change : 변화가 있을 때 resize : 크기가 바뀌었을 때 focus : 어떤 개체가 선택된 상태일 때 blur : 어떤 개체가 선택이 풀린상태일 때 $("p").click(function(){ $(this).hide(); }); $("p").dblclick(function(){ $(this).hide(); }); $("#p1").mouseenter(function(){ alert("You entered p1!"); }); $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); });
  • 24. JQuery Effect 1. show / hide show() Shows the selected elements hide() Hides the selected elements toggle() Toggles between the hide() and show() methods 2. fadeIn / fadeOut / fadeTo fadeIn() Fades in the selected elements fadeOut() Fades out the selected elements fadeTo() Fades in/out the selected elements to a given opacity fadeToggle() Toggles between the fadeIn() and fadeOut() methods <!DOCTYPE html> <html> <head> <script src="jquery-1.9.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;background- color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background- color:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;background- color:blue;"></div> </body> </html>
  • 25. 3. slideUp / slideDown slideUp() Slides-up (hides) the selected elements slideDown() Slides-down (shows) the selected elements slideToggle() Toggles between the slideUp() and slideDown() methods 4. animate animate() $( A ).animate({ B },speed,callback); A라는 요소는 B 위치에 위치와 크기, 투명도 등의 css코드를 넣어주게 되면 해당 크기와 위치, 투명도로 애니메이션이 된다. 만약 speed를 넣어주면 속도가 결정된다. $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); $("button").click(function(){ $("div").animate({ height:'toggle' }); });
  • 26. <!DOCTYPE html> <html> <head> <script src="jquery-1.9.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position: absolute;"> </div> </body> </html> animate 예시 1)
  • 27. <!DOCTYPE html> <html> <head> <script src="jquery-1.9.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html> animate 예시 2)
  • 28. <!DOCTYPE html> <html> <head> <script src="jquery-1.9.1.min.js"></script> <script> $(document).ready(function() { $("#buttonRight").click(function () { var text01 = $("#text01"); text01.animate({left:'300px', height:'200px', opacity:'0.7'}); text01.animate({ top:'300px', width:'200px', opacity:'0.2'}); }); $("#buttonLeft").click(function () { var text01 = $("#text01"); text01.animate({top:'80px', width:'100px', opacity:'0.7'}); text01.animate({left:'50px', height:'100px', opacity:'1.0'}); }); $("#buttonSlideUp").click(function () { $("#text02").slideUp(300); }); $("#buttonSlideDown").click(function () { $("#text02").slideDown(300); }); $("#buttonFadeIn").click(function () { $("#text03").fadeIn(1000); }); $("#buttonFadeOut").click(function () { $("#text03").fadeOut(1000); }); $("#buttonFadeToggle").click(function () { $("#text03").fadeToggle(1000); }); }); </script> <style> #text01 { position:absolute; left:50px; top:80px; width:100px; height:100px; background-color:#f00; } #text02 { position:absolute; left:50px; top:350px; width:500px; height:100px; background-color:#ff0; } #text03 { position:absolute; left:50px; top:480px; width:500px; height:100px; background-color:#0ff; } font { color:#00f; font-size:11px; } .b01 { color:#000; font-weight:bold; font-size:11px; } </style> </head> <body> <font id="buttonRight">to Right</font> | <font id="buttonLeft">to Left</font><br> <font id="buttonSlideUp">slideUp</font> | <font id="buttonSlideDown">slideDown</font> <br> <font id="buttonFadeIn">fadeIn</font> | <font id="buttonFadeOut">fadeOut</font> | <font id="buttonFadeToggle">fadeToggle</fon t> <div id="text01"><font class="b01">TEXT01 BOX</font></div> <div id="text02"><font class="b01">TEXT02 SLIDE</font></div> <div id="text03"><font class="b01">TEXT03 FADE</font></div> </body> </html> JQuery 전체 예시)

×