<!doctype>
- 현재 문서의 유형을 지정하는 선언문
<!doctype html> 은 현재 문서가 HTML5 언어로 작성되었음을 의미합니다
<html> ~ </html>
- 웹 문서의 시작과 끝을 나타내는 태그
브라우저가 <html> 태그를 만자면 </html> 태그 까지의 소스를 읽어 HTML 문법에 맞줘 브라우저에 표시합니다
<head> ~ </head>
- 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분
이 태그안의 정보는 실제 문서의 내용은 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 표시되지 않음 스타일및 스크립트등이 포함될 수 있습니다.
<body> ~ </body>
- 실제로 웹 브라우저 화면에 나타날 내용을 입력하는 부분
<title> ~ </title>
- 문서의 제목을 나타내는 태그
주로 <head> 태그 내부에 선언합니다. 웹브라우저의 탭에 나타납니다.
<meta>
- 문자의 인코딩 방법및 웹 문서 키워드등을 지정하는 태그 웹문서의 정보를 검색 엔진에게 전달해주는 데 유용함
주로 <head> 태그 내부에 선언 합니다.
예를 들어 HTML5 에서 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 utf-8 방식을 사용하기 위해서는 <meta charset="utf-8"> 과 같이 사용합니다.
<hn> ~ </hn>
- 제목 텍스트를 표시함
제목텍스트는 다른 일반 텍스트보다 크고 진하게 표시됩니다. <h1> 이 가장 크고 <h6> 이 가장 작게 표시됩니다.
<p> ~ </p>
- 단락을 만드는 태그
앞뒤에 줄바꿈이 있는 텍스트 덩어리를 만듭니다.
<br>
- 줄바꿈을 하는 태그
<hr>
- 수평줄을 넣는 태그
<blockquote> ~ </blockquote>
- 인용문을 넣는 태그
인용문 태그 내부의 텍스트는 다른 텍스트보다 안으로 들여써지므로 다른 텍스트와 구분되게 됩니다.
<pre> ~ </pre>
- 입력하는 그대로 화면에 표시하는 태그
HTML에서는 아무리 많은 공백을 넣더라도 브라우저에서는 한개의 공백만 표시됩니다. 하지만 <pre> 태그를 사용하면 소스에 표시한 태그가 그대로 표시됩니다. <code> 나 <samp> , <kbd> 같은 태그를 사용해 프로그램 소스를 표시할 때도 소스의 형태를 그대로 브라우저 창에 보여주어야 하므로 <pre> 태그가 함께 사용됩니다.
<strong> ~ </strong> , <b> ~ </b>
- 텍스트를 굵게 표시하는 태그
<strong> 태그와 <b> 태그의 차이점은 화면 낭독기를 사용할때 드러납니다. <strong> 태그를 사용하면 해당 부분이 강조 되었다고 화면 낭독기가 알려줍니다.
<em> ~ </em> , <i> ~ </i>
- 텍스트를 비스듬히 이탤릭체로 표시하는 태그
<em> 은 중요한 내용을 담고 있는 태그이고, <i> 는 단순히 이탤릭체로 표시하는 태그입니다.
<q> ~ </q>
- 인용한 내용을 표시하는 태그
인용 내용에 따옴표를 붙여 표시하여 줍니다.
<mark> ~ </mark>
- 선택한 부분의 배경에 형관펜으로 그어 놓은 듯한 효과를 내는 태그
<span> ~ </span>
- 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용하는 태그
<div> ~ </div>
- 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용하는 태그
<div> 는 block level element인데 반해 <span> 은 inline level element입니다.
<abbr> ~ </abbr>
- 약자 표시하는 태그, title 속성과 함께 사용함
<cite> ~ </cite>
- 참고내용 표시하는 태그
<code> ~ </code>
- 컴퓨터 인식을 위한 소스코드를 나타내는 코드
<kdb> ~ </kdb>
- 키보드 입력이나 음성 명령 같은 사용자 입력 내용을 나타내는 태그
<small> ~ </small>
- 부가 정보처럼 작게 표시해주는 태그
<sub> ~ </sub>
- 아래 첨자를 나타내는 태그
<sup> ~ </sup>
- 위 첨자를 나타내는 태그
<s> ~ </s>
- 취소선을 나타내는 태그
<u> ~ </u>
- 밑줄을 나타내는 태그
<ul> ~ </ul> , <li> ~ </li>
- 순서가 없는 목록을 만드는 태그
순서가 없는 목록(unorder list)를 만들때는 <ul> 태그 안에 <li> 태그(list item)을 사용해 각 항목을 표시합니다.
<ol> ~ </ol> , <li> ~ </li>
- 순서가 필요한 목록을 만드는 태그
순서가 있는 목록(order list)를 만들때는 <ol> 태그 안에 <li> 태그를 사용해 각 항목을 표시합니다. 여러 속성을 통해서 조금씩 다른 형태로 표시할 수 있습니다.
<dl> ~ </dl> , <dt> ~ </dt> , <dd> ~ </dd>
- 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록(description list)을 만드는 태그
<dl> 는 태그 목록, <dt> 는 태그 제목, <dd> 는 태그 설명을 표시합니다.
<table> ~ </table> , <tr> ~ </tr> , <td> ~ </td> , <th> ~ </th>
- 기본적인 표를 만드는 태그
<tr> 으로 행을 구분하고 <td> 를 행에 셀을 추가합니다. <th> 는 제목 셀을 만듭니다.
<td> 나 <th> 태그 안에서 colspan 과 rowspan 속성을 통해 가로와 세로로 셀을 합칠수 있습니다.
<caption> ~ </caption> , <figcaption> ~ </figcaption>
- 표에 제목을 붙이는 태그
이 태그들은 <table> 태그 안에 사용합니다.
<caption> 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.
표에 제목을 붙이는 두번째 방법으로는 <figure> 태그와 <figcaption> 태그를 사용할 수 있습니다. 설명 글을 붙이고 싶은 대상을 <figure> 태그로 감싼 후 <figcaption> 태그를 사용해 제목이나 설명 글을 입력합니다.
<figcaption> 태그는 <caption> 태그와 달리 중앙에 정렬되지는 않으며 또한 <caption> 태그를 사용하면 제목이 위쪽 중앙에 표시되는 반면, <figcaption> 를 <table> 태그 앞에 사용하면 표 위에 제목이 표시되고 </table> 태그 뒤에 사용하면 표 아래에 제목이 표시됩니다.
<thead> ~ </thead> , <tbody> ~ </tbody> , <tfoot> ~ </tfoot>
- 표의 구조를 정의하는 태그
표를 만들때 제목이 있는 부분과 실제내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋습니다.
이렇게 하면 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있고, CSS를 사용해 표의 제목 부분과 요약 부분, 본문에 각각 다른 스타일을 적용할 수 있습니다. 또한 표의 본문이 길어 한 화면을 넘어갈 경우 자바스크립트를 사용해 제목부분과 요약부분은 표의 위아래에 고정하고 본문만 스크롤 되도록 만들수 있습니다.
<col> , <colgroup> ~ </colgroup>
- 표에서 하나의 열이나 여러 열을 묶어 스타일 지정하는 태그
<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하는 것으로 닫는 태그가 없습니다. 만약 <col> 태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 이용해 몇 개를 함께 묶어줄지 지정할 수 있습니다. 여러열을 묶어 스타일을 적용하려면 <colgroup> 태그 내에 묶는 열의 개수만큼 <col> 태그를 넣으면 됩니다. 이때 주의할 점은 <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr> , <td> 태그 전에 사용해야 합니다. 그리고 <colgroup> 태그 안에 있는 <col> 를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 합니다.
<img>
- 이미지를 삽입하는 태그
scr 속성을 이용하여 이미지 파일의 경로를 알려주어야 이미지를 표시할 수 있습니다. html파일을 기준으로 상대경로를 사용할 수 있습니다.
<a> ~ </a>
- 링크를 만드는 태그
링크를 만드는 <a> 태그는 텍스트와 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 됩니다.
<map> ~ <map> , <area>
- 이미지맵을 지정하는 태그
이미지맵을 사용하면 하나의 이미지에 클릭하는 위치에 따라 서로 다른 여러 개의 링크를 걸 수도 있습니다. 이미지 맵은 이미지에 영역을 만든 후 링크를 추가해야 하기 때문에 <map> 태그를 이용해 이미지 맵을 만들고 <img> 태그에서 usemap 속성으로 이미지 맵을 지정합니다. 이미지 맵으로 사용할 이미지에 영역을 표시할 때는 <area> 태그를 사용합니다.
<form> ~ </form>
- 폼을 만드는 태그
웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼이라고 할 수 있습니다. 그중 <form> 태그는 폼을 만드는 가장 기본적인 태그로 <form> 태그와 </form> 태그 사이에 여러 폼 요소와 관련된 태그를 넣습니다.
<label> ~ </label>
- 레이블을 붙여주는 태그
<label> 태그는 크게 두 가지 방법으로 사용할 수 있습니다. 첫번째 방법은 <label> 태그 안에 폼 요소를 넣는 것입니다. 두 번째 방법은 <label> 요소와 폼 요소를 따로 사용하고 <label> 태그에서는 for 속성을 이용하고 폼 요소에서는 id 속성을 이용해 서로 연결하는 것입니다.
다시 말해 id 속성 값을 <label> 태그의 for 속성에게 알려 주는 방법을 사용합니다.
<fieldset> ~ </fieldset> , <legend> ~ </legend>
- 폼 요소를 그룹으로 묶는 태그
<fieldset> 태그는 <fieldset> 과 </fieldset> 태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려주고 <legend> 태그는 <fieldset> 태그안에 사용하고 묶은 그룹에 제목을 붙여줍니다.
<input>
- 사용자 입력을 받는 태그
폼을 만들다 보면 똑같은 폼 요소가 여러번 사용됩니다. 이들을 구분하기위해 id 속성을 사용하여야 합니다.
<select> ~ </select> , <optgroup> ~ </optgroup> , <option> ~ </option>
- 드롭다운 목록을 만드는 태그
드롭다운 목록은 <select> 태그와 <option> 태그를 이용해 표시합니다. <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 <option> 태그를 사용해 원하는 항목들을 추가합니다. <option> 태그에는 value 속성을 이용해 서버로 넘겨주기 위한 값을 지정합니다.
드롭다운 목록에서 여러 항목들을 몇가지 그룹으로 묶어야 할 경우 <optgroup> 태그를 사용할 수 있습니다.
<datalist> ~ </datalist> , <option> ~ </option>
- 데이터 목록중에서 값을 선택하는 태그
<select> 태그대신 <datalist> 태그를 사용하면 데이터 목록중에서 값을 선택하도록 만들 수 있습니다.
데이터 목록은 텍스트 필드와 함께 사용하기 때문에 <input> 태그를 함께 사용합니다. 사용하는 방법은 <input> 태그의 list 속성 값과 데이터 목록의 id 를 같게 만들면 됩니다.
<textarea> ~ </textarea>
- 여러 줄 입력하는 텍스트 영역을 만드는 태그
cols 와 rows 속성을 통해서 가로 세로 크기를 지정해줄 수 있습니다.
<button> ~ </button>
- 버튼을 넣는 태그
type 속성에 따라 어떤 동작을 할지 결정됩니다. 기본값은 submit 으로 폼을 서버로 전송하는 역할을 수행하고, reset 은 폼에 입력한 모든 내용을 초기화 시킵니다. button 은 버튼 형태만 만들뿐 자체기능은 없습니다. <input> 태그의 submit 타입과 다른점은 <button> 태그는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가하거나 css를 이용해 원하는 형태로 꾸밀 수 있습니다.
<output> ~ </output>
- 계산 결과를 나타내는 태그
이 태그는 화면상에 다르게 표시되는 것은 아니지만 <output> 태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과 값이라는 점을 웹 브라우저가 인식할 수 있습니다.
<progress> ~ </progress>
- 진행 상태를 보여주는 태그
<meter> ~ <meter>
- 값이 차지하는 크기를 표시하는 태그
<progress> 태그와 화면상에 나타나는 형태는 비슷하지만 <progress> 와 달리 <meter> 태그는 디스크 사용량 전체 크기중에서 얼마나 차지하는지 표현할 때 사용합니다. low , high , optimum 속성을 통해 낮다, 높다, 적당하다의 상태를 지정해줄 수 있습니다.
Uploaded by Notion2Tistory v1.1.0