<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구분선 그리기</title>
</head>
<body>
<header>
<center>
<h2>문서의 제목</h2>
</center>
</header>
<hr width="50%" align="left"> <!-- width : 선의 길이, 기본단위는 픽셀, %는 화면비율로 정해주는 기능, align = 위치 설정(center값 default) -->
<section>
<article>
<p>문서 내용 1</p>
</article>
<article>
<p>문서 내용 2</p>
</article>
</section>
<hr size="20" noshade="noshade" style="background-color: blue"><!-- size : 선의 크기(두께),
noshade의 경우 설정할 수 있는 값이 noshade뿐이라서 noshade값을 넣어주지 않아도 됨
style 로 컬러 지정도 가능하고 color="blue" || color="#aabb44" 이런식으로도 설정 가능
-->
<footer>
<p>문서 하단</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자 태그</title>
</head>
<body>
<h2>글자 표현용 태그들</h2>
<!-- 강조 -->
<p>이 문장에서 이 <b>글자</b>가 중요합니다.</p><!-- b : bold의 'b' -->
<p>이 문장에서 이 <strong>글자</strong>가 중요합니다.</p><!-- strong : 강조 태그, 시각장애인용 강조 글자 태그 -->
<hr>
<!-- 기울임 -->
<p>이 문장에서 이 <i>글자</i>가 중요합니다.</p>
<p>이 문장에서 이 <em>글자</em>가 중요합니다.</p>
<p><i>이 문장에서 이 글자가 중요합니다.</i></p>
<hr>
<!-- 밑줄 -->
<p>이 문장에서 이 <ins>글자</ins>가 중요합니다.</p><!-- 밑줄 표시 -->
<!-- 삭제 -->
<p>이 문장에서 이 <del>글자</del>가 중요합니다.</p><!-- 삭제한 것처럼 표시 -->
<p><del style="color: grey">이 문장은 중요하지 않아요~~</del></p><!-- grey/gray 둘 다 회색 -->
<!-- 첨자 -->
<p>이 문장에서 이 <sub>글자</sub>는 아래첨자입니다.</p>
<p>이 문장에서 이 <sup>글자</sup>는 윗첨자입니다.</p>
<p>2<sup>2</sup> = 4</p>
<!-- 마킹(형광펜) -->
<p>이 문장에서 이 <mark>글자</mark>가 중요합니다.</p><!-- 기본색상은 노란색이고 색상도 수정 가능 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 연결</title>
</head>
<body>
<!-- 링크(Hyper Link) : anchor 태그
다른 페이지 또는 같은 페이지의 다른 영역으로 이동.
주요 속성
href : 이동할 페이지의 위치(주소) 또는 영역 지정
target : 보여질 페이지의 대상(브라우저, 영역)
1) _blank : 새로운 창(브라우저)
2) _self : 기존 창
3) _parent : <a> 태그가 있는 영역의 상위 영역
4) _top : 웹 브라우저 전체 영역(가장 상위 영역)
책갈피 기능을 구현할 때 사용.
-->
<p>이동할 페이지</p>
<p><a href="http://www.naver.com">네이버</a></p>
<p><a href="http://daum.net" target="_blank">다음</a></p>
<p><a href="http://google.com" target="_self">구글</a></p>
<p><a href="basic.html">기본 내용 페이지</a></p>
이메일 : <a href="mailto:csyek015@gmail.com">csyek015@gmail.com</a>
</body>
</html>
