01. 글자 관련 태그
1) 구성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<!-- ctrl + / 마크업용 주석 -->
<!-- !DOCTYPE (!Document TYPE(문서 형식)) : 현재 문서 형식 지정 -->
<html lang ="ko">
<!-- "ko" 웹페이즈 언어를 한국어로 설정 -->
<!-- html태그 : html 문서의 내용을 정의하는 태그(이 안에 HTML 코드 작성)-->
<head>
<!-- head 태그 : html 문서를 정의하는 태그
문서의 제목, 스타일 시트(css), 스크립트(js), 메타데이터(문서의 일반적 정보) -->
<meta charset='utf-8'>
<!-- 현재 문서의 문자 형식이 UTF-8로 되어있음을 선언 -->
<title>01_글자관련태그</title>
</head>
<body>
<!-- body 태그 : 화면에 보여질 html 문서의 내용을 정의하는 태그 -->
</body>
</html>
2) 글자 관련 태그
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
<h1> ~ <h6>
제목을 입력할 때 사용하는 태그. 1~6까지 6단계의 폰트 크기가 지정되어 있다
* 해당 태그는 시작부터 종료까지가 하나의 문단이 되고, 종료 태그 이후 줄바꿈이 일어난다
<hr>
가로 줄 긋기 태그
<br>
줄 바꿈 태그
공백이 여러개여도 하나의 공백으로 인식한다.
를 입력하면 띄어쓰기 한칸으로 인식한다
<p>
- 글을 작성하는 용도의 태그
- 종료 시 줄바꿈이 일어난다
<pre>
- 글을 작성하는 용도의 태그
- 시작, 종료 태그 사이에 작성된 문자열의 형식을 그대로 출력함
<b> or <strong>
글자를 굵게 바꾸어 강조하는 태그
<strong> 글자를 강조하는 태그 (웹접근성)
* 웹접근성 : 일반인 뿐만 아니라, 장애인, 고령자들을 위해
웹사이트에서 제공하는 서비스를 모두 이용할 수 있도록 보장하는 것
(공공기관 사이트의 경우 의무사항).
* 웹접근성을 위해서 사용되는 기술 : 스크린 리더
<i> or <em>
글자를 기울이는 태그
<em> 글자를 강조하는 태그 (웹접근성)
<mark>
형광펜 효과를 나타내는 태그
<u>
밑줄을 긋는 태그
<s> or <del>
취소선을 긋는 태그
<small>
글자를 작게 만들어주는 태그
<sup> (윗첨자) :
x<sup>2</sup>
==> x²
<sub> (아랫첨자) :
log<sub>2</sub>
==> log₂
<abbr>(abbreviation : 약어)
마우스 오버 시 툴팁 출력 태그
<abbr title="Hyper Text Transfer Protocol">HTTP</abbr>