웹프로그래밍
명품 웹 프로그래밍 5장 과제
NUMERO_K
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>