Html 태그 정리
Html 태그 사용 빈도수
1. 텍스트 관련 태그
|
태그 종류
|
설명
|
|
hn
|
제목 / h1~h6까지 숫자가 커질수록 글자 크기는 작아진다.
|
|
p
|
텍스트 단락 / 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다.
|
|
br
|
줄 바꿈 / 텍스트 단락 중 원하는 위치에서 줄을 바꾼다.
|
|
blockquote
|
내용 인용 / 다른 내용보다 들여 쓰고 단락으로 표시한다.
|
|
strong
|
중요한 텍스트를 굵게 표시한다.
|
|
b
|
중요하지는 않지만 굵게 표시한다.
|
|
em
|
중요한 텍스트를 기울게 표시한다.
|
|
i
|
중요하지는 않지만 기울게 표시한다.
|
|
ins
|
내용을 편집할 때 추가한 내용을 표시한다.
|
|
del
|
내용을 편집할 때 삭제한 내용을 표시한다.
|
|
sup
|
위 첨자
|
|
sub
|
아래 첨자
|
2. 목록 관련 태그
|
태그 종류
|
설명
|
|
ol
|
순서 있는 목록의 시작과 끝을 나타낸다.
|
|
ul
|
순서 없는 목록의 시작과 끝을 나타낸다.
|
|
li
|
순서 있는 목록이나 순서 없는 목록의 각 항목을 나타낸다.
|
|
dl
|
설명 목록의 시작과 끝을 나타낸다.
|
|
dt
|
설명 목록의 이름을 나타낸다.
|
|
dd
|
설명 목록의 값을 나타낸다.
|
3. 표 관련 태그
|
태그 종류
|
설명
|
|
table
|
표를 나타낸다.
|
|
caption
|
표의 제목을 넣는다.
|
|
tr
|
표의 행을 만든다.
|
|
td
|
표의 셀을 만든다.
|
|
th
|
제목 셀을 만든다.
|
|
thead
|
표 구조에서 제목 부분을 나타낸다.
|
|
tbody
|
표 구조에서 본문 부분을 나타낸다.
|
|
tfoot
|
표 구조에서 요약이나 정리 부분을 나타낸다.
|
|
col
|
표에서 열의 스타일을 지정한다.
|
|
colgroup
|
표에서 여러 열을 함께 묶어서 스타일을 지정한다.
|
4. 멀티미디어 관련 태그
|
태그 종류
|
설명
|
|
object
|
멀티미디어, PDF 파일 등 다양한 형식의 파일을 삽입한다.
|
|
embed
|
audio, video, object 태그가 지원되지 않을 경우 멀티미디어 파일을 삽입한다.
|
|
img
|
이미지 파일을 삽입한다.
|
|
audio
|
오디오 파일을 삽입한다.
|
|
video
|
비디오 파일을 삽입한다.
|
5. 폼에서 사용하는 태그
|
태그 종류
|
설명
|
|
form
|
폼의 시작과 끝을 만든다.
|
|
fieldset
|
폼 요소를 그룹으로 묶는다.
|
|
legend
|
필드셋에 제목을 붙인다.
|
|
input
|
사용자가 내용을 입력할 필드를 삽입한다.
|
|
select, option
|
드롭다운 목록을 삽입한다.
|
|
trxtarea
|
텍스트를 여러 줄 입력할 수 잇는 텍스트 영역을 삽입한다
|
|
datalist
|
데이터 목록을 삽입한다.
|
6. < input > 태그의 유형
|
태그 유형 종류
|
설명
|
|
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
|
사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.
|
7. < input > 태그의 속성
|
태그 속성 종류
|
설명
|
|
autofocus
|
웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시한다.
|
|
placeholder
|
텍스트 필드에 힌트를 표시한다.
|
|
readonly
|
입력 필드를 읽기 전용으로 지정한다.
|
|
required
|
필수 입력 필드를 지정한다.
|
|
max
|
숫자 입력 필드에서 최댓값을 지정한다.
|
|
min
|
숫자 입력 필드에서 최솟값을 지정한다.
|
|
step
|
숫자 입력 필드에서 증감할 간격을 지정한다.
|
|
maxlength
|
텍스트 관련 필드에서 입력할 수 있는 최대 길이를 지정한다.
|
|
minlength
|
텍스트 관련 필드에서 입력할 수 있는 최소 길이를 지정한다.
|
|
size
|
텍스트 관련 필드에서 화면에 표시할 크기를 지정한다.
|
|
list
|
연결한 데이터 목록을 지정한다.
|
● 기본 태그
|
<!DOCTYPE html>
|
웹 문서의 유형을 html로 지정
|
|
|
<html lang="ko">
|
문서를 html로 시작, 언어를 한국어로 지정
|
|
|
<head>
|
주로 브라우저의 정보를 입력하는 곳
|
|
|
<meta>
|
메타 데이터 입력, 주로 <meta charset="UTF-8">처럼 입력
|
|
|
<title>
|
문서 제목
|
|
|
<body>
|
문서 내용을 입력
|
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>문서 구조 태그
|
<header>
|
헤더 영역
|
|
<main>
|
메인 영역
|
|
<section>
|
콘텐츠 영역
|
|
<aside>
|
사이드 바 영역
|
|
<footer>
|
푸터 영역
|
|
<nav>
|
내비게이션 영역,
문서 내 다른 위치, 다른 문서로 연결할 때 사용
|
|
<article>
|
독립적인 콘텐츠를 사용할 때
|
|
<section>
|
콘텐츠 영역
|
|
<div>
|
여러 소스 묶기
|
● 내용 입력
텍스트 입력
|
<h1>, <h2>, ...
|
제목
|
|
<p>
|
단락
|
|
<br>
|
줄 바꿈, 닫기태그 없음
|
|
<blockquote>
|
인용문, 들여쓰기 적용됨
|
|
<strong>
|
텍스트 굵게, 주로 중요한 내용일 때
|
|
<b>
|
텍스트 굵게, 단순히 굵게 표시할 때
|
|
<em>
|
텍스트 기울임, emphasis의 준말, 강조할 때
|
|
<i>
|
텍스트 기울임, italic의 준말, 단순히 기울여 표시할 때
|
|
<u>
|
텍스트 밑줄
|
|
<s>
|
텍스트 취소선
|
|
<abbr>
|
줄임말
|
|
<cite>
|
참고 내용
|
|
<code>
|
소스 코드
|
|
<small>
|
작은 텍스트
|
|
<sub>
|
아래 첨자
|
|
<sup>
|
위 첨자
|
|
<ins>
|
공동작업문서에 새로운 내용 삽입
|
|
<del>
|
공동작업문서에 기존 내용 삭제
|
목록 입력
<li> 태그를 이용해 목록을 생성한다.
기본형(ol)
<ol>
<li>항목 1</li>
<li>항목 2</li>
</ol>기본형(ul)
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>|
<ol>
|
순서가 있는 목록(ordered list)
|
||
|
type=
|
"1"
|
숫자(기본값)
|
|
|
"a"
|
영문 소문자
|
||
|
"A"
|
영문 대문자
|
||
|
"i"
|
로마 숫자 소문자
|
||
|
"I"
|
로마 숫자 대문자
|
||
|
start="3"
|
3부터 시작
|
||
|
<ul>
|
순서가 없는 목록(unordered list)
|
||
다음은 설명 목록 만들기 태그
기본형
<dl>
<dt>이름</dt>
<dd>설명</dd>
</dl>|
<dl>
|
<dt>
|
설명할 용어(Term)
|
|
|
<dd>
|
설명할 내용(Description)
|
||
표 입력
기본형
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>|
<table>
|
테이블 만들기
|
|||||
|
<caption>
|
표 제목
|
|||||
|
<tr>
|
행 삽입
|
|||||
|
<td>
|
셀 삽입
|
|||||
|
<th>
|
셀 삽입(진하게 표시)
|
|||||
|
<thead>
|
표 중 제목, 여러 페이지에 걸쳐 고정 가능
|
|||||
|
<tbody>
|
표 중 본문
|
|||||
|
<tfoot>
|
표 중 요약, 여러 페이지에 걸쳐 고정 가능
|
|||||
<td>, <th>의 행, 열 합치기 속성
|
rowspan="2"
|
2개의 행 합치기
|
|
colspan="2"
|
2개의 열 합치기
|
합쳐질 셀들은 태그를 적지 않는다.
열의 스타일 속성 지정
- 열 1개만 지정할 땐, <col>
- 여러 열을 지정할 땐, <colgroup>
기본형 - 예를 들어, col이 6개가 있다면
<colgroup>
<col>
</colgroup>|
<colgroup>
|
<col style="~">
|
첫번째 열 스타일 지정
|
|
<col>
|
두번째 열은 스타일 지정 안함
|
|
|
|
세번째 열 스타일 지정
|
|
|
|
네번째 열 스타일 지정
|
|
|
span="2">
|
동일한 스타일로
다섯, 여섯번째 스타일 지정
|
이미지 삽입
기본형
<img src="이미지 파일 경로" alt="대체용 텍스트">|
<img>
|
이미지 삽입
|
||
|
src=
|
이미지 파일 경로
|
||
|
alt=
|
대체용 텍스트
|
||
|
width=
height=
|
가로, 세로 크기 조절
|
||
|
%
|
브라우저 창의 크기 단위
|
||
|
px
|
픽셀 단위
|
||
오디오, 비디오 등 멀티미디어 파일 삽입
<object> 기본형
오디오, 비디오, PDF등을 삽입할 때 사용한다.
<object width="너비" height="높이" data="파일"></object>
플러그인 필요 없이 브라우저에서 바로 재생하는 태그(html 5부터)
<audio> 기본형
<audio src="오디오 파일 경로"></audio><video> 기본형
<video src="비디오 파일 경로"></video>다음은 <audio>, <video> 태그의 속성들
|
controls=
|
컨트롤 바 표시
|
|
autoplay=
|
자동 재생
|
|
loop=
|
반복 재생
|
|
muted=
|
음소거
|
|
preload=
|
로딩방법,
사용할 수 있는 값은
auto(기본값), metadata, none
|
|
width=, height=
|
비디오 플레이어의 너비, 높이 지정
|
|
poster="파일 이름"
|
비디오 플레이어의 재생 전 포스터
|
크롬 브라우저에서 비디오 자동 재생을 하려면
muted를 넣어야 한다. (muted autoplay loop)
하이퍼링크 삽입
기본형
<a href="링크할 주소">텍스트 또는 이미지</a>|
<a>
|
하이퍼 링크 삽입
|
|
|
href=
|
링크 주소
|
|
|
target="_blank"
|
새 탭에서 열기
|
|
텍스트 링크 예)
|
<p><a href="~">표시 텍스트</a></p>
|
이미지 링크 예)
|
</a><img src="이미지 파일 경로" alt></a>
|
폼 입력
기본형
<form [속성="속성값"]>여러 폼 요소</form>|
<form>
|
method=
|
get
|
사용자 입력 내용이
드러나게 서버로 넘겨줌
|
|
post
|
사용자 입력 내용이
드러나지 않게 서버로 넘겨줌
|
||
|
name=
|
자바스크립트로 폼 이름 지정
|
||
|
action=
|
서버 프로그램 지정
|
||
|
target=
|
열어볼 파일 위치 지정
|
||
|
autocomplete=
|
자동 완성 기능 지정(기본값 on)
|
||
|
<fieldset>
|
폼 내부에서 구역을 나눔
|
||
|
<legend>
|
구역 제목 붙이기
|
||
레이블 붙이기
기본형 - <label>안으로 폼 요소 넣기 예
<label>레이블명<input></label>기본형 - for속성과 폼 요소의 id를 일치시키기(연결시키기) 예
<label for="id명">레이블명<input id="id명"></label>
<input>
input의 type 속성 값들
|
type=
|
text
|
한 줄 텍스트
|
|
password
|
비밀번호
|
|
|
search
|
검색
|
|
|
url
|
url
|
|
|
email
|
이메일 주소
|
|
|
tel
|
전화번호
|
|
|
checkbox
|
체크박스 (중복 체크)
|
|
|
radio
|
라디오 버튼 (unique 체크)
|
|
|
number
|
숫자 스핀 박스(버튼으로 숫자 조절)
|
|
|
range
|
숫자 슬라이드 막대
|
|
|
date
|
local - 연, 월, 일
|
|
|
month
|
local - 연, 월
|
|
|
week
|
local - 연, 주
|
|
|
time
|
local - 시, 분, 초, 분할 초
|
|
|
datetime
|
UTC - 연, 월, 일, 시, 분, 초, 분할 초
|
|
|
datetime-local
|
local - 연, 월, 일, 시, 분, 초, 분할 초
|
|
|
submit
|
전송 버튼
|
|
|
reset
|
리셋 버튼
|
|
|
image
|
submit 버튼 이미지
|
|
|
button
|
일반 버튼
|
|
|
file
|
파일 첨부 버튼
|
|
|
hidden
|
사용자에게 보이지 않는 값 필드
|
text, password와 같이 쓰이는 속성들
|
size=
|
화면에 출력할 글자 수
|
|
value=
|
text 필드에 보여줄 내용,
password에서 사용 안함
|
|
maxlength=
|
최대 입력 가능한 글자 수
|
checkbox, radio와 같이 쓰이는 속성들
|
value=
|
서버에 전달될 값
|
|
checked=
|
기본으로 선택하고 싶은 항목
|
|
name=
|
radio 전용,
여러 옵션의 공통 이름
|
number, range와 같이 쓰이는 속성들
|
min=
|
최소값(기본값 0)
|
|
max=
|
최대값(기본값 100)
|
|
step=
|
조정할 단위값(기본값 1)
|
|
value=
|
초기값
|
submit, reset와 같이 쓰이는 속성들(이 속성들은 버튼이다)
|
value=
|
버튼에 표시할 내용
|
image와 같이 쓰이는 속성들
|
src=
|
이미지 경로
|
|
alt=
|
대체 텍스트
|
button와 같이 쓰이는 속성들
|
value=
|
버튼에 표시할 내용
|
|
onclick=
|
클릭 시 실행할 JS함수
|
<input>의 다른 주요 속성들
|
autofocus=
|
페이지를 불러오자마자
마우스 포인터가 표시
예) autofocus
|
|
placeholder=
|
힌트를 표시, 내용을 입력하면 사라짐
예) 아이디를 입력하세요.
|
|
readonly=
|
읽기 전용
예) readonly="readonly"
readonly="true"
|
|
required=
|
필수 입력 필드
예) required="required"
required
|
<input> 이외의 주요 태그들
|
<textarea>
|
여러 줄의 텍스트 입력 영역
|
||
|
rows=
|
세로 줄 수,
길 경우 스크롤 막대가 생성됨
|
||
|
cols=
|
가로 너비(문자 단위)
|
||
|
<select>
|
드롭다운 목록 생성
|
||
|
size=
|
항목 개수
|
||
|
multiple=
|
둘 이상의 항목을 선택
|
||
|
|
옵션
|
||
|
value=
|
서버에 전달될 값
|
||
|
selected=
|
기본 선택 항목
|
||
|
<datalist>
|
미리 입력된 데이터 목록
|
||
|
|
value=
|
서버에 전달될 값
|
|
|
<button>
|
버튼
|
||
|
type="submit"
|
폼을 서버로 전송
|
||
|
type="reset"
|
폼 초기화
|
||
|
type="button"
|
일반 버튼,
과 같음 |
||
반응형
'개발 공부 > Html, CSS' 카테고리의 다른 글
| 반응형 웹 만드는 법 (디바이스 종류별 width값) (0) | 2023.10.18 |
|---|---|
| Html a태그 (0) | 2023.10.18 |
| <CSS> <a>태그 밑줄없애기, 색상 변경하기 (0) | 2023.10.18 |
| Html/ nav태그 (0) | 2023.10.18 |
| CSS Flex(Flexible Box) (0) | 2023.10.18 |
