-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTML.html
220 lines (180 loc) · 7.42 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 프로그래밍 정리</title>
<!--<title>태그는 <head>내부에서 정의되어야한다.-->
</head>
<body>
<h1 id="top">Hello, Web!</h1>
<h3>Web Programming 스터디를 위한 정리용 html문서입니다</h3>
<p>작성한 코드는 https://html5.validator.nu/ 에서 검사할 수 있습니다.</p><br>
<a href="HTML_webform.html">다음 문서로 넘어가기</a>
<hr>
<h2>Hmtl페이지의 기본</h2>
<h3>h<h1>~<h6>태그로 문단 제목 달기</h3>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<hr>
<h3 title="h3태그로 작성했습니다.">title속성으로 tooltip달기</h3>
<p title="title속성을 사용해 tooltip을 팝업할 수 있습니다.">
마우스를 올려보세요.</p>
<hr>
<h3><p>태그로 단락 나누기</h3>
<p>
HTML 문서에서 <p>태그를 사용해 본문을 여러 단락으로 나눌 수 있다.</p>
<p>
여러 개의 빈 칸은 하나로 취급되며,
엔터 키 역시 하나의 빈 칸으로 처리된다.</p>
<hr>
<h3><hr>태그로 수평선 긋기</h3>
종료태그 </hr>를 사용하지 않는다.
<hr>
<h3><br>태그로 줄 넘어가기</h3>
C언어에서의 \n과 같이<br>
<br>태그를 사용해 줄을 넘어갈 수 있다.<br><br>
2개의 <br>태그를 사용하면 두 줄을 넘어간다.
<hr>
<h3>특수문자 삽입</h3>
예약어, 기호등은 엔터티표현을 통해 입력합니다.<br><br>
예시<br>
<>∞&등
<hr>
<h3>개발자 포맷 그대로 출력하기</h3>
<p>
<p> 태그를 사용하면
여러 개의 빈 칸은 하나로,
여러 줄은 한 줄에 붙여 출력됩니다.</p>
<pre>
그러나 <pre> 태그를 사용하면
사용자가 입력한
그대로 출력됩니다.</pre>
<hr>
<h3>텍스트 꾸미기</h3>
<b title="<b>">진하게</b><br>
<strong title="<strong>">중요한</strong> <br>
<i title="<i>">이탤릭으로 강조</i> <br>
<b title="<b><i>"> <i>진하게 이탤릭으로 강조</i> </b> <br>
보통 문자 <small title="<small>">한 단계 작은 문자</small> <br>
<del title="<del>">삭제</del> <br>
<ins title="<ins>">추가</ins> <br>
보통문자의 <sup title="<sup>">윗첨자</sup> <br>
보통문자의 <sub title="<sub>">아래첨자</sub> <br>
<mark title="<mark>">하이라이팅</mark> <br>
<hr>
<h2>블록태그와 인라인 태그</h2>
태그는 블록 태그와 인라인 태그로 구분할 수 있다.<br>
<b>블록 태그</b><br>
-항상 새 라인에서 시작하여 출력<br>
-양 옆에 다른 콘텐트를 배치하지 않고 한 라인 독점 사용<br>
-가장 많이 사용되는 블록 태그 : <div><br>
<b>인라인 태그</b><br>
-블록 속에 삽입되어 블록의 일부로 출력<br>
-가장 많이 사용된 인라인 태그 : "<strong>, <A>, <IMG>, <SPAN>"
<hr>
<h3><DIV>블록과 <SPAN>인라인</h3>
<div style="background-color:skyblue; padding:20px;">
<DIV>태그는 특별한 의미 없이, 하나의 블록을 생성한다. 블록은 CSS로 디자인할 수 있다.<br>
<span style="color:red"><SPAN></span>태그는 텍스트 일부분만 영향을 준다. 또는, <span style="color:white">자바스크립트</span>로 텍스트 일부분을 제어한다.
</div>
<hr>
<h3><IMG>태그로 이미지 삽입하기</h3>
이미지는 HTML 파일이 있는 경로 아래 media 폴더를 만들고 그 곳에 두면 된다.<br>
<img src="media\IMG_Tag.png" alt="<IMG>">
<hr>
<h3>리스트 만들기</h3>
리스트의 종류 3가지
<dl>
<dt><strong title="ordered list"><OL></strong>
<dd><ol>
<li>순서</li>
<li>있는</li>
<li>리스트</li>
</ol>
<dt><strong title="unordered list"><UL></strong>
<dd><ul>
<li>순서</li>
<li>없는</li>
<li>리스트</li>
</ul>
<!--"</li>"태그는 생략 가능-->
<dt><strong title="definition list"><DL></strong>
<dd><dl>
<dt><strong>정의 리스트</strong>
<dd>용어와 설명을 하나의 아이템으로 처리
</dl>
</dl>
<hr>
<h3><TABLE>로 표 만들기</h3>
<table border="1">
<caption>표 만드는데 사용되는 태그들</caption>
<thead>
<tr><th>태그</th><th>설명</th><th></th></tr>
</thead>
<tfoot>
<tr><th colspan="3">colspan 속성을 사용해 가로셀을 합병할 수 있다.</th></tr>
</tfoot>
<tbody>
<tr><td><table></td><td>표 전체를 담는 컨테이너</td><th rowspan="8">rowspan<br>사용해<br>세로셀을<br>합병</th></tr>
<tr><td><caption></td><td>표 제목</td></tr>
<tr><td><thead></td><td>헤딩 셀 그룹</td></tr>
<tr><td><tfoot></td><td>바닥 셀 그룹</td></tr>
<tr><td><tbody></td><td>데이터 셀 그룹</td></tr>
<tr><td><tr></td><td>행. 여러 <td>, <th>포함</td></tr>
<tr><td><th></td><td>열 제목(헤딩) 셀</td></tr>
<tr><td><td></td><td>데이터 셀</td></tr>
</tbody>
</table>
<hr>
<h3>하이퍼링크 만들기, <A></h3>
<strong><A>태그의 HREF속성을 이용하여 하이퍼링크 작성</strong><br>
<a href=“picturepage.html”>같은 웹사이트에 있는 웹 페이지 연결(구현 요망)</a><br>
<a href="https://www.naver.com">네이버</a><br>
<a href="https://www.google.com"><img src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" width="300" height="100" alt="구글로고"></a>
<h4>-앵커 만들기</h4>
<dl>
<dt><b>앵커란?</b>
<dd>HTML페이지 내의 특정 위치<br><a>태그의 href="#앵커이름" 속성으로 앵커에 연결
</dl>
<a href="#top" title="문서 상단의 Hello Web을 id="top"으로 지정">Top으로 이동</a>
<h4>-파일 다운로드 링크 만들기</h4>
<a>태그의 download속성으로 파일을 다운로드할 수 있는 링크를 만든다.<br>
<a href="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" download>구글 로고 다운</a>
<hr>
<h3>인라인 프레임, <IFRAME></h3>
HTML페이지 내에 다른 HTML페이지를 삽입한다.<br>
<ul>
<li><IFRAME>는 <BODY>안에서만 사용</li>
<li>src속성이 생략될 경우 IFRAME영역만 생성되고 빈 공간</li>
<li>srcdoc속성을 사용해 출력할 HTML텍스트를 직접 작성할 수 있다.<br>
->이 경우 src속성은 무시된다.</li><br>
<iframe src="iframe1.html" width="200" height="150">
</iframe>
<iframe src="iframe2.html" width="200" height="100">
</iframe>
<hr>
<h3>미디어 삽입</h3>
<ul><strong><VIDEO>태그</strong>
<li>width, height : 비디오가 재생될 공간의 크기 지정
<li>controls : 이 속성이 설정되면 재생시간, 중단, 음소거 등 제어버튼 출력
<li>autoplay : 이 속성이 설정되면 비디오 로딩 후, 즉시 재생
<li>loop : 이 속성이 설정되면 반복 재생
<li>muted : 오디오를 끌 때 사용
</ul>
<video src="https://youtu.be/bQs3I6cMQUI" controls>
링크된 동영상이 존재하지 않습니다.
</video>
<ul><strong><AUDIO>태그</strong>
<li>controls : 재생, 중단, 음소거 등 제어버튼 출력</li>
<li>autoplay : 오디오 로딩 후, 즉시 재생</li>
<li>loop : 반복 재생</li>
</ul>
<audio src="media\08. REVIVER.mp3" controls>
음악 파일이 존재하지 않습니다.
</audio>
</body>
</html>