-
명품 웹 프로그래밍 5장 과제웹프로그래밍 2019. 5. 14. 18:39
3.
<!DOCTYPE html> <html> <head> <title>오디오 재생 리스트</title> <style type="text/css"> #num { border: 1px solid yellowgreen; } #song { border-bottom: 1px solid; } input:hover { color: magenta; } </style> </head> <body> <h3>오디오 재생 리스트</h3> <hr> <table> <tbody> <tr><td id="num">1</td><td id="song">애국가</td><td><input id="but" type="button" value="재생"></td><td><input type="button" value="중지"></td></tr> <tr><td id="num">2</td><td id="song">Moon Glow</td><td><input type="button" value="재생"></td><td><input type="button" value="중지"></td></tr> <tr><td id="num">3</td><td id="song">Embraceable You</td><td><input type="button" value="재생"></td><td><input type="button" value="중지"></td></tr> </tbody> </table> </body> </html>openchallenge.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>컴퓨터 기술 소개</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <style> html,body{ height:100%; width: 100%; margin: 0; padding: 0; } #header { float: left; position: relative; width: 100%; height: 15%; background-color: yellow; } #nav { float: left; position: relative; width: 15%; height: 600px; background-color: orange; } #section { float: left; position: relative; width: 85%; height: 600px; background-color: skyblue; } #footer { width: 100%; height: 15%; background-color: plum; position: relative; clear: both; float: left; } h1 { text-align: center; } </style> </head> <body> <header> <div id="header"> <h1>스마트폰</h1> <p> 스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다. </p> </div> </header> <nav> <div id="nav"> <h2>목차</h2> <ul> <li><a href="#history">역사</a></li> <li><a href="#android">안드로이드</a></li> <li><a href="#iphone">아이폰</a></li> <li><a href="#sample">샘플</a></li> </ul> </div> </nav> <section> <div id="section"> <article> <h2 id="hisory"><a href="http://blog.uplus.co.kr/2149" target="_blank">역사</a></h2> <p> 최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다. </p> </article> <article> <h2 id="android"><a href="https://ko.wikipedia.org/wiki/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C_(%EC%9A%B4%EC%98%81_%EC%B2%B4%EC%A0%9C)" target="_blank">안드로이드</a></h2> <p> 안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램 (웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영체제이다. </p> </article> <article> <h2 id="iphone"><a href="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target="_blank">아이폰</a></h2> <p>아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다. </p> </article> <article> <h2 id="sample">샘플</h2> <table> <caption>스마트폰샘플</caption> <tbody> <tr> <td><img src="media/phone1.png" width="200" height="150"></td> <td><img src="media/phone2.png" width="200" height="150"></td> <td><img src="media/phone3.png" width="200" height="150"></td> <td><img src="media/phone4.png" width="200" height="150"></td> <td><img src="media/phone5.png" width="200" height="150"></td> </tr> </tbody> </table> </article> </div> </section> <footer id="footer"> <div> <h3><a href="survey.html" target="_blank">설문조사</a></h3> <strong>Copyright 2018 by Numerok</strong> </div> </footer> <audio src="media/iloveit.mp3" loop autoplay></audio> </body> </html>survey.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>소프트웨어 기술 설문지</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <style> html,body{ height:100%; width: 100%; margin: 0; padding: 0; } #header { display: block; width: 100%; height: 15%; background-color: yellow; } #section { display: block; width: 100%; height: 70%; background-color: pink; margin: 10px 10px; } #footer { display: block; width: 100%; height: 15%; background-color: plum; } h1 { text-align: center; } </style> </head> <body> <header> <div id="header"> <h1>설문지</h1> <p> 소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다. </p> </div> </header> <section> <div id="section"> <article> <form> 학년 <input type="radio" name="grade">1학년 <input type="radio" name="grade">2학년 <input type="radio" name="grade">3학년 <input type="radio" name="grade">4학년 </form> </article><br> <article> <form> 성별 <input type="radio" name="gender">남성 <input type="radio" name="gender">여성 </form> </article><br> <article> <form> 관심 분야 <select name="interest"> <option value="1" selected>모바일 소프트웨어</option> <option value="2">모바일 게임</option> <option value="3">안드로이드개발</option> <option value="4">아이폰 개발</option> </select> </form> </article><br> <article> <form> 진로 <input type="checkbox" value="1" checked>개발 <input type="checkbox" value="2">기획 <input type="checkbox" value="3">영업 <input type="checkbox" value="4">창업 </form> </article><br> <article> <form> 남기고 싶은 말 <textarea cols="20" rows="5" placeholder="글을 남겨주세요"></textarea> </form> </article><br> </div> </section> <footer> <div id="footer"> Copyright 2018 by Numerok </div> </footer> </body> </html>'웹프로그래밍' 카테고리의 다른 글
명품 웹 프로그래밍 7장 과제 (0) 2019.05.14 명품 웹 프로그래밍 6장 과제 (0) 2019.05.14 명품 웹 프로그래밍 4장 과제 (0) 2019.05.14 명품 웹 프로그래밍 3장 과제 (0) 2019.05.14 명품 웹 프로그래밍 2장 과제 (0) 2019.05.14
