HTML 태그 모음 & 요약정리

WEB/WEB의 기초

2021. 2. 26. 20:00


기본 태그

HTML은 머리(head)와 몸(body)로 이루어져있다고 생각하면 편하다.

head는 HTML의 전반적인 특성을 설정하는 곳이다.

body는 화면에 그려질(render) 내용들을 넣는 곳이다.

 

태그 의미
<!DOCTYPE html> 웹 문서의 유형을 html로 지정
<html> 모든 html 태그들의 최상위 태그
<head> 문서의 공통적인 특성들을 넣는 곳, 전역특성
<meta> 메타 데이터 입력
<title> 문서의 제목
<body> 문서의 본문, 여기에 내용을 나타낸다.

 

예)

See the Pen 기본 태그 by yunbinni (@yunbinni) on CodePen.

 

 

내용 입력

제목

h1, h2, …, h6 (heading)

See the Pen 문서 구조 태그 by yunbinni (@yunbinni) on CodePen.

 

 

문단

p(paragraph)

See the Pen p by yunbinni (@yunbinni) on CodePen.

 

 

줄바꿈

br(break)

See the Pen br by yunbinni (@yunbinni) on CodePen.

 

hr(horizontal rule)

See the Pen hr by yunbinni (@yunbinni) on CodePen.

 

텍스트 효과

굵게

b(bold)

See the Pen b by yunbinni (@yunbinni) on CodePen.

 

strong

See the Pen strong by yunbinni (@yunbinni) on CodePen.

 

기울임

i(idiomatic)

See the Pen Untitled by yunbinni (@yunbinni) on CodePen.

 

em(emphasis)

See the Pen em by yunbinni (@yunbinni) on CodePen.

 

밑줄

u(underline)

(그러나 u 태그를 사용하기보다, CSS의 text-decoration 속성을 underline으로 지정하는 것이 좋다.)

See the Pen u by yunbinni (@yunbinni) on CodePen.

 

취소선

s(strikethrough)

See the Pen s by yunbinni (@yunbinni) on CodePen.

 

 

인용 블록 요소

blockquote

See the Pen blockquote by yunbinni (@yunbinni) on CodePen.

 

 

 

<abbr> 줄임말
<cite> 참고 내용
<code> 소스 코드
<small> 작은 텍스트
<sub> 아래 첨자
<sup> 위 첨자
<ins> 공동작업문서에 새로운 내용 삽입
<del> 공동작업문서에 기존 내용 삭제

 

 

문서 구조 태그

태그 의미
<header> 헤더 영역
<main> 메인 영역
<section> 콘텐츠 영역
<aside> 사이드 바 영역
<footer> 푸터 영역

 

 

태그 의미
<nav> 내비게이션 영역,
문서 내 다른 위치, 다른 문서로 연결할 때 사용
<article> 독립적인 콘텐츠를 사용할 때
<section> 콘텐츠 영역
<div> 여러 소스 묶기
<figure> vd

 

 

내용 입력

<abbr> 줄임말
<cite> 참고 내용
<code> 소스 코드
<small> 작은 텍스트
<sub> 아래 첨자
<sup> 위 첨자
<ins> 공동작업문서에 새로운 내용 삽입
<del> 공동작업문서에 기존 내용 삭제

 

 

목록 입력

<li> 태그를 이용해 목록을 생성한다.

 

ol(ordered list)

See the Pen ol by yunbinni (@yunbinni) on CodePen.

 

 

ul(unordered list)

See the Pen Untitled by yunbinni (@yunbinni) on CodePen.

 

 

 

다음은 설명 목록 만들기 태그

기본형

<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> 두번째 열은 스타일 지정 안함
<col style="~"> 세번째 열 스타일 지정
<col style="~"> 네번째 열 스타일 지정
<col span="2"> 동일한 스타일로
다섯, 여섯번째 스타일 지정

 

 

이미지 삽입

기본형

<img src="이미지 파일 경로" alt="대체용 텍스트">
태그 의미
<img> 이미지 삽입
src= 이미지 파일 경로
alt= 대체용 텍스트
width=
height=		 가로, 세로 크기 조절
% 브라우저 창의 크기 단위
px 픽셀 단위

 

 

오디오, 비디오 등 멀티미디어 파일 삽입

<object> 기본형

오디오, 비디오, PDF등을 삽입할 때 사용한다.

<object width="너비" height="높이" data="파일"></object>

 

<embed> 기본형 - 닫기 태그 없음

오디오, 비디오, 이미지 등

<embed src="파일 경로" width="너비" height="높이">

 

플러그인 필요 없이 브라우저에서 바로 재생하는 태그(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= 둘 이상의 항목을 선택
<option>
 옵션
value= 서버에 전달될 값
selected= 기본 선택 항목
<datalist> 미리 입력된 데이터 목록
<option> value= 서버에 전달될 값
<button> 버튼
type="submit" 폼을 서버로 전송
type="reset" 폼 초기화
type="button" 일반 버튼, <input type="button">과 같음
저작자표시

'WEB > WEB의 기초' 카테고리의 다른 글

코드 플레이그라운드 비교  (0) 2023.04.10
JavaScript 사용법 요약정리  (0) 2021.04.25
CSS 사용법 요약정리  (1) 2021.03.14

관련글

댓글 12

티스토리툴바