(8)명품 웹프로그래밍 2장 실습문제

[문제1]

알아야 할 개념 :

1_ 엔터티 찾는 사이트 : https://html.spec.whatwg.org/multipage/named-characters.html

2_ 문자 엔터티 :

☎ : ☎
♪ : ♪
º : °
ⓒ : &#169
↰ : ↰
1/2 : ½

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>산길</title>
</head>
<body>
<h3>산길</h3>
<hr>
<p><strong>오늘 아침 일찍 산에 올랐다. 아침 온도는 15&#176;이었다. 가지고 간 물의 &#189;을 마셨다. 한참 올라 가는 도중에 약수터를 가리키는&#8624; 사인이 보였다. 불현듯 양두종 님의 산길이란 시에 곡을 붙인 바태준의 가곡&#9834;이 생각이 났다.</strong></p>
<pre>
        산길을 간다. 말없이
        호올로 산길을 간다
 
        해는 져서 새로리 그치고
        짐승의 발자취 그윽히 들리는
 
        산길을 간다 말없이
        밤에 홀로 산길을 간다
</pre>
<strong>&#169; Copyright(c) 황기태 All rights resrved. &#9742; 010-0000-9999</strong>
</body>
</html>
Colored by Color Scripter

cs

[문제2_1]

알아야 할 개념 :

<d1> 내부 <dt> <dd>를 사용 시, <dd>는 종료태그를 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

cs

[문제2_2]

알아야 할 개념 : 없음

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

cs

 
[문제3]
알아야 할 개념 :
1_ <table> 태그의 기본 사용법 :

<table>
<caption>
<thead> 내부에 꼭 <tr> <th></th>, ... , <th></th> </tr>
<tbody> 내부에 꼭 <tr> <td></td>, ... , <td></td> </tr>
<tfoot> 내부에 꼭 <tr> <th></th> , .... , <th></th> </tr>
</tabke>

2_ <table>태그의 <Caption>글이라는 것을 알아차려야 함

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<img>
<head>
    <meta charset="UTF-8">
    <title>나의 셀카</title>
</head>
<body>
<h1>나의 셀카</h1>
<hr>
<table>
    <caption>나의 셀카</caption>
    <tbody>
    <tr>
        <td>
        <img src ="편돌이_1.jpg" width = "200" height="300">
        <!--정재현을 볼수 없습니다.-->
        </td>
        <td>
        <img src ="편돌이_1.jpg" width = "200" height="300">
        <!--정재현을 볼수 없습니다.-->
        </td>
        <td>
        <img src ="편돌이_1.jpg" width = "200" height="300">
        <!--정재현을 볼수 없습니다.-->
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
Colored by Color Scripter

cs

출력 장면 :

[문제4_1] :

알아야 할 개념 :

내 코드 말고, 다르게 table에 구분선 넣을 때, <table>의 속성 border = "1" 로 해도 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>학생 신체 검사</title>
</head>
<style>
    table{
        border: 1px solid black;
    }
    tr{
        border: 1px solid black;
    }
    td{
        border: 1px solid black;
    }
    th{
        border: 1px solid black;
    }
</style>
<body>
    <h1>신체 검사</h1>
    <hr>
    <table>
        <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>109</td>
                <td>98</td>
                <td>12.0</td>
            </tr>
            <tr>
                <td>박도언</td>
                <td>518</td>
                <td>419</td>
                <td>6.29</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>평균</th>
                <th>12.12</th>
                <th>4.03</th>
                <th>9.27</th>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

cs

 

출력 장면 :

[ [문제4_2] :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>과일 수입</title>
</head>
<style>
    td{
        text-align: center;
    }
</style>
<body>
    <h1>과일 수입</h1>
    <hr>
    <table border="1">
        <caption>과일 수입 표</caption>
        <thead>
            <tr>
                <th>사과</th>
                <th>바나나</th>
                <th>망고</th>
            </th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <img src="사과.jpg" width="300" height="500" controls>
                    </img>
                </td>
                <td>
                    <img src="바나나.jpg" width="300" height="500" controls>
                    </img>
                </td>
                <td>
                    <img src="망고.jpg" width="300" height="500" controls>
                    </img>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>페루</th>
                <th>필리핀</th>
                <th>호주</th>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>
Colored by Color Scripter

cs

출력 장면 :

[문제5] :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>웹프로그래밍 참조 사이트</title>
</head>
<body>
    <h1>웹 프로그래밍 참조 사이트</h1>
    <hr>
    <ul>
        <li>
            <a href="https://www.w3.org/wiki/CSS/Properties/color/keywords" target="_blank">
            CSS 색깔 이름과 값</a>
        </li>
        <li>
            <a href="https://dev.w3.org/html5/html-author/charref" target="_blank">
            문자 엔터티 코드 사이트</a>
        </li>
        <li>
            <a href="http://www.webprogramming.co.kr" target="_blank">
            웹프로그래밍 사이트</a>
        </li>
 
    </ul>
</body>
</html>
Colored by Color Scripter

cs

[문제6] :

알아야 할 개념 :

링크를 클릭 시, 다른 HTML페이지를 다른 윈도우 창 or iframe에 출력하는 방법

출력할 iframe(보통 name 속성이용) or 출력할 윈도우창의 이름(보통 상속관계로)을 name으로 설정 :
<a>태그로 링크 설정할 때, target을 1번에서 설정한 name이나 윈도우창으로 속성값 대입

<iframe>에 아무창도 없이 띄우기만 하기 => src속성에 아무속성값도 안넣으면 된다.

코드 :

[iframe1.html]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>웹프로그래밍 참조 사이트</title>
</head>
<body>
    <h1>웹 프로그래밍 참조 사이트</h1>
    <hr>
    <ul>
        <li>
            <a href="https://www.w3.org/wiki/CSS/Properties/color/keywords" target="right">
            CSS 색깔 이름과 값</a>
        </li>
        <li>
            <a href="https://dev.w3.org/html5/html-author/charref" target="right">
            문자 엔터티 코드 사이트</a>
        </li>
        <li>
            <a href="http://www.webprogramming.co.kr" target="right">
            웹프로그래밍 사이트</a>
        </li>
 
    </ul>
</body>
</html>
Colored by Color Scripter

cs

[2_7.html]

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>웹 프로그래밍 참조 사이트</title>
</head>
<body>
    <h1>웹 프로그래밍 참조 사이트</h1>
    <hr>
    <iframe src="2_6.html" width="250" height="300"></iframe>
    <iframe width="300" height="300" name = "right"></iframe>
</body>
</html>
Colored by Color Scripter

cs

출력 장면 :

[문제7] :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>애국보수 가사</title>
</head>
<body>
    <h1>애국보수 가사</h1>
    <hr>
    <p>
        동해물과 백두산이 마르고 닳도록 하나님이
        보우하사 우리나라 만세 무궁화 삼천리 화려강산
        대한사람 대한으로 길이 보전하세
    </p>
 
    <audio src="애국가(1절).mp3" controls>
    </audio>
</body>
</html>
Colored by Color Scripter

cs

출력장면 :

[문제8] :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>자기 소개</title>
</head>
<body>
    <h1>자기 소개</h1>
    <hr>
        <video src = "케인.mp4" width="500" height="300" controls>
            케인이 나타나지 않습니다.
        </video>
    
</body>
</html>
Colored by Color Scripter

cs

출력 장면 :

저작자표시

'웹프로그래밍 > 웹프로그래밍수업' 카테고리의 다른 글

(10)명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_1 (0)	2024.09.21
(9)명품 웹프로그래밍 2장_Open Challenge문제 (1)	2024.09.14
(7)2장_이론_6_HTML의 태그의 구성_6 (0)	2024.09.14
(6)2장_이론_5_HTML의 태그의 구성_5 (0)	2024.09.13
(4)2장_이론_3_HTML의 태그의 구성_3 (0)	2024.09.13