HTML5／CSS3/4. CSS3로 웹 페이지 꾸미기
Day 43 : 컴퓨터 기술 소개 웹 페이지 : CSS3로 모양 꾸미기
pancakemaker
2021. 12. 16. 15:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>컴퓨터 기술 소개</title>
<style>
body {
background-color: aliceblue;
}
header {
border-bottom: 1px solid black;
}
h1 {
color: brown;
text-align: center;
}
a {
text-decoration: none;
}
body h2 {
color: blue;
text-shadow: 4px 4px 4px skyblue;
}
ul {
border: 1px dotted black;
}
p {
font-family: "휴먼편지체";
font-size: 1em;
text-indent: 1em;
}
footer {
background-color: orange;
border-radius: 10px;
}
</style>
</head>
<body>
<header>
<h1>스마트폰</h1>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.</p>
</header>
<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>
</nav>
<section>
<article>
<h2><a id="history"></a><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>
<p>최초의 스마트폰은 IBM 사이먼이다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.</p>
</article>
<article>
<h2><a id="android"></a><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><a id="iphone"></a><a href="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target="_blank">아이폰</a></h2>
<p>아이폰(영어: iPhone)은 미국 애플이 디자인하고 마케팅한 터치스크린 기반 휴대 전화 계열이다. 애플의 iOS 모바일 운영 체제를 사용한다. 1세대 아이폰은 애플의 공동 창립자 스티브 잡스가 2007년 1월 9일 발표하였고 제품은 2007년 6월 29일 출시되었다.</p>
</article>
<article>
<h2><a id="sample">샘플</a></h2>
<table>
<caption>스마트폰샘플</caption>
<tbody>
<tr><td><img src="smartphone.png"></td></tr>
</tbody>
</table>
</article>
</section>
<footer>
<p><a href="survey4.html" target="_blank">설문조사</a></p>
<p><small>Copyright 2021 by Yujin</small></p>
</footer>
</body>
</html>
survey4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>소프트웨어 기술 소개</title>
<style>
h1 {
text-align: center;
color: brown;
}
body {
font-family: "휴먼편지체";
background-color: aliceblue;
}
h4 {
font-family: "맑은 고딕";
color: navy;
font-weight: bold;
}
table {
background-color: lightpink;
}
#copyright {
background-color: orange;
font-family: "휴먼편지체";
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<h1>설문지</h1>
<p id="headline">소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.</p>
<hr>
<table>
<tr><td><h4>학년</h4></td>
<td><input type="radio" name="grade" value="1" checked>1학년
<input type="radio" name="grade" value="2">2학년
<input type="radio" name="grade" value="3">3학년
<input type="radio" name="grade" value="4">4학년</td></tr>
<tr><td><h4>성별</h4></td>
<td><input type="radio" name="gender" value="m" checked>남
<input type="radio" name="gender" value="f">여</td></tr>
<tr><td><h4>관심분야</h4></td>
<td><select name="interest">
<option value="mobliesw">모바일 소프트웨어</option>
<option value="websw">웹 소프트웨어</option>
</select></td></tr>
<tr><td><h4>진로</h4></td>
<td><input type="checkbox" value="개발" checked>개발
<input type="checkbox" value="기획">기획
<input type="checkbox" value="영업">영업
<input type="checkbox" value="창업">창업</td></tr>
<tr><td><h4>남기고 싶은 말</h4></td>
<td><textarea cols="50" rows="10" placeholder="글을 남겨주세요."></textarea></td></tr>
</table>
<p id="copyright">Copyright 2021 by Yujin</p>
</form>
</body>
</html>
