[HTML & CSS] 명품 웹프로그래밍 3장 실습문제

HTML & CSS

[HTML & CSS] 명품 웹프로그래밍 3장 실습문제

곰제비 2020. 5. 1. 22:05

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

<!DOCTYPE html>
<html>
<head><title>버튼</title></head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<table>
    <tbody>
        <tr><td><input type="button" value="1"></td><td><input type="button" value="2"></td><td><input type="button" value="3"></td></tr>
        <tr><td><input type="button" value="4"></td><td><input type="button" value="5"></td><td><input type="button" value="6"></td></tr>
        <tr><td><input type="button" value="7"></td><td><input type="button" value="8"></td><td><input type="button" value="9"></td></tr>
    </tbody>
</table>
</body>
</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
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
<head><title>웹 브라우저</title>
    <style>
        .section { width:50%;  float:left; }
        /*.aside {width:50%; float:right;}*/
    </style>
    </style>
</head>
<body>
<h3>웹 브라우저 소개</h3>
<hr>
<section class="section">
    브라우저라고 불리기도 하는 웹브라우저(Web Browser)는, 사용자에게 웹 서버 컴퓨터에 접속하고 웹 페이지, 이미지, 동영상, 음악 등 
    다양한 데이터 다운받아 보여주는 소프트웨어이다. <strong>그림1-2</strong>는 대표적인 Chrome 웹 브라우저를 보여준다.
</section>
<section class="section">
    <figure>
        <img src="file/google.jpg" alt="그림1-2" width="400" height="200">
        <figcaption><striong>그림 1-2 구글 Chrome</striong></figcaption>
    </figure>
</section>
<section class="section">
    웹 페이지는 브라우저에 HTML% 문서임을 알리기 위해 <strong>그림 1-3</strong>과 같은 코드를 첫 라인에 삽입하여야 한다.
</section>
<section class="section">
    <figure>
        <code>
        <strong>&lt;&#33;doctype html&gt;</strong><br>
        &lt;html&gt;<br>
        &hellip;<br>
        &lt;&#47;html&gt;<br>
        </code>
        <figcaption><strong>그림 1-3 HTML5 문서 구성</strong></figcaption>
    </figure>
</section>
</body>
</html>
 

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

<!DOCTYPE html>
<html>
<head><title>로그인 폼 만들기</title></head>
<body>
<h3>로그인 폼</h3>
<hr>
<form>
    <fieldset>
        <legend>Login</legend>
        <label>
            Username <input type="Username">
        </label>
        <label>
            Passward <input type="Passward">
        </label>
    </fieldset>
</form>
</body>
</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

<!DOCTYPE html>
<html>
<head><title>웹 프로그래밍 기초</title>
</head>
<body>
<h3>웹 프로그래밍 기초</h3>
<hr>
<details>
    <summary>웹의 기본 목적</summary>
    <p>웹의 기본목적은 한 컴퓨터에서 만든문서(document)를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다</p>
</details>
<details>
    <summary>왜 Web인가?</summary>
    <p>전 세계의 컴퓨터들을 인터넷으로 거미줄처럼 연결하고 웹 문서를 쉽게 주고받을 수 있도록 시스템을 만들고 WWW(World Wide Web), 간단히 줄여 웹(Web)이라고 부른다.</p>
</details>
<details>
    <summary>웹 페이지를 구성하는 3 요소 </summary>
    <ul>
        <li>HTML - 문서의 구조와 내용</li>
        <li>CSS(Cascading Style Sheet) - 문서의 모양</li>
        <li>Javascript - 행동 및 응용 프로그램</li>
    </ul>
</details>
</body>
</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
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html>
<head><title>도형 서식 폼 만들기</title>
</head>
<body>
<h3>도형 서식 폼 만들기</h3>
<hr>
<form>
    <fieldset>
        <legend>도형 서식 입력</legend>
        <label>
            선 종류<select size="3">
                <option>선없음</option>
                <option>실선</option>
                <option>점선</option>
            </select>
        </label><br><br>
        <label>
            선 두께 <input type="number" step="1"  min="1" max="50">
        </label> 
        <label>
            선색 <input type="color" value="#00BFFF" onchange="document.body.style.color=this.value">
        </label><br><br>
        <label>
            투명도(0~100) : <input type="range" min="0" max="100" list="transparency">
            <datalist id="transparency">
                <option value="0" label="Low">
                <option value="50" label="Medium">
                <option value="100" label="high">
            </datalist>
                
        </label>
    </fieldset>
</form>
 
</body>
</html>
 