HTML 태그 정리표 HTML 주요 태그들 정리

시맨틱 태그(HTML 레이아웃)

태그	내용
<header>	헤더영역 주로 맨 위쪽이나 왼쪽에 위치, 검색 창이나 사이트 메뉴를 삽입
<nav>	웹문서 안에서 다른 위치로 연결 or 링크
<main>	핵심이되는 내용을 기입. 웹문서에 한번만 사용
<article>	포스트 및 뉴스기사 같은 독립된 웹 콘텐츠 항목 문서안에 자신의 <article>태그를 포함할 수 있으며, <section>태그를 넣을 수도 있음.
<section>	콘텐츠 영역 몇개의 컨텐츠를 묶는 용도
<aside>	왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듬.
<footer>	사이트 제작 정보나 저작권 정보, 연락처 등 기입 웹 문서 맨 아래쪽에 푸터 영역을 만듬.
<div>	영역을 구별하거나 스타일로 문서를 꾸밀때 사용.

제목, 문단, 텍스트 관련 태그

태그	내용
<hn>	문서 및 단락 제목 지정 <h1>은 문서에 한번만 사용하는 것을 권장하며, <h1> ~ <h6> 까지 지정 가능.
<p>	블록 레벨 단위 텍스트 단락 입력
<span>	인라인 레벨 단위 텍스트 단락 입
<br>	줄 위치 변경
<blockquote>	인용할 때 쓰는 사용
<strong>,  <b>	텍스트를 굵게 표시 strong은 HTML 구조적으로 강조되어 검색엔진 등에서 활용되고, b는 디스플레이 상 단순 강조
<em>, <i>	기울인 텍스트 주관적인 내용에 대한 전달 의미로 em태그를 단순 디스플레이용은 i
<abbr>	줄임말을 표시하고 title속성을 함께 사용 ex) <aabr title="Internet of Things"> IoT </abbr>
<cite>	웹문서나 포스트에 참고 내용을 표시
<code>	컴퓨터 인식을 위한 소스 코드
<small>	부가 정보처럼 작게 표시해도되는 텍스트
<sub>	아래 첨자를 표시
<sup>	위 첨자를 표시
<s>	취소선
<u>	밑줄을 표시
<ins>	공동 작업 문서에서 새로운 내용을 삽입 (블로그 포스팅에서는 수정시 추가되는 내용에  해당 태그를 사용)
<del>	공동 작업 문서에서 기존 내용을 삭제 (블로그 포스팅에서는 수정시 삭제되는 내용에  해당 태그를 사용)

리스트, 목록 관련 태그

태그	내용	예시
<ol>	순서 있는 목록 type으로 순서 start로 시작번호	type = "1" | "a" | "A" | "i" | "I" start = "3"
<li>	리스트 항목 태그
<ul>	순서 없는 목록
<dl>, <dt>, <dd>	설명 목록 이름 과 값의 형태로 된 목록 사전에서 단어명과 설명이 있는 모습	<dl>   <dt>이름</dt>   <dd>설명</dd>

테이블 관련 태그

태그	내용	비고
<table>	표의 시작과 끝을 알리는 태그
<caption>	표의 제목 태그
<thead>	표의 구조 상 헤드영역	자바스크립트를 이용해 <thead>와 <tfoot>태그는 표 위 아래에 고정하고 <tbody>만 스크롤하도록 만들 수 있으며, 인쇄할 때 각장마다 상, 하단 영역을 고정해서 인쇄 가능
<tbody>	표의 구조 상 본문 영역
<tfoot>	표의 구조 상 하단 요약 영역
<tr>	행을 생성 함.
<th>	헤더 셀 내용 기입. 태그 사이에 텍스트 입력. 해당 내용이 다른 셀보다 굵게 표시됨.	<td rowspan="합칠 셀의 개수">셀의 내용</td> <td colspan="합칠 셀의 개수">셀의 내용</td>
<td>	셀 내용 기입.
<col>, <colgroup>	특정 열에 스타일을 주거나 그룹으로 묶어 작업 할 때 사용	<col>태그는 1개만 지정할때, <colgroup>는 <col>태그를 2개 이상 묶어서 사용 반드시 <caption태그 다음에 써야 함. 셀이 4개 있는 표에서 3개만 지정할때,  스타일이 지정 안하는 셀에도 <col>태그를 기입해서 갯수를 맞춰야 함.

이미지 및 오디오,비디오, 파일 관련 태그

태그	내용	비고
<img>	이미지 삽입 태그	<img src="이미지 경로 파일" alt="대체용 텍스트"> width, height로 너비와 높이를 지정 1개만 지정할 경우 나머지 속성은 비율을 자동으로 계산 %, px 단위로 지정
<object>	오디오, 비디오, 자바 애플릿, PDF 등 멀티미디어 파일 삽입, 웹문서 안에 다른 문서를 삽입할 때도 사용 가능.	<object width="너비" height="높이" data="파일"></object>
<embed>	대부분 브라우저에서 사용할 수 있음.	<embed src="파일 경로" width="너비" height="높이">
<audio>	오디오 파일 추가	<audio src="오디오 파일 경로"></audio>
<video>	비디오 파일 추가	<video src="비디오 파일 경로"></video>

audio, video 태그 주요 속성

속성명칭	설명
controls	플레이어 화면에 컨트롤 바를 표시
autoplay	오디오나 비디오를 자동으로 실행
loop	오디오나 비디오를 반복 재생
muted	오디오나 비디오의 소리를 제거
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정, auto, metadata, none 값을 사용 가능 기본값 preload="auto"
width, height	비디오 플레이어의 너비와 높이 지정
poster="파일 이름"	비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정

텍스트 및 이미지 링크 태그

태그	내용	속성
<a>	텍스트 및 이미지에 링크 생성	<a href="링크할 주소">텍스트 또는 이미지</a>
		target="_blank" 속성을 사용하여 새탭에서 열기 가능

입력 양식 관련 태그

태그	내용	속성
<form>	폼을 만드는 가장 기본적인 태그로 기본형 사이에 여러가지 폼요소를 넣는다.	<form [속성="속성값"]>여러 폼 요소</form>
<filedset>	하나의 form태그 안에 Section을 나눌 필요가 있을 경우, 개인정보 Seciton과 배송 정보Section 등 form태그안에 그룹핑이 필요할 경우 사용	<fieldset [속성="속성값"]>  </fieldset>
<legend>	<fieldset>태그로 묶은 그룹에 제목 지정.	<fieldset>     <legend>그룹 이름</legend> </fiedlset>
<label>	<input>태그와 같은 폼 요소에 레이블을 붙일 때 사용	<label for="id명">레이블명     <input id="id명"></label>

input 태그 type 속성 값 정리

종류	설명	사용 가능 속성
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스	size : 필드의 길이 지정 화면에 몇 글자가 보이도록 할 것인지를 지정 valud : 텍스트 필드요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용 비밀번호 필드에서는 사용X maxlength : 입력할 수 있는 최대 문자 수를 지정
password	비밀번호를 입력할 수 있는 필드
search	검색할 때 입력하는 필드
url	URL 주소를 입력할 수 있는 필드
email	이메일 주소를 입력할 수 있는 필드
tel	전화번호를 입력할 수 있는 필드
checkbox	체크박스 필드	value : 서버에게 알려 줄 때 넘겨줄 값을 지정 이 값은 영문이거나 숫자여야 하며 필수 속성. checked : 기본 선택값 지정. name : 라디오 버튼에서 웹 프로그래밍에서 폼요소를 제어할 때 지정 모든 라디오버튼의 name값을 똑같이 지정해야됨.
radio	라디오 버튼
number	숫자를 조절할 수 있는 스핀박스	min : 사용할 수 있는 최소값 기본값은 0 max : 사용할 수 있는 최대값 기본값은 100 step : 숫자 간격을 지정할 수 있음. value : 필드에 표시할 초기값
range	숫자를 조절할 수 있는 슬라이드 막대
date	사용자 지역을 기준으로 날짜(연, 월, 일)	날짜나 시간과 관련된 유형도 숫자에서 사용가능한 min, max, step, value 속성을 사용할 수 있는.   <input type="date" min="2022-02-01" max="2022-02-15">
month	사용자 지역을 기준으로 날짜(연, 월)
week	사용자 지역을 기준으로 날짜(연, 주차)
time	사용자 지역을 기준으로 시간 (시, 분, 초, 분할 초)를 넣음.
datetime	국제 표준시(UTC)로 설정된 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)
submit	전송 버튼	value : 버튼에 보여줄 텍스트 지정.
reset	리셋 버튼
image	submit 버튼 대신 사용할 이미지.	<input type-"image" src="이미지 경로" alt="대체 텍스트">
button	일반 버튼	submit :  폼을 서버로 전송 submit타입과 같은 기능 reset : reset타입과 같은 기능 button 버튼 형태만 만들 뿐 자체 기능은 없음.
file	파일을 첨부할 수 있는 버튼
hidden	사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드

input 태그 그외 속성

속성값	내용
autofocus	input type=텍스트-입력-필드 autofocus required>
placeholder	텍스트박스에 입력전 힌트 내용을 표시. placeholder="힌트 내용 입력"
readonly	<input type=텍스트-입력-필드 readonly>
required	입력 강제 필드 지정.

form 태그에서 사용할 수 있는 그외 태그들

태그	내용	비고
<textarea>	<textarea>내용</textarea>	cols : 텍스트 영역의 가로 너비를 문자 단위로 지정 rows 텍스트 영역의 세로 길이를 줄 단위로 지정
<select>, <option>	드롭다운 목록 생성	기본형 <select>     <option value="값1">내용1</option>     <option value="값2">내용2</option> </select> <select>속성 size : 화면에 표시할 드롭다운 항목의 개수 multiple : 둘 이상의 항목을 선택할 때 사용 <option>속성 value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정 selected : 기본값으로 지정
<datalist>, <option>	데이터 목록을 사용하면 텍스트 필드에 값을 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있음.	<input type="text" list="데이터 목록 id"> <datalist id="데이터 목록 id">     <option value="서버로 넘길 값1">선택 옵션1</option>     <option value="서버로 넘길 값2">선택 옵션2</option> </datalist>