<!DOCTYPE html>
<!---마크업 주석-->
<!-- ctr1 + / 누르면됨 -->
<!-- DOCTYPE(문서형식) -> (Document Type(문서 형식)) , 현재 문서 형식 지정 -->
<html lang="ko">
<!-- html태그 : html 문서의 내용을 정의하는 태그(이 안에 HTML 코드 작성) -->
<head>
<!-- head 태그 : html문서를 정의하는 태그 -->
<!-- 문서의 제목, 스타일 시트(css), 스크립트(js), 메타데이터(문서의 일반적 정보) -->
<meta charset="UTF-8">
<!-- 현재 문서의 문자 형식이 UTF-8로 되어있음을 선언 -->
<title>01_글자관련태그!!!</title>
</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>
<!-- hr 태그 : 가로 줄 긋기 태그 -->
<h3 style="color:red"> HTML 문서에서 연속으로 띄어쓰기 / 엔터 시 문제점</h3>
가 나
다 라
<br>
<h3 style = "color:burlywood"> 띄어쓰기, 엔터를 화면에 표시하는 방법</h3>
<br>
가 나 다 라
<br>마
<!--
&nbsb :띄어쓰기 한 칸
<br> : 줄 바꿈
-->
<hr>
<h3>p. pre 태그</h3>
<!-- p 태그 :
- 글을 작성하는 용도의 태그
- 종료 시 줄 바꿈이 일어남
-->
<p>p1번입니다</p>
<p>p2번입니다</p>
<p>p3번입니다</p>
<!-- pre 태그 :
- 글을 작성하는 용도의 태그
- 시작, 종료 태그 사이에 작성된
문자열 형식을 그대로 출력함 -->
<pre> 가 나
다 </pre>
<pre>pre1번 입니다.</pre>
<pre>pre2번 입니다.</pre>
<pre>pre3번 입니다.</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> : 취소선을 긋는 태그<br>
<del>del 태그 </del> : 비슷한 태그임<br>
<small>small 태그 </small> : 글자를 작게<br>
sup 태그(윗첨자) : x<sup>2</sup> <br>
sub 태그(아랫첨자) : log<sub>10</sub> <br>
abbr (abbreviation 약어) 태그 : 마우스 오버 시 툴팁 출력 태그<br>
<abbr title = "Hyeper Text Transfer Protocol">HTTP</abbr>
<hr><hr>
<h3>글자 관련 태그 응용</h3><br>
<p>
<mark>태그</mark>들은 해당 태그 내에서 중첩으로 사용가능하다<br>
<b>굵은</b> 글자를 사용할 수 도 있고, <i>기울이거나,</i> <del>취소선을</del> 넣는 등<br>
다양하게 사용할 수 있다.
</p>
</body>
</html>
ha lee :)