HTML tag & attribute 정리

HTML은 구조적 문서이다.

<HTML> : HTML 문서의 범위를 설정

<html lang="ko">

<head> : HTML 문서의 정보를 설정

<body> : HTML 문서의 구조를 설정

<title> : 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의

<base> : HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정

하나의 문서에 하나의 base 태그만 사용 가능

속성	의미	값	기본 값
href	기준 URL	URL	X
target	A 요소처럼 target 속성을 사용하는 요소의 기본값	_self, _blank	_self

<link> : 외부 리소스의 연결 및 현재 문서와의 관계 명시

<link rel="stylesheet" href="styles.css">

속성	의미	값
rel	(필수!!) 현재 문서와 외부 리소스와의 관계	stylesheet, icon…
href	외부 리소스의 URL	URL
type	외부 리소스의 MIME 타입	text/css, image/x-icon…

<meta> : 메타 데이터를 나타내기 위해 설정

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

속성	의미	값
charset	문자인코딩 방식	UTF-8, EUC-KR…
name	메타 데이터의 이름(정보의 종류)	author, description…
http-equiv	서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공)	refresh, X-UA-Compatible…
content	name, http-equiv의 값

<style> : CSS 정보를 설정

속성	의미	값
type	MIME 타입	text/css

- For contents -

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> : 문서 정보 계층을 구조화

<header> : 문서의 헤더(로고, 제목, 검색 등 포함)

<footer> : 문서의 풋터 (작성자, 저작권, 관련 문서 등 포함)

<main> : 문서의 메인 컨텐츠

하나의 문서에 하나의 main 만 포함 가능

<article> : 독립적으로 구분되거나 재사용 가능한 영역(매거진, 신문 기사,블로그 등) 을 설정

h1 ~ h6포함하여 식별

<section> : 문서의 일반적인 영역을 설정

h1 ~ h6포함하여 식별

<aside> : 문서의 별도 컨텐츠를 설정 (광고,ㅡ 링크의 사이드바 설정)

<nav> : 다른 페이지 링크 제공하는 영역을 설정

<address> : 연락처 정보를 제공하기 위해 포함하여 사용

<div> : 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정( division, 꾸미는 목적으로 사용)

<ol>, <ul>, <li> : 각 항목 <li>의 정렬된 목록 <ol>(ordered list) 이나 정렬되지 않는 목록 <ul>(unordered list)을 설정

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<dl>, <dt>, <dd> : (description list, term, description)

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<p> : 하나의 문단을 설정

<hr> : 문단의 분리를 위한 막대기

<pre> : 서식이 정해진 텍스트

<blockquote> : 긴 인용문

<blockquote cite="http://www.worldwildlife.org/who/index.html"> 
For 50 years, WWF has been protecting the future of nature </blockquote>

<q> : 짧은 인용문

<a> : 다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼 링크 설정

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

속성	의미 값	기본값	특징
download	이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미	불린(Boolean)
href	링크 URL	URL	생략 가능
rel	현재 문서와 링크 URL의 관계(Link Types)	license, prev, next…
target	링크 URL의 표시(브라우저 탭) 위치	_self, _blank	_self
type	링크 URL의 MIME 타입	text/html…

<abbr> : 약어를 지정

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<b> : 진한 글씨

<mark> : milk와 같이 마킹된 글씨

<em> : 이탤릭체로 강조된 글씨

<strong> : 진한 글씨

<dfn> : 용어를 정의할때 사용

<cite> : 창작물에대한 참조 설정

<u> : 밑줄 있는 글자 설정

<del> : 삭제 줄 있는 글자 설정

<ins> : 삭제되고 추가된 글자 설정

<code> : 컴퓨터 코드 설정

<kbd> : 키보드에서 사용자 입력을 나타내는 텍스트 범위를 설정

<sup>, <sub> : 위 첨자, 아래 첨자

<time> : 시간 나타냄

<span> : 아무것도 나타내지 않는 컨텐츠 영역을 설정

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

<br /> : 줄바꿈

<img> : 이미지 삽입

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">

속성	의미	기본 값
src	(필수)이미지 URL	URL
alt	(필수)이미지의 대체텍스트
width	이미지의 가로 너비
height	이미지의 세로 너비
srcset	브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의	w, x
sizes	미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

<audio> : mp3 컨텐츠 삽입

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

속성	의미	값	기본 값
autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	auto: 전체 파일 로드	metadata
src	콘텐츠 URL	URL
muted	음소거 여부	불린(Boolean)

<video> : mp4 삽입

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

속성	의미	값	기본 값
autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
muted	음소거 여부	불린(Boolean)
poster	동영상 썸네일 이미지 URL	URL
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	auto: 전체 파일 로드	metadata
src	콘텐츠 URL	URL
width	동영상 가로 너비
height	동영상 세로 너비

<figure>, <figcaption> : 이미지 삽화나 도표

<figure> 
<img src="milk.jpg" alt="A milk"> 
<figcaption>Milk is a nutrient-rich, 
white liquid food produced by the mammary glands of mammals.</figcaption>
</figure>

<iframe> : 다른 HTML 페이지를 현재 페이지에 삽입

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials">
</iframe>

속성	의미	값	기본값
name	프레임의 이름
src	포함할 문서의 URL	URL
width	프레임의 가로 너비
height	프레임의 세로 너비
allowfullscreen	전체 화면 모드 사용 여부	불린(Boolean)
frameborder	프레임 테두리 사용 여부	0, 1	1
sandbox	보안을 위한 읽기 전용으로 삽입	allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능

<canvas> : 웹 페이지에 그래픽 그리기 위함

속성	의미
width	캔버스의 가로 너비
height	캔버스의 세로 너비

<script> : 스크립트 코드르리 문서에 포함하거나 참조

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

속성	의미	값	특징
async	스크립트의 비동기적(Asynchronously) 실행 여부	불린(Boolean)	src 속성 필수
defer	문서 파싱(구문 분석) 후 작동 여부	불린(Boolean)	src 속성 필수
src	참조할 외부 스크립트 URL	URL	포함된 스크립트 코드는 무시됨
type	MIME 타입	text/javascript(기본값)

<noscript> : 스크립트 지원하지 않는 경우 삽입할 HTML 정의

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<table>, <tr>, <th>, <td> : 데이터 표(<table>)의 행(줄 / <tr>)과 열(칸, 셀(Cell) / <th>, <td>)을 생성

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

<caption> : 표에 대한 캡션

<colgroup> : 표의 열을 공통적으로 정의하는 칼럼 <col> 과 그의 집합 <colgroup>

<colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
 </colgroup>

<thead>, <tbody>, <tfoot> : 표의 머리글(<thead>), 본문(<tbody>), 바닥글(<tfoot>)을 지정.

<form> : 웹 서버에 정보 제출하기 위한 양식의 범위를 정의

다른 form 을 자식 요소로 포함할 수 없음

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

속성	의미	값	기본값
action	전송한 정보를 처리할 웹페이지의 URL	URL
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
method	서버로 전송할 HTTP 방식	GET, POST	GET
name	고유한 양식의 이름
novalidate	서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target	서버로 전송 후 응답받을 방식을 지정	_self, _blank	_self

<input> : 사용자에게 입력 받을 데이터 양식

속성	의미	값	기본값	특징
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)		문서 내 고유해야 함
checked	양식이 선택되었음을 표시	불린(Boolean)		type 속성 값이 radio, checkbox일 경우만
disabled	양식을 비활성화	불린(Boolean)
form	<form>의 id 속성 값			해당 <form>의 후손이 아닐 경우만
list	참조할 <datalist>의 id 속성 값
max	지정 가능한 최대 값	숫자(Number)		min속성보다 큰 값만 허용
min	지정 가능한 최소 값	숫자(Number)		max속성보다 작은 값만 허용
maxlength	입력 가능한 최대 문자 수	숫자(Number)	524288	type 속성 값이 text, email, password, tel, url일 경우만
multiple	둘 이상의 값을 입력 할 수 있는지 여부	불린(Boolean)		email일 경우 , 로 구분
name	양식의 이름
placeholder	사용자가 입력할 값의 힌트			type 속성 값이 text, search, tel, url, email일 경우만
readonly	수정 불가한 읽기 전용	불린(Boolean)
step	유효한 증감 숫자의 간격	숫자(Number)	1	type 속성 값이 number, range일 경우만
src	이미지의 URL	URL		type 속성 값이 image일 경우만
alt	이미지의 대체 텍스트			type 속성 값이 image일 경우만
type	입력 받을 데이터의 종류	별도 정리	text
value	양식의 초기 값

- For data type and value -

<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="text" />

데이터	종류	특징
button	일반 버튼	<button>처럼 사용
checkbox	체크박스
color	색상	IE 지원 불가
email	이메일
file	파일
hidden	보이지 않지만 전송할 양식	value 속성으로 값을 지정
image	이미지 제출 버튼	<img />처럼 사용
number	숫자
password	비밀	가려지는 양식
radio	라디오 버튼	같은 name 속성 그룹 내 하나만 선택 가능
range	범위 컨트롤	min, max, step, value(기본값) 속성 사용
reset	초기화	해당 <form> 범위 내 모든 양식
search	검색
submit	제출 버튼	해당 <form> 범위 내 고유한 양식
tel	전화번호
text	일반 텍스트
url	절대 URL

<label> : 라벨 값

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

<button> : 버튼 지정

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

속성	의미	값	특징
autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)	문서 내 고유해야 함
disabled	버튼을 비활성화	불린(Boolean)
form	<form>의 id 속성 값		해당 <form>의 후손이 아닐 경우
name	폼 데이터와 함께 전송되는 버튼의 이름
type	버튼의 타입	button, reset, submit

<textarea> : 여러 줄의 일반 텍스트 양식

<textarea id="w3review" name="w3review" rows="4" cols="50">
  At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
  </textarea>
  <br><br>
  <input type="submit" value="Submit">
</form>

속성	의미	값	기본 값	특징
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)		문서 내 고유해야 함
disabled	양식을 비활성화	불린(Boolean)
form	<form>의 id 속성 값			해당 <form>의 후손이 아닐 경우만
maxlength	입력 가능한 최대 문자 수	숫자(Number)	무한
name	양식의 이름
placeholder	사용자가 입력할 값의 힌트
readonly	수정 불가한 읽기 전용	불린(Boolean)
rows	양식의 줄 수	숫자(Number)	2

<fieldset> : 그룹화

<legend> : 제목

 <fieldset>
  <legend>Personalia:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
 </fieldset>

<select>, <datalist>, <optgroup>, <option> : 옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공.

<select>
  <optgroup label="Coffee">
    <option>Americano</option>
    <option>Caffe Mocha</option>
    <option label="Cappuccino" value="Cappuccino"></option>
  </optgroup>
  <optgroup label="Latte" disabled>
    <option>Caffe Latte</option>
    <option>Vanilla Latte</option>
  </optgroup>
  <optgroup label="Smoothie">
    <option>Plain</option>
    <option>Strawberry</option>
    <option>Banana</option>
    <option>Mango</option>
  </optgroup>
</select>

* <select> --> <optgroup> --> <option>

* <datalist> --> <option>

<select>

속성	의미	값	기본값
autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
disabled	선택 메뉴를 비활성화	불린(Boolean)
form	선택 메뉴가 속할 하나 이상의 <form>의 id 속성 값
multiple	다중 선택 여부	불린(Boolean)
name	선택 메뉴의 이름

size	한 번에 볼 수 있는 행의 개수	숫자(Number)	0 (1과 같음)

<progress> : 작업의 완료 속도 나타냄

<progress id="file" value="32" max="100"> 32% </progress>

전역 속성 : 모든 HTML 요소에서 공통적으로 사용 가능한 속성

class : 공백으로 구분된 요소의 별칭을 지정, css or javascript 요소 선택기 통해 요소 선택하거나 접근

id : 고유한 식별자를 정의, css or javascript 요소 선택기 통해 요소 선택하거나 접근

style: 요소에 적용할 css 를 선언

tytle: 요소의 정보를 설정

lang : 요소의 언어를 지정

data-* : 사용자 정의 데이터 속성을 지정

draggable: 요소가 드래그앤드롭 가능한지 여부를 지정

hidden : 요소를 숨김

tanindex:tab 키 이용해 순차적으로 포커스 탐색할순서를 지정

<template> : 렌더링 되지 않은 컨텐츠 보유

<map>, <area> : 이미지맵 : 선택가능한 지역의 이미지 정의 <img /> 와 연결하여 사용

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

<picture> : 이미지 삽입, <img /> 로 대체 가능

<source> : 브라우저가 선택 가능한 <audio>, <video>, <picture>등의 다중 미디어 리소스를 지정.

<track> : <audio>, <video> 같은 미디어가 재생 중일 때 표시될 자막, 캡션 파일 등을 지정.

<param> : <object>의 매개 변수를 정의

인용 출처 :

heropy.blog/2019/05/26/html-elements

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online

heropy.blog

다 한때

HTML tag & attribute 정리

- For contents -

- For data type and value -

전역 속성 : 모든 HTML 요소에서 공통적으로 사용 가능한 속성

댓글

티스토리툴바