#이전 4장_Open Challenge문제 이어서 작업
○ 나의 코드 :
● [Main.css] :
|
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
|
@font-face {
font-family: '휴먼편지체';
src: url('휴먼편지체.TTF') format('truetype');
}
body{
background-color: aliceblue;
}
h1{
color:brown;
text-align: center;
}
h3{
color : blue;
text-shadow: 2px 2px 5px skyblue;
}
a{
text-decoration: none;
}
ul{
border: dotted 1px black;
}
p{
text-indent: 1em;
font-size : 1em;
font-family: '휴먼편지체' , sans-serif;
}
header{
border-bottom: solid 1px black;
}
footer{
background-color: orange;
border-radius: 20px;
text-indent: 1em;
}
|
cs |
● [Survey.css] :
|
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
|
@font-face {
font-family: '휴먼편지체';
src: url('휴먼편지체.TTF') format('truetype');
}
h1{
text-align: center;
color : brown;
}
section{
background-color: palevioletred;
}
strong {
color : blue;
}
header>hr{
border-width: 2px;
border-color: white;
}
section > hr{
border-width: 1px;
border-color: white;
}
form{
padding-left: 3%;
}
p{
font-family: '휴먼편지체' , sans-serif;
}
label{
font-family: '휴먼편지체',sans-serif;
}
footer{
background-color: orange;
border-radius: 20px;
text-indent: 1em;
}
|
cs |
● [Main.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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>컴퓨터 기술 소개</title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h1>스마트폰</h1>
<p>
스마트폰은 컴퓨터를 결합한 무선 휴대전화기기이다. PC에서 실행되는 운영체제보다 적게 만든 모바일 운영체제를 탑재하며 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
</p>
<br>
<audio src="애국가(1절).mp3" controls>
<br>
</header>
<hr>
<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>
<nav>
<a id="Survey_link" href="survey.html" target="_blank">설문조사</a>
</nav>
<p><small><strong>Copyright 2022 by Kitae</strong></small></p>
</footer>
</body>
</html>
|
cs |
● [Survey.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
80
81
82
83
84
85
86
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>소프트웨어 기술 선호에 관한 설문지</title>
<link href="survey.css" type="text/css" rel="stylesheet">
</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>
<strong>관심분야</strong>
<label>
<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>
<hr>
<form>
<table>
<tr>
<td style="padding-top: 61%;"><strong>남기고 싶은 말</strong></td>
<label>
<td><textarea cols="50" rows="20" placeholder="글을 남겨주세요."></textarea></td>
</tr>
</label>
</table>
</form>
</section>
<footer>
<p>
<strong style="color:black">Copyright 2022 by Kitae</strong>
</p>
</footer>
</body>
</html>
|
cs |
○ 복습 필요한 개념 :
1_ <link>태그의 속성과 속성값 (3가지) :
○ 나의 코드 :
● [Main.css] :
|
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
|
html, body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background: yellow;
width: 100%;
height: 20%;
float: left;
}
nav.list {
display: block;
background: orange;
width: 15%;
height: 72%; /* Adjusted height to 72% based on the image */
float: left;
}
section {
background: lightblue;
width: 85%;
height: 72%; /* Adjusted height to 72% based on the image */
float: left;
}
footer {
background: violet;
width: 100%;
height: 8%; /* Adjusted height to 8% based on the image */
float: left;
}
|
cs |
● [Survey.css] :
|
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
|
@font-face {
font-family: '휴먼편지체';
src: url('휴먼편지체.TTF') format('truetype');
}
html, body {
margin : 0;
padding : 0;
height: 100%;
}
header{
background-color: yellow;
width : 100%;
height : 20%;
float : 100%;
}
h1 {
text-align: center;
color: brown;
}
section {
background-color: palevioletred;
}
strong {
color: blue;
}
header>hr {
border-width: 2px;
border-color: white;
}
section>hr {
border-width: 1px;
border-color: white;
}
form {
padding-left: 3%;
width: 100%; height: 70%;
}
p {
font-family: '휴먼편지체', sans-serif;
}
label {
font-family: '휴먼편지체', sans-serif;
}
footer {
background-color: purple;
text-indent: 1em;
background: violet;
width: 100%; height: 15%;
}
|
cs |
● [Main.html] : 변동 X
● [Survey.html] : 변동 X
# 출력 장면 :
'웹프로그래밍 > 웹프로그래밍수업' 카테고리의 다른 글
| (30)명품 웹프로그래밍_6장_자바스크립트언어_2 (0) | 2024.10.13 |
|---|---|
| (30)명품 웹프로그래밍_6장_자바스크립트언어_1 (0) | 2024.10.12 |
| (28)명품 웹프로그래밍_5장_실전문제 (2) | 2024.10.12 |
| (27)명품 웹프로그래밍_5장_CSS3고급활용_3(출력장면은 없음 직접 코드 넣어서 해봐야 됨) (0) | 2024.10.08 |
| (26)명품 웹프로그래밍_5장_CSS3고급활용_2(작성중) (3) | 2024.10.07 |
