jtc 와함께하는수월한 DHTML(CSS) http://www.jobtc.kr 훈련교사박원기
1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS 라불린다. JSS : javascript style sheet CSS : cascade style sheet 1.2 CSS 의특징 태그들의다양한선택속성들이확장되었다. 레이아웃기능이추가되어 xy좌표를지정하여표시할수있다. 단점 : 아직브라우저간의지원사항이서로달라적용범위가일부분으로제한될수있다. 각브라우저접두사기호 크롬, 사파리 : -webkit- 파이어폭스 : -moz- 오페라 : -o- 익스플로러 : -ms- 1.3 CSS 선언방법 1.3.1 style 태그안에서선언하기 형식 속성지정 [ 기본예 ] div{border:1px solid #ffaaaa;margin:5px; width:200px; height:50px; <div> 박원기 </div>
1.3.2 각태그안에서선언하기 형식 <div style=' 속성 '> 내용 </div> [ 기본예제 ] WebContent/css/declare.html <meta charset="utf-8"> <title>declare</title> div{border:1px solid #ffaaaa;margin:5px; width:200px; height:50px; <div> 오빤내스타일 </div> <div> 오빤강남스타일 </div> <div> 오빤니스타일 </div> <div style='width:200px;height:50px; background-color:#ffffdd; border:2px solid #aaaa00'> 오빤거지스타일 </div> [ 실행결과 ] 1.3.3 외부 CSS 파일참조하기 LINK 태그를사용하는방법과 import 를사용하는방법이있다. (1) LINK 태그를사용하는방법
<LINK REL=StyleSheet HREF="sam1.css" TYPE="text/css" TITLE="sam1.css" MEDIA="screen,print"> LINK 태그는 <head/> 안에있어야한다. (2) import 사용 <STYLE TYPE="text/css" MEDIA="screen,projection"> <!-- @import url(http://www.user.com/fir.css); --> </STYLE> (3) MEDIA 의종류 종류 print screen projection braille aural all 설명인쇄화면출력프로젝션출력점자출력음성출력모든매체에대한출력 [ 기본예제 ] 웹페이지 WebContent/src/css_link.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>css 외부파일참조하기 </title> <link rel="stylesheet" href="../css/mystyle.css" type="text/css"/> <h1>css 외부파일참조하기 </h1> <div> 외부에정의된 CSS에의해표시된내용입니다. </div> 외부스타일정의 WebContent/css/mystyle.css div{font-size:30px; color:#ff0000; 1.4 CSS 의적용범위 태그에적용특정태그의기본속성을지정할때태그명 { 속성 class 에적용 class 는 '.' 으로표시. 클래스명 { 속성 id 에적용 id 는 '#' 으로표시 # 아이디명 { 속성
그룹지정요소들을 ',' 로나열요소명 1, 요소명 2,... { 속성 소그룹지정 태그명. 클래스, 태그명 # 아이디 하나의선언문에서다중의속성을적용시키려면속성과속성을 ; 으로연결해준다. 문을 안에삽입해도그결과는동일하지만통상적으로 은 안에삽입한다. [ 기본예제 ] WebContent/src/scope_test.html <meta charset='utf-8'> <title>css 적용범위 (scope_test)</title> div { color:#ff0000; input { color : #0000ff ; #id_first { border: 5px solid #aaaaaa ; #id_second { background-color : #ffdddd ;.class_btn1 { width:80px ; height:80px ; div#id_first { width:100px ; height: 50px ; div.class_second { border : 2px dotted #ff0000 ; width:100px ; height:30px ; <div id='id_first' class='class_first'> 박원기 </div> <div id='id_second' class='class_second'> 홍길동 </div> <input type='button' id='id_btn1' class='class_btn1' value=' 버튼 1'> <input type='button' id='id_btn2' class='class_btn1' value=' 버튼 2'> 2 자바스크립트를사용하여 CSS 접근하기 자바스크립트를사용하여 CSS 를접근하고제어하려면브라우저의특징을먼저살펴야한다. 브라우저들마다접근방법이다르기때문이다. 기본적인접근방법 요소명.style. 속성 = 값 2.1 속성들의종류 예 ] target 을 45 도로회전하려할때 target = document.getelementbyid('transform_tar'); deg = 'rotate(45deg)'; target.style.webkittransform=deg;
target.style.otransform=deg; target.style.moztransform=deg; target.style.mstransform=deg; 3 문자속성들 3.1 font-family 글꼴을지정한다. 형식 font-family:<<family-name> <generic-family>> 만약사용자가지정한 family-name 에해당하는폰트가없다면 generic-family 에지정된폰트로대치된다. 3.2 font-style 글자의속성을지정한다. italic / oblique 이것은문자 Letter 를뉘여쓸때사용한다. noaml 초기값 3.3 color 문자의컬러값지정하기 a{color:#aabbcc 3.4 text-transform 영문자의대소문자를조절할수있다. text-transform: 3.5 text-indent capitalize uppercase lowercase none 첫문자를대문자로모두대문자로모두소문자로변환하기않음 첫번째줄의들여쓰기정보를조절해주는명령이다. 줄간격의단위는 in, cm, mm, pt, em" 을줄수있다. 일반적으로쓰이는단위는글자단위로처리하는 em" 를사용한다. 기본단위는 px(pixel) text-indent:3em 3 글자들여쓰기 text-indent:3cm 3cm 들여쓰기 text-indent:3in 3inch 들여쓰기 text-indent:3mm 3mm 들여쓰기 text-indent:3px 3pixel 들여쓰기
3.6 line-height 줄간격조절하기위한속성으로숫자나퍼센트를입력하면현재본문내글꼴크기에숫자를곱한만큼행간이늘어난다. 실수사용도가능하다. line-height:3 글꼴크기의 3 배만큼줄간격이발생 line-height:1.5 글꼴크기의 1.5 배만큼줄간격이발생 line-height:3cm 3cm 들여쓰기 line-height:3in 3inch 들여쓰기 line-height:3mm 3mm 들여쓰기 line-height:3px 3pixel 들여쓰기 3.7 letter-spacing 문자사이의간격을지정한다. 기본단위는 pixel. letter-spacing:3 3pixel 간격 letter-spacing:3cm 3cm 간격 letter-spacing:3in 3inch 간격 letter-spacing:3mm 3mm 간격 3.8 text-decoration 문자의밑줄속성을지정한다. text-decoration:none text-decoration:underline [ 기본예 1] 글자의크기와속성, 폰트를지정해보자. 앵커태그에서사용하면링크문자의밑줄표시가발생하지않는다. <a href="..." style="text-decoration:none"> 밑줄없다 </a> 문자에밑줄을표시한다. <u>...</u> 와동일함. <p style="text-decoration:underline"> 밑줄있다. </p> WenContent/src/font_style.html <!DOCTYPE html > <meta charset='utf-8'> <title>font-style</title> #div1 { font-weight : 100; letter-spacing : 30px ; text-decoration : underline; margin:30px <h3> font style 및태그에직접스타일지정 </h3> <div style= 'font-family : 몰라체, 궁서체 ; font-size : 20px ; '> 졸기있기없기!!! </div> <p/> <div style='font-style :italic ; color:#ff0000 ; font-size : 30px' > 웹프로그래밍 : html, css, javascript, jsp, mybatis, ajax, spring 등이필요. </div> <div id='div1'>css 화이팅하기 </div> <h3>font-vaiant</h3> <p style='font-variant:small-caps;'>abc ABC</p> <p style='font-variant:inherit;'>abc ABC</p> <p style='font-variant:normal;'>abc ABC</p>
[ 기본예 2] 줄간격및문자데코레이션을연습해보자. WenContent/src/param.html <meta charset="utf-8"> <TITLE> 여러가지문단모양 </TITLE> </HEAD> <BODY> <p> 기본값을갖는문단입니다.</p> <p style="word-spacing:-12px"> 낱말간격을 -12px 로지정합니다.</p> <p style="word-spacing:24px"> 낱말간격을 24px 로지정합니다.</p> <HR/> <p> 기본값을갖는문단입니다.</p> <p style="letter-spacing:-6px"> 문자간격을 -6px 로지정합니다.</p> <p style="letter-spacing:24px"> 문자간격을 24px 로지정합니다.</p> <p style="text-decoration:underline">text</p> <p style="text-decoration:overline">text</p> <p style="text-decoration:line-through">text</p> <p style="text-decoration:blink">text</p> <hr/> <p style="line-height:10px"> 줄간격조절 <br> 어떻게보일까?</p> </BODY> </HTML>
3.9 text-overflow 지정된영역보다길이가긴글자를어떤식으로처리할것인지결정한다. overflow:hidden 속성과같이사용하여 closs browsing 한다. ellipsis : 잘려진문자대신... 을표시함. clip : 자르지않음. [ 관련소스 ] <meta charset="utf-8"> <title>insert title here</title> #div1{width:250px; white-space: nowrap;border:1px solid #800040; text-overflow:ellipsis;overflow:hidden; <div id='div1'>http://www.jobtc.kr ( 한국직업훈련센터 )</div> [ 실행결과 ] 3.10 text-shadow 문자에그림자효과를준다.
구조 text-shadow : x 축거리 y 축거리 [ 흐림정도 ] [ 그림자색 ] [ 기본예 ] <meta charset="utf-8"> <title>text-shadow</title> #div1{ width:250px; white-space: nowrap; border:1px solid #800040; font-size:80px;font-family: 휴먼매직체 ; text-shadow:5px 5px 1px #aaaaaa; margin:10px; #div2{ width:250px; white-space: nowrap; border:1px solid #800040; font-size:80px;font-family: 휴먼매직체 ; text-shadow:5px 5px 10px #aaaaaa; margin:10px; <div id='div1'> 웹표준 </div> <div id='div2'> 웹표준 </div> [ 실행결과 ] 3.11 text-align 문자열을정렬한다. 속성 : left, right, center, justify [ 기본예 ] <meta charset="utf-8"> <title>text-align</title> #div1, #div2, #div3, #div4{
width:250px; heigh:100px; border:1px solid #800040; margin:10px; padding:5px; #div1{ text-align:justify; #div2{ text-align:right; #div3{ text-align:left; #div4{ text-align:center; <div id='div1'> justify: 웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준 </div> <div id='div2'> right : 웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준 </div> <div id='div3'> left: 웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준 </div> <div id='div4'> center : 웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준웹표준 </div> [ 실행결과 ]
3.12 hover link 특정태그에효과를넣을때사용. hover 를사용하기전에 link 를먼저사용해야함. a: hover a:link a:visited a:active a 태그에 hover 속성지정예 <meta charset="utf-8"> <title>hover link</title> a:link { text-decoration:none; a:hover{text-decoration:underline;color:#ff8000; <a href='http://www.jobtc.kr'>jobtc</a> 4 문단속성들 4.1 margin 문단의여백을조정한다. margin 상하좌우모든범위의적용. margin-left 문단의왼쪽여백을줌 margin-right 문단의오른쪽여백을줌 margin-top 문단의상단여백을줌 margin-bottom 문단의하단여백을줌 4.2 padding 태이블의셀경계선이나문단과텍스트사이의간격을말한다. padding padding-left padding-right padding-top padding-bottom 상하좌우모든범위에적용문단의왼쪽여백을줌문단의오른쪽여백을줌문단의상단여백을줌문단의하단여백을줌 4.3 border 경계선의선의색상, 선의굵기, 선의종류를지정할수있다. border: 색상굵기종류
4.4 border-color 경계선의색상을조정한다. border-color border-top-color border-bottom-color border-left-color border-right-color 경계선의전체색경계선의상단색경계선의하단색경계선의좌측색경계선의우측색 4.5 border-width 경계선의굵기를조정한다. border-width border-top-width border-bottom-width border-left-width border-right-width 경계선의전체굵기경계선의상단굵기경계선의하단굵기경계선의좌측굵기경계선의우측굵기 4.6 border-style 선의종류에는 solid, double, groove, ridge, inset, outset, dotted, dashed 등이있다. solid 굵은선 inset 오목 double 이중선 outset 볼록 groove 음각 dotted 점선 ridge 3D dashed 단선 [ 기본예 1] WebContent/src/border_style.html <meta charset='utf-8'> <title>border Style Example</title> div{ display:inline-block; border:1px solid #008000; width:150px;height:100px; #div1{ border-style:dotted; #div2{ border-color:#ff00ff; #div3{ border-width:5px; #div4{ margin:10px; #div5{ padding:30px; <h3>border Style Example</h3> <div id='div1'> 웹표준 </div> <div id='div2'> 웹표준 </div> <div id='div3'> 웹표준 </div><p/> <div id='div4'> 웹표준 </div>
<div id='div5'> 웹표준 </div> [ 실행결과 ] 4.7 border-radius 모서리의둥근형태를원의반지름을기준으로표현한다. border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius border-radius : r <!DOCTYPE HTML > <title> radius test </title> <meta charset='utf-8'>.radius_div{ border:2px solid #aaa ; width:100px;height:100px; display:table-cell; margin:10px; float:left; text-align:center; #radius_div1{ border-radius:5px; #radius_div2{ border-radius:25px; #radius_div3{ border-radius:50px; <div style='display:table-cell;'> <div id='radius_div1' class='radius_div'> 약간 <br/> 각진모양 </div> <div id='radius_div2' class='radius_div'> 둥근모양 </div> <div id='radius_div3' class='radius_div'> 원모양 </div>
</div> 4.8 box-shadow 그림자를넣을수있다. box-shadow : offsetx, offsety, blur, color <!DOCTYPE HTML > <title> box-shadow </title> <meta charset='utf-8'>.shadow_div{ border:3px solid #800080 ; width:200px;height:100px; #shadow_div1{box-shadow:5px 5px 5px #aaa; #shadow_div2{box-shadow:5px 5px 15px #aaa; #shadow_div3{box-shadow:15px 15px 2px #808000; <div id='shadow_div1' class='shadow_div'></div><br/> <div id='shadow_div2' class='shadow_div'></div><br/> <div id='shadow_div3' class='shadow_div'></div><br/> 상단모서리리처리와그림자
#radius3{ border-top-left-radius : 15px; border-top-right-radius : 15px; box-shadow : 4px 6px 10px #bbbbbb; 4.9 overflow 영역밖으로내용이나왔을때조치방법 속성 : auto, scroll, hidden, visible. inherit [ 기본예 ] <meta charset="utf-8"> <title>text-overflow</title> #div1, #div2, #div3, #div4{width:250px; white-space: nowrap; padding:4px;magin:60px; border:1px solid #800040; #div1{text-overflow:ellipsis;overflow:hidden #div2{text-overflow:clip;overflow:scroll; #div3{text-overflow:ellipsis;overflow:visible; #div4{text-overflow:clip;overflow:hidden; <div id='div1'>http://www.jobtc.kr ( 한국직업훈련센터 )</div><p/> <div id='div2'>http://www.jobtc.kr ( 한국직업훈련센터 )</div><p/> <div id='div3'>http://www.jobtc.kr ( 한국직업훈련센터 )</div><p/> <div id='div4'>http://www.jobtc.kr ( 한국직업훈련센터 )</div>
4.10 display 속성 block inline-block 5 바탕이미지 브라우저바탕의이미지를어떤형태로지정할것인가를결정한다. 5.1 background-image 바탕에표시할이미지를지정한다. background-image:url( 파일명 ) 5.2 background-attachment 브라우저내용이스크롤될때표시된이미지를같이스크롤할것인지고정시킬것인지지정한다. background-attachment:fixed scroll 5.3 background-position 이미지의위치를지정한다. background-position: x y left right top bottom center 5.4 background-repeat 이미지의반복유형을지정한다. background-repeat: value value repeat 반복한다. repeat-x x축으로만반복 repeat-y y축으로만반복 no-repeat 반복하지않는다. 의미 [ 기본예 ] <meta charset='utf-8'> <title>background style</title> #div1, #div2, #div3, #div4 { width: 400px ; height: 400px; background-image:url(../images/dog3.png);
#div2{ border: 2px solid #cccccc; background-repeat:no-repeat; background-position: 50px 50px; #div3{ border : 2px solid #ffaaaa; background-repeat:repeat-x; #div4{ border : 2px solid #aaaaff; background-repeat:repeat-y; <h4>nomal</h4> <div id='div1'></div> <p/> <h4> background-repeat:no-repeat;<br/> background-position: 50px 50px; </h4> <div id='div2'></div> <h4>background-repeat : repeat-x</h4> <div id='div3'></div> <h4>backround-repeat : repeat-y</h4> <div id='div4'></div> 5.5 background-size 바탕이미지의크기를조정할수있다. n% 를사용하여비율로정할수있다. background-size: sizex sizey <meta charset='utf-8'> <title>background-size</title> #div1, #div2, #div3{ width: 150px ; height: 150px; background-image:url(../images/dog3.png); border: 2px solid #cccccc; background-repeat:no-repeat; float:left; margin:10px; #div1{ background-position: 0px 0px; background-size: 40px 40px;
#div2{ background-position: 50px 50px; background-size: 40px 40px; #div3{ background-position: 0px 0px; background-size: 100% 100%; <h2>background-size</h2> <div style='display:table-cell;'> <div id='div1'></div> <div id='div2'></div> <div id='div3'></div> </div> 5.6 opacity 투명도를조절한다. 값의범위 : 0~1(1: 불투명 ) IE8 이전버전은 filter:alpah(opacity=n) 으로조절 (N=0~100) [ 기본예제 ] <meta charset="utf-8"> <title>opacity</title> #div1, #div2{opacity:.2; #div1{ font:bold 100pt 궁서체 ; #div2{ background-image:url(img006.png);width:400px;height:100px; #div3{ background-image:url(img006.png);width:400px;height:100px; <div id='div1'> 웹표준 </div>
opacity:.2; <div id='div2'></div> 원본 <div id='div3'></div> 6 목록태그 6.1 이미지로목록태그만들기 list-style-image : url( 파일명 ) 목록기호로사용될이미지설정 6.2 목록태그위치지정 list-style-position : inside outsize 목록기호의위치를지정 [ 기본예 1] <meta charset='utf-8'> <title>list style</title> #ul1{ list-style-image:url(../images/icon.png); list-style-position:inside; #ul2{
list-style-image:url(../images/cat2.png); list-style-position:outside; <p>inside<p/> <ul id='ul1'> <li> 백두산백두산백두산백두산백두산백두산백두산 </li> <li> 한라산 </li> <li> 금강산 </li> <li> 지리산 </li> <li> 태백산 </li> </ul> <p>outside<p/> <ul id='ul2'> </ul> <li> 백두산백두산백두산백두산백두산백두산백두산 </li> <li> 한라산 </li> <li> 금강산 </li> <li> 지리산 </li> <li> 태백산 </li> 7 레이어작업하기 레이어과관련된대표적인속성 position : absolute, relative, static, fixed, inherit, float : left, right, none, inherit
clear : left, right, none, both, inherit left : 좌측위치 top : 좌측상단의위치 width : 넓이 height : 높이 7.1 position 배치상태를지정함. left top 을사용하여배치의위치를지정할수있음. 7.1.1 static(default) 기본적으로가지고있는내용만큼영역을잡은뒤줄을바꾼다. 7.1.2 absolute 부모객체의좌측상단 (0,0) 을기준으로절대위치에표시. 7.1.3 relative 이전객체가원래표시될위치를기준으로상대위치에표시 기본예 <meta charset="utf-8"> <title>div position (II)</title> #div1, #div2, #div3, #div4, #div5{ width:100px; height:100px; border:0px solid #cccccc; margin: 0px;padding:0px; position:relative; #div1{left:0px; top:0px;width:300px;height:300px; background-color:#fff4f4; #div2{left:0px; top:0px; background-color:#ffcccc; #div3{left:0px; top:0px; background-color:#ccffcc; #div4{left:100px; top:-100px; background-color:#ccccff ; #div5{left:100px; top:-300px; background-color:#ffffaa <h3>position:relative</h3> <div id='div1'> <div id='div2'> div2 </div> <div id='div3'> div3 </div>
<div id='div4'> div4 </div> <div id='div5'> div5 </div> </div> 7.1.4 fixed absolute 와유사하지만스크롤되지않는다. 기본예 <meta charset="utf-8"> <title>div position</title> #div1, #div2, #div3, #div4, #div5{ width:100px; height:100px; border:1px solid #cccccc; position:fixed; #div2{left:40px; top:80px; background-color:#ffcccc; #div3{left:80px; top:130px; background-color:#ccffcc; #div4{left:120px; top:180px; background-color:#ccccff ; #div5{left:160px; top:230px; background-color:#ffffaa <h3>position:fixed</h3> <div id='div1'> div1 </div> <div id='div2'> div2 </div> <div id='div3'> div3 </div> <div id='div4'> div4 </div> <div id='div5'> div5 </pre> </div>
absolute 와 fixed 비교화면 (fixed 는스크롤바가발생하지않음 ) 7.2 float 컴포넌트의배치방법을지정함. 속성 : left, right, none, inherit 7.3 clear float 에의해지정된배치방법을해제. 속성 : left, right, none, both, inherit 7.4 display <label/> 이나 <div/> 등의기본배치속성을변경. 속성 : inline-block, block 8 transform 요소의회전이나화대, 축소등의기능을갖고있음. 두개이상을연이여서사용할수있음. roate : 회전 scale : 확대또는축소 skew : 비틈 translate : 이동 8.1 rotate 요소를회전시킨다.
값의범위 (-360~360deg). 음수인경우반시계방향으로회전시킴. 회전 (rotate) <meta charset="utf-8"> <title>insert title here</title> #matrix{margin-top:100px;width:100px;height:40px; border:2px solid #aaa; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); <div id='matrix'>matrix</div> 8.2 scale scale(x축 deg, y축 deg) 요소를축소하거나확대한다. 값의범위 : 0.0~n배수 (1이하이면축소됨 ) 가로세로를두배씩확대 transform:scale(2,2); -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -o-transform:scale(2,2); 8.3 skew 가로세로를비트는효과. 기본시계방향. 값이음수이면반시계방향으로비틀어짐.
skew(x,y), skewx(x), skewy(y) transform:skew(10deg, 0deg); -ms-transform:skew(10deg, 0deg); -webkit-transform:skew(10deg, 0deg); -moz-transform:skew(10deg, 0deg); -o-transform:skew(10deg, 0deg); 8.4 translate translate(x, y) 요소의위치를 x,y 로이동. 요소의위치를 50,50 으로이동시킴 transform:translate(50px,50px); -ms-transform:translate(50px,50px); -webkit-transform:translate(50px,50px); -moz-transform:translate(50px,50px); -o-transform:translate(50px,50px); 8.5 origin transform 의기준위치를변경한다. 기본값은요소의 (50%, 50%) 위치를기준으로효과가나타남. 0% 0% 는좌측상단이기준이되며, 100% 100% 는우측하단이기준이됨. 회전원점을비율단위로변경할때 -ms-transform-origin:0% 0%; -webkit-transform-origin:0% 0%; -moz-transform-origin:0% 0%; -o-transform-origin:0% 0%;
8.6 transition 요소에애니메이션효과를부여할수있다. div 에마우스가올라가면애니메이션효과를사용하여회전시키는예 <meta charset="utf-8"> <title>animation</title> #ani_1, #ani_2, #ani_3, #ani_4, #ani_5{ border:1px solid #aaaaaa; width:200px; height:100px; margin:5px; border-radius:10px; -webkit-transform:rotate(0deg); -webkit-transition:-webkit-transform 3s; #ani_1:hover,#ani_2:hover,#ani_3:hover,#ani_4:hover,#ani_5:h over{ background-color:#ddd; -webkit-transform:rotate(45deg); -webkit-transition:-webkit-transform 2s, opacity 2s, background 2s, width 2s, height 2s <div id='ani_1'>animation 1</div> <div id='ani_2'>animation 2</div> <div id='ani_3'>animation 3</div> <div id='ani_4'>animation 4</div> <div id='ani_5'>animation 5</div>