html 문서의 내용을 정의하는 태그(이 안에 HTML 코드 작성해라)
현재 html 문서가 어떤 언어로 되어 있는지 표시
-> 검색 엔진이 참고함
html 문서를 정의하는 태그
문서의 제목, 스타일 시트, 스크립트, 메타데이터(문서의 일반적인 정보)
(title, style, script, link, ...)
화면에 보여질 html 문서의 내용을 정의하는 태그
제목을 입력할 때 사용하는 태그
(horizon : 수평선)
가로줄 긋기 태그
연이은 띄어쓰기 또는 엔터는 HTML 입장에서 공백 한 칸일 뿐이다.
따라서 띄어쓰기, 줄바꿈 태그를 사용해야 한다.
띄어쓰기 한 칸
줄바꿈
(Paragraph: 단락, 문단)
(preformatted)
단순히 글자를 굵게 표시하는 태그
글자를 강조하는 태그(웹 접근성)
단순히 글자를 기울이는 태그
글자를 기울이는 태그(웹 접근성)
형광펜 효과를 나타내는 태그
밑줄을 긋는 태그
취소선을 긋는 태그 (비슷한 태그 del 태그가 존재 -> 웹 접근성)
글자를 작게
윗첨자
아래첨자
(abbreviation : 약어)
마우스 오버 시 툴팁 출력 태그
<!DOCTYPE html>
<!-- !DOCTYPE(Document Type()) : 현재 문서 형식 지정 -->
<html lang="ko">
<!-- html 태그 : html 문서의 내용을 정의하는 태그(이 안에 HTML 코드 작성해라) -->
<!-- lang 속성 : 현재 html 문서가 어떤 언어로 되어 있는지 표시
검색 엔진이 참고함 -->
<head>
<!-- head 태그 : html 문서를 정의하는 태그
문서의 제목, 스타일 시트, 스크립트, 메타데이터(문서의 일반적인 정보)
-->
<title>01_글자 관련 태그!!!</title>
<meta charset="UTF-8">
<!-- 현재 문서의 문자 형식이 UTF-8로 되어 있음을 선언 -->
</head>
<body>
<!-- body 태그 : 화면에 보여질 html 문서의 내용을 정의하는 태그 -->
<!-- <h1> ~ <h6> 태그
제목을 입력할 때 사용하는 태그
1~6까지 6단계의 폰트 크기가 지정되어 있음
* 해당 태그는 시작부터 종료까지가 하나의 문단이 됨
== 종료 태그 이후 줄바꿈이 일어난다.
-->
기본 글자 크기입니다.
<h1>h1 태그에 작성된 내용입니다.</h1>
<h2>h2 태그에 작성된 내용입니다.</h2>
<h3>h3 태그에 작성된 내용입니다.</h3>
<h4>h4 태그에 작성된 내용입니다.</h4>
<h5>h5 태그에 작성된 내용입니다.</h5>
<h6>h6 태그에 작성된 내용입니다.</h6>
<!-- hr(horizon : 수평선) 태그 : 가로줄 긋기 태그 -->
<hr>
<h3>HTML 문서에서 연속으로 띄어쓰기/엔터 시 문제점</h3>
가 나
다
<h3 style="color:red;">
연이은 띄어쓰기 또는 엔터는 HTML 입장에서 공백 한 칸일 뿐
</h3>
<h3>* 띄어쓰기, 엔터를 화면에 표시하는 방법 * </h3>
<!-- : 띄어쓰기 한 칸 -->
1. 띄어쓰기 : 가나다
<!-- br 태그 (line BReak) -->
<br><br><br>
2. 줄바꿈
<hr>
<h3>p, pre 태그</h3>
<!-- p 태그 (Paragraph: 단락, 문단)
- 글을 작성하는 용도의 태그
- 종료 시 줄바꿈
-->
1번 입니다. <br>
2번 입니다. <br>
3번 입니다. <br>
<br><br>
<p>p1번 입니다.</p>
<p>p2번 입니다.</p>
<p>p3번 입니다.</p>
<!-- pre 태그 (preformatted)
- 글을 작성하는 용도의 태그
- 줄바꿈
- 시작, 종료 태그 사이에 작성된
문자열의 형식을 그대로 출력함
-->
<pre>p1번 입니다.</pre>
<pre>p2번 입니다.</pre>
<pre>p3번
입니다.</pre>
<hr>
<h1>글자 관련 기타 태그</h1>
<b>b 태그</b> : 단순히 글자를 굵게 표시하는 태그<br>
<strong>Strong 태그</strong> : 글자를 강조하는 태그(웹 접근성)<br>
<!-- 웹 접근성
일반인뿐만 아니라 장애인, 고령자들을 위해
웹 사이트에서 제공하는 서비스를 모두 이용할 수 있도록 보장하는 것
(의무사항)
웹 접근성을 위해서 사용되는 기술 : 스크린 리더
-->
<i>i 태그</i> : 단순히 글자를 기울이는 태그 <br>
<em>em 태그</em> : 글자를 강조하는 태그(웹 접근성) <br>
<mark>mark 태그</mark> : 형광펜 효과를 나타내는 태그 <br>
<u>u 태그</u> : 밑줄을 긋는 태그 br>
<s>s 태그</s> : 취소선을 긋는 태그 (비슷한 태그 del 태그가 존재) <br>
<del>del 태그</del> <br>
<small>small 태그</small> : 글자를 작게 <br>
sup 태그(윗첨자) : x<sup>2</sup> <br>
sub 태그(아래첨자) : log<sub>10</sub> <br>
abbr(abbreviation : 약어) 태그 : 마우스 오버 시 툴팁 출력 태그
<abbr title="Hyper Text Transfer Protocol">HTTP</abbr>
<hr>
<h3>글자 관련 태그 응용</h3>
<p>
<mark>태그</mark>들은 해당 태그 내에서 중첩으로 사용 가능하다.<br>
<strong>굵은</strong> 글자를 사용할 수도 있고,
<em>기울이거나</em>,
<del>취소선</del>을 넣는 등<br>
다양하게 사용할 수 있다.
</p>
</body>
</html>