이제 막 기본적인 태그를 배웠을 뿐인데, 책에 나와있는 페이지와 똑같이 만들어보라는 선생님의 요구에 이틀 걸려 처음으로 블로그 화면을 구현해 보았다. 메인 사진은 다니엘 헤니 사진을 사용했지만 저작권 문제가 생길 지 모르므로 검은 색으로 가렸다.
<화면>
촌스러운 느낌도 있지만, 책에 나온 그대로 구현한 화면이다.
<사용 코드>
|
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.bar{
width: 250px;
background-color: #cacaca;
float: left;
}
.pic{
height: 350px;
margin-bottom: 50px;
padding: 30px;
}
.f1 {
font-size: 0.8em;
line-height: 20px;
}
.let{
height: 350px;
margin-top: 50px;
padding: 30px;
}
.container{
width: 500px;
height: 800px;
margin-left: 20px;
float: left;
}
.sec1{
line-height: 27px;
border-bottom: 2px dotted black;
padding: 30px;
}
.sec2{
border-bottom: 2px dotted black;
padding: 30px;
}
.sec3{
border-bottom: 2px dotted black;
padding: 30px;
}
.sec4{
border-bottom: 2px dotted black;
padding: 30px;
}
li {
font-size: 0.8em;
line-height: 30px;
}
table {
width: 400px;
height: 50px;
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
.t1{
background-color: #e6e3e6;
}
</style>
</head>
<body>
<div class="bar">
<div class="pic">
<h2>Henny</h2>
<p class="f1">오늘은 남은 인생이 시작되는 첫째날</p>
</div>
<div class="let">
<p>jeju, Korea</p>
<br>
<h3>SNS</h3>
<p>facebook twitter</p>
</div>
</div>
<div class="container">
<div class="sec1">
<h2>Who am I?</h2>
<p><mark>프런트엔드 웹 기술(Front-end Web Tech.)</mark>에 관심이 많습니다.<br>
현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</div>
<div class="sec2">
<h2>Experience</h2>
<ul>
<li>프론트엔드 개발</li>
<ul>
<li>업무 내용 업무 내용 업무 내용</li>
<li>업무 내용</li>
<li>업무 내용 업무 내용</li>
</ul>
<li>웹 디자인</li>
<ul>
<li>업무 내용</li>
<li>업무 내용 업무 내용</li>
</ul>
</ul>
</div>
<div class="sec3">
<h2>Skills</h2>
</div>
<div class="sec4">
<h2>Education</h2>
<table>
<caption>학력 사항</caption>
<thead>
<tr class="t1">
<th>출신학교</th>
<th>전공</th>
<th>기간</th>
<th>구분</th>
</tr>
<thead>
<tr>
<td>ㅁㅁ대학교</td>
<td>컴퓨터공학</td>
<td>2004.3 ~ 2008.2</td>
<td>졸업</td>
</tr>
</table>
</div>
</div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
선생님은 화면을 나눌 때 테이블을 사용하면 편하다고 말씀하셨지만, 개인적으로 div가 가장 유용하다고 생각한다. 정말 아무것도 모르는 상태에서 무작정 만들어보았지만, 화면의 영역 나누기, 배치 등 아직 배우지 않은(...) 화면 구현의 구조적인 개념을 확실히 이해할 수 있었다.
'20.03 ~ 20.08 국비교육 > HTML・CSS' 카테고리의 다른 글
| html/css 2. 회원가입 페이지 (0) | 2020.04.16 |
|---|---|
| EditPlus 설치 및 html의 기초 (0) | 2020.04.13 |