-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwithout.html
More file actions
142 lines (115 loc) · 7.86 KB
/
without.html
File metadata and controls
142 lines (115 loc) · 7.86 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head는 안 보이는 것들을 달아줍니다. -->
<meta charset="UTF-8">
<title>브라우저 위에 뜨는 내용</title>
<style>
#paragraph {
color :red;
}
</style>
</head>
<body>
<!-- ctrl + / : 주석을 답니다 -->
<!-- 공부용으로 주석을 달려고 알려드리는건데요
회사에도 주석 엄청 많이 씁니다.
혼자 개발을 하는 게 아니니까요.
그리고 자기를 믿을 수 없으니까요. -->
기본 태그 구조 <br>
html은 여는 태그와 닫는 태그로 구성되어 있습니다<br>
그냥 태그 하나로만 된 태그들도 있습니다. <br><br>
<p>h 태그는 제목을 달아줍니다.</p>
<h1>여기</h1>
<h2>여기</h2>
<h3>여기</h3>
<h4>여기</h4>
<h5>여기</h5>
<h6>여기</h6>
<h7>여기</h7>
<h8>여기</h8>
<hr>
부모와 자식 태그<br>
<pre>
<부모태그>
<자식1태그> </자식1태그>
<자식2태그> </자식2태그>
<자식3태그> </자식3태그>
</부모태그>
</pre>
<!-- unordered list -->
<ul>
<li> 딸기 </li>
<li> 귤 </li>
<li> 바나나 </li>
</ul>
<!-- ordered list -->
<ol>
<li> 딸기 </li>
<li> 귤 </li>
<li> 바나나 </li>
</ol>
<!-- Description List t-term, d-description-->
<dl>
<dt>딸기</dt>
<dd>11</dd>
<dt>바나나</dt>
<dd>11</dd>
<dt>귤</dt>
<dd>11</dd>
</dl>
<!-- table -->
<table border>
<tr>
<th>과일</th>
<th>가격</th>
</tr>
<tr>
<td> 귤</td>
<td>3000원</td>
</tr>
<tr>
<td>바나나</td>
<td>2500원</td>
</tr>
</table>
<hr>
먼저 이미지를 불러오는 방법
<img src="경로" />
<img src="data:image/png;base64,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" width="140" height="160" />
<br>
<!-- anchor -->
<a href="링크주소"> 어디로</a>
<a href="http://naver.com" target="_blank" > 어디로</a>
<!-- iframe -->
<iframe src="https://www.daum.net" title="DAUM"></iframe>
<pre>
<태그 속성="값" />
</pre>
<hr>
문단을 꾸밀 때 주로 사용하게 되는 태그들을 모아서 확인해 보겠습니다
<!-- b와 strong / i와 em은 눈으로 보기에는 같지만, 속은 전혀 다르다 -->
<!-- class는 묶음으로 이름 하나를 지정해줄 수 있습니다 -->
<!-- id는 태그 하나에만 한개의 이름을 지정해주어야 합니다 -->
<a href="#paragraph">첫번째 문단</a>
<a href="#second">두번째 문단</a>
<a href="#third">세번째 문단</a>
<a href="mailto:atangi@naver.com">메일보내주세요</a>
<a href="tel:+82226889781">전화걸어주세요</a>
<p><h2 id="paragraph">p는 패러그래프의 약자입니다.</b> <strong>엄청엄청 자주 쓰여요.</strong> 왜냐면 눈에 보이지 않지만 문단을 글을 내용 단위로 끊어주는 역할을 하거든요. 우리가 긴 문서를 만들때는 이렇게 p 태그로 내용단위로 글을 구분하고요. 각 패러그래프마다 다른 형식을 주는 식으로 활용하기도 합니다.</h2></p>
<p id="second"><h2><u>두번째 문단은 짧게 갈게요</u></h2></p>
<p id="third"><h3><i>세번째 문단은 짧게 갈게요</i> <em>같은 역할을 해요</em></h3></p>
<마크업>안녕하세요 김연지 입니다.<br>
한칸 입니다.<br>
두칸 입니다.<br>
세칸 입니다<br>
- 공백을 공백 대신에 사용하는 문자들이 따로 존재합니다
< br >
< br >
<video src="data/movie.mp4" controls width="500">from W3Schools</video>
<video src="http://youtu.be/MQccqNzD1bw" controls width="500">안 뜰 때는 이 글자</video>
<audio src="data/movie.mp4"></audio>
<br><br><br><br><br><br><br><br><br><br><br><br>
<!-- <TAG 속성="값"></TAG> -->
</body>
</html>