HTML의 태그란?
태그란 무엇인가?
HTML은 Hyper Text Markup Language로 하이퍼링크를 통하여 문서에서 다른 문서로 접근할 수 있는 Markup Language입니다. Markup 할 때 사용되는 약속된 표기 법을 tag라고 하며 <와 > 사이에 태그의 이름을 작성합니다.
어떠한 내용을 <h1>태그로 감싼다면 컴퓨터에게 '이 내용은 제목이다.'라고 태그를 달아 알려준다는 의미로 생각하면 됩니다.
HTML의 필수 태그
HTML은 기본적인 틀이 있습니다. 이 틀에서 사용되는 태그는 꼭 작성되어야 하는 필수 태그입니다.
필수 태그의 종류는 <html>, <head>, <body>가 있으며 <head> 태그에 들어가야 할 태그로 <meta>와 <title> 태그가 있습니다.
<!doctypeHTML> //현재 문서가 HTML5로 작성된 웹 문서라는 표시
<html> //웹 문서의 시작과 끝을 나타내는 태그
<head> //웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분을 알리는 태그
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body> //실제로 웹 브라우저화면에 나타날 내용들이 이 부분에 온다는 태그
</body>
</html>
태그의 종류와 기능
<h1> : 제목을 적을 때 사용하는 태그입니다. h뒤의 숫자는 제목의 크기를 조절합니다.
<hr> : 가로줄을 추가하여 텍스트를 구분해줍니다.
<p> : p는 paragraph의 p입니다. 는 텍스트를 작성시 가장 많이 사용하는 태그입니다.
<pre> : preformatted의 pre입니다. <p>와 다른점은 <pre>는 작성 시 공백을 넣는 대로 들어가지만 <p>는 공백이 하나씩 들어갑니다.
<br> : < br>은 텍스트의 줄을 바꾸어줍니다.
<blockquote> : 인용문을 넣는 태그입니다.
<quote> : blockquote와 비슷하지만 차이는 blockquote는 이름에서도 알수 있듯 블록 레벨 태그이므로 한 줄로 표시하게 하는 태그 안에 작성하면 오류가 생깁니다. qoute의 경우는 인라인 레벨 태그이므로 줄이 바뀌지 않고 한 줄에 나오게 됩니다. 대신 큰따옴표를 붙여줍니다.
<strong> : 강조할 텍스트에 사용합니다.<strong>이처럼 강조를 하는데 쓸 수 있습니다. </strong></p
<b> : 글씨가 굵어집니다.
<e> : emphasis의 em입니다. 주로 경고문구에 사용을 합니다.
<i> : italic의 i입니다. 주로 경고문구에 사용을 합니다.
<mark> : 텍스트에 형광펜 표시를 하고 싶은 경우 사용합니다.
<span> : 태그 자체로는 효과가 없습니다. 하지만 이후 배울 style을 적용하길 원하는 텍스트를 <span>태그로 묶어서 스타일을 줄 수 있습니다.
위의 태그들의 예시는 아래와 같습니다.
위의 태그들 이외에도 다양한 태그가 있습니다. 모든 태그를 설명드릴 수 없고 몇몇 태그들은 다음 시간에 설명을 이어서 드리겠습니다.