[명품 웹 프로그래밍] 4장 Open Challenge

개발/책

[명품 웹 프로그래밍] 4장 Open Challenge

Hyunsun 2021. 10. 17. 23:55

728x90

생능출판사 명품 HTML5+CSS3+Javascript 웹 프로그래밍 수정판

p.202 Open Challenge 04 컴퓨터 기술 소개 웹 페이지: CSS3로 모양 꾸미기

웹 페이지를 CSS3를 이용하여 꾸며보자. 3장의 open challenge에서 작성한 웹 페이지를 수정하여 4.html 파일로 만들고 설문조사 페이지는 survey4.html로 작성하라. 다음 사례처럼 CSS3로 독자 스스로 모양을 꾸며라.

힌트

4.html의 모양을 꾸밀 CSS3 스타일 시트는 4.css 파일로 작성하고, 4.html에 다음 코드를 추가하여 4.css 파일을 불러온다.

survey4.html을 꾸밀 CSS3 스타일 시트는 survey4.css 파일로 작성하고, survey4.html에 다음 코드를 추가한다.

코드

4.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="4.css">
	<title>컴퓨터 기술 소개</title>
</head>
<body>

	<header>
		<h1>스마트폰</h1>
		<p>
			스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. 
            PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 
            탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 
            오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
            <br><br>
		</p>
		
	</header>

	<nav style="">
		<h2>목차</h2>
		<ul>
			<li><a href="#history">역사</a>
			<li><a href="#android">안드로이드폰</a>
			<li><a href="#iPhone">아이폰</a>
			<li><a href="#sample">샘플</a>
		</ul>
	</nav>

	<section>
		<article>
			<h2 id="history">
            <a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0" 
            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/아이폰" 
            target="_blank">아이폰</a></h2>
			<p>
				아이폰(영어: iPhone)은 2007년 1월 9일, 
                애플이 발표한 휴대 전화 시리즈이다. 
                미국 샌프란시스코에서 열린 맥월드 2007에서 
                애플의 창업자 중 한명인 스티브 잡스가 발표했다.
			</p>
		</article>
		<article>
			<h2 id="sample">샘플</h2>
				<table>
					<caption>스마트폰샘플</caption>
						<tr>
							<td><img src="media/galaxys7.png" width="150" height="300"></td>
							<td><img src="media/iphone6.PNG" width="150" height="300"></td>
							<td><img src="media/tizen.png" width="150" height="300"></td>
							<td><img src="media/windowphone.PNG" width="150" height="300"></td>
							<td><img src="media/nokia.PNG" width="150" height="300"></td>
						</tr>
				</table>
		</article>
	</section>

	<footer>
		<p><a href="survey4.html" target="_blank"> 설문조사</a></p>
		<p>Copyright 2021 by Hyunsun</p>
	</footer>
</body>
</html>

4.css

body { background-color : aliceblue; } 

h1 {
	text-align: center; 
	color : brown; 
}

h2 {
	color: blue;
	text-shadow: 3px 3px 3px skyblue ;
}

header p { 
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
} 

p {
	font-family: 휴먼편지체, 굴림, serif;
	font-size: 1em;
	text-indent: 1em;
}

ul {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
}

a { text-decoration: none; }

footer {
	background: orange;
	border-radius: 10px;
}

survey4.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="survey4.css">
	<title>소프트웨어 기술 선호에 관한 설문지</title>

</head>
<body>
	<header>
		<h1>설문지</h1>
		<p>
			소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.
		</p>
		<hr>
	</header>
	<form>
		<span>학년</span>
		<label><input type="radio" name="grade" value="1">1학년</label>
		<label><input type="radio" name="grade" value="2">2학년</label>
		<label><input type="radio" name="grade" value="3">3학년</label>
		<label><input type="radio" name="grade" value="4">4학년</label>
		<br><br>
		
		<span>성별</span>
		<label><input type="radio" name="gender" value="5">남</label>
		<label><input type="radio" name="gender" value="6">여</label>
		<br><br>
		
		<span>관심 분야</span>
		<select name="interest">
			<option value="7">모바일 소프트웨어</option>
			<option value="8">웹 서비스</option>
			<option value="9">빅데이터</option>
			<option value="10">디지털 콘텐츠 및 가상 현실</option>
		</select>
		<br><br>

		<span>진로(다중 선택)</span>
		<label><input type="checkbox" value="11">개발</label>
		<label><input type="checkbox" value="12">기획</label>
		<label><input type="checkbox" value="13">영업</label>
		<label><input type="checkbox" value="14">창업</label><br><br>

		<span>남기고 싶은 말</span> 
		<textarea cols="50" rows="10" placeholder="글을 남겨주세요"></textarea>
	</form>
	<footer>
		<p>Copyright 2021 by Hyunsun</p>
	</footer>
</body>
</html>

survey4.css

body { 
	background-color : aliceblue; 
	padding: 10px;
} 

form {
	background: pink;
}

h1 {
	text-align: center; 
	color : brown; 
}

body label, p{
	font-family: 휴먼편지체, 굴림, serif;
	font-size: 1em;
}

span {
	color: blue;
	font-weight: bold;
	font-size: 20px;
}

footer { 
	background: orange;
	border-radius: 10px; 
}

결과

728x90

저작자표시 비영리 변경금지

'개발 > 책' 카테고리의 다른 글

[명품 웹 프로그래밍] 5장 Open Challenge (0)	2021.10.18
[명품 웹 프로그래밍] 3장 Open Challenge (0)	2021.10.11
[명품 웹 프로그래밍] 2장 Open Challenge (0)	2021.10.10

현재글[명품 웹 프로그래밍] 4장 Open Challenge

Hyunsun

[명품 웹 프로그래밍] 4장 Open Challenge

'개발 > 책' 카테고리의 다른 글

'개발/책'의 다른글

티스토리툴바

[명품 웹 프로그래밍] 4장 Open Challenge

'개발 > 책' 카테고리의 다른 글

'개발/책'의 다른글

관련글

티스토리툴바