본문 바로가기
웹 프로그래밍/명품 웹 프로그래밍 답안

2장 실습문제 정답

코딩제제 2022. 5. 2. 15:26

2장 실습문제

1.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>산길</title>
</head>
<body>
<h3>산길</h3>
<hr>
<p>
오늘 아침 일찍 산에 올랐다. 아침 온도는 15&deg;이었다.
가지고 간 물의  &half;을 마셨다. 한참 올라 가는 도중에 
약수터를 가리키는 &lsh; 사인이 보였다. 불현듯
양두종 님의 산길이란 시에 곡을 붙인 박태준의 가곡&sung;이 생각이 났다.
</p>
<pre>
	산길을 간다. 말없이
	호올로 산길을 간다

	해는 져서 새소리 그치고
	짐승의 발자취 그윽히 들리는

	산길을 간다 말없이
	밤에 홀로 산길을 간다
</pre>
<p>
&copy; Copyright(c) 황기태 All rights reserved. 
&phone; 010-0000-9999
</p>
</body>
</html>

산길

오늘 아침 일찍 산에 올랐다. 아침 온도는 15°이었다. 가지고 간 물의 ½을 마셨다. 한참 올라 가는 도중에 약수터를 가리키는 ↰ 사인이 보였다. 불현듯 양두종 님의 산길이란 시에 곡을 붙인 박태준의 가곡♪이 생각이 났다. 

	산길을 간다. 말없이
	호올로 산길을 간다

	해는 져서 새소리 그치고
	짐승의 발자취 그윽히 들리는

	산길을 간다 말없이
	밤에 홀로 산길을 간다

© Copyright(c) 황기태 All rights reserved. ☎ 010-0000-9999

 

2 - (1).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>도시 소개</title>
	</head>
	<body>
		<h3>도시 소개</h3>
		<hr>
		<dl>
			<dt>California
				<dd>맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 주</dd>
			</dt>
			<dt>Florida
				<dd>미국의 동남부에 위치한 주로서 많은 휴양 도시가 있고 미국의 최남단이 연결된 아름다운 주</dd>
			</dt>
			<dt>Texas
				<dd>드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주</dd>
			</dt>
		</dl>
	</body>
</html>

도시 소개

California
맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 주
Florida
미국의 동남부에 위치한 주로서 많은 휴양 도시가 있고 미국의 최남단이 연결된 아름다운 주
Texas
드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주

 

2 - (2).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>살빼는 방법</title>
	</head>
	<body>
		<h3>살빼는 방법</h3>
		<hr>
		<ul>
			<li>고기를 많는 먹는 고기 다이어트</li>
			<li>채소를 많이 먹는 채소 다이어트</li>
			<li>적게 먹고 운동하는 운동 다이어트</li>
		</ul>
	</body>
</html>

살빼는 방법

  • 고기를 많는 먹는 고기 다이어트
  • 채소를 많이 먹는 채소 다이어트
  • 적게 먹고 운동하는 운동 다이어트

 

3.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>나의 셀카</title>
</head>
<body>
    <h3>나의 셀카</h3>
    <hr>
    <center>
        나의 셀카<br>
        <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" width="200" height="150">
        <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" width="200" height="150">
        <img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" width="200" height="150">
	</center>
</body>
</html>

나의 셀카

나의 셀카

*<center> 태그는 가운데로 정렬해주는 태그다. HTML5에서 권장하지 않는 태그다.

*이미지는 알아서 대체하길 바란다.

 

4 - (1)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>신체검사</title>
	</head>
	<body>
		<h3>신체 검사</h3>
		<hr>
		<table border="1">
			<caption>학생 신체 검사 표</caption>
			<thead>
				<tr>
					<th>이름</th>
					<th>키</th>
					<th>체중</th>
					<th>시력</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>황기태</td>
					<td>179</td>
					<td>67</td>
					<td>1.0</td>
				</tr>
				<tr>
					<td>이재문</td>
					<td>177</td>
					<td>77</td>
					<td>2.0</td>
				</tr>
				<tr>
					<td>정인환</td>
					<td>189</td>
					<td>87</td>
					<td>1.2</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th>평균</th>
					<th>181</th>
					<th>77</th>
					<th>1.3</th>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

신체 검사

학생 신체 검사 표
이름 키 체중 시력
황기태 179 67 1.0
이재문 177 77 2.0
정인환 189 87 1.2
평균 181 77 1.3

4 - (2)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>과일 수입</title>
	</head>
	<body>
		<h3>과일 수입</h3>
		<hr>
		<table border="1">
			<caption>과일 수입표</caption>
			<thead>
				<tr>
					<th>사과</th>
					<th>바나나</th>
					<th>망고</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" width="100"></td>
					<td><img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" width="100"></td>
					<td><img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" width="100"></td>
				</tr>
			</tbody>
			<tfoot>				
				<tr>
					<th>페루</th>
					<th>필리핀</th>
					<th>호주</th>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

과일 수입

과일 수입표
사과 바나나 망고
페루 필리핀 호주

*이미지는 알아서 대체하길 바란다.

5.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>웹 프로그래밍 참조 사이트</title>
	</head>
	<body>
		<h3>웹 프로그래밍 참조 사이트</h3>
		<hr>
		<ul>
			<li>
				<a href="https://html5.validator.nu/" target="_blank">HTML5 태그 검사 사이트</a>
			</li>
			<li>
				<a href="http://www.css-validator.org/validator.html.ko" target="_blank">CSS3 스타일 시트 검사 사이트</a>
			</li>
			<li>
				<a href="http://www.html5.org" target="_blank">HTML5 표준</a>
			</li>
		</ul>
	</body>
</html>

*실제로 코드를 입력하고 실행시키면 링크가 작동된다.

6.

<!DOCTYPE html>
<html>
	<head>
		<title>애국가 가사</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h3>애국가 가사</h3>
		<hr>
		<p>
			동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
		</p>
		<audio src="EmbraceableYou.mp3" controls autoplay muted loop></audio><br>
		또는<br>
		<audio controls autoplay muted loop>
			<source src="EmbraceableYo3u.mp3" type="audio/mp3">
		</audio>
		<audio src="EmbraceableYou4.mp3" controls>
		</audio>
	</body>
</html>

*화면 결과는 따로 띄우지 않겠다.

저작자표시 비영리 동일조건 (새창열림)

'웹 프로그래밍 > 명품 웹 프로그래밍 답안' 카테고리의 다른 글

2장 연습문제 정답  (0) 2022.02.03
[명품 웹 프로그래밍]Open Challenge 02  (0) 2022.02.03
1장 연습문제&실습문제 정답  (0) 2022.01.27
[명품 웹 프로그래밍]Open Challenge 01  (0) 2022.01.27

'웹 프로그래밍/명품 웹 프로그래밍 답안' Related Articles

티스토리툴바