- PDF Free Download

i -

ii -

iii -

iv -

v -

vi -

vii -

viii -

ix -

x -

xi -

xii -

1 -

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

3-2) http://www.w3.org/tr/wai-aria/ 3) http://www.w3.org/tr/wcag20/ 4) http://www.w3.org/tr/wcag10/

4 -

5 -

6 -

7 -

8 -

9 - l l l l

10 - l l 5) 한국정보문화진흥원정보통신보조기기체험관사이트 : http://www.at4u.or.kr

11 -

12-6) http://www.w3.org/tr/wcag10/ 7) http://www.w3.org/tr/wcag20/ 8) http://www.section508.gov

13 - l 9) http://www.w3.org/tr/wai-aria/

14 - l l l 10) http://www.w3.org/tr/wai-aria-primer/ 11) http://www.w3.org/tr/wai-aria-practices/ 12) http://www.w3.org/tr/wai-aria-roadmap/

15 -

16 -

17-13) http://www.w3.org/tr/html5/, Editor's Draft, 2009 년 1 월 14 일

18 -

19-14) http://www.w3.org/tr/html401, 1999 년 12 월 24 일 W3C 표준 15) http://www.w3.org/tr/html5/, Editor's Draft, 2009 년 1 월 14 일

20 -

21 -

22 -

23 - 액세스가능성 name description name description

24 -

25 -

26 -. < - 3> 16) http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e -2d5e1db91038&DisplayLang=en 17) http://www.w3.org/dom/

27-18) http://www.microsoft.com/downloads/details.aspx?familyid=3755582a-a707-460a-bf21-1373316e13f0&displaylang=en

28-19) http://www.parasoft.com/jsp/products/home.jsp?product=webking&itemid=86

29 -

30 -

31 -

32 -

33 -

34 -

35 -

36 -

37 -

38 -

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

40 -

41 -

42-21) http://www.w3.org/tr/xmlhttprequest/

43 -

44 -

45 - <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>

46 -

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

48 - 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>

49 - 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");

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

51 - old_image.jpg new_image.jpg new_image.jpg " 우는얼굴 "

52 - <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);" />

53 -

54 -

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

56 - onclick onkeypress onchange

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

58 -

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

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

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

62 - href href href

63 -

64 - <form> <form>

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

66 - <form id="loginform" name="loginform" action=""> User Id <input type="text" name="loginid"> User Password <input type="password" name="loginpassword"><br> <img src="login.gif" alt = " 로그인 onclick="submitform()"> </form> <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=" 로그인 " />

67 - <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) { alert(errormessage); objfocus.focus(); return false; return true;

68 - </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

69 - <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

70 - noscript noscript noscript noscript

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

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

73 - <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= "http://mysite.com/login/"/> <input type="hidden" name="somevalue" value="blahblah" />... </form> <script type="text/javascript"> f = document.forms.login_form; f.action = "http://login.oursite.com/login/";... f.submit(); </script> <form method="post" name="sg_form" action="http://www.qubi.com "target="_top"></form> <script> sg_form.submit(); </script>

74 - <form> <script> <body> <head> <form> <input> <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...

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

76 -

77 -

78 - l l l

79 - l l l

80 - l l l

81 - l l 22) http://www.mozilla.or.kr/ko/docs/web-developer/standard/

82 - l l l

83 - l l

84 - l l l

85 - l l l

86 - l l

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

88 - l l l

89 - //HTML Document <div id="topmenu"> <div id="topmenusub"> <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" alt=" 행정안전부 " /></a></li> </ul> </div> </div> <script type="text/javascript"> var TopMenu1 = new fntopmenu1_type1; TopMenu1.DivName = "TopMenuSub"; TopMenu1.fnName = "TopMenu1"; TopMenu1.DefaultMenu = 0; </script> TopMenu1.Start();

90 - // 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()")

91 - 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");

92 -

93 - l l l //HTML Document <body> <div id="topmenu"> <div id="topmenusub"> <ul>

94 - <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> </ul> </div> </li>.. <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=" 장관소개 "/></a></li> <li><a href="./ 차관소개.html"> <img src="./img/menue_4_off.gif" alt=" 차관소개 " /></a></li> </ul> </div> </li>

95 - </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;

96 - 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 + ")")

97 - 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");

98 - 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");

99 -

100 - l l // 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="http://./ 정부청사관리소.html"> <img src="./img/linksite_menus_1_off.gif" alt=" 정부청사관리소 " /> </a></li>

101 - <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="#"> <img src="./img/linksite_menus_6_off.gif" alt=" 소청심사위원회 " /></a></li> </ul> </dd> </dl> </div> </div> <script type="text/javascript"> var isshiftdown = false; document.body.onkeydown = function(e){ var ecode = (window.netscape)? ev.which : event.keycode; if(ecode == 16) isshiftdown = true; document.body.onkeyup = function(e){ isshiftdown = false; var LinkSite1 = new fnlinksite_type1; LinkSite1.DivName = "LinkSiteSub"; LinkSite1.fnName = "LinkSite1"; LinkSite1.Start();

102 - </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;

103 - 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

104 - = 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

105 - = 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");

106 -

107 - l l l //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>

108 - <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> </ul> </div> <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"> 생활공감정책국민아이디어공모...</a></li> </ul> <a href="./noticemore.html" class="more" onblur="checklink(0)"> <img src="./img/btn_more.gif" alt=" 공지사항더보기 " /></a> </div>.. </div> <script type="text/javascript"> var TabMenu1 = new fntabmenu_type1; TabMenu1.MenuName = "TabMenuSub"; TabMenu1.DivName = "TabNotice"; TabMenu1.fnName = "TabMenu1"; TabMenu1.Start(); </script>

109 - </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;

110 - 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){ document.getelementbyid("tabmenusub").getelementsbytagname("a")[currenttab].focus(); issubmenu = false; catch(e){ return false; // 탭메뉴의링크부분에마우스나키보드반응에의해실행하는부분 this.fnmouseover = function(val) {

111 - 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.");

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

113 -

114 - l l //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"> 광주지방정부청사금융기관

115 - </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"> 생활공감정책국민아이디어공모...</a></li> </ul> <a id="tabnotice0more" href="./notice.html" class="more"> <img src="./img/btn_more.gif" alt=" 공지사항더보기 " /></a> </div>.. <script type="text/javascript"> var TabMenu1 = new fntabmenu_type1; TabMenu1.MenuName = "TabMenu"; TabMenu1.DivName = "TabNotice"; TabMenu1.fnName = "TabMenu1"; </script> TabMenu1.Start(); </body>

116 - // 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

117 - ("_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.");

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

119 - l //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>

120 - <body> <div id="memberlogin"> <div id="memberloginsub"> <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" maxlength="15" value="" /> <span> <input type="checkbox" id="logincheck" name="logincheck" value="1" /> <label for="logincheck"> 아이디저장 </label></span> </p> <p> <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=" 로그인 " /> </p> </fieldset> </form> <div class="memberbox"> <a href="./ 회원가입.html" class="point"> 회원가입 </a> <a href="./ 비밀번호.html"> 아이디 / 비밀번호찾기 </a> </div> </div> </div> </body>

121 - // 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;

122 - <input> l

123 - // 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>

124 - <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"> <img src="./img/board_check_1.gif"alt="*" /> 이름 ( 한글 ) </label></th> <td> <input type="text" id="joinname" name="joinname" style="width:180px;" title=" 필수이름 " value="" /> </td>

125 - </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="" /> </p> </td> </tr> <tr> <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;"

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

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

128 - 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.boardemail1.value.length == 0 ) { errormessage = " 이메일아이디를넣어주세요 "; objfocus = formel.boardemail1; else if ( formel.boardemail2.value.length == 0 ) { errormessage =" 이메일서비스회사의주소를넣어주세요 "; objfocus = formel.boardemail2;

129 - 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 = "http://./postbtn.html"; this.postbtnimg = document.createelement('img'); this.postbtnimg.src = "./img/join_post.gif"; this.postbtnimg.alt = " 우편번호검색 ( 팝업 )";

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

131 -

132 - l //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>

133 - </div> </ul> </div> </div> <div id="bannerlistmore"> <a href="./banner.html"><img src="./img/btn_more.gif" alt=" 배너모음더보기 " style="cursor:pointer"/></a> </div> <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);

134 - 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;

135 - 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 = ""; // 대체텍스트를 null로만든다 this.newcontrol.appendchild(this.prevbtnlinkimg); // 다음보기버튼으로구현한경우 //this.nextbtnlink = document.createelement('a'); //this.nextbtnlink.fnname = this.fnname; //this.nextbtnlink.href = "#"; //this.newcontrol.appendchild(this.nextbtnlink); // 다음보기버튼을가상이미지버튼으로만든경우.

136 - this.nextbtnlinkimg = document.createelement('img'); this.nextbtnlinkimg.fnname = this.fnname; this.nextbtnlinkimg.classname = "btn"; this.nextbtnlinkimg.src = "./img/btn_next.gif"; this.nextbtnlinkimg.alt = ""; // 대체텍스트를 null로만든다 this.newcontrol.appendchild(this.nextbtnlinkimg); 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;

137 - 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;

138 - l title //HTML Document <body> <div id="banner_box">

139 - <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]

140 -.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];

141 - 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);

142 - <script type="text/javascript">  </script>

143 - <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=""> /* */ a.bg-button { Rollover, out CSS 에서 A 태그의배경그림을위치를바꿔롤오버효과를구현 display: block; width: 60px; height: 21px; text-align: center; color: black; text-decoration: none; font-size: 11px; font-family: arial; line-height: 22px;

144 - 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="http://./ok.html" class="bg-button">ok</a> <a href="http://./cancel.html" class="bg-button">cancel</a> </body>

145 - <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");

146 - 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") {

147 - 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>

148 - <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;

149 - 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>

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

151 -

152 - l

153 - <style type="text/css" title=""> body { a { img { font: 12px arial; text-decoration: none; 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 { 1px; padding: 8px 10px; color: #505050; border-width: 1px 0 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;

154 - 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;

155 - 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>

156 - <body> <menu id="tab_menus"> </menu> <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> <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 />

157 - </p> <a href="#tab_menus" class="go_tab_menu"> <img src="btn_top.gif" alt="go tab menu" /></a> </div> <div id="menu_03" class="content"> <h3><a id="quickmenu_03" href="#quickmenu_03">menu 03 </a></h3> <p> Menu 03...<br /> Menu 03...<br />... Menu 03...<br /> Menu 03...<br /> </p> <a href="#tab_menus" class="go_tab_menu"> <img src="btn_top.gif" alt="go tab menu" /></a> </div> </body>

158 - l <link type="text/css" href="reset.css" rel="stylesheet"/> <style type="text/css" title=""> #selectbox {

159 - padding: 5px 10px; border: 1px solid #aaa; width: 130px; #selectbox a { font-size: 12px; color: #333; text-decoration: none; #sites { display: none; #sites { list-style: none; #sites a { color: black; text-decoration: none; display: block; width: 110px; height: 10px; padding: 10px; border-bottom: 1px dashed #aaa; font-size: 12px; font-family: "dotum"; #sites.last a { border-bottom: 0; padding-bottom: 5px; </style> </head>

160 - <script type="text/javascript">

161 - </script> <noscript> #sites { display: block; </noscript> <body> <div id="selectbox"> <strong><a href="#sites" id="button"> 검색사이트들보기 </a></strong> <ul id="sites"> <li><a href="http://google.com">http://google.com</a> </li> <li><a href="http://yahoo.com">http://yahoo.com</a></li> <li class="last"> <a href="http://naver.com">http://naver.com</a></li> </ul> </div> <strong></strong> </body>

162 -

163 -

164 -

165 -

166 - Generate accessible SWF file

167 - <accessible> true <mxml-compiler>... <accessible>true</accessible>... </mxml-compiler>

168 - c:/dev/myapps/appl.mxml <mxmlc compiler.accessible c:/dev/myapps/appl.mxml> <mxmlc -accessible c:/dev/myapps/appl.mxml> -compiler.accesiible -accessible.actionscrip tproperties <compiler additionalcompilerarguments="-locale en_us" generateaccessible="true">

169 - query accessible=true http://www.mycompany.com/index.mxml?accessible=true

170 - tooltip tooltip tooltip tooltip

171 - tooltip tooltip <mx:image width="60" height="56" source="assets/icecreampint.jpg" /> tooltip=" 아이스크림 " description description

172 - description <mx:image width="60" height="56" /> source="assets/icecreampint.jpg" tooltip=" 아이스크림 creationcomplete="event.target.accessibilityproperties = new AccessibilityProperties(); event.target.accessibilityproperties.description = 저희아이스크림은홈메이드를위하여 최고의서비스를제공합니다. " description description accessibilityproperties.name name description name name description description name

173 - tooltip, description, name

174 -

175 -

176 -

177 -

178 -

179 - listener listener listener KeyListener = new Object(); KeyListener.onKeyDown = function() { if (Key.getAscii() == 63) { // 키보드입력이 '?' 키이면... // call same code that button's click handler calls Key.addListener(KeyListener);

180 -

181 -

182 -

183 - tabindex tabindex tabindex tabindex tabindex tabindex tabindex tabindex

184 - <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:style> Application { </mx:style> backgroundcolor: #FFFFFF; ToolTip{ fontfamily: "verdana", " 돋움체 "; fontsize: 12; fontsize: 12; fontfamily: "verdana", " 돋음 "; <mx:vbox width="100%" height="100%" paddingtop="10" paddingleft="10" horizontalalign="left" verticalalign="top" horizontalscrollpolicy="off"> <mx:panel title=" 쇼핑몰정보소개 " tabindex="1"> <mx:hbox> <mx:vbox width="120" horizontalalign="center"> <mx:image source="i1.jpg" tooltip=" 캔버스화 " tabindex="2" width="80" height="70"/> <mx:label text="30000원 " tabindex="3"/> </mx:vbox> <mx:vbox width="120" horizontalalign="center"> <mx:image source="i2.jpg" tooltip=" 부츠 " tabindex="4" width="80" height="70"/> <mx:label text="40000원 " tabindex="5"/> </mx:vbox> <mx:vbox width="120" horizontalalign="center"> <mx:image source="i3.jpg" tooltip=" 남성화 " tabindex="6" width="80" height="70"/> <mx:label text="60000원 " tabindex="7"/>

185 - </mx:vbox> </mx:hbox>... </mx:panel> </mx:vbox> </mx:application> description description description

186 - accessibleinit() function accessibleinit() { var desc = createobject("textinput","desc",0); desc.x = 0; desc.y = 0; desc.width = 0; desc.height = 0; desc.accessibilityproperties = new AccessibilityProperties(); desc.accessibilityproperties.description= ' 사용법 : Flex 블로그의사용자가이콘텐츠를사용하려면 애플리케이션을실행시킨후에폼모드를활성화시키시오.'; <mx:application> accessibleinit() <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" /> mx:application xmlns:mx="" creationcomplete="accessibleinit(); pagetitle="flex 블로그리더 "

187 -

188 -

189 -

190 -

191 -

192 - l l l

193 - l l l

194 - l l

195 - l l

196 - l l

197 - l l

198 - l l l

199 - l l l

200 - l l l l

201 - l l

202 - l l

203 - l l l

204 - l l l l l l l l

205 - l l l l l l

206 - l l tooltip l l l l l

207 - l Title Title l l l

208 - l l l l l l l l tooltip

209 - tooltip l l Title tabindex

210 - tabindex l l tabindex TextInput enter= submitform()

211 - <mx:panel title=" 로그인 " height="75%" width="75%" paddingtop="10" paddingleft="10" paddingright="10" paddingbottom="10"> <mx:form width="100%" height="100%"> </mx:panel> </mx:form> <mx:hbox width="300" height="300"> <mx:vbox width="200" height="101"> <mx:formitem label=" 아이디 "> // Form 을통해텍스트입력창의 title 을 // 바로읽어들일수있도록구성함 // 키보드이동순서는 tabindex 를이용함. <mx:textinput id="iddata" width="135" tabindex="1"/> </mx:formitem> <mx:formitem label=" 비밀번호 "> // enter 키입력시바로실행되도록 enter 속성을이용함 <mx:textinput id="passwddata" width="135" </mx:formitem> </mx:vbox> tabindex="2" displayaspassword="true" enter="submitform()"/> <mx:vbox verticalalign="middle"> <mx:button label=" 확인 " height="56" tabindex="3" </mx:hbox> </mx:vbox> click="submitform()"/>

212 - FormHeading FormHeading FormHeading

213 - l l <mx:panel title=" 회원가입 " height="75%" width="75%" paddingtop="10" paddingleft="10"paddingright="10" paddingbottom="10"> <mx:text width="100%" color="blue" text=" 회원가입에필요한정보를입력 하여주십시오 "/> <mx:accordion width="100%" height="100%" id='accrd' keyup="dgkey(event)" > // 첫번째판넬 <mx:vbox label=" 기본정보 "> // Form 컴포넌트를이용한항목구현 <mx:form width="100%" height="100%"> <mx:formitem label=" 성명 "> </mx:formitem> <mx:textinput id="fname" width="200"/> <mx:formitem label=" 아이디 "> <mx:textinput id="iddata" width="200" keyup="ddd(event)"/> </mx:formitem> <mx:formitem label=" 비밀번호 "> <mx:textinput id="passwddata" displayaspassword="true" width="80"/>

214 - </mx:formitem> <mx:formitem label=" 비밀번호확인 "> <mx:textinput id="passwddata2" displayaspassword="true" width="80"/> </mx:formitem> </mx:form> <mx:hbox width="100%" horizontalalign="right">  <mx:button label=" 다음 " click="{accrd.selectedindex=1; dob.setfocus();"/> </mx:hbox> </mx:vbox> // 두번째판넬 <mx:vbox label=" 연령 / 생년월일 "> <mx:form width="100%" height="100%"> <mx:formitem label=" 생년월일 (mm/dd/yyyy)"> <mx:textinput id="dob" width="200"/> </mx:formitem> <mx:formitem label=" 연령 "> <mx:textinput id="age" width="200"/> </mx:formitem> </mx:form> <mx:hbox width="100%" horizontalalign="right"> <mx:buttonlabel=" 이전 " click="{accrd.selectedindex=0; fname.setfocus();"/> <mx:button label=" 다음 " click="{accrd.selectedindex=2; email.setfocus();"/> </mx:hbox> </mx:vbox> // 세번째판넬 <mx:vbox label=" 연락처 "> <mx:form width="100%" height="100%">

215 - <mx:formitem label="e-mail"> <mx:textinput id="email" width="200"/> </mx:formitem> <mx:formitem label=" 전화번호 "> <mx:textinput id="phone" width="200"/> </mx:formitem> </mx:form> <mx:hbox width="100%" horizontalalign="right"> <mx:buttonlabel=" 이전 " click="{accrd.selectedindex=1; dob.setfocus();"/> </mx:hbox> </mx:vbox> </mx:accordion> </mx:panel> //Validator 컴포넌트를이용한텍스트는경고창고함께보여줌. <mx:stringvalidator source="{fname" property="text" minlength="4" maxlength="12" toolongerror=" 정상적인이름이아닙니다."/> <mx:phonenumbervalidator source="{phone" property="text" invalidcharerror=" 잘못된연락처정보입니다.."/> <mx:datevalidator source="{dob" property="text" wrongdayerror=" 올바른날짜형식이아닙니다."/> <mx:emailvalidator source="{email" property="text" missingatsignerror= " 올바른 e-mail형식이아닙니다."/> <mx:numbervalidator source="{age" property="text" minvalue="18" maxvalue="100" domain="int" invalidcharerror=" 숫자만사용할수있습니다."/>

216 - RichTextEditor RichTextEditor RichTextEditor showtooltip tooltip

217 - l l l RichTextEditor tooltip <mx:script> <![CDATA[ ]]> private function setrichtexteditor(id:richtexteditor):void { </mx:script> id.fontfamilyarray = [' 굴림 ', ' 돋음 ', ' 바탕 ', 'Arial']; id.textarea.imemode = "KOREAN"; <mx:vbox width="100%" height="100%"> <mx:panel title=" 게시판 " height="75%" width="800" paddingtop="10"

218 - paddingleft="10" paddingright="10" paddingbottom="10"> <mx:vbox id="center" width="100%" height="100%" verticalgap="0">  <mx:vbox id="centerstory" width="100%" height="100%" verticalalign="middle" horizontalgap="0" fontweight="bold" verticalgap="0" paddingtop="5"> <mx:hbox width="100%" height="100%"> <mx:image source="{imgtitlename" tooltip=" 제목 "/> <mx:textinput id="storycontentsta" width="100%" height="100%" paddingleft="10" tooltip=" 제목입력창입니다."/> </mx:hbox> <mx:spacer height="6"/> </mx:vbox>  <mx:vbox id="centerwrite" width="100%" height="100%" verticalalign="middle" horizontalgap="0" verticalgap="0" paddingbottom="0" paddingtop="0" > <mx:spacer height="1"/> <mx:richtexteditor id="writeediter" fontfamily=" 굴림 " width="100%" height="100%" headerheight="0" paddingbottom="0" paddingleft="0" paddingright="0" paddingtop="0"showtooltips="true" borderalpha="1" bordercolor="#b0c0d8" headercolors="[#ffffff, #ffffff]" footercolors="[#edf6fa, #E5EEF0]" dropshadowenabled="false" borderthicknessleft="2" borderthicknessright="2" borderthicknesstop="1" borderthicknessbottom="2" initialize="setrichtexteditor(writeediter)"/> <mx:spacer height="7"/> <mx:hbox width="100%" horizontalalign="right" paddingbottom="5" paddingleft="5" paddingright="5" paddingtop="5" horizontalgap="5">

219 - <mx:button label=" 저장 " click="" stylename="subbutton"/> <mx:button label=" 취소 " click="" stylename="subbutton"/> </mx:hbox> </mx:vbox> </mx:vbox> </mx:panel> </mx:vbox>

220 - l l <mx:style> Application { backgroundcolor: #FFFFFF; ToolTip{ </mx:style> <mx:script> fontfamily: "verdana", " 돋움체 "; fontsize: 12; <![CDATA[ fontsize: 12; fontfamily: "verdana", " 돋음 "; import mx.effects.zoom; import mx.core.container; import mx.collections.arraycollection; import mx.controls.alert;

221 - private var opiac :ArrayCollection = new ArrayCollection([ {OPI_NAME: ' 창의력 ', SUM_NUM: '7', {OPI_NAME: ' 어휘력 ', SUM_NUM: '8', {OPI_NAME: ' 의지력 ', SUM_NUM: '10']); [Bindable] private var accessstr : String = ""; /* chart 정보를텍스트로변환하는부분 */ private function changstr(arrac:arraycollection):void{ var accstr :String = ""; for( var i:int = 0; i<arrac.length; ++i){ accstr+= arrac[i].opi_name + ' ' + arrac[i].sum_num + ' 점. '; accstr+= ' 입니다 '; accessstr = accstr; </mx:script> <mx:vbox width="100%" height="100%" creationcomplete="changstr(opiac);"> <mx:panel title=" 차트 " height="75%" width="600" paddingtop="10" paddingleft="10" paddingright="10" paddingbottom="10"> <mx:barchart id="bbb" color="0x567dbb" stylename="pagebar" width="98%" height="100%" showdatatips="true" fontsize="11" gutterleft="70" fontfamily=" 굴림 " dataprovider="{opiac" > <mx:verticalaxis> <mx:categoryaxis categoryfield="opi_name"/> </mx:verticalaxis> <mx:horizontalaxis> <mx:linearaxis maximum="24"/> </mx:horizontalaxis> <mx:series> <mx:barseries id="xxx" yfield="opi_name" xfield="sum_num" displayname=" 항목 " />

222 - </mx:series> <mx:backgroundelements> <mx:array> <mx:gridlines direction="both"> <mx:verticalstroke> <mx:stroke weight="1" color="#cccccc"/> </mx:verticalstroke> </mx:gridlines> </mx:array> </mx:backgroundelements> </mx:barchart>  <mx:label text="{accessstr" height="0" tooltip="{accessstr"/> </mx:panel> </mx:vbox>

223 - <mx:vbox width="100%" height="100%"> <mx:panel title="scroll" height="75%" width="600" paddingtop="10" paddingleft="10" paddingright="10" paddingbottom="10"> <mx:vbox paddingleft="5" verticalgap="0" width="400" height="80" borderstyle="solid" horizontalscrollpolicy="off" > <mx:label text='txt1'/> <mx:label text='txt2'/> <mx:label text='txt3'/> <mx:label text='txt4'/> <mx:label text='txt5'/> <! 실제로화면에보이진않으나, 초점을가질수있기때문에하단의정보도조회할수있다.--> <mx:button id="btn" width="0" height="0" tabenabled="true" buttonmode="false"/> </mx:vbox> </mx:panel> </mx:vbox> tooltip, name description

224 - l l

225 - <mx:style> Application { ToolTip{ backgroundcolor: #FFFFFF;.preBtn {.nextbtn { </mx:style> fontfamily: "verdana", " 돋움체 "; fontsize: 12; fontsize: 12; fontfamily: "verdana", " 돋음 "; upskin: Embed('/images/pre_over.png'); downskin: Embed('/images/pre_down.png'); overskin: Embed('/images/pre_over.png'); upskin: Embed('/images/next_over.png'); downskin: Embed('/images/next_down.png'); overskin: Embed('/images/next_over.png'); <mx:script> <![CDATA[ /* image 롤링배너를위한메서드.*/ [Bindable] private var currentnum :Number = 0; [Bindable] private var labelstr:string = '' [Bindable] private var labeldesc:string = ''

226 - /* 다음배너를조회하기위한 function*/ private function nexthandler():void{ if(currentnum+1==imgac.length){ currentnum=-1; currentnum++; if(img1.x==0){ img2.source=imgac[currentnum].source; img2.tooltip = imgac[currentnum].data; labelstr =imgac[currentnum].data; labeldesc =imgac[currentnum].desc; else{ img1.source=imgac[currentnum].source; img1.tooltip = imgac[currentnum].data; labelstr =imgac[currentnum].data; labeldesc =imgac[currentnum].desc; moveright(); /* 이전배너를조회하기위한 function*/ private function prehandler():void{ if(currentnum-1==-1){ currentnum=imgac.length; currentnum--; if(img1.x==0){ img2.source=imgac[currentnum].source; img2.tooltip = imgac[currentnum].data; labelstr =imgac[currentnum].data; labeldesc =imgac[currentnum].desc;

227 - else{ img1.source=imgac[currentnum].source; img1.tooltip = imgac[currentnum].data; labelstr =imgac[currentnum].data; labeldesc =imgac[currentnum].desc; moveleft(); /* 다음배너를이동시키는 function*/ private function moveright():void { if(img1.x == 0){ move1.end(); move2.end(); img2.x = 285; move1.xto = -285; move2.xto = 0; move1.play(); move2.play(); else{ img1.x=285; move2.xto = -285; move1.xto = 0; move2.play(); move1.play(); /* 이전배너를이동시키는 function*/ private function moveleft():void {

228 - ]]> if(img1.x == 0){ move1.end(); move2.end(); img2.x = -285; move1.xto = 285; move2.xto = 0; move1.play(); move2.play(); else{ img1.x=-285; move2.xto = 285; move1.xto = 0; move2.play(); move1.play(); </mx:script> <mx:vbox width="100%" height='100%' creationcomplete="nexthandler()"> <mx:panel title="image 배너 " height="75%" width="650" creationcomplete="nexthandler()" paddingtop="10" paddingleft="10" paddingright="10" paddingbottom="10" > <mx:hbox width="100%"> <mx:canvas width="400" height="300"> <mx:button x="10" y="30" stylename="prebtn" click='prehandler();' tooltip=" 다음문항으로이동합니다." width="17" height="90"/> <mx:canvas x="40" y="5" width="284" height="234" borderstyle="none" horizontalscrollpolicy="off" verticalscrollpolicy="off"> <mx:image x='0' y='0' id='img1' source="images/001.jpg" tooltip=" 동대산전경입니다." width="284" height="235"/>

229 - <mx:image x='285' y='0' id='img2' source="images/002.jpg" tooltip=" 두로봉전경입니다." width="284" height="235"/> </mx:canvas> <mx:button x="350" y="30" stylename="nextbtn" click='nexthandler();' tooltip=" 다음문항으로이동합니다." width="17" height="90"/> </mx:canvas> <mx:vbox borderstyle="solid" height="240" width="180" horizontalalign="center"> <mx:label id='lvl1' text="{labelstr" fontweight="bold"/> <mx:text htmltext="{labeldesc" width="150" /> </mx:vbox> </mx:hbox> </mx:panel> </mx:vbox> <mx:arraycollection id='imgac'> <mx:object SOURCE="images/001.jpg" DATA=" 동대산전경입니다." DESC=' 높이 1,434m의동대산은북쪽의두로봉, 동쪽의노인봉등과함께백두대간의줄기를이룬다.... '/> <mx:object SOURCE="images/002.jpg" DATA=" 두로봉전경입니다." DESC=' 두로봉은강원도평창군진부면과홍천군내면및강릉시연곡면사이에있는산으로높이 1,422m이다....' /> <mx:object SOURCE="images/003.jpg" DATA=" 비로봉전경입니다." DESC=' 적멸보궁은부처님의정골사리를봉안한곳이다....'/> <mx:object SOURCE="images/004.jpg" DATA=" 상왕봉전경입니다." DESC=' 백두대간은힘찬기세로금강산, 설악산을지나대관령, 태백산, 소백산으로이어지는데... '/> </mx:arraycollection> </mx:application>

230 - Label

231 - l l <mx:script> <![CDATA[ /* 콘텐츠의확대또는축소기능 */ private var originwidth:number=1; private var originheight:number=1; public function contentzoom(flag:string):void{ var zoom:zoom = new Zoom(); zoom.originy=0; if (flag == 'zoomin'){ originheight += 0.1; originwidth += 0.1; else if (flag == 'zoomout') { originheight -= 0.1; originwidth -= 0.1;

232 - if (originheight < 1){ originheight=1; if (originwidth < 1) { originwidth=1; zoom.zoomheightto = originheight; zoom.zoomwidthto = originwidth; zoom.target = Application.application.kado; zoom.play(); // accessibility 속성을제거한다. // ( 화면낭독프로그램에서읽혀지지않게처리 ) private function removeaccessibility(event:flexevent):void{ (event.target.accessibilityproperties = new AccessibilityProperties()).silent=true ]]> </mx:script> <mx:vbox width="100%" height="100%"> <mx:panel title="kado 위치안내소개 "> <mx:label text=" 콘텐츠축소 / 확대 " fontweight="bold" fontsize="14" color="#343434"/> <mx:hbox width="650" height="480" id="targetbox" verticalscrollpolicy="off" horizontalscrollpolicy="off" paddingtop="10" paddingleft="10"> <mx:box width="638" height="463" paddingleft="0" paddingright="0" paddingbottom="0" paddingtop="0" id="kado" borderstyle="solid" horizontalscrollpolicy="off" verticalscrollpolicy="off"> <mx:image width="330" tooltip=" 한국정보문화진흥원약도 - 대표전화 02-3660-2500, 홈페이지담당전화 02-3660-2745 지하철 5호선발산역에서강서보건소사이백석초등학교옆 ( 등촌중학교건너

233 - 편 ) 한국정보문화진흥원 " source="map.gif"/> </mx:box> </mx:hbox> <mx:hbox width="650" verticalalign="bottom" horizontalalign="right"> <mx:button label=" 콘텐츠확대 " click="contentzoom('zoomin')" tabenabled="false" creationcomplete="removeaccessibility(event)"/> <mx:button label=" 콘텐츠축소 " click="contentzoom('zoomout')" tabenabled="false" creationcomplete="removeaccessibility(event)"/> </mx:hbox> </mx:panel> </mx:vbox>

234 -

235 -

236 -

237 -

238 -

239 - 액세스가능성 액세스가능성 액세스가능성 24) Flash CS4 영문버전에서는 Accessibility Panel, 즉접근성패널이라고한다.

240 - 액세스가능성 액세스가능성 객체를액세스가능하게만들기 25), 자식객체 액세스가능 26), 자동레이블 이름 설명 액세스가능성 객체를액세스가능하게만들기 자식객체액세스가능 25) Flash CS4 영문버전에서는 Make Object Accessible', 즉 객체를접근성있게만들기 의의미이다. 26) Flash CS4 영문버전에서는 Make child objects accessible', 즉 자식객체를접근성있게만들기 의의미이다.

241 - 자동레이블 자동레이블 자동레이블 object embed object embed param window param wmode transparent opaque 27) http://help.adobe.com/ko_kr/flash/10.0_usingflash/wsd60f23110762d6b883b18f10cb1fe1a f6-7c2ba.html

242 - window wmode window object param embed param param embed wmode param param window transpare nt opaque 28) Stephanie Sullivan 의블로그 : http://www.communitymx.com/content/article.cfm?cid=e5141

243 - l l l

244 - l

245 - 액세스가능성 액세스가능성 객체를액세스가능하게만들기 이름

246 - 액세스가능성 이름 설명 이름 설명 이름 설명 이름 설명 이름 설명 액세스가능성 이름 액세스가능성 자식객체액세스가능

247 -

248 -

249 - FLVPlaybackCaptioning FLVPlayback FLVPlaybackCaptioning FLVPlayback FLVPlaybackCaptioning FLVPlayback FLVPlayback FLVPlaybackCaptioning showcaptions

250 - FLVPlaybackCaptioning source FLVPlayback FLVPlaybackCaptioning

251 - FLVPlaybackCaptioning FLVPlaybackCaptioning

252 -

253 -

254 -

255 -

256 -

257 - listener listener on (click) { geturl(http://www.kado.or.kr/index.html); MouseEvent function gotokadosite(event:mouseevent):void { var adobeurl:urlrequest=new URLRequest( "http://www.kado.or.kr/"); navigatetourl(adoveurl);

258 - home_mc.addeventlistener(mouseevent.click, gotokadosite);

259 -

260 - 액세스가능성 자식객체액세스가능

261 -

262 -

263 -

264 -

265 -

266 - l l.tabindex

267 -.tabindex.tabindex.silent.tabindex.tabindex

268 -.tabindex.tabindex.tabindex

269 - Accessibility.isActive() Accessibility.Active().silent.silent

270 -

271 -

272 - if (Accessibility.isActive()) { geturl(screenreaderpage.htm); else { geturl(normalpage.htm); screenreaderpage.htm normalpage.htm

273 - wmode embed opaque <object...> <param name="wmode" value="opaque"> <embed wmode="opaque"...>... </embed> </object> wmode wmode windows

274 -

275 -

276 - enableaccessibility() import fl.accessibility.checkboxaccimpl; CheckBoxAccImpl.enableAccessibility( )

277 -

278 -

279 -

280 - l l 액세스가능성 이름 설명

281 - 이름 설명 l l 이름 설명 l

282 - l l l

283 - l

284 - l l l

285 - l l

286 - l l l l

287 - l l l l

288 - l l

289 - l l

290 -

291 - l l 액세스가능성 description l

292 - l l l

293 - l l

294 -

295 - 액세스가능성 액세스가능성 무비를액세스가능하게만들기 자식객체액세스가능 자동레이블

296 - 액세스가능성 액세스가능성 이름 설명 이름 설명 설명 액세스가능성 객체를액세스가능하게만들기

297 - 이름 설명 이름 설명 이름 설명 탭인덱스