[HTML] HTML 태그 종류 및 설명

HTML

인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어의 한 종류입니다. 특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성됩니다.

HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰입니다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타냅니다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작됩니다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 됩니다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있습니다.

 

 

 

• 텍스트 관련 태그

종류	설명
<hn>	제목. <h1>~<h6>까지 사용할 수 있으며 숫자가 커질수록 글자 크기는 작아집니다.
<p>	텍스트 단락. 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄 바꿉니다.
<br>	줄 바꿈. 텍스트 단락 중 원하는 위치에서 줄 바꿉니다.
<blockquote>	내용 인용. 다른 내용보다 들여 스고 단락으로 표시합니다.
<strong>	중요한 텍스트를 굵게 표시, 화면 낭독기에서 강조해서 읽어 줍니다.
<b>	중요하지는 않지만 굵게 표시합니다.
<em>	중요한 텍스트를 기울게 표시(문장), 화면 나동기에서 강조해서 읽어 줍니다.
<i>	중요하지는 않지만 기울게 표시(마음속의 생각이나 용어)합니다.
<ins>	내용을 편집할 때 추가한 내용을 표시합니다.
<del>	내용을 편집할 때 삭제한 내용을 표시합니다.
<sup>	위 첨자입니다.
<sub>	아래 첨자입니다.

 

 

 

• 목록 관련 태그

종류	설명
<ol>	순서 있는 목록의 시작과 끝을 나타냅니다.
<ul>	순서 없는 목록의 시작과 끝을 나타냅니다.
<li>	순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냅니다.
<dl>	설명 목록의 시작과 끝을 나타냅니다.
<dt>	설명 목록의 이름(제목)을 나타냅니다.
<dd>	설명 목록의 값(설명)을 나타냅니다.

 

 

 

• 표 관련 태그

종류	설명
<table>	표를 나타냅니다.
<caption>	표의 제목을 넣습니다.
<tr>	표의 행을 만듭니다.
<td>	표의 셀을 만듭니다.
<th>	제목 셀을 만듭니다.
<thead>	표 구조에서 제목 부분을 나타냅니다.
<tbody>	표 구조에서 본문 부분을 나타냅니다.
<tfoot>	표 구조에서 요약이나 정리 부분을 나타냅니다.
<col>	표에서 열의 스타일을 지정합니다.
<colgroup>	표에서 여러 열을 함께 묶어서 스타일을 지정합니다.

 

 

 

• 멀티미디어 관련 태그

종류	설명
<object>	멀티미디어, PDF 파일 등 다양한 형식의 파일을 삽입합니다.
<embed>	<audio>, <video> 태그와 <object> 태그도 지원하지 않을 경우 멀티미디어 파일을 삽입합니다.
<img>	이미지 파일을 삽입합니다.
<audio>	오디오 파일을 삽입합니다.
<video>	비디오 파일을 삽입합니다.

 

 

 

• 폼에서 사용하는 태그

종류	설명
<form>	폼의 시작과 끝을 만듭니다.
<fieldset>	폼 요소를 그룹으로 묶습니다.
<legend>	필드셋에 제목을 붙입니다.
<input>	사용자가 니용을 입력할 필드를 삽입합니다.
<select>, <option>	드롭다운 목록을 삽입합니다.
<textarea>	텍스트 여러 줄 입력할 수 있는 텍스트 영영을 삽입합니다.
<detalist>	데이터 목록을 삽입합니다.

 

 

 

• <input> 태그의 유형(type)

종류	설명
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.
password	비밀번호를 입력할 수 있는 필드를 넣습니다.
search	검색할 때 입력하는 필드를 넣습니다.
url	URL 주소를 입력할 수 있는 필드를 넣습니다.
email	이메일 주솔르 입력할 수 있는 필드를 넣습니다.
tel	전화번호를 입력할 수 있는 필드를 넣습니다.
checkbox	주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다.
radio	주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.
number	숫자를 조절할 수 있는 스핀 박스를 넣습니다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣습니다.
date	사용자 지역을 기준으로 날짜(연, 월, 일)를 넣습니다.
month	사용자 기역을 기준으로 날짜(연, 월)를 넣습니다.
week	사용자 기역을 기준으로 날짜(연, 주)를 넣습니다.
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣습니다.
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분,초, 분할 초)을 넣습니다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다.
submit	전송 버튼을 넣습니다.
reset	리셋 버튼을 넣습니다.
image	submit 버튼 대신 사용할 이미지를 넣습니다.
button	일반 버튼을 넣습니다.
file	파일을 첨부할 수 있는 버튼을 넣습니다.
hidden	사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듭니다.

 

 

 

• <input> 태그의 속성

종류	속성
autofocus	웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시합니다.
placeholder	텍스트 필드에 힌트를 표시합니다.
readonly	입력 필드를 읽기 전용으로 지정합니다.
required	필수 입력 필드를 지정합니다.
max	숫자 입력 필드에서 최댓값을 지정합니다.
min	숫자 입력 필드에서 최솟값을 지정합니다.
step	숫자 입력 필드에서 증감할 간격을 지정합니다.
maxlength	텍스트 관련 필드에서 입력할 수 있는 최대 길이를 지정합니다.
minlenght	텍스트 관련 필드에서 입력할 수 있는 최소 길이를 지정합니다.
size	텍스트 관련 필드에서 화면에 표시할 크기를 지정합니다.
list	연결할 데이터 목록을 지정합니다.