웹개발
[명품 웹 프로그래밍] OpenChallenge 4, CSS3 모양 꾸미기
hatch
2021. 10. 19. 22:01
728x90
반응형
| 웹 페이지(메인) 화면 | 설문지 화면 | |
 |
 |
 |
<메인 화면 코드>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>컴퓨터기술소개</title>
<style>
body {background: aliceblue;}
h1 {color: brown; text-align: center;}
p {font-family: 휴먼편지체, sans-serif; font-size: 1em; text-indent: 1em;}
#hd {border-bottom: 1px solid;}
#alist ul {border: 1px dotted;}
a {text-decoration: none;}
h2 {color: blue; text-shadow: 3px 3px 7px skyblue;}
footer {background: orange; border-radius: 7px;}
</style>
</head>
<body>
<header id="hd">
<h1>스마트폰</h1>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하며 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.</p>
</header>
<article id="alist">
<h2>목차</h2>
<ul>
<li><a href = "#역사">역사</a></li>
<li><a href="#안드로이드">안드로이드</a></li>
<li><a href="#아이폰">아이폰</a></li>
<li><a href="#샘플">샘플</li>
</ul>
</article>
<article id="at1">
<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>
<p>최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.</p>
</article>
<article id="at2">
<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>
<p>안드로이드(영어:Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS) 등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.</p>
</article>
<article id="at3">
<h2 id="아이폰"><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일에 스티브 잡스가 처음으로 발표를 하였다.</p>
</article>
<article id="at4">
<h2 id="샘플">샘플</a></h2>
<table>
<caption>스마트폰 샘플</caption>
<tr>
<td><img src="media/galaxys7.png" width="100"></td>
<td><img src="media/iphone6.png" width="100"></td>
<td><img src="media/tizen.png" width="100"></td>
<td><img src="media/windowphone.png" width="100"></td>
<td><img src="media/nokia.png" width="100"></td>
</tr>
</table>
</article>
<footer>
<p><a href="survey.html" target="_blank">설문조사</a></p>
<p>Copyright 2017 by Kitae</p>
</footer>
</body>
</html>
<설문지 코드>
<!DOCTYPE html>
<html>
<head>
<title>소프트웨어 기술 선호에 관한 설문지</title>
<style>
body {background: aliceblue;}
form {background: pink; margin: 10px;}
span {color: blue; font-family: normal; padding: 10px;
font-weight: bold;}
h1 {color: brown; text-align: center;}
label, p {font-family: 휴먼편지체, sans-serif; text-indent: 1em;}
footer {background: orange; border-radius: 10px;}
</style>
</head>
<body>
<header>
<h1>설문지</h1>
<p> 소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.</p>
<hr>
</header>
<section>
<form>
<label><span>학년</span>
<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학년
</label><br>
<label><span>성별</span>
<input type="radio" name="gender" value="1">남
<input type="radio" name="gender" value="2">여
</label><br>
<label><span>관심 분야</span>
<select>
<option>모바일 소프트웨어</option>
<option>웹서비스</option>
<option>빅데이터</option>
<option>디지털콘텐츠 및 가상현실</option>
</select>
</label><br>
<label><span>진로(다중 선택)</span>
<input type="checkbox" name="job" value="1" checked>개발
<input type="checkbox" name="job" value="2">기획
<input type="checkbox" name="job" value="3">영업
<input type="checkbox" name="job" value="4">창업
</label><br>
<label><span>남기고 싶은 말</span>
<textarea cols="50" rows="10">글을 남겨주세요.</textarea>
</label>
</form>
</section>
<footer>
<p>Copyright 2017 by Kitae</p>
</footer>
</body>
</html>