Chapter 6 CSS Layout and Animation

Size: px

Start display at page:

Download "Chapter 6 CSS Layout and Animation"

Nickolas Hunter
5 years ago
Views:

1 Sungkyunkwan University Chapter 6 CSS Layout and Animation Prepared by Y. Kim and H. Choo Web Programming Copyright Networking Networking Laboratory Laboratory 1/87 Copyright Networking Laboratory

2 Chapter 6 Outline 6.1 Layout Basics 6.2 Positioning Property 6.3 Layout with <div> Elements 6.4 Layout using Semantic Elements 6.5 CSS3 Effect 6.6 CSS3 Conversion 6.7 CSS3 3D Conversion 6.8 CSS3 Animation Web Programming Networking Laboratory 2/87

3 6.1 Layout Basics You need to determine the location, size, etc. of HTML elements on your web pages It is similar to the furniture layout of a house Web Programming Networking Laboratory 3/87

6.1 Layout Basics Block and inline elements The most basic rule for adhering to the HTML web standards is to distinguish between inline and block elements Block elements : It takes up

4 6.1 Layout Basics Block and inline elements The most basic rule for adhering to the HTML web standards is to distinguish between inline and block elements Block elements : It takes up a whole line of the screen Inline elements : It is placed one line at a time, taking up only as much of the width as needed in the current line Web Programming Networking Laboratory 4/87

5 6.1 Layout Basics Block and inline elements Block elements It is a form in which a line break occurs by default and the width of the area becomes the entire width of the upper area HTML tag : <h1>, <p>, <ul>, <li>, <table>, <blockquote>, <pre>, <div> <form>, <header>, <nav> <body> <h1 style="background-color: red">h1 으로정의된부분입니다.</h1> <div style="background-color: aqua">div 로정의된부분입니다.</div> <p style="background-color: yellow">p 로정의된부분입니다.</p> <pre style="background-color: green">pre 로정의된부분입니다.</pre> </body> Web Programming Networking Laboratory 5/87

6 6.1 Layout Basics Block and inline elements Web Programming Networking Laboratory 6/87

7 6.1 Layout Basics Block and inline elements Inline elements It is the opposite of the block element, with no line breaks HTML tag : <a>, <img>, <strong>, <em>, <br>, <input>, <span> <body> <em style="background-color: red">em 요소 </em> <span style="background-color: aqua">span 요소 </span> <img src="pome.png" width="60" height="60" /> <a href=" 요소 </a> </body> Web Programming Networking Laboratory 7/87

8 6.1 Layout Basics Block and inline elements Web Programming Networking Laboratory 8/87

9 6.1 Layout Basics Block and inline elements Examples 01 (Block and inline mixed) <!DOCTYPE html> <html> <head> <style> p, em, strong { border: dotted 3px red; </style> </head> <body> body 안에 <em> 강조문자 </em> 와 <strong> 강한문자 </strong> 를가지고있습니다. <p> 여기는다른단락입니다. </p> </body> </html> Web Programming Networking Laboratory 9/87

10 6.1 Layout Basics Block and inline elements CSS display property If property display is set to block, it is arranged like a block element If you set the property display to inline, it will be laid out like an inline element How to use the display property display:block : block display:inline : inline display:none : Not considered to be missing display:hidden : Not visible on screen Web Programming Networking Laboratory 10/87

6.2 Position Property The position property

will not work unless the position property is

11 6.2 Position Property The position property specifies the type of positioning method used for an element Determined by top, bottom, left, and right attributes These properties will not work unless the position property is set first Web Programming Networking Laboratory 11/87

12 6.2 Position Property Positioning method There are 4 different position values Static positioning HTML elements are positioned static by default Relative positioning An element with position: relative; is positioned relative to its normal position Absolute positioning An element with position: absolute; is positioned relative to the nearest positioned ancestor Fixed positioning An element with position: fixed; is positioned relative to the viewport Web Programming Networking Laboratory 12/87

13 6.2 Position Property Positioning method Static positioning Block elements are stacked up and down like a box, and inline elements are arranged in a row This property is always placed according to the basic flow of the page This property is not affected by the top, bottom, left, and right properties Web Programming Networking Laboratory 13/87

14 <html> <head> <style> #one {  background-color: cyan; width: 200px; height: 50px; #two {  position: static; background-color: yellow; width: 200px; height: 50px; #three {  background-color: lightgreen; width: 200px; height: 50px; </style> <body> <p id="one">block #1</p> <div id="two"> block #2<br /> position:static;<br /> </div> <p id="three">block #3</p> </body> </html> Web Programming Networking Laboratory 14/87

15 6.2 Position Property Positioning method Relative positioning Setting a relatively positioned element will cause it to be adjusted away from its normal position Web Programming Networking Laboratory 15/87

16 6.2 Position Property Positioning method <style> #one { background-color: cyan; width: 200px; height: 50px; #two { position: relative; left: 30px; background-color: yellow; width: 200px; height: 50px; #three { background-color: lightgreen; width: 200px; height: 50px; </style> Web Programming Networking Laboratory 16/87

17 6.2 Position Property Positioning method Absolute positioning Located at the top, left, bottom, right in the starting position relative to the entire page It is positioned relative to the parent element that has a non-static position Web Programming Networking Laboratory 17/87

18 6.2 Position Property Positioning method <style> #one { background-color: cyan; width: 200px; height: 50px; #two { position: absolute; top: 30px; left: 30px; background-color: yellow; width: 200px; height: 50px; #three { background-color: lightgreen; width: 200px; height: 50px; </style> Web Programming Networking Laboratory 18/87

19 6.2 Position Property Positioning method Fixed positioning Positioning elements relative to the browser window Window does not move when scrolling Web Programming Networking Laboratory 19/87

20 6.2 Position Property Positioning method CSS code part <html> <head> <style> p { background-color: lightgreen; width: 200px; height: 50px; #two { background-color: yellow; position:fixed; top:0px; right:0px; </style> </head> Web Programming Networking Laboratory 20/87

21 6.2 Position Property Positioning method HTML code part <body> <p>block #1</p> <p id="two"> block #2<br /> position: fixed;<br /> top:0px; right:10px; </p> <p>block #3</p> <p>block #4</p> <p>block #5</p> <p>block #6</p> <p>block #7</p> <p>block #8</p> <p>block #9</p> <p>block #10</p> <p>block #11</p> </body> </html> Web Programming Networking Laboratory 21/87

6.2 Position Property Positioning method Practice problem 01 Use four different values to specify the Div position According to HTML code <body> <div class="first">first

22 6.2 Position Property Positioning method Practice problem 01 Use four different values to specify the Div position According to HTML code <body> <div class="first">first Div</div> <div class="second">second Div </div> <div class="third">third Div</div> <div class="fourth">fourth Div</div> </body> Web Programming Networking Laboratory 22/87

23 6.2 Position Property Positioning method Practice problem answer div.first { border:5px solid #4FFFA1; width:200px; div.second { position: absolute; top: 100px; width:200px; border:5px solid #CCCCCC; div.third { position: relative; top: 100px; left:10px; width:200px; border:5px solid #ee3e64; div.fourth { position: static; width:200px; border:5px solid #ffcc00; Web Programming Networking Laboratory 23/87

24 6.2 Position Property Positioning method Float property The CSS float property specifies how an element should float Specify a style of flowing other content around one content It is a property of how to place an image on a web page with text Web Programming Networking Laboratory 24/87

25 6.2 Position Property Positioning method Case 1) When float property is not present <html> <head> <meta charset="utf-8"> <title>css Reference float</title> </head> <body> <img src="example.png" width="350" height="320"> <div> 사진에보이는고기가참맛있어보이네요. 컨텐츠가어떻게배치가될까요? 궁금하지않나요? </div> </body> </html> Web Programming Networking Laboratory 25/87

26 6.2 Position Property Positioning method Web Programming Networking Laboratory 26/87

27 6.2 Position Property Positioning method Case 2) When the float property is right <html> <head> <meta charset="utf-8"> <title>css Reference float</title> </head> <body> <img style="float:right;" src="example.png" width="350" height="320"> <div> 글자가길어야어떻게흐르는지보여줄수있을텐데요. 어떤말을써야할까요? 사진에보이는고기가참맛있어보이네요. 오늘저녁은치킨을시켜먹었는데요맛있더라구요. 내일저녁은뭘먹어야할지고민하고있답니다. 제가무슨말을하고있는지잘모르겠네요. </div> </body> </html> Web Programming Networking Laboratory 27/87

28 6.2 Position Property Positioning method Web Programming Networking Laboratory 28/87

29 6.2 Position Property Positioning method Case 3) When the float property is left <html> <head> <meta charset="utf-8"> <title>css Reference float</title> </head> <body> <img style="float:left;" src="example.png" width="350" height="320"> <div> 글자가길어야어떻게흐르는지보여줄수있을텐데요. 어떤말을써야할까요? 사진에보이는고기가참맛있어보이네요. 오늘저녁은치킨을시켜먹었는데요맛있더라구요. 내일저녁은뭘먹어야할지고민하고있답니다. 제가무슨말을하고있는지잘모르겠네요. </div> </body> </html> Web Programming Networking Laboratory 29/87

30 6.2 Position Property Positioning method Web Programming Networking Laboratory 30/87

31 6.2 Position Property Float usage Float usage 1) The float property was originally intended for image and text layout, but now adays it is used mostly for layout Web Programming Networking Laboratory 31/87

32 6.2 Position Property Float usage Float usage 2) Clear property : Used to break the float property Web Programming Networking Laboratory 32/87

33 6.2 Position Property Float usage Practice problem 02 Design using the properties of float as shown below float : left, float : right, Clear :both Web Programming Networking Laboratory 33/87

34 6.2 Position Property Float usage Practice problem hint1) HTML part <div id="jb-container"> <div id="jb-header"> <h1>2-column Layout</h1> </div> <div id="jb-content"> <h2>content</h2> <p>lorem ~~~.</p> <p>lorem ~~~.</p> </div> <div id="jb-sidebar"> <h2>sidebar</h2> <ul> <li>lorem</li> <li>ipsum</li> <li>dolor</li> </ul> </div> <div id="jb-footer"> <p>copyright</p> </div> </div> Web Programming Networking Laboratory 34/87

35 6.2 Position Property Float usage Practice problem hint1) HTML part <div id="jb-container"> <div id="jb-header"> <h1>2-column Layout</h1> </div> <div id="jb-content"> <h2>content</h2> <p>lorem ~~~.</p> <p>lorem ~~~.</p> </div> <div id="jb-sidebar"> <h2>sidebar</h2> <ul> <li>lorem</li> <li>ipsum</li> <li>dolor</li> </ul> </div> <div id="jb-footer"> <p>copyright</p> </div> </div> Web Programming Networking Laboratory 35/87

36 6.2 Position Property Float usage Practice problem hint1) CSS part #jb-container { width: 940px; margin: 0px auto; padding: 20px; border: 1px solid #bcbcbc; #jb-header { padding: 20px; margin-bottom: 20px; border: 1px solid #bcbcbc; #jb-content { width: 580px; padding: 20px; margin-bottom: 20px; float: left; border: 1px solid #bcbcbc; #jb-sidebar { width: 260px; padding: 20px; margin-bottom: 20px; float: right; border: 1px solid #bcbcbc; #jb-footer { clear: both; padding: 20px; border: 1px solid #bcbcbc; Web Programming Networking Laboratory 36/87

37 6.2 Position Property z-index z-index This property determines the order in which objects appear before and after This property works only on elements with the position attribute applied Web Programming Networking Laboratory 37/87

38 6.2 Position Property z-index Example 02 #box1 { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: blue; z-index: 200; #box2 { position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: yellow; z-index: 100; #box3 { position: absolute; top: 60px; left: 60px; width: 100px; height: 100px; background: green; z-index: 0; Web Programming Networking Laboratory 38/87

39 6.2 Position Property z-index Web Programming Networking Laboratory 39/87

40 6.2 Position Property z-index Example 03 <!DOCTYPE html> <html> <head> <style> img { position: absolute; left: 0px; top: 0px; z-index: -1; </style> </head> <body> <img src="pome.png" width="200" height="200" /> <p>img 요소의 z-index 가 -1 이므로다른요소의뒤에위치한다. </p> </body> </html> Web Programming Networking Laboratory 40/87

41 6.2 Position Property Specifying the size of an element width, height - size of an element min-width, min-height - Minimum size of element max-width, max-height - Maximum size of element Web Programming Networking Laboratory 41/87

42 6.2 Position Property Specifying the size of an element Example 04 <html> <head> <style> p { min-width: 100px; min-height: 100px; background-color: yellow; </style> </head> <body> <p> This course is an introduction to programming for the World Wide Web. We will cover all the major pieces of how websites work. ~~~~ </p> </body> </html> Web Programming Networking Laboratory 42/87

43 6.2 Position Property Specifying the size of an element Web Programming Networking Laboratory 43/87

44 6.2 Position Property Overflow property Overflow property specifies how to handle child elements when they are out of range of the parent element overflow: visible overflow: hidden overflow: scroll overflow: auto Web Programming Networking Laboratory 44/87

6.2 Position Property Overflow property Example 05 <head> <style> p { background-color: lightgreen; width: 200px; height: 50px; #target { border: 1px solid black; width: 300px; height: 100px;

45 6.2 Position Property Overflow property Example 05 <head> <style> p { background-color: lightgreen; width: 200px; height: 50px; #target { border: 1px solid black; width: 300px; height: 100px; overflow: scroll; </style> </head> <body> <div id=target> <p>block #1</p> <p>block #2</p> <p>block #3</p> <p>block #4</p> <p>block #5</p> </div> </body> Web Programming Networking Laboratory 45/87

46 6.3 Layout with <div> Elements Web Programming Networking Laboratory 46/87

47 6.3 Layout with <div> Elements Example 06 <body> <div id="wrapper"> <div id="header"> header </div> <div id="nav"> nav </div> <div id="content"> content </div> <div id="footer"> footer </div> </div> </body> Web Programming Networking Laboratory 47/87

48 6.3 Layout with <div> Elements <style> #header { background-color: yellow; width: 100%; height: 50px; #nav { width: 30%; background-color: red; height: 100px; float: left; #content { width: 70%; background-color: blue; float: right; height: 100px; #footer { background-color: aqua; width: 100%; height: 50px; clear: both; </style> Web Programming Networking Laboratory 48/87

49 6.3 Layout with <div> Elements Practice problem 03 Web Programming Networking Laboratory 49/87

50 6.3 Layout with <div> Elements Practice problem hint1) HTML part <body> <div id="logo">table Layout</div> <div id="page"> <div id="menu"> <h1>menu List </h1> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> <li>menu5</li> </ul> </div> <div id="contents"> <h2>page Title </h2> <div id="text">layout Test Page. </div> </div> <div id="links"> <h2>links</h2> </div> </div> <div id="copy">copyright</div> </body> Web Programming Networking Laboratory 50/87

51 6.3 Layout with <div> Elements Practice problem hint1) CSS part h1 { width:190px; padding:5px; font-size:20px; font-weight:bold; color:#ffff00; background:#2e64fe; margin:0 h2 { padding:5px; font-size:20px; font-weight:bold; color:#ffff00; background:#2e64fe; margin:0 #logo { #page { position:relative; width:800px; overflow:visible Web Programming Networking Laboratory 51/87

52 6.3 Layout with <div> Elements #menu { #menu ul { margin:0; padding:0 #menu li { width:190px; padding:5px; border-bottom:1px dotted #FFFFFF; font-size:14px; font-weight:bold; color:#ffffff; list-style:none  #contents { #text { #links { #copy { Web Programming Networking Laboratory 52/87

53 6.3 Layout with <div> Elements Practice problem answer #logo { font-size:20px; color:#ffffff; font-weight:bold; background:#013adf; width:760px; padding:20px #menu { position:relative; padding:20px; width:200px; background:#00bfff; float:left; height:400px #contents { position:relative; padding:20px; background: #EFF5FB; font-size:12px; width:380px; float:left; Web Programming Networking Laboratory 53/87

54 6.3 Layout with <div> Elements height:400px #text { padding:5px; line-height:150%; #links { position:relative; float:left; background:#00bfff; width:100px; padding:20px; clear:right; height:400px #copy { position:relative; clear:both; background: #58ACFA; font-size:20px; font-weight:bold; color:#ffffff; width:760px; padding:20px Web Programming Networking Laboratory 54/87

55 6.4 Layout using Semantic Elements Semantic element layout Web Programming Networking Laboratory 55/87

6.4 Layout using Semantic Elements 태그 <header> <hgroup> <nav> <article> <section> <aside> <footer> <figure> <time> 설명 Document headers (header) <h1> ~ <h6> Group of elements Navigation links The

56 6.4 Layout using Semantic Elements 태그 <header> <hgroup> <nav> <article> <section> <aside> <footer> <figure> <time> 설명 Document headers (header) <h1> ~ <h6> Group of elements Navigation links The content of the article or the post of the blog Meaning of section of document The content located by next likely sidebar Footer of document (footer) Picture or chart Display date and time Web Programming Networking Laboratory 56/87

57 6.4 Layout using Semantic Elements Example 07 Web Programming Networking Laboratory 57/87

58 6.4 Layout using Semantic Elements Example hint 1) HTML part <body> <header> <h1>my Blog Page</h1> </header> <nav> <h1>links</h1> <ul> <li><a href=" <li><a href=" <li><a href=" Dogs</a></li> </ul> <figure> <img width="85" height="85" src="hong.png" alt=" 홍길동 " /> <figcaption> 홍길동 </figcaption> </figure> </nav> Web Programming Networking Laboratory 58/87

59 6.4 Layout using Semantic Elements <section id="main"> <article> <h1>semantic Tags</h1> <p> 시멘틱요소 (Semantic elements) 들은브라우저에게요소의의미나목적을명확하게알려주는요소이다. </p> </article> <article> <h1>div 와 span</h1> <p> div 은 divide 의약자로서페이지를논리적인섹션으로분리하는데사용되는태그이다. span 요소는인라인요소로서텍스트를위한컨테이너로사용할수있다. </p> </article> </section> <footer>copyright (c) 2013 Hong</footer> </body> Web Programming Networking Laboratory 59/87

60 6.4 Layout using Semantic Elements Example hint 2) CSS part <style> body { background-color: #efe5d0; margin: 0px; header { background-color: #e3afed; color: #000000; margin: 0px; text-align: center; padding: 5px; h1 { margin: 0px; section#main { display: table-cell; background-color: yellow; padding: 15px; Web Programming Networking Laboratory 60/87

61 6.4 Layout using Semantic Elements nav { display: table-cell; background-color: #ffd800; padding: 15px; footer { background-color: #954b4b; color: #efe5d0; text-align: center; padding: 10px; margin: 0px 0px 0px 0px; font-size: 90%; </style> Web Programming Networking Laboratory 61/87

62 6.4 Layout using Semantic Elements Table-cell property If you use table-cell in the display attribute, it means to place child elements like table cells Web Programming Networking Laboratory 62/87

63 6.4 Layout using Semantic Elements Table-cell property Example 08 Web Programming Networking Laboratory 63/87

64 6.4 Layout using Semantic Elements Table-cell property Example of HTML code <html> <head> <title>using display:table and display:table-cell</title> </head> <body> <div id="wrapper"> <div id="header"><strong>#header</strong></div> <div id="content-wrapper"> <div id="content1"><strong>#content1</strong> Lorem ipsum ~.</div> <div id="content2"><strong>#content2</strong> Some text</div> <div id="content3"><strong>#content3</strong> The colour of this column extends to the bottom even though the text does not. Background images are not used to achieve this effect.</div> </div> <div id="footer"> The <strong>#footer</strong> does not need to be 'cleared' because no floats are used </div> </div> </body> </html> Web Programming Networking Laboratory 64/87

65 6.4 Layout using Semantic Elements Table-cell property Example of CSS code body {; background: #E9EEF5; text-align: center; #wrapper { width: 661px; margin: 0 auto; text-align: left; background: #FFF; div { padding: 1em; border: 2px dotted #CCC; #content1, #content3 { background: #EFEFEF; #content-wrapper { display: table; #content1, #content2, #content3 { width: 183px; display: table-cell Web Programming Networking Laboratory 65/87

66 6.5 CSS3 Effect Transparency Example 09 Web Programming Networking Laboratory 66/87

67 6.5 CSS3 Effect Transparency Example of HTML code <html> <head> <meta charset="utf-8"> <title>css Reference opacity</title> </head> <body> <div class="a"> <h1>lorem Ipsum Dolor.</h1> </div> <div class="b"> <h1>lorem Ipsum Dolor.</h1> </div> </body> </html> Web Programming Networking Laboratory 67/87

68 6.5 CSS3 Effect Transparency Example of CSS code.a { width: 600px; padding: 50px 0px; border: 1px solid #212121; background-color: #212121; text-align: center; color: #ffffff;.b { position: fixed; top: 100px; left: 100px; width: 600px; padding: 50px 0px; border: 1px solid #ff9800; background-color: #ff9800; text-align: center; color: #ffffff; opacity: 0.7; Web Programming Networking Laboratory 68/87

69 6.5 CSS3 Effect Visibility Example 10 Web Programming Networking Laboratory 69/87

70 6.5 CSS3 Effect Visibility <!DOCTYPE html> <html> <head> <style> #a { visibility: hidden; border:1px dotted red; #b { visibility: visible; border:1px dotted red; </style> </head> <body> <h1>visibility 속성 </h1> <img id="a" src="lion.png" width="150" height="120" alt="lion"> <img id="b" src="audio.png" width="150" height="120" alt="audio"> </body> </html> Web Programming Networking Laboratory 70/87

71 6.5 CSS3 Effect Visibility display: none vs visibility: hidden 'display: none' disappears with no trace of the element 'visibility: hidden' leaves a space for the element Web Programming Networking Laboratory 71/87

72 6.6 CSS3 Conversion Example 11 <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 50px; border: 1px solid black; background: yellow; transition: width 5s; div:hover { width: 200px; </style> </head> <body> <div> 마우스를올려보세요.</div> </body> </html> Web Programming Networking Laboratory 72/87

6.6 CSS3 Conversion Example 12 <style> p { width: 100px; height: 50px; border: 1px solid black; background: yellow; transition: width 5s height 5s border 5s, transform 5s; p:hover { width: 200px;

73 6.6 CSS3 Conversion Example 12 <style> p { width: 100px; height: 50px; border: 1px solid black; background: yellow; transition: width 5s height 5s border 5s, transform 5s; p:hover { width: 200px; height: 100px; border: 10px solid red; transform: rotate(180deg); -webkit-transform: rotate(180deg); </style> </head> <body> <p> 마우스를올려보세요.</p> </body> Web Programming Networking Laboratory 73/87

74 6.6 CSS3 Conversion Move, resize, rotate shapes Convert size, shape, and position of shapes Convert to 2D or 3D Web Programming Networking Laboratory 74/87

75 6.6 CSS3 Conversion Transform property transform: translate(10px, 10px) - parallel movement transform: rotate(45deg) - rotation transform: scale(2, 1.2) size transformation transform: skew(20deg, 10deg) tweak transformation transform: matrix() - general transformation Web Programming Networking Laboratory 75/87

76 6.6 CSS3 Conversion Example 13 div { width: 50px; height: 50px; background-color: yellow; border: 1px solid black; text-align: center; div#box2 { transform: translate(100px, 0px); background-color: blue; div#box3 { transform: scale(1.2, 1.2); background-color: red; div#box4 { transform: rotate(30deg); background-color: green; Web Programming Networking Laboratory 76/87

77 6.7 CSS3 3D Conversion 3D parallel movement translate3d(x,y,z) translatex(x), translatey(y), translatez(z) 3D parallel size transformation scale3d(x,y,z) scalex(x), scaley(y), scalez(z) 3D parallel rotation transformation rotate3d(x,y,z,angle) rotatex(angle), rotatey(angle), rotatez(angle) Perspective transformation perspective(n) Web Programming Networking Laboratory 77/87

6.7 CSS3 3D Conversion Example 14 <style> div { background-color: green; height: 150px; width: 150px;.container { background-color: yellow; border: 1px solid black;.

78 6.7 CSS3 3D Conversion Example 14 <style> div { background-color: green; height: 150px; width: 150px;.container { background-color: yellow; border: 1px solid black;.transformed { backface-visibility: visible; transform-origin: 50% 42%; transform: perspective(500px) rotatey(59deg) rotatex(0deg); </style> </head> <div class="container"> <div class="transformed"> </div> </div> Web Programming Networking Laboratory 78/87

79 6.8 CSS3 Animation Web Programming Networking Laboratory 79/87

80 6.8 CSS3 Animation Example 15 (Using keyframes) <html> <head> <style> div { width: 100px; height: 100px; background: red; position:relative; animation: 2s myanim; animation-iteration-count: myanim{ 0% {left:0px; top:0px; 25% {left:100px; top:0px; 50% {left:200px; top:0px; 75% {left:100px; top:0px; 100% {left:0px; top:0px; </style> </head> <body> <div></div> </body> </html> Web Programming Networking Laboratory 80/87

81 6.8 CSS3 Animation Example 16 (Using keyframes) <html> <head> <style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: example { 0% {background-color: red; left:0px; top:0px; 25% {background-color: blue; left:0px; top:200px; 50% {background-color: green; left:200px; top:200px; 75% {background-color: yellow; left:200px; top:0px; 100% {background-color: red; left:0px; top:0px; </style> </head> <body> <div></div> </body> </html> Web Programming Networking Laboratory 81/87

82 6.8 CSS3 Animation Example 17 (animation-delay CSS code) <html> <head> <style> p { height: 200px; width: 20px; border: solid 5px red; -webkit-animation-name: movingpara; -webkit-animation-duration: 4s; -webkit-animation-delay: 2s; animation-name: movingpara; animation-duration: 4s; animation-delay: movingpara { 0% { border-color: red; transform: rotatey(0deg); 20% { border-color: orange; 40% { border-color: yellow; 50% { border-color: green; transform: rotatey(180deg); 60% { border-color: blue; 80% { border-color: navy; 100% { border-color: purple; transform: rotatey(360deg); Web Programming Networking Laboratory 82/87

83 6.8 CSS3 movingpara { 0% { border-color: red; transform: rotatey(0deg); 20% { border-color: orange; 40% { border-color: yellow; 50% { border-color: green; transform: rotatey(180deg); 60% { border-color: blue; 80% { border-color: navy; 100% { border-color: purple; transform: rotatey(360deg); </style> </head> <body> <p> 애니메이션의지연 </p> </body> </html> Web Programming Networking Laboratory 83/87

84 6.8 CSS3 Animation Example 18 (animation-iteration-count CSS code) <style> #one, #loop { height: 40px; width: 400px; position: relative; border: solid 5px red; -webkit-animation-name: movingpara; -webkit-animation-duration: 4s; animation-name: movingpara; animation-duration: movingpara { 0% { border-color: red; transform: rotatex(0deg); 20% { border-color: orange; 40% { border-color: yellow; 50% { border-color: green; transform: rotatex(180deg); 60% { border-color: blue; 80% { border-color: navy; 100% { border-color: purple; transform: rotatex(360deg); Web Programming Networking Laboratory 84/87

85 6.8 CSS3 movingpara { 0% { border-color: red; transform: rotatex(0deg); 20% { border-color: orange; 40% { border-color: yellow; 50% { border-color: green; transform: rotatex(180deg); 60% { border-color: blue; 80% { border-color: navy; 100% { border-color: purple; transform: rotatex(360deg); #one { -webkit-animation-iteration-count: 2; animation-iteration-count: 2; #loop { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; </style> <h1> 애니메이션의반복 </h1> <p id="one"> 이애니메이션효과는두번반복될거에요!</p> <p id="loop"> 이애니메이션효과는영원히반복될거에요!</p> Web Programming Networking Laboratory 85/87

86 6.8 CSS3 Animation Example 19 (animation-direction CSS code) div { height: 150px; width: 150px; margin: 20px; background-color: orange; text-align: center; border-radius: 150px; line-height: 150px; -webkit-animation-name: movingpara; -webkit-animation-duration: 2s; animation-name: movingpara; animation-duration: movingpara { from { transform: rotate(-45deg); to { transform: movingpara { from { transform: rotate(-45deg); to { transform: rotate(45deg); #backward { -webkit-animation-direction: reverse; animation-direction: reverse; Web Programming Networking Laboratory 86/87

87 Q & A It is helpful web sites for your HTML & CSS skill 생활코딩 : w3schools: </webber> study: Bootstrap : Web Programming Networking Laboratory 87/87

Parashar Technologies HTML Lecture Notes-4

Parashar Technologies HTML Lecture Notes-4 CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,