<!DOCTYPE html>
<html>
<head>
<title>컴퓨터 기술 소개</title>
<style>
body {
background-color: aliceblue;
}
h1 {
color: brown;
text-align:center;
}
a {
text-decoration:none
}
.pText {
text-indent : 1em; font-size : 1em; font-family:휴먼편지체;
}
.blurText {
text-shadow : 3px 3px 5px skyBlue;
}
.footerBox{
border-radius: 30px;
background : orange;
width : 100%px;
padding : 5px;
}
</style>
</head>
<body>
<h1>스마트폰</h1>
<p class="pText">
스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 모든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
</p>
<header style="height: auto; width: 100%; border-bottom:1px solid black;"></header>
<div class="blurText">
<h2>목차</h2>
</div>
<ul style="border: 1px dotted">
<li><a href="#역사">역사</a>
<li><a href="#안드로이드">안드로이드폰</a>
<li><a href="#아이폰">아이폰</a>
<li><a href="#샘플">샘플</a>
</ul><br>
<div class="blurText">
<h2 id="역사">
<a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0#%EC%97%AD%EC%82%AC" target="_blank">
역사
</a>
</h2>
</div>
<p class="pText">
최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.
</p>
<div class="blurText">
<h2 id="안드로이드">
<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>
</div>
<p class="pText">
안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), MMS 등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.
</p>
<div class="blurText">
<h2 id="아이폰">
<a href="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target="_blank">
아이폰
</a>
</h2>
</div>
<p class="pText">
아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다
</p>
<div class="blurText">
<h2 id="샘플">샘플</h2>
</div>
<table>
<p>
<caption>스마트폰샘플</caption>
<tbody>
<tr>
<td><img src="https://news.kbs.co.kr/data/news/2019/08/19/4264967_oUW.jpg"></td>
</tr>
</p>
</table>
<footer>
<div id="설문조사" class="footerBox">
<a href="survey4.html">
설문조사
</a>
<p class="pText">Copyright 2017 by Kitae</p>
</div>
</footer>
<br> <audio src="C:\Users\SH\Desktop\수업\HTML\Linda행진곡.mp3"
controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.
</audio>
</body>
</html>
▶설문조사를 누르면 새 창으로 아래 웹페이지가 열림
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>소프트웨어 기술 선호에 따른 설문지</title>
<style>
body {
background-color: aliceblue;
}
h1 {
color: brown;
text-align:center;
}
.humanText {
text-indent : 1em; font-size : 1em; font-family:휴먼편지체;
}S
#footer {
position:absolute;
bottom:5;
width:100%;
height:30px;
background:orange;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>설문지</h1>
<p class="humanText" style="text-align:center">
소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.
</p>
<header style="height: auto; width: 100%; border-bottom:1px solid black;">
</header><br>
<form style="background-color: pink">
<label>
<p>
<strong style="color: royalblue;">학년</strong>
<input type="radio" name="schoolyear" value="1" checked>
1학년
<input type="radio" name="schoolyear" value="2">
2학년
<input type="radio" name="schoolyear" value="3">
3학년
<input type="radio" name="schoolyear" value="4">
4학년
</p>
<p>
<strong style="color: royalblue;">성별</strong>
<input type="radio" name="gender" value="man">
남
<input type="radio" name="gender" value="woman" checked>
여
</p>
<p>
<strong style="color: royalblue;">관심분야</strong>
<select name="interests">
<option value="mobile_software">모바일 소프트웨어</option>
<option value="mobile_software2">모바일 소프트웨어2</option>
</select>
</p>
<p>
<strong style="color: royalblue;">진로(다중 선택)</strong>
<input type="checkbox" name="career" value="Development" checked>
개발S
<input type="checkbox" name="career" value="plan">
기획
<input type="checkbox" name="career" value="sales">
영업
<input type="checkbox" name="career" value="startups">
창업
</p>
<p>
<strong style="color: royalblue;">남기고 싶은 말</strong>
<textarea cols="50" rows="10" placeholder="글을 남겨주세요"></textarea>
</label>
</form>
<footer>
<div id="footer" class="humanText">Copyright 2017 by Kitae</div>
</footer>
</body>
</html>