-
Notifications
You must be signed in to change notification settings - Fork 0
/
html기본.html
324 lines (298 loc) · 13.3 KB
/
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
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html기초</title>
<style>
body {
line-height: 1.618rem;
}
section {
margin: 3rem;
}
p {
width: 60%;
text-align: justify;
}
ol {
padding: 0 20px;
}
ol li {margin:2rem 0;}
ol li table {margin:0.7rem 0;}
ol li ul {padding:15px;}
ol li ul li {margin:5px 0; font-size:0.9rem;}
table {
border-collapse: collapse;
line-height: 2rem;
width:60%;
}
th,
td {
border: 1px solid #000;
}
p span {
text-decoration: underline;
}
</style>
</head>
<body>
<section>
<h1>HTML이란</h1>
<p><strong>HyperText Markup Language</strong><br>
HyperText:링크를 의미, MarkUp: 한글자 한글자 타이핑하여 완성하는 언어
<br>한글자 한글자 입력하여 문서를 만들고 그 문서들을 연결한다는 뜻
<br><span>문서를 링크로 연결하는 것을 목적으로 만들어진 언어
</span>
</p>
</section>
<section>
<h1>Markup이란</h1>
<p>문서의 일부를 '태그(Tag)'라 불리는 특별한 문자열로 둘러쌈으로서 문장의 구조(제목, 목차, 문단, 링크 등), 수식
정보(문자의 크기, 색상, 위치등)를 문장 안에 기술하는 모든 것.
<br>Markup 은 문서 및 데이터의 구조를 표현하는 것. 웹 문서의 콘텐츠를 기술하는 언어이다.
</p>
</section>
<section>
<h1>HTML 태그</h1>
<ul>
<li>HTML 태그는 시작 태그, 콘텐츠, 종료 태그로 구성된다.</li>
<li>시작 태그 안에는 다양한 속성(Attribute)와 값(value)을
통해 해당 태그의 기능을 추가하고 이름 및 제목 등의 부가정보를 추가할 수 있다.</li>
<li>종료태그에는 태그명 앞에 슬래시(/)가 있다.</li>
<li>시작 태그와 종료 태그까지 전체를 요소(element)라고 부른다.</li>
</ul>
</section>
<section>
<h1>DTD선언 </h1>
<p>
<strong>DTD(Document Type Declaration)</strong><br>
HTML 문서를 해석하여 화면에 출력하는 브라우저에게 해당 웹페이지 문서 종류를 알려주는 선언문. 작성한 태그의 내용을 브
라우저에서 올바르게 화면에 표시(rendering)하기 위해 반드시 필요한 부분이다.
</p>
<p>
DTD 가 선언하지 않거나 잘못 선언된다면 브라우저는 호환 모드(Quirks mode)로 웹페이지를 해석해서 표시를 한다.
호환 모드로 해석을 하면 웹 브라우저들마다 화면을 표시하는 방식이 달라서 브라우저 호환성을 확보하기 어렵다.
브라우저 호환성이란 하나의 HTML 문서를 해석하여 화면에 표시할 때 그 모양과 기능이 모두 동일해야 한다는 것이다.
즉, DTD 선언이 제대로 되지 않으면 브라우저별로 화면이 다르게 표현될 수 있다.
<br>
DTD 는 크게 HTML4, XHTML, HTML5 로 나눌수 있고, 각
타입별로 사용할 수 있는 태그들의 종류와 규칙등을 구분하여 선언할 수 있다.
</p>
<pre>참조: https://www.w3schools.com/tags/ref_language_codes.asp</pre>
</section>
<section>
<h1>언어설정 </h1>
<p>
lang 속성의 값으로는 각 언어의 ISO 코드를 작성한다.
</p>
<table>
<tbody>
<tr>
<td>한국어</td>
<td>
html lang="ko"
</td>
</tr>
<tr>
<td>영어</td>
<td>
html lang="en"
</td>
</tr>
<tr>
<td>중국어</td>
<td>
html lang="zh"
</td>
</tr>
<tr>
<td>일본어</td>
<td>
html lang="ja"
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h1>문자 캐릭터셋</h1>
<p>
charset 속성은 <span>해당 HTML 문서의 문자 인코딩 방식을 브라우저에게 알려준다.</span>
문자 캐릭터셋이 문서의 인코딩 방식과 다르게 지정되어 있으면 브라우저 화면에서 글자들이 깨져 나오는 상황이 발생한다.
<br>현재 VS code 프로그램의 글자를 입력하는 방식이 utf-8 이고 head 태그에 작성한 meta 태그에도 utf-8 . 현재 코드를 작성하고
있는 프로그램에서 글씨를 표현하는 방식이 utf-8 으로 하고 있으니 이 파일을 해석해서 브라우저 화면에 보여줄
크롬 브라우저에게도 그 형식대로 화면에 표시를 해라 라는 뜻이다.
</p>
</section>
<section>
<h1>입력 주의사항</h1>
<ul>
<li>
자식요소들은 들여쓰기(indentation)가 되어 있어야 한다.들여쓰기는
space bar 가 아니라 키보드의 tab 을 눌러 만든다.
참고로 탭키를 눌렀을 때 생성되는 탭의 크기는 기본적으로
space 4 개입니다. 해당 값은 설정에서 변경할 수 있다.
</li>
<li>특수문자는 그대로 사용하면 안 되고 엔터티코드로 입력해야 한다.
<pre> 참조: https://entitycode.com/#featured-content</pre>
</li>
</ul>
</section>
<section>
<h1>viewport</h1>
<p>
meta name="viewport" content="width=device-width, initial-scale=1"<br>
Viewport 는 웹페이지를 해석해서 화면에 표현하는 기기가 모니터이든, 태블릿,
스마트폰이든 해당 웹페이지를 보여주는 화면 영역을 말한다. width=device-width,
initial-scale=1.0 는 웹페이지의 너비를 기기의 너비에 맞춰
100%로 맞춰 보여주라는 뜻이다. 해당 설정이 없으면 PC 모니터의 웹페이지이 화면이 그대로 축소되어
스마트기기에 보이게 되어 보기 불편한 사이트가 되고, 뷰포트 설정이 있으면 스마트기기에 맞춰 화면을
보여준다.
</p>
<p>Viewport 설정이 없는 경우 스마트기기에서 접속시 글자 및 이미지가 기기에 최적화되지 않고 작게 보이고,
설정이 있는 경우는 화면의 너비에 맞춰 최적화되어 있다.</p>
</section>
<section>
<h1>HTML convention</h1>
<p>
마크업 개발자가 소스 코드 작성 시에 따라야 할 규칙을 기술한다. 일부는 웹표준에 정한 것은 아니지만
그렇게 작성하는 것이 모든 개발자에게 통용되는 관례인 것도 있다.
</p>
<h3>네이밍 규칙</h3>
<p>네이밍 규칙은 레이아웃, 객체, 이미지, 폴더, 파일의 이름을 작성하는 규칙이다. 이해하기 쉬운 이름으로
작성해야 코드를 쉽게 파악할 수 있다.</p>
<ol>
<li><strong>공통 네이밍 규칙 예</strong>
<table>
<thead>
<tr>
<th>잘못된 예</th>
<th>올바른 예</th>
</tr>
</thead>
<tbody>
<tr>
<td>Btn</td>
<td>btn</td>
</tr>
<tr>
<td>2btn</td>
<td>btn2</td>
</tr>
<tr>
<td>_btn</td>
<td>btn</td>
</tr>
<tr>
<td>btn_</td>
<td>btn</td>
</tr>
</tbody>
</table>
<ul>
<li>영문 소문자, 숫자, 언더스코어(_)만 사용할 수 있다.
</li>
<li> 언더스코어(_)는 단어와 단어 조합할 때만 사용한다.
</li>
<li>언더스코어(_)가 포함된 약속어는 숫자, 영문 소문자와 조합하여 사용할 수 있다.
</li>
</ul>
<table>
<thead>
<tr>
<th>잘못된 예</th>
<th>올바른 예 예</th>
</tr>
</thead>
<tbody>
<tr>
<td>sectionLis</td>
<td>section_list</td>
</tr>
<tr>
<td></td>
<td>no1, no2, no3 …. no10</td>
</tr>
</tbody>
</table>
</li>
<li><strong>레이아웃 약속어</strong>
<table>
<thead>
<tr>
<th>약속어 범위</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>#wrap</td>
<td>페이지 전체 영역</td>
</tr>
<tr>
<td>#header</td>
<td>머리글 영역 </td>
</tr>
<tr>
<td>#container</td>
<td>본문 영역 </td>
</tr>
<tr>
<td>#content</td>
<td>주요 콘텐츠 영역 </td>
</tr>
<tr>
<td>#footer</td>
<td>바닥글 영역 </td>
</tr>
</tbody>
</table>
</li>
<li>
<strong>이미지 네이밍 규칙</strong><br>
<table>
<thead>
<tr>
<th>잘못된 예</th>
<th>올바른 예</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>on_recommend_tab1</td>
<td>tab1_recomm_on</td>
<td>형태_의미_상태</td>
</tr>
<tr>
<td>bnm.gif</td>
<td>btn_naver_maiil.gif</td>
<td>임의로 축약하지 않는다</td>
</tr>
<tr>
<td>btn_Search.gif</td>
<td>btn_srch.gif</td>
<td>소문자를 사용</td>
</tr>
<tr>
<td>1btn_search.gif </td>
<td>btn_srch.gif </td>
<td>숫자로 시작하지 않는다</td>
</tr>
</tbody>
</table>
</li>
</ol>
<pre>https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pd</pre>
</section>
<section>
<h3> HTML 요소 작성 규칙</h3>
<p>
HTML 요소 작성 규칙은 반드시 선언해야 하는 애트리뷰트와 선택적 사용이 가능한 애트리뷰트에 대한
내용을 기술한다. 특정 요소에 class, style 을 선언할 때는 선언 순서를 준수한다.class 와
style 은 제일 뒷부분에 선언한다.
</p>
</section>
</body>
</html>