<!--> : 주석
<!DOCTYPE html>
// a
<a> : 링크연결
target=""
_blank : 새창열기
_parent : 부모창에 열기
_self : 자신의 창에서 열기
_top : 화면이 여러 프레임으로 이루어져 있을 시 모든 프레임을 지우고 전체 화면에 열기
[name] : 지정된 이름에 링크 열기
<audio> : 오디오 파일 재생
// b
// d
<data>
// e
<em> : 내용 강조
// f
<fieldset> : 여러개의 컨트롤과 라벨을 그룹화
// h
// i
<i> : 텍스트 이탤릭체
<!DOCTYPE html>
// a
<a> : 링크연결
target=""
_blank : 새창열기
_parent : 부모창에 열기
_self : 자신의 창에서 열기
_top : 화면이 여러 프레임으로 이루어져 있을 시 모든 프레임을 지우고 전체 화면에 열기
[name] : 지정된 이름에 링크 열기
<abbr> : 생략어/스펠링(요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<acronym> : 두문자어/단어 (요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)
Can I get this <acronym title="as soon as possible">ASAP</acronym>?
Can I get this <acronym title="as soon as possible">ASAP</acronym>?
<address> : 연락처
<area> : 이미지맵의 영역
<article> : 문서내에서 독립적인 컨텐츠
<aside> : 사이드 바
<audio> : 오디오 파일 재생
// b
<b> : 텍스트 굵게
<base> : html문서의 기준 URL을 명시(head요소 안에서 사용)
<head>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>
<head>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>
<bdi>: 텍스트 출력 방향을 브라우저가 판단해 표현
<li>User <bdi>إيان</bdi>: 90 points</li>
=> 아랍어는 오른쪽에서 왼쪽으로.. 하지만 bdi태그 쓰면 왼쪽에서 오른쪽으로..
<li>User <bdi>إيان</bdi>: 90 points</li>
=> 아랍어는 오른쪽에서 왼쪽으로.. 하지만 bdi태그 쓰면 왼쪽에서 오른쪽으로..
<bdo> : 텍스트의 방향을 명시적으로 지정
<bdo dir="rtl">This text will go right-to-left.</bdo>
=> rtl : right to left
=> ltr : left to right
<bdo dir="rtl">This text will go right-to-left.</bdo>
=> rtl : right to left
=> ltr : left to right
<blockquote> : 텍스트를 인용문으로 정의
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
</blockquote>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
</blockquote>
<body> : 문서의 메인 컨텐트
<br> : 줄바꿈
<button> : 버튼
- autofocus : 페이지를 로드할때 해당 요소가 자동으로 포커스를 받도록 지정합니다.
- disabled : 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터도 서버에 전송하지 않는다. 불리언 속성입니다.
- name="이름" : 버튼의 식별자를 지정합니다.
- type=버튼의 종류를 지정합니다
submit : 폼을 제출합니다. 기본값입니다.
reset : 폼을 리셋합니다.
button : 아무것도 하지 않습니다.
- value="값" : 전송되는 데이터의 초기값 지정합니다.
// c
- autofocus : 페이지를 로드할때 해당 요소가 자동으로 포커스를 받도록 지정합니다.
- disabled : 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터도 서버에 전송하지 않는다. 불리언 속성입니다.
- name="이름" : 버튼의 식별자를 지정합니다.
- type=버튼의 종류를 지정합니다
submit : 폼을 제출합니다. 기본값입니다.
reset : 폼을 리셋합니다.
button : 아무것도 하지 않습니다.
- value="값" : 전송되는 데이터의 초기값 지정합니다.
// c
<canvas> :
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);</script>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);</script>
<caption> : 테이블 제목
<cite> : 작품의 제목
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<code> : 컴퓨터 코드
<col> : 테이블에서 하나 이상의 행
<colgroup> : 테이블에서 하나 이상의 행의 그룹
// d
<data>
<datalist> : 다른 컨트롤을 위해 미리 정의된 옵션의 집합
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<dd>
<del> : 문서로부터 삭제되었음을 표시
<details> : 추가정보
<dfn> : 텍스트를 전문용어나 관용구등의 정의어로 지정
<dialog> : 팝업, 모달
<dialog open>This is an open dialog window</dialog>
<dialog open>This is an open dialog window</dialog>
<dl>
<dt>
// e
<em> : 내용 강조
<embed> : 브라우저에 설치되어 있는 플러그인이 필요한 외부 어플리케이션을 동작
// f
<fieldset> : 여러개의 컨트롤과 라벨을 그룹화
<figcaption> : 부모요소인 figure요소의 내용들에 대한 제목
<figure>: 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도
<footer>
<form>
// h
<h1> - <h6> : 제목
<head>
<header>
<hr> : 문단에서 주제의 분리(단락들 사이에 의미적 구분이 있을 때 사용 = 구분선 )
<html>
// i
<i> : 텍스트 이탤릭체
<iframe>
<img>
<input>
<ins> : 문서에 추가된것을 나타낸다
// k
<kbd> : 사용자 입력(키보드나 음성명령등)을 정의
// l
<label>
// m
<main>
// k
<kbd> : 사용자 입력(키보드나 음성명령등)을 정의
// l
<label>
<legend>
<li>
<link>
// m
<main>
<map>
<mark> : 텍스트 마킹 하이라이트
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<menu>
<menuitem>
// n
<nav>
<option> : select요소의 자식 요소로 각 항목을 정의한다.
// p
// q <q>
// r <rp>
// u
// v
// w
<menuitem>
<meta>
<meter> : 디스크 사용현황, 쿼리 결과의 관련성 등 분포 비율
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
- value : 필수요소로 게이지에 표시되는 측정 값을 나타냅니다.
- min : 게이지 범위의 최소값을 나타냅니다 .
- max : 게이지 범위의 최대값을 나타냅니다.
- low : 게이지의 범위를 낮은 범위로 추정될 만한 범위를 지정합니다.
- high : 게이지의 범위를 높은 범위로 추정될 만한 범위를 지정합니다.
- optimum : 게이지의 범위를 최적인 범위로 추정될 만한 범위를 지정합니다.
- form : 명시적인 폼 소유자를 지정합니다.
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
- value : 필수요소로 게이지에 표시되는 측정 값을 나타냅니다.
- min : 게이지 범위의 최소값을 나타냅니다 .
- max : 게이지 범위의 최대값을 나타냅니다.
- low : 게이지의 범위를 낮은 범위로 추정될 만한 범위를 지정합니다.
- high : 게이지의 범위를 높은 범위로 추정될 만한 범위를 지정합니다.
- optimum : 게이지의 범위를 최적인 범위로 추정될 만한 범위를 지정합니다.
- form : 명시적인 폼 소유자를 지정합니다.
// n
<nav>
<noscript> : 스크립트가 비활성화되었을 때 나타낼 내용을 표시
// o
<object>
<ol>
<optgroup> : select요소의 자식 요소로 option요소로 이루어진 항목을 그룹화한다.
<option> : select요소의 자식 요소로 각 항목을 정의한다.
<output> : 계산의 결과를 나타낸다.
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
- for : 계산과 관련이 있는 요소 사이에 명시적인 연결을 위해 사용합니다.
- form : 폼 소유자를 명시적으로 지정하기위해 사용됩니다.
- name : 폼 제출시 사용되는 폼 컨트롤의 이름을 나타냅니다.
// p
<p>
<param> : object요소에 의해 불러와지는 플러그인을 위한 매개변수를 정의
<picture> : 반응형에 적합. 뷰포트 너비에 따라 하나 또는 그 이상의 이미지를 확대 또는 축소하는 대신 여러 개의 이미지를 사용할 수 있다.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
- srcset (필수) - 표시 할 이미지의 URL을 정의합니다.
- media - 일반적으로 CSS에 정의 된 유효한 미디어 쿼리를 수락합니다.
- sizes - 단일 너비 설명자, 너비 설명자가 포함 된 단일 미디어 쿼리 또는 너비 설명자가있는 쉼표로 구분 된 미디어 쿼리 목록을 정의합니다.
- type - MIME 유형을 정의합니다.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
- srcset (필수) - 표시 할 이미지의 URL을 정의합니다.
- media - 일반적으로 CSS에 정의 된 유효한 미디어 쿼리를 수락합니다.
- sizes - 단일 너비 설명자, 너비 설명자가 포함 된 단일 미디어 쿼리 또는 너비 설명자가있는 쉼표로 구분 된 미디어 쿼리 목록을 정의합니다.
- type - MIME 유형을 정의합니다.
<pre> : 형식화된 텍스트를 그대로 보여준다.
<progress>
// q <q>
// r <rp>
<rt>
<ruby>
// s
// s
<s>
<samp>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
// t
<table>
<sup>
// t
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
// u
<u>
<ul>
// v
<var>
<video>
// w
<wbr>
[HTML] html5 tag 정리
![[HTML] html5 tag 정리]()
Reviewed by 코알라
on
9월 20, 2018
Rating:
댓글 없음: