티스토리 뷰
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
<!DOCTYPE html>
<html>
<head>
<title>html 첫 수업</title>
</head>
<body>
<h1>web 표준의 기본 기술 - html5, CSS3, Javascript</h1>
<p>
html이란 웹문서를 만들어주는 기본 프로그램 언어이다.<br>
명령어를 태그(tag)라 하고 태그는 시작 태그와 종료 태그의 한 쌍이 일반적이다.<br>
태그는 영문으로 대소문자 구별이 없지만 일반적으로 소문자로 입력한다.<br>
명령이 두가지 이상 들어갈 때 종료는 서로 감싸듯이 해주면 된다.
</p>
<p>
html 수업 첫 날입니다.<br>
본문입니다.
</p>
<hr>
<h1>문단 태그 p</h1>
<p>
문단을 구성하는 명령은 p이며 종료태그로 반드시 묶어준다.<br>
문단 내부에서 줄을 바꾸고 싶으면 br 태그를 넣어준다.<br><br><br><br>
br 태그는 종료태그가 없는 단독 태그이며 중복 적용이 가능하다.
</p>
<hr>
<h1>제목 태그 hn</h1>
<p>
본문 내용의 분류에 따라 제목을 넣을 수 있다.<br>
hn 태그로 제목을 나타낼 수 있는데 n에 쓸 수 있는 숫자는 1에서 6까지 이다.<br>
h1일 때 글자의 크기는 제일 크고 숫자와 반비례해서 글자 크기는 점점 작아진다.<br>
제목의 중요도나 분류에 따라 적절한 제목 태그를 써준다.<br>
제목 태그를 쓰면 두꺼고 진한 볼드체로 나타나며, 위아래로 한 줄의 공백이 생긴다.
</p>
<hr>
<h1>제목 태그 h1 입니다.</h1>
<h2>제목 태그 h2 입니다.</h2>
<h3>제목 태그 h3 입니다.</h3>
<h4>제목 태그 h4 입니다.</h4>
<h5>제목 태그 h5 입니다.</h5>
<h6>제목 태그 h6 입니다.</h6>
<h7>제목 태그 h7 입니다.</h7>
<h8>제목 태그 h8 입니다.</h8>
<hr>
<h1>수평선 태그 hr</h1>
<p>
가로로 긴(100% 수평선을 만드는 태그는 hr이다.<br>
단독 태그로 수직선을 만드는 태그는 없다.
</p>
<hr>
<h1>글자와 관련된 여러 태그들</h1>
<p>
<b> ... </b> - <b> b 태그는 bold체로</b> 나타남<br>
<strong> ... </strong> - <strong> strong 태그는 중요하다는 뜻을 담은 bold</strong>체<br>
<i> ... </i> - <i>i태그는 뜻없이 기울어진 글꼴(이텔릭체)로 </i>나타내며<br>
<em> ... </em> - <em>em태그는 강조한다는 뜻을 담은 이텔릭체로</em> 나타낸다.<br>
<small>small</small> - 작은 글자를 나타냄<br>
<del>del</del> - 취소선을 나타냄(글자 중간에 줄)<br>
<sup>sup</sup> - 윗 첨자를 나타냄 km<sup>2</sup><br>
<sub>sub</sub> - 아랫 첨자를 나타냄 H<sub>2</sub>O<br>
<mark>mark</mark> - 형광펜 효과를 나타냄<br>
<ins>ins</ins> - 추가한 내용을 나타냄(글자 아래에 줄)<br>
</p>
<h2>예약어를 나타내는 특수문자 태그와 자주 쓰는 특수문자 태그</h2>
<p>
특수문자 태그는 시작할 때 &로 시작하고 끝나는 부분에 ;을 넣는다.<br>
&는 (&)기호, <는 시작괄호(<) >는 닫는 괄호(>),
"는 따옴표("), 는 공백이다.
</p>
<p>
© - © (copyright)<br>
™ - &tm; (trademark;)<br>
® - ® (registered trademark)
</p>
<h3>웹과 관련된 여러 기술들 학습하기</h3>
<strong>https://www.<mark>w3schools.com</mark></strong>
</body>
</html>
'부산 ITWILL 학원 실습 > Web' 카테고리의 다른 글
| 연습해보기 (0) | 2018.08.14 |
|---|---|
| form-2 (0) | 2018.08.13 |
| form-1 (0) | 2018.08.13 |
| 테이블 셀 합치기 최종 문제 (0) | 2018.08.13 |
| table로 표 만들기 (0) | 2018.08.13 |