- PDF 무료 다운로드

Size: px

Start display at page:

Download ""

유신 목
6 years ago
Views:

3 - i -

4 - ii -

5 - iii -

6 - iv -

7 - v -

8 - vi -

9 - vii -

10 - viii -

11 - ix -

12 - x -

13 - xi -

14 - xii -

15 - 1 -

16 명 칭 개발사 특징 비고 웹페이지갱신없이고속으로화면전환 가능. Ajax ASP.NET 웹페이지의일부분을갱신하는데필요한 데이터만을수신할수있음. 서버와의비동기적통신지원함. Macromedia 애니메이션, 비디오등의저작도구로개발 Flash 되었으며, 웹페이지를동적으로꾸미는데도사용될수있음. Flash Platform 상에서동작하는본격적인 Flex Adobe RIA 도구임. 이클립스기반의 IDE 를지원함. Flash와호환되는 ActionScript 기반의프 로그래밍환경을지원함. Silverlight 닷넷프레임워크의개발언어를지원함 Visual Studio 2008 플랫폼임. MS. 1) 아이콘을다른아이콘위에포개어놓음으로써처리내용을지정하는조작개념 - 2 -

17 2) 3) 4)

18 - 4 -

19 - 5 -

20 - 6 -

21 - 7 -

22 - 8 -

23 - 9 -

24 5) 한국정보문화진흥원정보통신보조기기체험관사이트 :

25 - 11 -

26 6) 7) 8)

27 9)

28 10) 11) 12)

29 - 15 -

30 - 16 -

31 13) Editor's Draft, 2009년 1월 14일

32 - 18 -

33 14) 년 12월 24일 W3C 표준 15) Editor's Draft, 2009년 1월 14일

34 - 20 -

35 - 21 -

36 - 22 -

37 액세스가능성 name description name description

38 - 24 -

39 - 25 -

40 . < - 3> 16) -2d5e1db91038&DisplayLang=en 17)

41 18)

42 19) -

43 - 29 -

44 - 30 -

45 - 31 -

46 - 32 -

47 - 33 -

48 - 34 -

49 - 35 -

50 - 36 -

51 - 37 -

52 - 38 -

53 getelementbyid 20) 는가를기준으로구현한스크립트언어임때론 JavaScript Netscape ECMA-262. ECMAScript 라고도함

54 - 40 -

55 - 41 -

56 21)

57 - 43 -

58 - 44 -

59 <noscript> <script type= text/javascript > var width = 600; document.write( <div id= sublayer style= width: + width + > ); document.write( <p><a href= help.html > 도움말</a></p> ); document.write( </div> ); </script> <noscript> <p><a href= help.html > 도움말</a></p> </noscript>

60 - 46 -

61 <div id= sublayer > </div> <p><a href= > 도움말</a></p> <script type= text/javascript > var width = 600; document.getelementbyid( sublayer ).style.width = width + px ; </script>

62 onmouseover <script type="text/javascript"> function changeimage(img) { </script> <p> img.src = img.src.replace(".gif", "_on.gif"); <a href="about.html"> </p> <img src="introduction.gif" onmouseover="changeimage(this)" alt=" 소개"></a>

63 changeimage.js <script type="text/javascript" src="changeimage.js"></script> <p><a href="about.html"><img src="introduction.gif" id="about-image" alt=" 소개"></a></p> changeimage.js 는 window.onload = function () { document.getelementbyid("about-image").onmouseover= function changeimage() { this.src = this.src.replace(".gif", "_on.gif");

64 접근성 지침 인터넷웹콘텐츠 인터넷웹콘텐츠접근성지침

65 new_image.jpg old_image.jpg new_image.jpg " 우는얼굴"

66 <html> <head> <title>... </title> <script type="text/javascript"> var bool=0; function replaceimage() { if (bool == 0) { bool = 1; document.getelementbyid("image").src="new_image.jpg"; document.getelementbyid("image").alt = " 우는얼굴"; else { </script> </head> <body> bool = 0; document.getelementbyid("image").src="old_image.jpg"; document.getelementbyid("image").alt = " 웃는얼굴"; <div style="margin-top:100px; text-align:center"> <img id = "image" src=old_image.jpg" alt=" 웃는얼굴" </div> </body> </html> style="cursor:pointer" onclick="replaceimage(bool);" />

67 - 53 -

68 - 54 -

69 onmouseover onfocus () onmouseout onblur () onmousedown onkeydown () onmouseup onkeyup () onclick onkeypress () onmouseover onmouseout onfocus onblur onkeypress onkeydown onkeyup onkeypress onkeydown onkeyup onclick

70 onclick onkeypress onchange

71 <input type="button" value=" 도움말 /> onclick="window.open( onkeypress="verifykey(this,event);" // With onkeypress event, this verifies? key function verifykey(oelement,oevent){ if(oevent.keycode==63 && oelement.onclick){ //? = 63 oelement.onclick();

72 - 58 -

73 title onclick  href="example.htm" onclick="window.open (...); return false;"  href="example.htm" onclick="return pop(this)"; true pop() pop() false

74 window.open onclick popup.html <img src="openwindow.gif" onclick="window.open('popup.html','', 'width=300,height=200')"> <a href="#"> <img src="openwindow.gif" onclick="window.open('popup.html', '', 'width=300,height=200')"> </a>

75 # this.href "popup.html" <a href="popup.html" onclick="window.open(this.href,'popupname', 'width=300,height=200'); return false;"> <img src="openwindow.gif"> </a> <a> href JavaScript: myfunction( ) JavaScript: href

76 href href href

77 - 63 -

78 <form> <form>

79 <input> <script type="text/javascript"> function submitform() { loginform.submit(); </script>

80 <form id="loginform" name="loginform" action=""> </form> User Id <input type="text" name="loginid"> User Password <input type="password" name="loginpassword"><br> <img src="login.gif" alt = " 로그인 onclick="submitform()"> <input> <input> <form id="loginform" name="loginform" action=""> <p> </p> <p> </p> </form> <label for="loginid">user Id</label> <input type="text" id="loginid" name="loginid" /><br /> <label for="loginpassword">user Password</label> <input type="password" id="loginpassword" name="loginpassword" /> <input type="image" src="login.gif" alt=" 로그인" />

81 <form> <script type="text/javascript"> function submitform(formel) { var errormessage = null; var objfocus = null; if (formel.loginid.value.length == 0) { errormessage = " 아이디를넣어주세요."; objfocus = formel.loginid; else if (formel.loginpassword.value.length == 0) { errormessage = " 비밀번호를넣어주세요."; objfocus = formel.loginpassword; if(errormessage!= null) { return true; alert(errormessage); objfocus.focus(); return false;

82 </script> <form id="loginform" name="loginform" action="" </form> onsubmit="return submitform(this)"> <label for="loginid"> 아이디</label> <input type="text" id="loginid" name="loginid" /> <label for="loginpassword"> 비밀번호</label> <input type="password" id="loginpassword" name="loginpassword" /><br /> <input type="image" src="login.gif" alt=" 로그인" /> onsubmit

83 <form method="post" name="vars"> </form>.. <input type="hidden" name="articleid" value="23" /> <input type="hidden" name="page" value="3" /> <input type="hidden" name="keysord" value="" /> <input type="hidden" name="searchtype" value="" />  <a href="javascript:articleread()"> 글읽기</a> <a href="javascript:golist()"> 리스트보기</a> post <a> QueryString

84 noscript noscript noscript noscript

85 charset, type, src, defer type type <script type="text/javascript"> //code </script>

86 language language <body> <head>... </head> <body>... </body> <html> </head> 태그 </html> </body> <script type="text/javascript"> //code </script> </body> </html>

87 <script type="text/javascript"> document.location.href ="redirection.html"; </script> <form> <form name="login_form"> <input type="hidden" name="user_id" value="myid" /> <input type="hidden" name="user_pwd" value="mypassword" /> <input type="hidden" name="redirect_url" value= " <input type="hidden" name="somevalue" value="blahblah" />... </form> <script type="text/javascript"> f = document.forms.login_form; f.action = " f.submit(); </script> <form method="post" name="sg_form" action=" "target="_top"></form> <script> sg_form.submit(); </script>

88 <form> <script> <body> <head> <input> <form> <html> <head> <body> <form> <a> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <title>redirect</title> </head> <body> <script type="text/javascript"> /* some processes... */

89 alert('... 의이유로다시돌아갑니다.'); document.location.href="redirection.html"; </script> <p> <a href="redirection.html">... 의이유로다시돌아갑니다.</a></p> </body> </html>

90 - 76 -

91 - 77 -

92 - 78 -

93 - 79 -

94 - 80 -

95 22)

96 - 82 -

97 - 83 -

98 - 84 -

99 - 85 -

100 - 86 -

101 23) 이번평가에서는드림보이스 7.0 베타버전을사용하였음

102 - 88 -

103 //HTML Document <div id="topmenu"> </div> <div id="topmenusub"> </div> <ul> <li><a href="./ 고객민원.html"><img src="./img/menua_off.gif" alt=" 고객민원" /></a></li> <li><a href="./ 행정정보.html"><img src="./img/menub_off.gif" alt=" 행정정보" /></a></li> <li><a href="./ 뉴스소식.html"><img src="./img/menuc_off.gif" alt=" 뉴스/ 소식" /></a></li> <li><a href="./ 정책홍보.html"><img src="./img/menud_off.gif" alt=" 정책홍보" /></a></li> <li><a href="./ 행정안전부.html"><img src="./img/menue_off.gif" </ul> <script type="text/javascript"> alt=" 행정안전부" /></a></li> var TopMenu1 = new fntopmenu1_type1; TopMenu1.DivName = "TopMenuSub"; TopMenu1.fnName = "TopMenu1"; TopMenu1.DefaultMenu = 0; </script> TopMenu1.Start();

104 // JavaScript Document function fntopmenu1_type1() { this.start = function() { this.menubox = document.getelementbyid(this.divname.getelementsbytagname("ul")[0].getelementsbytagname("li"); // 메뉴의갯수를파악하는부분 this.menulength = this.menubox.length; // 메뉴의링크부분에마우스나키보드의반응을넣는부분 for ( var i=0; i<this.menulength; i++ ) { this.menulink = this.menubox.item(i).getelementsbytagname("a")[0]; this.menulink.i = i; this.menulink.fnname = this.fnname; this.menulink.onmouseover = this.menulink.onfocus = function() { eval( this.fnname + ".fnmouseover("+this.i+")") this.menulink.onmouseout = this.menulink.onblur =function() {eval( this.fnname +".fnmouseover()")

105 if ( this.defaultmenu!= 0 ) { this.fnmouseover(this.defaultmenu - 1); // 메뉴의링크부분에마우스나키보드의반응에의해실행하는부분 this.fnmouseover = function(val) { for ( var i=0; i<this.menulength; i++ ) { this.menuimg =this.menubox.item(i).getelementsbytagname("a")[0].getelementsbytagname("img")[0]; if ( i == val ) { this.menuimg.src = this.menuimg.src.replace("_off.gif","_on.gif"); else { this.menuimg.src = this.menuimg.src.replace("_on.gif","_off.gif");

106 - 92 -

107 //HTML Document <body> <div id="topmenu"> <div id="topmenusub"> <ul>

108 <li class="menu1"> <a href="./menu1.htmlf"> <img src="./img/menua_off.gif" alt=" 고객민원" /></a> <div class="topsubmenu"> <ul> <li><a href="./ 고객센터.html"> <img src="./img/menua_1_off.gif" alt=" 고객센터" /></a></li> <li><a href="./ 질의응답.html"> <img src="./img/menua_2_off.gif" alt=" 질의응답" /></a></li> <li><a href="./ 국민제안.html"> <img src="./img/menua_3_off.gif" alt=" 국민제안" /></a></li> <li><a href="./ 국민신고.html"> <img src="./img/menua_4_off.gif" alt=" 국민신고" /></a></li> </li>.. </div> </ul> <li class="menu5"> <a href="./ 행정안전부.html"> <img src="./img/menue_off.gif" alt=" 행정안전부" /></a> <div class="topsubmenu"> <ul> <li><a href=./ 소개.html"> <img src="./img/menue_1_off.gif" alt=" 소개" /></a></li> <li><a href=./ 조직.html"> <img src="./img/menue_2_off.gif" alt=" 조직" /></a></li> <li><a href="./ 장관소개.html"> <img src="./img/menue_3_off.gif"alt=" 장관소개 <li><a href="./ 차관소개.html"> "/></a></li> <img src="./img/menue_4_off.gif" alt=" 차관소개" /></a></li> </li> </div> </ul>

109 </ul> </div> </div> <script type="text/javascript"> var TopMenu1 = new fntopmenu1_type1; TopMenu1.DivName = "TopMenuSub"; TopMenu1.fnName = "TopMenu1"; TopMenu1.DefaultMenu = 0; TopMenu1.DefaultSubMenu = 0; </script> </body> TopMenu1.Start(); // JavaScript Document function fntopmenu1_type1() { this.menu = new Array(); this.menuseq = 0; this.start = function() { this.menubox = document.getelementbyid(this.divname).getelementsbytagname("ul")[0].childnodes ; // 메뉴의갯수를파악하는부분 this.menulength = this.menubox.length; // 메뉴의주메뉴링크부분에 // 마우스나키보드의반응을넣는부분 for ( var i=0; i<this.menulength; i++ ) { if(this.menubox.item(i).tagname!= "LI" ) {continue;

110 this.menulink = this.menubox.item(i).getelementsbytagname("a")[0]; this.menulink.i = i; this.menulink.fnname = this.fnname; this.menulink.onmouseover = this.menulink.onfocus = function() { eval(this.fnname+".fnmouseover("+ this.i + ")") this.menusubbox = this.menubox.item(i).getelementsbytagname("div")[0]; this.menusubmenu = this.menusubbox.getelementsbytagname("ul")[0].getelementsbytagname("li"); this.menusubmenulength = this.menusubmenu.length; // 메뉴 2뎁스링크에마우스나키보드의반응넣는부분 for ( var j=0; j<this.menusubmenulength; j++ ) { this.menusublink = this.menusubmenu.item(j).getelementsbytagname("a")[0]; this.menusublink.i = i; this.menusublink.j = j; this.menusublink.fnname = this.fnname; this.menusublink.onmouseover = this.menusublink.onfocus = function() { eval(this.fnname + ".fnmousesubover (" + this.i + "," + this.j + ")") this.menusublink.onmouseout = this.menusublink.onblur = function() { eval(this.fnname +".fnmousesubout (" + this.i + "," + this.j + ")")

111 this.menusubbox.style.display = "none"; this.menuseq++; this.menu[this.menuseq] = i if ( this.defaultmenu!= 0 ) { this.fnmouseover(this.menu[this.defaultmenu]); if ( this.defaultsubmenu!= 0 ) { this.fnmousesubover(this.menu[this.defaultmenu]; this.defaultsubmenu- 1); // 메뉴의주메뉴링크부분에 // 마우스나키보드의반응에의해실행하는부분 this.fnmouseover = function(val) { for ( var i=0; i<this.menulength; i++ ) { if ( this.menubox.item(i).tagname!= "LI" ) {continue; this.menuimg = this.menubox.item(i).getelementsbytagname("a")[0].getelementsbytagname("img")[0]; this.menusdiv = this.menubox.item(i).getelementsbytagname("div")[0]; if ( i == val ) { this.menuimg.src = this.menuimg.src.replace("_off.gif","_on.gif"); this.menusdiv.style.display = "block"; else { this.menuimg.src = this.menuimg.src.replace("_on.gif","_off.gif");

112 this.menusdiv.style.display="none"; // 메뉴의하위메뉴링크부분에 // 마우스나키보드의반응에의해실행하는부분 this.fnmousesubover = function(mnum,snum) { this.submenuimg = this.menubox.item(mnum).getelementsbytagname("div")[0].getelementsbytagname("ul")[0].getelementsbytagname("li") [snum].getelementsbytagname("a")[0].getelementsbytagname("img")[0]; this.submenuimg.src = this.submenuimg.src.replace("_off.gif","_on.gif"); this.fnmousesubout = function(mnum,snum) { this.submenuimg = this.menubox.item(mnum).getelementsbytagname("div")[0].getelementsbytagname("ul")[0].getelementsbytagname("li") [snum].getelementsbytagname("a")[0].getelementsbytagname("img")[0]; this.submenuimg.src = this.submenuimg.src.replace("_on.gif","_off.gif");

113 - 99 -

114 // HTML Document <body> <div id="content"> </div> <div id="linksite"> <div id="linksitesub"> <dl> <dt><a href="#linksitelist"> <img src="./img/linksite_menu_off.gif" alt=" 관련사이트" /> </a></dt> <dd id="linksitelist"> <ul> <li><a href=" 정부청사관리소.html"> <img src="./img/linksite_menus_1_off.gif" alt=" 정부청사관리소" /> </a></li>

115 </div> </div> </dl> </dd> <li><a href="#"> <img src="./img/linksite_menus_2_off.gif" alt=" 국가기록원" /></a></li> <li><a href="#"> <img src="./img/linksite_menus_3_off.gif" alt=" 지방행정연구원" /></a></li> <li><a href="#"> <img src="./img/linksite_menus_4_off.gif" alt=" 국립과학수사연구소" /></a></li> <li><a href="#"> <img src="./img/linksite_menus_5_off.gif" alt=" 중앙공무원교육원" /></a></li> <li><a href="#"> </ul> <script type="text/javascript"> var isshiftdown = false; <img src="./img/linksite_menus_6_off.gif" alt=" 소청심사위원회" /></a></li> document.body.onkeydown = function(e){ var ecode = (window.netscape)? ev.which if(ecode == 16) : event.keycode; isshiftdown = true; document.body.onkeyup = function(e){ isshiftdown = false; var LinkSite1 = new fnlinksite_type1; LinkSite1.DivName = "LinkSiteSub"; LinkSite1.fnName = "LinkSite1"; LinkSite1.Start();

116 </script> </body> // JavaScript Document function fnlinksite_type1() { this.start = function() { this.linksite = document.getelementbyid(this.divname).getelementsbytagname("dl")[0]; this.mainlink = this.linksite.getelementsbytagname("dt")[0].getelementsbytagname("a")[0]; this.submenubox = this.linksite.getelementsbytagname("dd")[0]; this.mainlink.fnname = this.fnname; // 관련사이트메뉴의클릭에반응하는부분 this.mainlink.onclick = function() { eval( this.fnname +".fnmouseover(0,this)") // 관련사이트메뉴의 MouseOut시발생하는부분 this.mainlink.onmouseout = function() { eval( this.fnname +".fnmouseout(0,this)") ; // 관련사이트서브메뉴의박스부분에 // 마우스나키보드의반응을넣는부분 this.submenubox.style.display = "none"; this.submenubox.fnname = this.fnname;

117 this.submenubox.onmouseover = this.submenubox.onfocus = function() { eval( this.fnname +".fnmouseover(1,this)") this.submenubox.onmouseout = this.submenubox.onblur = function() { eval( this.fnname +".fnmouseout(1,this)") this.submenulist = this.submenubox.getelementsbytagname("ul")[0].getelementsbytagname("li"); this.submenulisttotal = this.submenulist.length; // 관련사이트서브메뉴의링크부분에 // 마우스나키보드의반응을넣는부분 for ( var i=0; i<this.submenulisttotal; i++ ) { this.sublink = this.submenulist.item(i).getelementsbytagname("a")[0]; this.sublink.i = i; this.sublink.fnname = this.fnname; this.sublink.onmouseover = this.sublink.onfocus = function() { eval( this.fnname +".fnsubmouseover("+this.i+")") this.sublink.onmouseout = this.sublink.onblur = function() { eval( this.fnname +".fnsubmouseout("+this.i+")") // 관련사이트메뉴의마우스나키보드의반응에의해실행하는부분 this.fnmouseover = function(num,val) { if ( num == 0 ) { this.mainmenuimg

118 = val.getelementsbytagname("img")[0]; else if ( num == 1 ) { this.mainmenuimg =this.mainlink.getelementsbytagname("img")[0]; this.submenubox.style.display = "block"; this.mainmenuimg.src = this.mainmenuimg.src.replace("_off.gif","_on.gif"); this.fnmouseout = function(num,val) { if ( num == 0 ) { this.mainmenuimg = val.getelementsbytagname("img")[0]; else if ( num == 1 ) { this.mainmenuimg = this.mainlink.getelementsbytagname("img")[0]; this.submenubox.style.display = "none"; this.mainmenuimg.src = this.mainmenuimg.src.replace("_on.gif","_off.gif"); // 관련사이트서브메뉴의링크부분에 // 마우스나키보드에의해실행하는부분 this.fnsubmouseover = function(val) { for ( var i=0; i<this.submenulisttotal; i++ ) { this.menuimg = this.submenulist.item(i).getelementsbytagname("a")[0].getelementsbytagname("img")[0]; if ( i == val ) { this.menuimg.src

119 = this.menuimg.src.replace("_off.gif","_on.gif"); else { this.menuimg.src = this.menuimg.src.replace("_on.gif","_off.gif"); // 관련사이트서브메뉴에서포커스를벗어날때 this.fnsubmouseout = function(val) { if(isshiftdown) return; if(val == this.submenulisttotal - 1){ this.submenubox.style.display = "none"; this.mainmenuimg.src =this.mainmenuimg.src.replace("_on.gif","_off.gif"); for ( var i=0; i<this.submenulisttotal; i++ ) { this.menuimg = this.submenulist.item(i).getelementsbytagname("a")[0].getelementsbytagname("img")[0]; if ( i == val ) { this.menuimg.src = this.menuimg.src.replace("_off.gif","_on.gif"); else { this.menuimg.src = this.menuimg.src.replace("_on.gif","_off.gif");

120

121 //HTML Document <head> <title> 가로탭메뉴 Type1</title> <link rel="stylesheet" href="./common/style.css" type="text/css" /> <script type="text/javascript" src="./common/script.js"></script> </head> <body> <div id="tabmenu"> <div id="tabmenusub"> <ul> <li><a href="#tabnotice0"> <img src="./img/menua_off.gif" alt=" 공지사항" /></a></li>

122 </div> </ul> </div> <li><a href="#tabnotice1"> <img src="./img/menub_off.gif" alt=" 입법예고" /></a></li> <li><a href="#tabnotice2"> <img src="./img/menuc_off.gif" alt=" 보도자료" /></a></li> <li><a href="#tabnotice3"> <img src="./img/menud_off.gif" alt=" 해명자료" /></a></li> <div id="tabnotice0" class="tabnoticestyle"> <ul> <li><a href="./notice.html" > 광주지방정부청사금융기관선정 결과 </a></li> <li><a href="./notice.html" > 행정안전부겨울방학대학생... </a></li> <li><a href="./notice.html">2008 년도공무원연금운영위원회 회의록 </a></li> <li><a href="./notice.html">2007년도제5회 공무원연금운영위원회...</a></li> <li><a href="./notice.html"> 생활공감정책국민아이디어 </ul> 공모...</a></li> <a href="./noticemore.html" class="more" onblur="checklink(0)"> </div>.. <img src="./img/btn_more.gif" alt=" 공지사항더보기" /></a> <script type="text/javascript"> </script> var TabMenu1 = new fntabmenu_type1; TabMenu1.MenuName = "TabMenuSub"; TabMenu1.DivName = "TabNotice"; TabMenu1.fnName = "TabMenu1"; TabMenu1.Start();

123 </body> // JavaScript Document function fntabmenu_type1() { this.currentmenu = 0; this.start = function() { this.menubox = document.getelementbyid(this.menuname).getelementsbytagname("ul")[0].getelementsbytagname("li"); // 탭메뉴의갯수를파악하는부분 this.menulength = this.menubox.length; // 탭메뉴의링크부분에마우스나키보드의반응을넣는부분 for ( var i=0; i<this.menulength; i++ ) { this.menulink = this.menubox.item(i).getelementsbytagname("a")[0]; this.menulinkbtn = this.menulink.getelementsbytagname("img")[0]; if ( i == this.currentmenu ) { document.getelementbyid(this.divname + i).style.display = "block"; this.menulinkbtn.src = this.menulinkbtn.src.replace("_off.", "_on."); else { document.getelementbyid(this.divname + i).style.display = "none"; this.menulinkbtn.src = this.menulinkbtn.src.replace("_on.", "_off."); this.menulink.i = i;

124 this.menulink.fnname = this.fnname; this.menulink.onclick = function() { eval( this.fnname +".fnmouseover(" + this.i + ")"); return false; // 주메뉴에서 Enter 키를눌렀을경우 this.menulink.onkeydown=function(e){ if(event.keycode == 13){ eval( this.fnname +".fnmouseover2(" + this.i + ")"); // 주메뉴의가장마지막링크에서포커스를검사한다. // 현재주메뉴가선택되어있고링크가하위메뉴에있다면, // 이전에선택한주메뉴로포커스를이동시킨다. if(i == this.menulength-1){ this.menulink.onfocus = function(){ try{ if(currenttab < i && issubmenu){ return false; catch(e){ document.getelementbyid("tabmenusub").getelementsbytagname("a")[currenttab].focus(); issubmenu = false; // 탭메뉴의링크부분에마우스나키보드반응에의해실행하는부분 this.fnmouseover = function(val) {

125 for ( var i=0; i<this.menulength; i++) { this.menulink=this.menubox.item(i).getelementsbytagname("a")[0]; this.menulinkbtn = this.menulink.getelementsbytagname("img")[0]; if ( i == val ) { document.getelementbyid(this.divname+i).style.display = "block"; this.menulinkbtn.src=this.menulinkbtn.src.replace ("_off.", "_on."); else { document.getelementbyid(this.divname+i).style.display = "none"; this.menulinkbtn.src=this.menulinkbtn.src.replace("_on.", "_off."); this.fnmouseover2 = function(val) { currenttab = val; issubmenu = true; for ( var i=0; i<this.menulength; i++) { this.menulink = this.menubox.item(i).getelementsbytagname("a")[0]; this.menulinkbtn = this.menulink.getelementsbytagname("img")[0]; if ( i == val ) { document.getelementbyid(this.divname+i).style.display="block"; this.menulinkbtn.src = this.menulinkbtn.src.replace("_off.", "_on."); else { document.getelementbyid(this.divname+i).style.display="none"; this.menulinkbtn.src = this.menulinkbtn.src.replace("_on.", "_off.");

126 // 하위메뉴의첫번째링크로초점이이동 if(i == val) { document.getelementbyid("tabnotice" + val).getelementsbytagname("a")[0].focus(); // 더보기를눌렀을경우주메뉴에서 // 선택되지않은다음메뉴가있는지검사한다. function checklink(id){ try{ var obj = document.getelementbyid("tabmenusub") catch(e){ obj.focus();.getelementsbytagname("a")[id + 1];

127

128 //HTML Document <head> <title> 가로탭메뉴 Type2</title> <link rel="stylesheet" href="./common/style.css" type="text/css" /> <script type="text/javascript" src="./common/script.js"></script> </head> <body> <div id="tabmenu"> <div class="tabnoticestyle"> <a href="#tabnotice0"> <img src="./img/menua_off.gif" alt=" 공지사항" /> </a> <ul id="tabnotice0"> <li><a href="./notice.html"> 광주지방정부청사금융기관

129 </div> 선정결과 </a></li> <li><a href="./notice.html"> 행정안전부겨울방학대학생...</a></li> <li><a href="./notice.html">2008 년도공무원연금운영위원회...</a></li> <li><a href="./notice.html">2007년도제5회공무원연금운영...</a></li> <li><a href="./notice.html"> 생활공감정책국민아이디어공모 </ul>...</a></li> <a id="tabnotice0more" href="./notice.html" class="more"> </div>.. <img src="./img/btn_more.gif" alt=" 공지사항더보기" /></a> <script type="text/javascript"> var TabMenu1 = new fntabmenu_type1; TabMenu1.MenuName = "TabMenu"; TabMenu1.DivName = "TabNotice"; TabMenu1.fnName = "TabMenu1"; </script> TabMenu1.Start(); </body>

130 // JavaScript Document function fntabmenu_type1() { this.currentmenu = 0; currenttab = 0; this.start = function() { this.menubox = document.getelementbyid(this.menuname).getelementsbytagname("ul"); this.menulength = this.menubox.length; this.menulayer = document.getelementbyid(this.menuname).getelementsbytagname("div"); for ( var i=0; i<this.menulength; i++ ) { this.menulink = this.menulayer.item(i).getelementsbytagname("a")[0]; this.menulinkbtn = this.menulink.getelementsbytagname("img")[0]; if ( i == this.currentmenu ) { document.getelementbyid(this.divname+i).style.display ="block"; document.getelementbyid(this.divname+i+"more").style.display = "block"; this.menulinkbtn.src=this.menulinkbtn.src.replace ("_off.", "_on."); else { document.getelementbyid(this.divname+i).style.display ="none"; document.getelementbyid(this.divname+i+"more").style.display = "none"; this.menulinkbtn.src=this.menulinkbtn.src.replace

131 ("_on.", "_off."); this.menulink.i = i; this.menulink.fnname = this.fnname; this.menulink.onmouseover = this.menulink.onfocus = function() { eval( this.fnname +".fnmouseover(" + this.i + ")") this.fnmouseover = function(val) { isback = false; if(currenttab > val) { isback = true; currenttab = val; for ( var i=0; i<this.menulength; i++) { this.menulink = this.menulayer.item(i).getelementsbytagname("a")[0]; this.menulinkbtn = this.menulink.getelementsbytagname("img")[0]; if ( i == val ) { document.getelementbyid(this.divname+ i).style.display = "block"; document.getelementbyid(this.divname+i+"more").style.display = "block"; this.menulinkbtn.src = this.menulinkbtn.src.replace("_off.", "_on."); else { document.getelementbyid(this.divname + i).style.display = "none"; document.getelementbyid(this.divname+i+"more").style.display = "none"; this.menulinkbtn.src = this.menulinkbtn.src.replace("_on.", "_off.");

132 // 하위메뉴의제일마지막부터차례로이동하는부분 // 다음의 3 줄을빼면메인메뉴로만이동합니다. if(isback && i== val) { this.menulayer.item(i).getelementsbytagname("a") [this.menulayer.item(i).getelementsbytagname("a").length-2].focus();

133 //HTML Document <head> <title> 로그인</title> <link rel="stylesheet" href="./common/style.css" type="text/css" /> <script type="text/javascript" src="./common/script.js"></script> </head>

134 <body> <div id="memberlogin"> </div> <div id="memberloginsub"> </div> </body> <form id="loginform" name="loginform" method="post" action="" onsubmit=" return submitforum(this);"> <fieldset> <legend> <img src="./img/login_ti.gif" alt=" 회원로그인" /></legend> <p> <label for="loginid"> 아이디</label> <input type="text" id="loginid" name="loginid" <span> maxlength="15" value="" /> <input type="checkbox" id="logincheck" </p> <p> </p> </fieldset> </form> name="logincheck" value="1" /> <label for="logincheck"> 아이디저장</label></span> <div class="memberbox"> </div> <label for="loginpass"> 비밀번호</label> <input type="password" id="loginpass" name="loginpass" maxlength="15" value="" /> <input type="image" src="./img/login_submit.gif" class="loginbtn" alt=" 로그인" /> <a href="./ 회원가입.html" class="point"> 회원가입</a> <a href="./ 비밀번호.html"> 아이디 / 비밀번호찾기</a>

135 // JavaScript Document function submitforum(formel) { var errormessage = null; var objfocus = null; if ( formel.loginid.value.length == 0 ) { errormessage = " 아이디를넣어주세요"; objfocus = formel.loginid; else if ( formel.loginpass.value.length == 0 ) { errormessage = " 비밀번호를넣어주세요"; objfocus = formel.loginpass; if ( errormessage!= null ) { alert(errormessage); objfocus.focus(); return false; return true;

136 <input>

137 // HTML Document <head> <link rel="stylesheet" href="./common/style.css" type="text/css" /> <script type="text/javascript" src="./common/script.js"></script> </head> <body> <div id="joinwirte"> <form id="wirteform" name="wirteform" method="post" action="" onsubmit="return submitforum(this);"> <p class="check"> <img src="./img/board_check_1.gif" alt=" 체크" /> 표시필수입력사항 </p> <fieldset> <legend> 아이디기본정보</legend> <table>

138 <tr> <th><label for="joinid"> <img src="./img/board_check_1.gif" alt=" 필수" /> 아이디 </label></th> <td colspan="3"> <input type="text" id="joinid" name="joinid" style="width:160px;" title=" 필수아이디" value="" /> </td> </tr> <tr> <th><label for="joinpass"> <img src="./img/board_check_1.gif" alt="*" /> 비밀번호 </label></th> <td><input type="password" id="joinpass" name="joinpass" style="width:160px;" title=" 필수비밀번호" value="" /></td> <th><label for="joinpassre"> <img src="./img/board_check_1.gif" alt="*" /> 비밀번호확인 </label></th> <td><input type="password" id="joinpassre" name="joinpassre" style="width:160px;" title=" 필수비밀번호확인" value="" /></td> </tr> </table> </fieldset> <fieldset> <legend> 개인기본정보</legend> <table> <tr> <th><label for="joinname"> <td> <img src="./img/board_check_1.gif"alt="*" /> 이름( 한글) </label></th> <input type="text" id="joinname" name="joinname" style="width:180px;" title=" 필수이름" value="" /> </td>

139 </tr> <tr id="joinpostjsapply"> <th><label for="joinpost1"> <img src="./img/board_check_1.gif" alt="*" /> 주소 </label></th> <td> <p class="type1"> </p> <p class="type1"> <input type="text" id="joinpost1" name="joinpost1" style="width:40px;" title=" 필수우편번호앞자리" value="" /> - <input type="text" id="joinpost2" name="joinpost2" style="width:40px;" title=" 필수우편번호뒷자리" value="" /> </p> <p class="type1"> <input type="text" id="joinaddress" name="joinaddress" style="width:90%;" title=" 필수우편번호를제외한주소" value="" /> </tr> <tr> </td> </p> <th><span> 연락처</span></th> <td> <p> <label for="tela1" class="type1"> 휴대폰</label> <input type = "text" id="tela1" name="tela1" style="width:40px;" title=" 통신사번호" value="" /> - <input type="text" id="tela2" name="tela2" style="width:40px;" title=" 휴대폰번호국번" value="" /> - <input type="text" id="tela3" name="tela3" style="width:40px;" title=" 휴대폰번호뒷네자리" value="" /> </p> <p> <label for="telb1"> 전화번호</label> <input type="text" id="telb1" name="telb1" style="width:40px;"

140 </div> title=" 전화번호지역번호" value="" /> - <input type="text" id="telb2" name="telb2" style="width:40px;" title=" 전화번호국번" value="" /> - <input type="text" id="telb3" name="telb3" style="width:40px;" title=" 전화번호뒷네자리" value="" /> <tr> </tr> </td> </p> <th><label for="board 1"> <td> <img src="./img/board_check_1.gif" alt="*" /> 이메일주소 </label></th> <input type="text" id="board 1" style="width:100px;" title=" 필수이메일아이디입력" value="" /> <input type="text" id="board 2" name="board 2" style="width:250px;" title=" 필수이메일서비스입력" value="" /> </td> </tr> </table> </fieldset> <p> <input type="image" src="./img/join_submit.gif" alt=" 회원가입" /> </form> </p> <script type="text/javascript"> // 우편번호부분에 Javascript가실행되었을경우 // " 우편번호검색" 버튼을생성 // Javascript가실행되지않았을경우 // 우편번호검색버튼을생성시키지않고사용자가입력하게함 var PostSearch_Type1 = new fnpostsearch_type1; PostSearch_Type1.DivName = "JoinPostJsApply";

141 </script> PostSearch_Type1.Start(); </body> // JavaScript Document function submitforum(formel) {

142 var errormessage = null; var objfocus = null; if ( formel.joinid.value.length == 0 ) { errormessage = " 아이디를넣어주세요"; objfocus = formel.joinid; else if ( formel.joinpass.value.length == 0 ) { errormessage = " 비밀번호를넣어주세요"; objfocus = formel.joinpass; else if ( formel.joinpassre.value.length == 0 ) { errormessage = " 비밀번호확인을넣어주세요"; objfocus = formel.joinpassre; else if ( formel.joinpass.value!= formel.joinpassre.value ) { errormessage = " 비밀번호와비밀번호확인이다릅니다. objfocus = formel.joinpass; 확인해보시기바랍니다."; else if ( formel.joinname.value.length == 0 ) { errormessage = " 이름을넣어주세요"; objfocus = formel.joinname; else if ( formel.joinpost1.value.length == 0 ) { errormessage = " 우편번호앞자리"; objfocus = formel.joinpost1; else if ( formel.joinpost2.value.length == 0 ) { errormessage = " 우편번호뒷자리"; objfocus = formel.joinpost2; else if ( formel.joinaddress.value.length == 0 ) { errormessage = " 주소"; objfocus = formel.joinaddress; else if ( formel.board 1.value.length == 0 ) { errormessage = " 이메일아이디를넣어주세요"; objfocus = formel.board 1; else if ( formel.board 2.value.length == 0 ) { errormessage =" 이메일서비스회사의주소를넣어주세요"; objfocus = formel.board 2;

143 if ( errormessage!= null ) { alert(errormessage); objfocus.focus(); return false; return true; function postforum() { window.open('./popup.html','postsearch','width=400,height =250,scrollbars=no,resizable=no'); function postapply(joinpost1,joinpost2,joinaddress) { opener.document.getelementbyid("joinpost1").value = JoinPost1; opener.document.getelementbyid("joinpost2").value = JoinPost2; opener.document.getelementbyid("joinaddress").value = JoinAddress; self.close(); // Javascript 가실행되었을경우 " 우편번호검색" 버튼을생성하는부분 function fnpostsearch_type1() { this.start = function() { this.targetobj = document.getelementbyid(this.divname).getelementsbytagname("td")[0].getelementsbytagname("p")[0]; this.postbtn = document.createelement('a'); this.postbtn.href = " this.postbtnimg = document.createelement('img'); this.postbtnimg.src = "./img/join_post.gif"; this.postbtnimg.alt = " 우편번호검색( 팝업)";

144 this.postbtnimg.classname = "joinpost"; this.targetobj.appendchild(this.postbtn); this.postbtn.onclick = function() { postforum(); return false; this.postbtn.appendchild(this.postbtnimg);

145

146 //HTML Document <body> <div id="bannerbox"> <div id="bannerlist"> <div id="bannerlistsub"> <ul> <li><a href="./ 정보화마을.html"> <img src="./img/banner_01.gif" alt=" 정보화마을" /> </a></li> <li><a href="./ 주민서비스.html"> <img src="./img/banner_02.gif" alt=" 주민서비스" /> </a></li> <li><a href="./ 전자민원.html"> <img src="./img/banner_03.gif" alt=" 전자민원" /> </a></li>.. <li><a href="./ 국민신문고.html"> <img src="./img/banner_17.gif" alt=" 국민신문고" /> </a></li> <li><a href="./ 청와대.html"> <img src="./img/banner_18.gif" alt=" 청와대" /> </a></li>

147 </div> </div> </div> </ul> <div id="bannerlistmore"> </div> <a href="./banner.html"><img src="./img/btn_more.gif" alt=" 배너모음더보기" style="cursor:pointer"/></a> <script type="text/javascript"> var fnrolbanner = new fnrolmove_type1; fnrolbanner.boxname = "BannerBox"; fnrolbanner.divname = "BannerListSub"; fnrolbanner.fnname = "fnrolbanner"; fnrolbanner.datewidth = 140; fnrolbanner.speed = 0.2; fnrolbanner.start(); </script> </body> // JavaScript Document function fnrolmove_type1() { this.goodssettime = null; this.bannercurrent = 0; this.datenum = 6; this.start = function() { this.obj = document.getelementbyid(this.boxname); this.objbox = document.getelementbyid(this.divname);

148 this.objul = this.objbox.getelementsbytagname("ul")[0]; this.objli = this.objul.getelementsbytagname("li"); // 배너갯수를파악하는부분 this.objlinum = this.objli.length; // 배너부분의총넓이를파악하는부분 this.totalwidth = this.datewidth * this.objlinum; this.objbox.style.width = this.totalwidth + "px"; if ( this.objlinum % this.datenum == 0 ) { this.bannerend = this.totalwidth - ( this.datewidth * this.datenum ); else { this.bannerend = this.totalwidth - this.datewidth; // 배너를쌓고있는부분의박스에 CSS를입히기 this._style(); // Javascript 작동시다음, 이전버튼을삽입하기 this._controladd(); // 다음, 이전버튼을클릭시이동해야할위치계산하기 this.bannerprevleft = this.bannerend; this.bannernextleft = this.datewidth * this.datenum ; this.prevbtnlinkimg.num = this.bannerprevleft; this.prevbtnlinkimg.onclick = function() { eval(this.fnname + "._moveframe(" + this.num + ",'prev')" ); return false;

149 this.nextbtnlinkimg.num = this.bannernextleft; this.nextbtnlinkimg.onclick = function() { eval(this.fnname + "._moveframe (" + this.num + ",'next')" ); return false; this._controladd = function() { this.newcontrol = document.createelement('div'); this.newcontrol.id = "BannerListCon"; this.obj.appendchild(this.newcontrol); // 이전보기버튼으로구현한경우 //this.prevbtnlink = document.createelement('a'); //this.prevbtnlink.fnname = this.fnname; //this.prevbtnlink.href = "#"; //this.newcontrol.appendchild(this.prevbtnlink); // 이전보기버튼을가상이미지버튼으로만든경우. this.prevbtnlinkimg = document.createelement('img'); this.prevbtnlinkimg.fnname = this.fnname; this.prevbtnlinkimg.classname = "btn"; this.prevbtnlinkimg.src = "./img/btn_prev.gif"; this.prevbtnlinkimg.alt = ""; // 대체텍스트를 this.newcontrol.appendchild(this.prevbtnlinkimg); null로만든다 // 다음보기버튼으로구현한경우 //this.nextbtnlink = document.createelement('a'); //this.nextbtnlink.fnname = this.fnname; //this.nextbtnlink.href = "#"; //this.newcontrol.appendchild(this.nextbtnlink); // 다음보기버튼을가상이미지버튼으로만든경우

150 this.nextbtnlinkimg = document.createelement('img'); this.nextbtnlinkimg.fnname = this.fnname; this.nextbtnlinkimg.classname = "btn"; this.nextbtnlinkimg.src = "./img/btn_next.gif"; this.nextbtnlinkimg.alt = ""; // 대체텍스트를 this.newcontrol.appendchild(this.nextbtnlinkimg); null로만든다 this._style = function() { this.boxstyle = this.objbox.parentnode; this.boxstyle.classname = "BannerListStyle"; this.boxulstyle = this.objbox.getelementsbytagname("ul")[0]; this.boxulstyle.classname = "BannerUlStyle"; // 다음, 이전버튼을클릭시배너를이동시키는부분 this._moveframe = function(val,fnmove) { cleartimeout(this.goodssettime); if ( Math.abs(val - this.bannercurrent) > 5 ) { this.bannercurrent = this.bannercurrent+(val-this.bannercurrent) * this.speed; else { this.bannercurrent = val; this.objul.style.left = ( -1 * this.bannercurrent ) + "px"; if ( this.bannercurrent!= val ) { this.goodssettime = settimeout(this.fnname + "._moveframe(" + val + ",'" + fnmove + "')",10); else { this.currentpicnum = this.bannercurrent / this.datewidth;

151 this.bannerprevleft = this.bannercurrent - ( this.datewidth * this.datenum ); this.bannernextleft = this.bannercurrent + ( this.datewidth * this.datenum ); if ( this.bannercurrent == 0 ) { this.bannerprevleft = this.bannerend; else if ( this.bannercurrent == this.totalwidth - ( this.datewidth * this.datenum ) ) { this.bannernextleft = 0; this.prevbtnlinkimg.num = this.bannerprevleft; this.prevbtnlinkimg.onclick = function() { eval(this.fnname+"._moveframe("+this.num+",'prev')" ); return false; this.nextbtnlinkimg.num = this.bannernextleft; this.nextbtnlinkimg.onclick = function() { eval(this.fnname+"._moveframe("+this.num+",'next')" ); return false;

152 title //HTML Document <body> <div id="banner_box">

153 <ul> <li><a href="./ 질의응답.html"> 질의응답을신청할수있는공간</a></li> <li><a href="./ 나의질의.html"> 나의질의조회-담당자의답변을확인하실 수있는공간 </a></li> <li><a href="./faq.html"> 고객센터 FAQ - 유사질문에대한답변확인 공간 </a></li> <li><a href="./ 고객상담.html"> 고객상담안내 - 고객의상담을위한안내 공간 </a></li> <li><a href="./ 국민제안.html"> 국민제안 - 행정정책과제도에대한의견 제안공간 </a></li> <li><a href="./ 여론광장.html"> 여론광장 </a></li> </ul> </div> <script type="text/javascript"> var BannerName = "BannerScroll"; var BannerBox = "Banner_Box"; var BannerWidth_S = 54; var BannerWidth_B = 154; var BannerScroll = new BannerOver(); </script> </body> // JavaScript Document function BannerOver() { this.bannerwrap = document.getelementbyid(bannerbox); this.bannerlist = this.bannerwrap.getelementsbytagname("ul")[0]

154 .getelementsbytagname("li"); this.bannertotal = this.bannerlist.length; this.bannerlocation = new Array(); this.bannertarget = new Array(); this.bannertempwidth; for ( var i=0; i<this.bannertotal; i++ ) { this.bannerlocation[i] = BannerWidth_S*i; this.bannerlist.item(i).style.left = this.bannerlocation[i] + "px"; this.bannerlink = this.bannerlist.item(i).getelementsbytagname("a")[0]; this.bannerlink.num = i; this.bannerlink.onmouseover = this.bannerlink.onfocus = function() { eval(bannername+".bannermove("+this.num+")"); this.bannerrandom = Math.floor(Math.random()*this.BannerTotal); this.bannermove(this.bannerrandom); BannerOver.prototype.BannerMove = function(val) { this.bannertargetsetting(val); this.bannerlimove(val); BannerOver.prototype.BannerTargetSetting = function(val) { for ( var i=0; i<this.bannertotal; i++ ) { this.bannerliw = this.bannerlist.item(i); this.bannerimg = this.bannerliw.getelementsbytagname("a")[0];

155 if ( (val+1) == i ) { this.bannertempwidth = BannerWidth_B else { this.bannertempwidth = BannerWidth_S if ( i == 0 ) { this.bannertarget[i] = 0; else { this.bannertarget[i] = this.bannertarget[i-1]+this.bannertempwidth; if ( val == i ) { this.bannerliw.classname = "widthb"; this.bannerimg.classname = "line_" + i + "_on"; else { this.bannerliw.classname = "widths"; this.bannerimg.classname = "line_" + i + "_off"; BannerOver.prototype.BannerLiMove = function(val) { for ( var i=0; i<this.bannertotal; i++ ) { this.bannerlocation[i] += (this.bannertarget[i] - this.bannerlocation[i]) * 0.2; if (Math.abs((this.BannerTarget[i]-this.BannerLocation[i]))< 2) { this.bannertarget[i] = this.bannertarget[i]; this.bannerlist.item(i).style.left = this.bannertarget[i] + "px"; else { this.bannerlist.item(i).style.left = parseint(this.bannerlocation[i],10) + "px"; settimeout(bannername+".bannerlimove("+val+")",100);

$gif", "_on.gif"); var out = function(e) { e.getelementsbytagname("img")[0].$

156 <script type="text/javascript">  </script>

157 <body> <a href="#" onmouseover="on(this)" onmouseout="out(this)"> <img src="btn_ok.gif" alt="ok" /></a> <a href="#" onmouseover="on(this)" onmouseout="out(this)"> <img src="btn_cancel.gif" alt="ok" /></a> </body> <head> <style type="text/css" title=""> /* Rollover, out CSS에서 A 태그의배경그림을위치를바꿔롤오버효과를구현 */ a.bg-button { display: block; width: 60px; height: 21px; text-align: center; color: black; text-decoration: none; font-size: 11px; font-family: arial; line-height: 22px;

158 background: url("image_pack.gif"); float: left; margin-right: 5px; a.bg-button:hover { background-position: 0 21px; a.bg-button:active { background-position: 0 42px; </style> </head> <body> <h1>css만을이용해서 Rollover, out, click 되었을때를표현</h1> <a href=" class="bg-button">ok</a> <a href=" class="bg-button">cancel</a> </body>

159 <head> <link type="text/css" href="reset.css" rel="stylesheet"/> <style type="text/css" title=""> a { float: left; a.bg-button { display: block; width: 60px; height: 21px; text-align: center; color: black; text-decoration: none; font-size: 11px; font-family: arial; line-height: 22px; background: url("ok_bg.gif");

160 float: left; </style> </head> <script type="text/javascript"> <!-- var bindchangeclassname = function() { var selected_class_name = "hover"; var as = document.getelementsbytagname("a"); for (var i=0; i<as.length; i++) { var a = as[i]; if (a.classname == "class") { a.onmouseover = a.onfocus = function(event) { this.classname += " " + selected_class_name; a.onmouseout = a.onblur = function(event) { this.classname = this.classname.replace(selected_class_name, ""); var bindchangestyle = function() { var as = document.getelementsbytagname("a"); for (var i=0; i<as.length; i++) { var a = as[i]; if (a.classname == "style") {

161 a.onmouseover = a.onfocus = function(event) { this.style.bordercolor = "red"; this.style.backgroundcolor = "yellow"; a.onmouseout = a.onblur = function(event) { this.style.bordercolor = "#00cc00"; this.style.backgroundcolor = "white"; window.onload = function() { bindchangeclassname(); bindchangestyle(); //--> </script> <body> <a href="#" onmouseover="on_1(this)" onmouseout="out_1(this)"> <img src="btn_ok.gif" alt="ok" /></a> <a href="#" class="bg-button">cancel</a> </body>

162 <link type="text/css" href="reset.css" rel="stylesheet"/> <style type="text/css" title=""> /* 배경색을바꿔서롤오버효과구현 */ a.ss-button { display: block; width: 60px; height: 21px; text-align: center; color: black; text-decoration: none; font-size: 11px; font-family: arial; line-height: 22px; border: 1px solid #00CC00; float: left; a.ss-button:hover { border-color: red; background-color: yellow; a.ss-button:active { border-color: red; background-color: orange; /* position */.position { clear: both;.position ul { margin: 0; padding: 0;.position li { float: left;

163 margin: 0; padding: 0; list-style: none;.position.menu a { display: block; height: 21px; width: 100px; text-align: center; color: black; text-decoration: none; font-size: 11px; font-family: arial; line-height: 22px; background-color: yellow; border: 1px solid blue;.position.menu a:hover { border-color: red; background-color: yellow;.position.menu a:active { border-color: red; background-color: orange;.position.menu.sub { position: absolute; display: none;.position.menu.sub a { background-color: #CCFFFF; </style> </head> <body> <div class="section"> <div class="section"> <dl>

164 </div> </body> </div> <dd> <a href="#" class="ss-button">ok</a> <a href="#" class="ss-button">cancel</a> </dd> </dl>

165

166

167 <style type="text/css" title=""> body { font: 12px arial; a { text-decoration: none; img { border: 0; /* tab menu */ #tab_menus { margin: 0; padding: 0; list-style: none; #tab_menus li { margin-bottom: 16px; float: left; padding: 0px; #tab_menus li a { padding: 8px 10px; color: #505050; border-width: 1px 0 1px 1px; border-style: solid; border-color: #ae9f96; background-color: #eae4e0; background-image: none; #tab_menus li a:hover { color: black; background-color: #c6b5aa; #tab_menus li.selected a { border-bottom: 0 solid white; background: white url("blt_arrowdown.gif") no-repeat center bottom; color: black;.tab_right { margin-bottom: 16px; border-width: 0 0 1px 1px; border-style: solid; border-color: #ae9f96; width: 80px; height: 31px; float: left; /* content */.content { clear: both; padding-left: 10px;.content h3 { margin: 0; padding: 0; font-size: 1.2em;

168 font-weight: bold; font-size: 0.9em; display: block;.content h3 a { color: #ff4800; /* 우측에계속 */ </style> <script type="text/javascript"> <!-- var selected_menu = 0; var content_count = 0; var selected_class_name = "selected"; var menus = document.getelementbyid("tab_menus").getelementsbytagname("li"); var dives = document.getelementsbytagname("div"); var contents = new Array; for (var i=0; i<dives.length; i++) { var div = dives[i]; if (div.classname == "content") { // Javascript를이용하여 CSS초기화 if (selected_menu == content_count) { div.style.display = "block"; menus[content_count].classname += " " + selected_class_name;

169 else { // --> div.style.display = "none"; menus[content_count].classname = menus[content_count].classname.replace(selected_class_name, ""); contents.push(div); content_count++; for (var i=0; i<menus.length; i++) { var quick_link = menus[i]; quick_link.content_index = i; quick_link.onclick = quick_link.onkeypress = function(event) { contents[selected_menu].style.display = "none"; menus[selected_menu].classname = menus[selected_menu].classname.replace (selected_class_name, ""); contents[this.content_index].style.display = "block"; this.classname += " " + selected_class_name; selected_menu = this.content_index; return false; //--> </script>

170 <body> <menu id="tab_menus"> <li><a href="#quickmenu_01">menu 01</a></li> <li><a href="#quickmenu_02">menu 02</a></li> <li><a href="#quickmenu_03">menu 03</a></li> </menu> <div class="tab_right"></div> <div id="menu_01" class="content"> <h3><a id="quickmenu_01" href="#quickmenu_01">menu 01 </a></h3> <p> Menu 01...<br /> Menu 01...<br />... Menu 01...<br /> Menu 01...<br /> </p> <a href="#tab_menus" class="go_tab_menu"> <img src="btn_top.gif" alt="go tab menu" /></a> </div> <div id="menu_02" class="content"> <h3><a id="quickmenu_02" href="#quickmenu_02">menu 02 </a></h3> <p> Menu 02...<br /> Menu 02...<br />... Menu 02...<br /> Menu 02...<br />

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴