[HTML5] HTML 태그와 요소 정리

👉 태그와 요소

태그 : HTML 에서 객체를 만들 때 사용하는 것
요소 : 태그를 사용해 만들어진 것

 

👉 속성

태그에 추가 정보를 부여할 때 사용.

 

👉 주석

유지 보수 ---> 가독성을 위한 코드의 설명.

 

👉 글자 태그 

제목을 입력할 때 사용하는 제목 글자 태그 

태그 이름	설명
h1	첫 번째로 큰 제목 글자 태그
h2	두 번째로 큰 제목 글자 태그
h3	세 번째로 큰 제목 글자 태그
h4	네 번째로 큰 제목 글자 태그
h5	다섯 번째로 큰 제목 글자 태그
h6	여섯 번째로 큰 제목 글자 태그

 

본문을 입력할 때 사용하는 본문 글자 태그 

태그 이름	설명
p	본문 글자 태그
br	줄바꿈 태그
br	수평 줄 태그

 

웹 페이지 사이를 이동하거나 내부에서 특정 위치로 이동하는 앵커 태그

태그 이름	설명
a	앵커 태그

 

글자 형태 태그를 사용해 글자의 형태나 의미를 부여

태그 이름	설명
b	굵은 글자 태그
i	기울어진 글자 태그
small	작은 글자 태그
sub	아래에 달라 붙은 글자 태그
sup	위에 달라 붙는 글자 태그
ins	밑줄 글자 태그
del	가운데 줄이 그어진 글자 태그

 

👉 목록 태그

기본 목록을 만들 때는 목록 태그를 사용

태그 이름	설명
ul	순서가 없는 목록 태그
ol	순서가 있는 목록 태그
li	목록 요소

 

정의 목록을 만들 때는 정의 목록 태그를 사용

태그 이름	설명
dl	정의 목록 태그
dt	정의 용어 태그
dd	정의 설명 태그

 

👉 테이블 태그

테이블을 만들기 위한 태그 <table></table>

태그(속성) 이름	설명
tr	표 내부의 행 태그
th	행 내부의 제목 셀 태그
td	행 내부의 일반 셀 태그
border	표의 테두리 두께 지정
rowspan	셀의 높이 지정(병합)
colspan	셀의 너비 지정(병합)

 

👉 이미지 태그

이미지를 삽입하기 위한 태그 <img></img>

속성 이름	설명
src	이미지의 경로 지정
alt	이미지가 없을 때 나오는 글자 지정
width	이미지의 너비 지정
height	이미지의 높이 지정

 

👉 오디오 태그

오디오를 삽입하기 위한 태그 <audio></audio>

속성 이름	설명
src	음악 파일의 경로 지정
preload	음악을 재생하기 전에 모두 불러올지 지정
autoplay	음악을 자동 재생할지 지정
loop	음악을 반복할지 지정
controls	음악 재생 도구를 출력할지 지정

 

👉 비디오 태그

비디오를 삽입하기 위한 태그 <video></video>

속성 이름	설명
src	비디오 파일의 경로 지정
poster	비디오 준비 중일 때의 이미지 파일 경로 지정
preload	비디오를 재생하기 전에 모두 불러올지 지정
autoplay	비디오를 자동 재생할지 지정
loop	비디오를 반복할지 지정
controls	비디오 재생 도구를 출력할지 지정
width	비디오의 너비 지정
height	비디오의 높이 지정

 

👉 입력 양식 태그

form 태그를 이용하여 서버에 내용을 전달

속성 이름	설명
action	입력 데이터의 전달 위치를 지정
method	입력 데이터의 전달 방식을 지정
method="get"	입력 데이터의 전달 방식을 주소에 넣기
method="post"	입력 데이터의 전달 방식을 비밀스럽게 전달하기

 

input 태그를 이용하여 내용을 입력 (HTML4 기준)

속성 이름	설명
button	버튼을 생성
checkbox	체크박스를 생성
file	파일 입력 양식을 생성
hidden	보이지 않음
image	이미지 형태를 생성
password	비밀번호 입력 양식을 생성
radio	라디오 버튼을 생성
reset	초기화 버튼을 생성
submit	제출 버튼을 생성
text	글자 입력 양식을 생성

 

input 태그를 이용하여 내용을 입력 (HTML5)

속성 이름	설명
color	색상 선택 양식 생성
date	일 선택 양식을 생성
datetime	날짜 선택 양식을 생성
datetime-local	지역 날짜 선택 양식을 생성
email	이메일 입력 양식을 생성
month	월 선택 양식을 생성
number	숫자 생성 양식을 생성
range	범위 선택 양식을 생성
search	검색어 입력 양식을 생성
tel	전화번호 입력 양식을 생성
time	시간 선택 양식을 생성
url	주소 입력 양식을 생성
week	주 선택 양식을 생성

 

글자를 입력할 때 사용하는 태그 <textarea></textarea>

속성 이름	설명
cols	태그의 너비를 지정
rows	태그의 높이를 지정

 

select 태그를 이용하여 드롭박스 형태의 선택 입력 <select></select>

태그 이름	설명
select	선택 양식을 생성
optgroup	옵션을 그룹화
option	옵션을 생성

 

👉 입력 양식을 설명하는 태그

입력 양식을 구분할 수 있도록 설명하는 태그

태그 이름	설명
fieldset	입력 양식을 감싸는 형태
legend	fieldset을 설명하는 태그

 

👉 공간 분할 태그

block 형식으로 공간을 분할 / inline 형식으로 공간을 분할

태그 이름	설명
div	block 형식으로 공간을 분할
span	inline 형식으로 공간을 분할

 

👉 시맨틱 구조 태그

시맨틱 웹을 구현하기 위해 만들어진 태그

태그 이름	설명
header	헤더
nav	내비게이션
aside	사이드에 위치하는 공간
section	여러 중심 내용을 감싸는 공간
article	글자가 많이 들어가는 공간
footer	푸터