🏷️ HTML 태그</> 종류 총모음

...

태그</> 모음 요약표

html 태그들을 표로 정리한 요약표 이다. 표의 태그 링크를 누르면 예시 코드 페이지로 이동된다.

태그	설명
<!-- -->	주석(comment)을 정의함.
<!DOCTYPE>	해당 문서(document)의 타입을 정의함.
<a>	다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함.
<abbr>	축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함.
<acronym>	머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 <abbr> 요소를 사용함.
<address>	문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함.
<applet>	문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램)을 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 <embed> 요소나 <object> 요소를 사용함.
<area>	이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의함.
<article>	해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의함.
<aside>	페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의함.
<audio>	음악이나 오디오 스트림과 같은 사운드를 정의함.
<base>	해당 문서의 모든 상대 주소(relative URL)에 대한 기본 URL과 target 속성값을 정의함.
<basefont>	해당 문서의 모든 텍스트에 대한 색상, 크기 및 폰트의 기본값을 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.
<bdi>	주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의함.
<bdo>	자식 요소의 텍스트 방향성(text directionality)을 정의함.
<big>	글자 크기가 큰 텍스트를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.
<blockquote>	다른 출처로부터 인용된 영역을 정의함.
<body>	해당 문서의 콘텐츠 영역을 정의함.
<br>	행 바꿈(line-break)을 정의함.
<button>	클릭할 수 있는 버튼을 정의함.
<canvas>	자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용함.
<caption>	테이블의 캡션(caption)을 정의함.
<center>	가운데로 정렬되는 텍스트를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.
<cite>	예술 작품과 같은 창작물의 제목을 정의함.
<code>	컴퓨터 코드(code)의 일부분을 나타냄.
<col>	<colgroup> 요소에 속하는 각 열(column)의 속성을 정의함.
<colgroup>	테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용함.
<data>	특정 콘텐츠에 기계가 읽을 수 있는(machine-readable) 형태의 값(value)을 덧붙여 나타낼 때 사용함.
<datalist>	<input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의함.
<dd>	용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명(description) 부분을 정의함.
<del>	텍스트 한가운데 라인을 추가하여 문서에서 삭제된 텍스트를 표현함.
<details>	사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시함.
<dfn>	HTML에서 용어(term)의 정의를 나타냄.
<dialog>	대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의함.
<dir>	HTML 리스트(list)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 <ul> 요소를 사용함.
<div>	HTML 문서에서 특정 영역이나 구획을 정의함.
<dl>	용어와 그에 대한 설명을 리스트 형식으로 정의함.
<dt>	용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어(term) 부분을 정의함.
<em>	강조된 텍스트를 표현함.
<embed>	외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너를 정의함.
<fieldset>	<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용함.
<figcaption>	<figure> 요소의 캡션(caption)을 정의함.
<figure>	삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의함.
<font>	텍스트의 폰트, 색상 그리고 크기를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.
<footer>	문서나 특정 섹션의 푸터(footer)를 정의함.
<form>	사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의함.
<frame>	<frameset> 요소에 포함되는 하나의 프레임(frame)을 정의함. HTML5에서는 더 이상 지원하지 않음.
<frameset>	문서의 레이아웃을 구성하기 위해 사용되는 프레임(frame)들의 집합을 정의함. HTML5에서는 더 이상 지원하지 않음.
<h1> ~ <h6>	HTML 문서에서 제목(headings)을 정의함.
<head>	해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함.
<header>	문서나 특정 섹션의 헤더(header)를 정의함.
<hr>	콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의함.
<html>	HTML 문서의 루트 요소(root element)를 정의함.
<i>	기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의함.
<iframe>	인라인 프레임(inline frame)을 정의함.
<img>	이미지(image)를 정의함.
<input>	사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의함.
<ins>	텍스트 아래쪽에 라인을 추가하여 문서에 추가된 텍스트를 표현함.
<kbd>	키보드 입력을 나타냄.
<label>	사용자 인터페이스(UI) 요소의 라벨(label)을 정의함.
<legend>	<fieldset> 요소의 캡션(caption)을 정의함.
<li>	HTML 리스트(list)에 포함되는 아이템(item)을 정의함.
<link>	해당 문서와 외부 소스(external resource) 사이의 관계를 정의함.
<main>	해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의함.
<map>	클라이언트 사이드 이미지맵(client-side image-map)을 정의함.
<mark>	형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의함.
<meta>	해당 문서에 대한 정보인 메타데이터(metadata)를 정의함.
<meter>	분수 값이나 범위(gauge) 내에서 특정 스칼라 값이 어느 정도인지를 표현함.
<nav>	다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의함.
<noframes>	프레임(frame) 기능을 사용하지 않도록 설정했거나, 프레임 기능을 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함. HTML5에서는 더 이상 지원하지 않음.
<noscript>	클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함.
<object>	외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체(embedded object)를 정의함.
<ol>	순서가 있는 HTML 리스트(list)를 정의함.
<optgroup>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 옵션들의 그룹을 정의함.
<option>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의함.
<output>	스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타냄.
<p>	문단(paragraph)을 정의함.
<param>	<object> 요소에 의해 호출되는 플러그인의 매개변수(parameter)를 정의함.
<picture>	<img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의함.
<pre>	미리 정의된 형식(preformatted)의 텍스트를 정의함.
<progress>	작업의 진행률을 나타냄.
<q>	짧은 인용구를 정의함.
<rp>	루비 주석을 지원하지 않는 브라우저를 위한 대체 내용을 정의함.
<rt>	루비 주석에서 발음이나 설명을 나타내는 윗첨자를 정의함.
<ruby>	해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석(ruby annotation)을 정의함.
<s>	텍스트 한가운데 라인을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현함.
<samp>	컴퓨터 프로그램의 샘플 또는 인용 출력(output)을 나타냄.
<script>	자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함.
<section>	HTML 문서에 포함된 독립적인 섹션(section)을 정의함.
<select>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의함.
<small>	글자 크기가 작은 텍스트를 정의함.
<source>	<audio> 요소나 <video> 요소에서 사용할 수 있는 다중 미디어 자원(multiple media resources)을 정의함.
<span>	HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용함.
<strike>	텍스트 한가운데 라인을 추가할 때 사용함. HTML5에서는 더 이상 지원하지 않으며, 대신 <del> 요소나 <s> 요소를 사용함.
<strong>	해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조함.
<style>	해당 HTML 문서의 스타일 정보를 정의함.
<sub>	아랫첨자(subscript) 텍스트를 표현함.
<summary>	<details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의함.
<sup>	윗첨자(superscript) 텍스트를 표현함.
<svg>	SVG 그래픽을 위한 컨테이너를 정의함.
<table>	데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의함.
<tbody>	테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용함.
<td>	테이블에서 하나의 셀(cell)을 정의함.
<template>	추가되거나 복사될 수 있는 HTML 요소들을 정의함.
<textarea>	사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의함.
<tfoot>	테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용함.
<th>	테이블에서 제목이 되는 헤더 셀(header cell)들을 정의함.
<thead>	테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용함.
<time>	사람이 읽을 수 있는(human-readable) 형태의 날짜와 시간 데이터를 정의함.
<title>	해당 문서의 제목(title)을 정의함.
<tr>	테이블에서 셀들로 이루어진 하나의 행(row)을 정의함.
<track>	<audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(track)을 정의함.
<tt>	텔레타이프 텍스트(teletype text)를 나타냄. HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용함.
<u>	철자가 틀린 단어나 중국어의 고유 명사처럼 문체상 일반적인 텍스트와는 달라야만 하는 텍스트를 표현함.
<ul>	순서가 없는 HTML 리스트(list)를 정의함.
<var>	변수(variable)를 정의함.
<video>	무비 클립(movie clip)이나 비디오 스트림(video stream)과 같은 비디오를 정의함.
<wbr>	단어 중간에서 행바꿈될 수 있는(line-break) 위치를 정의함.

HTML5의 기본요소

HTML 문서는 기본적으로 엘리먼트들의 모임이다. 엘리먼트는 아래 형식으로 명세한다.

<시작태그 속성1="속성값" ...속성n="속성값">내용</종료태그>

<!DOCTYPE html>                <!-- 문서의 버전에 관한 정보를 나타낸다. 본 문서가 HTML5 라는 것을 명시함. -->
<html lang="en" dir="ltr">     <!-- html 파일임을 정의. html 태그는 head 태그와 body 태그로 이루어짐. -->
  <head>                       <!-- 메타 데이터의 집합으로 웹 페이지에 직접적으로 보이지 않는 정보임. head 태그는 title, meta, link, style, script 태그로 구성됨. -->
    <meta charset="utf-8">     <!-- meta 태그는 <meta 속성="속성값" />으로 스스토 닫는 태그이기 때문에 이렇게 나타낸다. 보기에 charset="utf-8"는 글자 깨짐에 대해 다른 언어에서도 볼수 있도록 표기한 것이다. -->
    <title></title>            <!-- title 태그는 페이지를 대표하는 내용의 제목을 넣어야 함. -->
  </head>
  <body>                       <!-- 본문의 내용을 담는 공간이다. -->
 
  </body>
</html>

<head> 태그 정리

head는 title 웹문서의 제목, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리고 다른 meta 데이터(설명, 작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함한다. 그외 script 파일을 불러오거나 웹폰트 파일을 불러오는 link등이 head 사이에 삽입 된다.

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>네이버</title> 
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>
</head>

head 섹션에 사용하는 태그들을 모아 간추려 정리해 보았다.

<meta>

: html 문서에 대한 정보.

: 문자 인코딩 및 문서 키워드, 요약 등

ex)
<meta charset="utf-8">
: 웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라.

<title>

: 문서 제목

<title>안의 내용이 웹브라우저의 제목 표시줄에 표시된다.

페이지를 방문하는 방문자나 검색엔진은 제목 표시줄의 제목을 보고 내용을 예측하기 때문에 잘 써야 한다.

<link>

: 외부 파일을 연결할 때 사용한다.

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

link 요소의 속성들을 살펴보면, 'href'는 해당 css파일의 주소를 적게 된다. 'type'과 'rel'에는 각각의 맞게 적어주게 되며, link 요소의 쓰임새가 css파일 연결 외에도 다른 외부요소를 연결하는 데에도 쓰이기 때문에 type 과 rel을 적어준다.

* 참고로 'rel'속성은 'relationship (관계)'의 줄임 말.

ex)
<link href="/style.css" rel="stylesheet" type="text/css" />

rel="stylesheet" 는 연결할 파일이 stylesheet 라는 의미
type="text/css" 는 스타일시트 코드가 텍스트 파일로 된 css 유형이라는 의미

* CSS 사용할 때 <link>와 <style>차이

: <link>는 외부 css 파일을 연결할 때, <style>은 css 설정을 같은 웹페이지 안에서 정의할 때 사용한다.( <head> 사이에 정의)

<style>

: 스타일 정보를 정의할 때 사용하는 태그

<!DOCTYPE html>
<html>
  <head>
    <style>
    .myDiv {
      border: 5px outset red;
      background-color: lightblue;    
      text-align: center;
    }
    </style>
  </head>
  
  <body>
    <div class="myDiv">
      <h2>This is a heading in a div element</h2>
      <p>This is some text in a div element.</p>
    </div>
    <p>This is some text outside the div element.</p>
  </body>
</html>

<script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
	document.write("Hello World !");
</script>

글자 / 폰트 관련 태그 모음

<hn>

: 제목

<h1>~<h6>까지 있다.

<h1>이 글자가 제일 크고, <h6>으로 갈수록 크기가 작아진다.

다른 태그들을 사용해서 <hn>과 똑같아 보이게 만드는 방법도 있지만 <hn>를 사용한다는 것은 해당 내용이 제목이 된다는 "정보"를 주는 것이기 때문에 다른 내용과 구별해서 사용해야 한다.

<h1>이것은 h1 tag 입니다.</h1>
<h2>이것은 h2 tag 입니다.</h2>
<h3>이것은 h3 tag 입니다.</h3>
<h4>이것은 h4 tag 입니다.</h4>
<h5>이것은 h5 tag 입니다.</h5>
<h6>이것은 h6 tag 입니다.</h6>

<hr>

: 긴 가로선 표시

<br>

: 줄 바꿈

<br>태그가 삽입된 위치에서만 줄이 바뀐다. 닫는 태그 X

<p>

: 단락, paragraph

사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생긴다. ( block level 태그)

<p>first paragraph</p><p>second paragraph</p>

<i>

: italic, 기울임

<i>로 묶어진 내용을 기울임 꼴로 표시한다.

+ 디자인 요소라서 굳이 html보단 css에서 처리하는 경향이 있다.

<em>

: emphasized(강조, 중요한) text를 지정한다. i tag와 동일하게 Italic체로 표현된다..

<b>

: bold, 진하게

<b>로 묶은 내용들을 굵게 표시한다.

<strong>

: 중요한 내용 강조

웹 페이지의 내용 중 강조하고 싶은 부분이 있을 때 사용한다.

<strong> : 내용의 강조를 위해 진하게 표시하는 경우 사용
<b> : 의미 없이 진하게 표시할 때

<em> : 내용의 강조를 위해 기울임 꼴로 표시하는 경우 사용
<i> : 의미 없이 기울임 꼴로 표시하는 경우

<strike> , <del>

: ~~취소선~~ 텍스트

<p>My favorite color is <del>blue</del> red.</p>

<u>, <ins>

: 밑줄 텍스트

<strike>02-123-1234</strike>에서 
<strong>02-321-4321</strong>로 <u>변경<u/> 되었습니다.

<small>

: small text를 지정한다.

<h2>HTML <small>Small</small> Formatting</h2>

<mark>

: highlighted text를 지정한다.

<h2>HTML <mark>Marked</mark> Formatting</h2>

<sub>

: sub 태그는 subscripted(아래에 쓰인) text를 지정한다.

<sup>

: sup 태그는 superscripted(위에 쓰인) text를 지정한다.

<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

<pre>

: pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다. (공백 개행 문자 모두 포함해서)

: 주로 코드 블럭을 표현할때 쓰인다

<pre>
var myArray = [];
console.log(myArray.length); // 0

myArray[1000] = true;  // [ , , ... , , true ]

console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined
</pre>

<q>

: 짧은 인용문(quotation)을 지정한다.

브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다.

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

리스트 태그 모음

<ul>

: <unordered list>, 순서가 없는 list

순서가 없기 때문에 앞에 글자 앞에 ●같은 불릿이 붙는다

(css설정으로 없앨 수 있다. ex) list-style: none; )

<ol>

: <ordered list>, 순서가 있는 list

<ul>과 달리 앞에 기호가 아닌 숫자나 영문 순서가 들어간다.

<ul>과 달리 사용할 수 있는 속성들이 몇 가지 있다.

1) type

1	숫자(default)
a	영어 소문자
A	영어 대문자
i	로마숫자 소문자
I	로마숫자 대문자

<ol type="I">
  <li value="2">Coffee</li>
  <li value="4">Tea</li>
  <li>Milk</li>
</ol>

2) start : 중간부터 시작해야 할 때 이 속성을 사용한다.

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

3) reversed : 역순으로 할 때 사용한다.

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

<li>

: <list item>

: <ul>과 <ol>안에서 각 항목을 나열할 때 사용.

<!DOCTYPE html>
<html>
  <body>
    <h2>중첩 목록</h2>
    <ul>
      <li>Coffee</li>
      <li>Tea
        <ol>
          <li>Black tea</li>
          <li>Green tea</li>
        </ol>
      </li>
      <li>Milk</li>
    </ul>
  </body>
</html>

테이블 태그 모음

tag	Description
table	표를 감싸는 태그
tr	표 내부의 행 (table row)
th	행 내부의 제목 셀 (table heading)
td	행 내부의 일반 셀 (table data)

<table>

: 2차원 테이블 생성

<tr> : 행(row)

<th> : 제목 셀(cell)

<td> : 일반 셀(cell)

<table>
	<tr>
		<th>밥류</th>
		<th>면류</th>
		<th>분식류</th>
	</tr>
	<tr>
		<td>김밥</td>
		<td>라면</td>
		<td>떡볶이</td>		
	</tr>
	<tr>
		<td>주먹밥</td>
		<td>우동</td>		
		<td>순대</td>
	</tr>
</table>

thead / tbody / tfoot 요소

<thead> 태그는 HTML 테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용합니다.

<thead> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <tbody>, <tfoot> 요소와 함께 사용됩니다.

브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.

<thead> 요소는 <table> 요소의 자식 요소로써, 반드시 모든 <caption>, <colgroup> 요소 다음에 위치해야 합니다.

또한, <thead> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.

<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있습니다.

<table>
    <thead>
        <tr>
            <th>출장비 내역</th>
            <th>금액</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>교통비</td>
            <td>45000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>총 합계</td>
            <td>103000</td>
        </tr>
    </tfoot>
</table>

링크 태그 모음

<a>

: anchor, 웹 페이지나 외부 사이트 연결

<a href="연결할 링크의 경로"> 내용 </a>

링크로 사용할 텍스트나 이미지를 <a>로 묶고 href(hypertext reference)속성을 이용해서 연결할 웹 페이지의 이름이나 웹사이트 주소를 지정하면 된다.

<a href="https://www.google.com">구글로 이동</a>

* href="#"은 실제로 연결되지 않는, 링크역할만 하도록 만든 것, 널 링크(null link)라고 한다.

<a>에서 사용할 수 있는 속성 값

1) href : href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다

Value	Description
절대 URL	웹사이트 URL (href=”http://www.example.com/default.html”)
상대 URL	자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)
fragment identifier	페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)
메일	mailto:
script	href=”javascript:alert(‘Hello’);”

<a href="http://www.google.com">URL</a><br>
<a href="html/my.html">Local file</a><br>
<a href="file/my.pdf" download>Download file</a><br>
<a href="#">fragment identifier</a><br>
<a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>

<h2 id="top">Top of page!</h2>
<a href="#top">Go to top</a>

2) target : 새 창 or 새 탭에서 링크를 열 때 사용

_blank	새로운 탭 or 창
_self	현재 탭 or 창
_parent	현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창
_top	최상위 탭 or 창, 없으면 현재 탭 or 창

3) title : 링크의 툴팁을 표시(커서를 올렸을 때 나오는 설명)

<a href="연결할 페이지나 사이트 경로" title="링크 내용에 대한 설명">

4) id : 같은 페이지 안에서 이동할 때 사용

이동하고 싶은 위치마다 id 속성을 이용하여 앵커를 만든다(각각 다른 이름으로 지정해야 함.)

<p id="앵커이름">내용</p>

이름 붙여놓은 앵커들을 다시 <a> 의 href 속성으로 연결.

<a href="#앵커이름">내용</a>

해당 링크를 누르게되면 id지정해놓은 P태그 문단으로 화면이 이동되게 된다.

download 속성

HTML5에 추가된 속성 중 <a> 태그에만 추가된 download라는 속성이 있다.

브라우저는 <a> 태그에 download 속성이 설정되어 있으면 링크가 가리키는 파일을 다운로드한다.

즉, 마치 링크 위에서 마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 링크 저장"을 실행하는 것과 같다.

<a href="원하는_주소" download>download 속성 예제</a>

download 속성에는 파일 이름으로 사용할 문자열을 입력할 수도 있다.

const $downloadButton = document.querySelector('.download-button');

$downloadButton.href = // 다운로드 링크 지정
$downloadButton.download = `recording_${new Date().toDateString()}.webm`; // 다운로드 파일명 설정

미디어 태그 (오디오, 비디오, 이미지)

<img>

: 이미지 삽입

<img src="이미지 경로">

웹 페이지에 이미지를 넣을 때 사용한다. <img> 태그 하나당 1개의 이미지를 삽입할 수 있다.

inline 태그(앞뒤로 줄 바꿈 X), 반드시 src 속성(source)을 사용해서 이미지의 경로를 지정해야 한다.

이미지 설정하는 2가지 방법

이미지를 직접 다운로드한 뒤, 파일 경로를 삽입하는 방법
다른 웹페이지의 이미지 주소를 복사해서 삽입하는 방법

<img src="./img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="css3.png" alt="나와" width="300"/>

* img의 속성

attribute	Description
width	너비
height	높이
alt	이미지를 설명해 주는 대체 텍스트 추가
title	툴팁(커서 올렸을때 설명 나오는 것)
usemap	이미지 맵(하나의 이미지에 여러기의 링크를 만드는 것)

<audio>

: 음악 삽입

<audio src="assets/audio/Kalimba.mp3" controls></audio>

attribute	Description
src	음악 파일 경로
preload	재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay	음악 파일을 자동의 재생 개시할 것인지 지정
loop	음악을 반복할 것인지 지정
controls	음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

브라우저별 오디오 포맷 미지원 대응 처리

audio 태그 내부에 source 태그를 통해 다양한 타입의 오디오 포맷을 입력해주면, 브라우저가 알아서 지원하는 포맷으로 재생한다.

<audio autoplay loop controls> 
  <source src="sound.mp3" type="audio/mpeg"> 
  <source src="sound.ogg" type="audio/ogg"> 
  오디오가 지원되지 않는 브라우저입니다. 
</audio>

<video>

: 영상 삽입

<video width="640" height="360" controls>
   <source src="assets/video/wildlife.mp4" type="video/mp4">
   <source src="assets/video/wildlife.webm" type="video/webm">
</video>

attribute	Description
src	동영상 파일 경로
poster	동영상 준비 중에 표시될 이미지 파일 경로
preload	재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay	동영상 파일을 자동의 재생 개시할 것인지 지정
loop	동영상을 반복할 것인지 지정
controls	동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
width	동영상의 너비를 지정
height	동영상의 높이를 지정
muted	비디오의 오디오 출력이 음소거됨을 명시

폼 태그

[HTML] 📚 폼(Form) 태그 종류 💯 정리

우리가 특정 사이트에 로그인 할때, 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이다. 거의 대부분의 사이트가 데이터베이스 서버로 나의 계정 정보를 가지고 있고, 나의

inpa.tistory.com

시맨틱 태그

[HTML] 📚 시맨틱(Semantic) 태그의 쓰임새

시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. semantic 태그가 나오기 이전 아래 그림과 같이 태

inpa.tistory.com

iframe 태그

iframe 은 Frame 의 일종이다. Frame 은 브라우저 창을 여러 세그먼트로 분할해 서로 다른 여러 페이지들을 한 페이지에서 표현할 수 있다. 하지만 Frame 은 여러 이유로 W3C 에서 사용하지 않게 권고 하면서, Frame 구조로 된 웹 사이트는 점점 줄어드는 추세로 돌아섰고, HTML5 규격에서는 제외 되었다. 하지만 아직 Frame 구조로 된 웹 사이트들이 남아있기 때문에 호환성을 위해 일부 브라우저에는 여전히 지원하고 있다.

iframe 은 inline frame 의 줄임말이며, 페이지에 Frame 을 넣을 때 사용한다. Frame 와는 달리, iframe 태그는 HTML5 에서도 계속 지원된다. 여러 기업 에서 다른 웹사이트에 Banner 혹은 여러 형태의 Plugin 을 제공하기 위해서 많이 사용 되고 있다.

<iframe>

: 외부 페이지 삽입

<iframe src="삽입할 페이지 주소" [속성="속성값"]> </iframe>

웹 페이지 안에 다른 웹 페이지를 삽입할 때 사용한다. 속성을 이용해서 원하는 형태로 표시 가능하다.

<p>
  <iframe 
      src="https://www.youtube.com/embed/jSJM9iOiQ1g" 
      width="560" 
      height="315" 
      frameborder="0"
      style="border:2px dashed red" 
      allowfullscreen>
   </iframe>
</p>

iframe 속성	설 명
src="불러올 문서 주소"	표시할 내용 경로의 URL을 적어줍니다.
srcdoc="<p>하이?</p>"	직접 태그소스를 iframe으로 표시할 수 있다.
name="이름"	유니크한 이름을 부여 할 수 있습니다. (ID와 CLASS를 써서 선택자로 사용가능)
width="0"	가로값 설정 (단위:픽셀 또는 퍼센트)
height="0"	세로값 설정(단위:픽셀 또는 퍼센트)
marginwidth="0"	좌, 우 안쪽 여백(단위:px)
marginheight="0"	상, 하 안쪽 여백(단위:px)
scrolling="값"	스크롤바 생성여부 (yes:생성, no:생성안함, auto:자동)
align="정렬위치"	left, right, center
frameborder="값"	프레임 테두리 경계선 유무 속성값은 (0 / 1) 두가지입니다.
sandbox	속성값으로 아래과 같이 sandbox라는 속성을 부여하면 iframe으로 호출한 사이트에서 보안을 위협할 수 있는 내용의 실행을 방지해줌. <iframe sandbox="" src="주소"></iframe> // 스크립트 실행 가능 <iframe sandbox="allow-script" src="주소"></iframe> ㄴ allow-forms - 폼실행 허용 ㄴ allow-same-origin 같은 도메인의 리소스 이용가능 ㄴ allow-scripts 스크립트 실행 허용 보안을 위협할 수 있는 내용이라고 하면 form tag로 데이터를 전송하는 것이나, javascript를 이용하여 보안에 위협이 될만한 행동을 할 수 있기 때문에 해당 동작을 sandbox라는 속성으로 막아줌. (HTML5부터)
seamliss	경계선 없이 문서의 일부인 것처럼 화면에 렌더한다.

링크 태그를 이용하여 iframe에 여러개의 웹 페이지 삽입하기

<a> Tag의 target 속성과 <iframe> Tag의 name 속성을 이용하면 여러개의 웹 페이지 삽입이 가능하다.

<iframe src="삽입하고자 하는 웹 페이지 URL" title="내용" name="frame"></iframe>
<a href="삽입하고자 하는 웹 페이지 URL" target="frame">웹 페이지</a>
<a href="삽입하고자 하는 웹 페이지 URL" target="frame">웹 페이지</a>

<a> Tag를 클릭했을때 해당 웹 페이지를 <iframe>에서 열 수 있도록 target 속성을 이용하여 iframe의 이름을 지정해준다.

<ol>
  <li><a href="https://wikidocs.net/" target="frame">위키독스</a></li>
  <li><a href="https://ko.wikipedia.org/wiki/HTML" target="frame">위키트리 HTML5</a></li>
</ol>    
<br>
<iframe src="https://ko.wikipedia.org/wiki/HTML" title="내용" name="frame" width="100%" height="300px"></iframe>

링크를 클릭하면, iframe영역이 해당 링크 페이지로 갱신된다.

이 밖의 깨알 HTML 정보 모음

[HTML] 📚 ＆nbsp /＆amp /＆lt /＆gt /＆quot 의미

＆nbsp /＆amp /＆lt /＆gt /＆quot 가끔 HTML문서에 텍스트를 작성하고 웹으로 확인하면 꺽쇠 < > 로 둘러싸인 부분은 표기가 되지 않는 경우가 있다. 그 책의 제목은 이다. 와 같이 입력하면, 그 책의

inpa.tistory.com

[HTML] 📚 <p> <div> <span> 태그 정리

: div 태그는 body 문서 안에서 각 영역의 세션을 구분 정의 한다. : 구역을 나누는 태그. 가로줄 전체를 다 차지. 너비가 100% Layout 구조 틀을 만들고 CSS를 통해 위치 및 layer을 구분등 HTML요소

inpa.tistory.com

[HTML] 📚 태그 속성 id / class / name 차이 및 사용처

id / class / name 속성 비교 id 속성 - 고유한 식별을 목적으로 하는 경우 사용 class 속성 - css 쿼리문 밑 재사용을 목적으로 하는 경우 사용 name 속성 - form 컨트롤 요소의 값(value)을 서버로 전송하기

inpa.tistory.com

# 참고자료

https://pridiot.tistory.com/6

https://androphil.tistory.com/entry/HTML-기본-태그-설명-및-예제

https://poiemaweb.com/html5-tag-text

http://webberstudy.com/html-css/html-2/table-symactic/

인용한 부분에 있어 만일 누락된 출처가 있다면 반드시 알려주시면 감사하겠습니다

이 글이 좋으셨다면 구독 & 좋아요

여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.

태그</> 모음 요약표

HTML5의 기본요소

<head> 태그 정리

<meta>

<title>

<link>

<style>

<script>

글자 / 폰트 관련 태그 모음

<hn>

<hr>

<br>

<p>

<i>

<em>

<b>

<strong>

<strike> , <del>

<u>, <ins>

<small>

<mark>

<sub>

<sup>

​<pre>

<q>

리스트 태그 모음

<ul>

<ol>

<li>

테이블 태그 모음

<table>

thead / tbody / tfoot 요소

링크 태그 모음

<a>

<a>에서 사용할 수 있는 속성 값

download 속성

미디어 태그 (오디오, 비디오, 이미지)

<img>

이미지 설정하는 2가지 방법

<audio>

​브라우저별 오디오 포맷 미지원 대응 처리

<video>

폼 태그

시맨틱 태그

iframe 태그

​<iframe>

링크 태그를 이용하여 iframe에 여러개의 웹 페이지 삽입하기

이 밖의 깨알 HTML 정보 모음

티스토리툴바

<pre>

브라우저별 오디오 포맷 미지원 대응 처리

<iframe>