#이전 2장_Open Challenge문제 이어서 작업
○ 이전 코드 :
|
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
66
67
68
69
70
71
72
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>컴퓨터 기술 소개</title>
</head>
<body>
<header>
<h1>스마트폰</h1>
<p>
스마트폰은 컴퓨터를 결합한 무선 휴대전화기기이다. PC에서 실행되는 운영체제보다 적게 만든 모바일 운영체제를 탑재하며 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
</p>
<br>
<audio src="애국가(1절).mp3" controls>
</header>
<nav>
<h3>목차</h3>
<ul>
<li><a href="#History">역사</a></li>
<li><a href="#Android">안드로이드폰</a></li>
<li><a href="#Iphone">아이폰</a></li>
<li><a href="">샘플</a></li>
</ul>
</nav>
<section>
<article id="History">
<h3><a href="https://ko.wikipedia.org/wiki/스마트폰" target="_blank">역사</a></h3>
<p>
최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.
</p>
</article>
<article id="Android">
<h3><a href="https://ko.wikipedia.org/wiki/안드로이드_(운영체제)"`target="_blank">안드로이드</a></h3>
<p>
안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.
</p>
</article>
<article id="Iphone">
<h3><a href="https://ko.wikipedia.org/wiki/아이폰" target="_blank">아이폰</a></h3>
<p>
아이폰(영어 : iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다.
</p>
</article>
<article>
<h3>샘플</h3>
<table>
<caption><h4>스마트폰샘플</h4></caption>
<tr>
<td>
<img src="갤럭시.jpg" width="150" height="200">
</td>
<td>
<img src="노키아.jpg" width="150" height="200">
</td>
<td>
<img src="아이폰.jpg" width="150" height="200">
</td>
<td>
<img src="블렉베리.jpg" width="150" height="200">
</td>
<td>
<img src="LG스마트폰.jpg" width="150" height="200">
</td>
</tr>
</table>
</article>
</section>
<footer>
<small><strong>Copyright 2022 by Kitae</strong></small>
</footer>
</body>
</html>
|
cs |
○ 복습 필요한 개념 :
- <a>태그의 target 속성값 : _blank , _self , _top , _parent
- blank : 새로운 윈도우 창에 링크 사이트 출력
- self : 현재 윈도우 창에 링크 사이트 출력
- top : 가장 상위 윈도우창에 링크 사이트 출력
- parent : 링크가 있는 창의 직전 상위 윈도우에 링크 사이트 출력
- VSCODE로 Live Server를 [Chorme]으로 들어가게 셋팅 법 :
1_ 맨 위 탭의 [ 파일 ] => [ 기본 설정 ] => [ 설정 ]
2_ 설정창 맨위 [ 사용자 ] => 그 메뉴 중 맨아래 [ 확장 ]
3_ [ Live Server Config ] => [Settings Custom Browser] 에서 Chrome으로 수정한다.
#3장_Open Challenge문제
○ 요구사항 :
<footer>부분에 설문조사 링크를 하나 더 추가하여, 새로운 윈도우창에 사진과 같이 출력되도록 설문조사 페이지를 html문서를 작성하시오.
○ 나의 코드 :
[본페이지.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
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
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>컴퓨터 기술 소개</title>
</head>
<body>
<header>
<h1>스마트폰</h1>
<p>
스마트폰은 컴퓨터를 결합한 무선 휴대전화기기이다. PC에서 실행되는 운영체제보다 적게 만든 모바일 운영체제를 탑재하며 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
</p>
<br>
<audio src="애국가(1절).mp3" controls>
</header>
<nav>
<h3>목차</h3>
<ul>
<li><a href="#History">역사</a></li>
<li><a href="#Android">안드로이드폰</a></li>
<li><a href="#Iphone">아이폰</a></li>
<li><a href="">샘플</a></li>
</ul>
</nav>
<section>
<article id="History">
<h3><a href="https://ko.wikipedia.org/wiki/스마트폰" target="_blank">역사</a></h3>
<p>
최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.
</p>
</article>
<article id="Android">
<h3><a href="https://ko.wikipedia.org/wiki/안드로이드_(운영체제)"`target="_blank">안드로이드</a></h3>
<p>
안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.
</p>
</article>
<article id="Iphone">
<h3><a href="https://ko.wikipedia.org/wiki/아이폰" target="_blank">아이폰</a></h3>
<p>
아이폰(영어 : iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다.
</p>
</article>
<article>
<h3>샘플</h3>
<table>
<caption><h4>스마트폰샘플</h4></caption>
<tr>
<td>
<img src="갤럭시.jpg" width="150" height="200">
</td>
<td>
<img src="노키아.jpg" width="150" height="200">
</td>
<td>
<img src="아이폰.jpg" width="150" height="200">
</td>
<td>
<img src="블렉베리.jpg" width="150" height="200">
</td>
<td>
<img src="LG스마트폰.jpg" width="150" height="200">
</td>
</tr>
</table>
</article>
</section>
<footer>
<br>
<nav>
<a href="3_survey3.html" target="_blank">설문조사</a>
</nav>
<br>
<small><strong>Copyright 2022 by Kitae</strong></small>
</footer>
</body>
</html>
|
cs |
[설문조사.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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>소프트웨어 기술 선호에 관한 설문지</title>
</head>
<body>
<header>
<h1>설문지</h1>
<p>
소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.
</p>
<hr>
</header>
<section>
<form>
<strong>학년</strong>
<label>
<input type="radio" name="학년" value="1"> 1학년
</label>
<label>
<input type="radio" name="학년" value="2"> 2학년
</label>
<label>
<input type="radio" name="학년" value="3"> 3학년
</label>
<label>
<input type="radio" name="학년" value="4"> 4학년
</label>
</form>
<br>
<form>
<strong>성별</strong>
<label>
<input type="radio" name="성별" value="1"> 남
</label>
<label>
<input type="radio" name="성별" value="2"> 여
</label>
</form>
<form>
<label>
<strong>관심분야</strong>
<select name="관심" size="1" >
<option value="1">종자</option>
<option value="2" selected>모바일 소프트웨어</option>
<option value="3">^-^</option>
</select>
</label>
</form>
<form>
<strong>진로</strong>
<label>
<input type="checkbox" value="1" checked>개발
</label>
<label>
<input type="checkbox" value="2">기획
</label>
<label>
<input type="checkbox" value="3">영업
</label>
<label>
<input type="checkbox" value="4">개발
</label>
</form>
<form>
<label>
<strong>남기고 싶은 말</strong><br>
<textarea cols="50" rows="20" placeholder="글을 남겨주세요."></textarea>
</label>
</form>
</section>
<footer>
<p>
Copyright 2022 by Kitae
</p>
</footer>
</body>
</html>
|
cs |
○ 츨력장면 :
- 본 페이지
- 설문조사 페이지 :
#문제풀면서 의문 드는 점 :
- 웹폼 1개당 => <label>을 감싸는 건가요?
- 학년 | 성별 | 관심분야 | 진로 | 남기고 싶은말 5개 항목의 설문조사가 있으므로, => 5개<form>으로 감싸야 하나? 아니면 <form> 딱 하나로 전부 감싸는 걸까?
'웹프로그래밍 > 웹프로그래밍수업' 카테고리의 다른 글
| (19)명품 웹프로그래밍 4장_CSS_2 (1) | 2024.09.28 |
|---|---|
| (18)명품 웹프로그래밍 4장_CSS_1 (1) | 2024.09.28 |
| (16)명품 웹프로그래밍 3장 실습문제 (0) | 2024.09.23 |
| (15)[부록]명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_<input>외의 웹폼 정리 (0) | 2024.09.23 |
| (14)명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_5 (0) | 2024.09.22 |
