[문제1] :
#알아야 할 개념 : X
#코드 :
|
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3장_실습문제_1</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<form>
<table>
<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>
</table>
</form>
</body>
</html>
|
cs |
#출력장면 :
[문제2] :
#알아야 할 개념 : 이 문제는 두가지 방법으로 풀수 있다.
개념1_
- 방법1_ table (2x2)를 구성한 뒤 , width속성을 각각 50%로 1열당 화면 균등 배분
- ★방법2_ <section> 4개로 나누고, width 속성으로 50%로 화면 균둥 배분 + float를 left로 하여, 순서대로 왼쪽 배치
개념2_
"<figure> - </figure> 안에 <img>와 <figcaltion> 그림 설명</figcaption>" 과 비슷하게 <code>처리도
"<figure> </figure> 안에 <code></code> + <figcation> 코드 설명</figcaption>" 로 구성 비슷
#코드 :
[<table>로 코드] :
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3장_2_실습문제_table답</title>
</head>
<body>
<h3>웹 브라우저 소개</h3>
<hr>
<table width = 100%>
<tr>
<td width = 50%>
브라우저라고 불리기도 하는 웹브라우저(Web Browser)는, 사용자에게 웹 서버 컴퓨터에 접속하고 웹 페이지, 이미지, 동영상, 음악 등 다양한 데이터 다운받아 보여주는 소프트웨어이다. <strong>그림1-2</strong>는 대표적인 Chrome 웹 브라우저를 보여준다.
</td>
<td width = 50%>
<figure>
<img src="Chrome.jpg" width="300px" height="350px">
<figcaption>
그림 1-2 Chrome화면
</figcaption>
</figure>
</td>
</tr>
<tr>
<td width = 50%>
웹 페이지는 브라우저에 HTML% 문서임을 알리기 위해 <strong>그림 1-3</strong>과 같은 코드를 첫 라인에 삽입하여야 한다.
</td>
<td>
<figure>
<code>
<!doctype html><br>
<html><br>
…<br>
</html><br>
</code>
<figcaption>
HTML5 문서 구성
</figcaption>
</figure>
</td>
</tr>
</table>
</body>
</html>
|
cs |
[<section>로 코드] :
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3장_2_실습문제_section답</title>
<style>
section{
float: left;
width: 50%;
}
</style>
</head>
<body>
<h1>웹 브라우저</h1>
<hr>
<section>
<p>브라우저라고 불리기도 하는 웹브라우저(Web Browser)는, 사용자에게 웹 서버 컴퓨터에 접속하고 웹 페이지, 이미지, 동영상, 음악 등 다양한 데이터 다운받아 보여주는 소프트웨어이다. <strong>그림1-2</strong>는 대표적인 Chrome 웹 브라우저를 보여준다.</p>
</section>
<section>
<figure>
<img src="Chrome.jpg" width="300px" height="350px">
<figcaption>
그림 1-2 Chrome화면
</figcaption>
</figure>
</section>
<section>
<p> 웹 페이지는 브라우저에 HTML% 문서임을 알리기 위해 <strong>그림 1-3</strong>과 같은 코드를 첫 라인에 삽입하여야 한다.</p>
</section>
<section>
<figure>
<code>
<!doctype html><br>
<html><br>
…<br>
</html><br>
</code>
<figcaption>
HTML5 문서 구성
</figcaption>
</figure>
</section>
</body>
</html>
|
cs |
#출력장면 :
[문제3] :
#알아야 할 개념 :
- < fieldset > -- </ fieldset > 특정 웹폼 들을 묶음 단위로 틀을 만들어주는 태그
- <filedset> : 틀 구분선 + <legend> 특정 웹폼 틀의 제목 </legend>
- ★웹폼을 만들 때, 항상 <label>로 한묶음 하는 습관 들이기
#코드 :
|
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 lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 폼 만들기</title>
</head>
<body>
<h2>로그인 폼</h2>
<hr>
<fieldset>
<legend>Login</legend>
<form>
<label>
Username <input type="text" size="10">
</label>
<label>
Password <input type="password" size="10">
</label>
</form>
</fieldset>
</body>
</html>
|
cs |
#출력장면 :
[문제4] :
#알아야 할 개념 : X
#코드 :
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>웹 프로그래밍 개요</title>
</head>
<body>
<h2>웹 프로그래밍 개요</h2>
<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>
|
cs |
#출력장면 :
[문제5] :
#알아야 할 개념 : X
#코드 :
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>도형 서식 폼 만들기</title>
</head>
<body>
<h2>도형 서식 폼 만들기</h2>
<hr>
<fieldset>
<legend>도형 서식 입력</legend>
<form>
<label>
선종류
<select name = "선종류" size="3">
<option value="1">선없음</option>
<option value="2">실선</option>
<option value="3">점선</option>
</select>
</label>
<br>
<label>
선두께
<input type="number" step="0.5" min = "0" value="2.5">
</label>
<label>
선색
<input type="color" value="#2EC2B8"
onchange=""
>
</label>
<br>
<label>
투명도(0~100) :
<input type="range" min="0" max="100" value="50" list="투명도">
<datalist id="투명도">
<option value="10" label="LOW">
<option value="50" label="MEDIUM">
<option value="90" label="HIGH">
</option>
</label>
</form>
</fieldset>
</body>
</html>
|
cs |
#출력장면 :
'웹프로그래밍 > 웹프로그래밍수업' 카테고리의 다른 글
| (18)명품 웹프로그래밍 4장_CSS_1 (1) | 2024.09.28 |
|---|---|
| (17)명품 웹프로그래밍 3장_Open Challenge문제 (2) | 2024.09.23 |
| (15)[부록]명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_<input>외의 웹폼 정리 (0) | 2024.09.23 |
| (14)명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_5 (0) | 2024.09.22 |
| (13)명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_4 (2) | 2024.09.22 |
