웹 프로그래밍 실습 #9 ( 5 월 7 일 )

웹 프로그래밍실습 #9 (5월 7일)

문제 1. 초기 화면에는 글자가 보이지 않도록 하고, 버튼 이미지를 누르면 레이어를 점차 오른쪽으로 이동시켜 마치 글자가 움직이는 것과 같은 효과를 보여주는 JavaScript 프로그램을 작성하시오. <H1>태그 안에서 “Welcome to My Homepage!!!” 라는 문자열을 포함하는 레이어를 만든다. 동영상을 보려면 함께 첨부된 ‘ 움직이는텍스트.gif ‘ 파일로 확인할 것.

<html> <head> <title> 움직이는 텍스트 </title> <style> #train { position: absolute; left: -500; top: 70; width: 500; } </style> <script type="text/javascript"> function init() { train.style.left = -500; } function slideIn() { train.style.left = parseInt(train.style.left) + 5; if (parseInt(train.style.left) < 1000) setTimeout("slideIn()", 15); } </script> </head> <body onload="init()"> <center> <p> <a href="javascript:slideIn()"> <img src="button.jpg" border="0"> </a> </p> </center> <div id="train"> <h1>Welcome to my Homepage!!!</h1> </div> </body> </html>

문제 2.다음과 같이 문서가 로드될 때 브라우저의 상태 표시줄에 “홈페이지 방문을 환영합니다!!!” 라는 문자열을 출력하는 JavaScript 프로그램을 onLoad이벤트를 이용하여 작성하시오.

<html> <head> <title> 이벤트 </title> </head> <body onload="window.status='홈페이지 방문을 환영합니다!!!'"> <font size="3"> 현재 브라우저 상태 표시줄에 "홈페이지 방문을 환영합니다.!!!"라는 문장이 있습니다.<br>확인해 보세요. </font> </body> </html>

문제 3.기본태그인 <html>, <head>, <title>, <body>와 시맨틱 태그인 <header>, <nav>, <article>, <section>, <article>, <aside>, <footer>를 이용하여 다음과 같은 HTML5 문서를 작성하시오. 적당한 CSS파일도 함께 작성할 것. 함께 첨부된 그림파일과 텍스트파일 이용

---3번 답---------------------- 03.css header, section, nav, article, aside, footer { position : absolute; padding : 10px; border : 1px solid black; display : block; } header { top : 0%; width : 100%; height : 15%; background-color : yellow;} nav { top : 20%; width:100%; } navul li { top : 20%; left : 10%; margin:0 20px; list-style : none; display : inline; } article { top : 32%; left : 30%; width : 70%; height : 70%; } section { top : 75%; width : 93%; height : 20%; padding : 2%; background-color : orange;} section header { top : 10%; width : 92%; height : 30%; padding : 0px; } aside { top : 32%; width : 25%; height : 70%; background-color : pink;} footer { top : 100%; width : 100%; background-color : lightgreen;} #bg1 { background: -webkit-gradient(linear, left bottom, right top, from(skyblue), to(#ffff00)); background: -moz-linear-gradient( left 45deg,#ff0000, #ffff00); } #bg2 { background: -webkit-gradient(linear, left bottom, right top, from(pink), to(white)); background: -moz-linear-gradient( left 45deg,#ff0000, #ffff00); }

---3번 답---------------------- 03.html <html><head> <title>제주도 여행</title> <link href="quiz 01_test.css" rel="stylesheet" type="text/css"> </head><body> <header id=bg1> <hgroup> <h1> 제주도로 떠나요!!!</h1> <h3> 관광지 추천</h3> </hgroup> </header> <nav> <ul> <li><a href="#">중문권</a></li> <li><a href="#">동부권</a></li> <li><a href="#">서부권</a></li> <li><a href="#">제주시권</a></li> </ul> </nav> <article> <center> <h2> 제주도 여행</h2> <figure> <img src="beach.jpg" alt="제주도"> <figcaption>[제주도]</figcaption> </center> 우리나라 서남해 쪽에 있는 가장 큰 화산섬. 목축업, 농업, 임업, 수산업, 관광 사업이 발달하였으며 해녀와 말이 유명하다. 명승지로 백록담, 삼성혈, 용두암, 만장굴, 천지연 폭포 따위가 있다. 동서 73km, 남북 31km의 타원형으로 이루어져 있다. 면적은 1832.946㎢. </figure> <section> <header id=bg2> <h4> 어린이 추천 관광지 </h4> </header> <p><br><br>테디베이박물관, 제주 미니랜드, 트릭아트 뮤지엄, 테지움 사파리 등 </p> </section> </article> <aside> <h3>할인 항공권</h3> <ul> <li> 서울↔제주 할인항공 <li> 부산↔제주 할인항공 <li> 청주↔제주 할인항공 <li> 대구↔제주 할인항공 <li> 광주↔제주 할인항공 </ul> </aside> <footer> 2012.8.30 작성 </footer> </body> </html>

웹 프로그래밍 실습 #9 ( 5 월 7 일 )