728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>컴퓨터 기술 소개</title>
<style>
h1{
text-align: center;
}
header{
display: block;
background: yellowgreen;
width: 100%;
margin: 0px;
padding: 10px 0px;
}
nav{
display: inline-block;
float: left;
background: orange;
width: 15%;
height: 650px;
margin: 0px;
padding: 10px 0px;
}
section{
display: inline-block;
float: right;
background: aliceblue;
width: 85%;
height: 650px;
margin: 0px;
padding: 10px 0px;
}
footer{
display: block;
background: violet;
width: 100%;
margin: 0px;
padding: 10px 0px;
}
</style>
</head>
<body>
<header>
<h1>스마트폰</h1>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.</p>
</header>
<nav>
<h2>목차</h2>
<div>
<ul>
<li><a href="#역사">역사</a></li>
<li><a href="#안드로이드">안드로이드폰</a></li>
<li><a href="#아이폰">아이폰</a></li>
<li><a href="#샘플">샘플</a></li>
</ul>
</div>
</nav>
<section>
<article>
<article>
<h2 id="역사"><a href="https://ko.wikipedia.org/wiki/스마트폰">역사</a></h2>
<p>최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.</p>
</article>
<article>
<h2 id="안드로이드"><a href="https://ko.wikipedia.org/wiki/안드로이드_(운영_체제)">안드로이드</a></h2>
<p>안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), MMS 등을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.</p>
</article>
<article>
<h2 id="아이폰"><a href="http://ko.wikipedia.org/wiki/아이폰">아이폰</a></h2>
<p>아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표하였다.</p>
</article>
<article>
<h2 id="샘플">샘플</h2>
<table>
<caption id>스마트폰샘플</caption>
<tbody>
<tr>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/IPhone_13_Pro_vector.svg/800px-IPhone_13_Pro_vector.svg.png" width="100" height="200"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/IPhone_4S_No_shadow.png" width="100" height="200"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Samsung_Galaxy_Nexus_Render.png/405px-Samsung_Galaxy_Nexus_Render.png" width="100" height="200"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Z_Ultra.jpg/330px-Z_Ultra.jpg" width="100" height="200"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Samsung_Galaxy_Note.png" width="100" height="200"></td>
</tr>
</tbody>
</table>
</article>
</article>
</section>
<footer>
<a href="OpenChallenge5Survey.html" target="_blank">설문조사</a>
<p>Copyright 2017 by kitae</p>
</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>소프트웨어 기술 선호에 대한 설문조사</title>
<style>
header{
background: yellowgreen;
}
section{
background: pink;
margin: 20px 10px;
}
footer{
background: violet;
}
</style>
</head>
<body>
<header>
<h1>설문지</h1>
소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.
</header>
<section>
<form>
학년 <input type="radio" name="학년" checked>1학년
<input type="radio" name="학년">2학년
<input type="radio" name="학년">3학년
</form>
<form>
성별 <input type="radio" name="성별">남
<input type="radio" name="성별">여
</form>
<form>
관심분야
<select>
<option value="1">모바일 소프트웨어</option>
</select>
</form>
<form>
진로(다중선택) <input type="checkbox" name="진로" checked>개발
<input type="checkbox" name="진로">기획
<input type="checkbox" name="진로">영업
<input type="checkbox" name="진로">창업
</form>
<form>
남기고 싶은 말 <textarea>글을 남겨주세요</textarea>
</form>
</section>
<footer>
<p>Copyright 2017 by Kitae</p>
</footer>
</body>
</html>728x90
'HTML+CSS+JavaScript' 카테고리의 다른 글
| [HTML5+CSS3+Javascript 웹프로그래밍]6장 OpenChallenge (0) | 2021.10.11 |
|---|---|
| [HTML5+CSS3+Javascript 웹프로그래밍]6장 실습문제 (0) | 2021.10.10 |
| [HTML5+CSS3+Javascript 웹프로그래밍]5장 실습문제 (0) | 2021.10.06 |
| [html]툴팁만들기 (0) | 2021.09.08 |
| [html]웹 페이지에 타이틀 달기 (0) | 2021.09.08 |