HTML
HTML은 Hyper Text Markup Language의 약자로, HTML 문서를 구성하기 위해 사용하는 언어이다.
HTML Tags (Element)
HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 가장 기본이 되는 단위이다.
꺽쇠 괄호와 태그명으로 아래와 같이 표현한다.
<!-- 가장 기본적인 태그 -->
<태그명>...</태그명>
<!-- 빈 태그의 경우, 시작태그와 종료태그를 한번에 쓸 수 있음 -->
<태그명 />
html의 기본 문법에 대한 설명은 아래 링크 참고
2021.12.21 - [Front End/HTML, CSS, JS] - HTML의 기본 문법(속성, 값, 부모/자식 요소, 빈 태그)
HTML 태그의 종류
html의 태그는 굉장히 많은데 굳이 외울 필요는 없고 어떤 태그가 있는지 보고 사용할때 "이런 태그가 있었던거 같은데?"라고 생각하면서 찾아서 사용하면 된다. (그리고 사용하다보면 저절로 외워짐)
메인 루트
<html>: HTML 문서의 최상단 요소를 나타냄. '루트 요소'라고도 부름
문서 메타 데이터
<base>: 다른 요소들의 모든 상대 url 값의 prefix를 정의
<head>: 문서의 메타 정보를 담는 요소로 meta, title 등의 태그가 올 수 있음
<link>
현재 문서와 외부 리소스의 관계를 명시. CSS 리소스 파일을 연결할 때 제일 많이 사용
<!-- 포맷 -->
<link rel="관계명시" href="외부 리소스 파일 경로" />
<!-- 예시 css 파일 -->
<link rel="stylesheet" href="./assets/main.css" />
<meta>
- base, link, script, style, title 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타 정보를 나타냄
- meta 태그는 빈 태그(empty tag)이다
<!-- 문서를 어떤 인코딩 방식을 사용할건지 지정 (웹 표준 인코딩: UTF-8) -->
<meta charset="UTF-8" />
<style>: 문서의 스타일 정보를 포함
<title>: 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의
구획 루트
<body>: HTML 문서의 내용을 포함하고, 한 문서에는 하나의 body 요소만 존재 할 수 있음
콘텐츠 구획
<address>: 사람, 단체, 조직 등에 대한 연락처 정보를 포함
<address>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>
<article>: 문서, 페이지, 애플리케이션에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
<aside>: 주요 내용과 간접적으로 연관된 부분. 보통 사이드바에 사용
<aside>
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<footer>: 작성자, 저작권 정보를 명시하는 문서의 푸터를 정의
<footer>
<p>© 2018 Gandalf</p>
</footer>
<header>: 사이트의 제목, 로고, 검색, 작성자 이름 등 사이트를 소개하거나 탐색하는데 도움을 주는 콘텐츠를 포함함
<header class="page-header">
<h1>Cute Puppies Express!</h1>
</header>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
h1부터 h6까지 6단계의 구획 제목을 나타냄. h1이 가장 높고, h6이 가장 낮음
<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<main>: body의 주요 콘텐츠를 포함함
<main>
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>
<nav>: 현재 페이지에서 다른 페이지로의 링크를 보여줌. 예를들어, 메뉴, 목차, 색인 등
<nav class="crumbs">
<ol>
<li class="crumb"><a href="#">Bikes</a></li>
<li class="crumb"><a href="#">BMX</a></li>
<li class="crumb">Jump Bike 3000</li>
</ol>
</nav>
<section>: 독립적인 구획을 나타냄
<h1>Choosing an Apple</h1>
<section>
<h2>Introduction</h2>
<p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>
<section>
<h2>Criteria</h2>
<p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
</section>
텍스트 콘텐츠
<blockquote>: 텍스트가 긴 인용문을 나타냄
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<div>: 콘텐츠를 담기 위한 통용 컨테이너로 가장 많이 사용하는 요소 중 하나. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않음
<div class="warning">
<img src="/media/examples/leopard.jpg"
alt="An intimidating leopard.">
<p>Beware of the leopard</p>
</div>
<dl>: dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용
<dd>: 정의 목록 요소(dl)에서 앞선 용어(dt)에 대한 설명, 정의, 또는 값을 제공
<dt>: 설명 혹은 정의 리스트에서 용어
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
<figure>: 독립적인 콘텐츠를 표현. figcaption 요소를 사용해 설명을 붙일 수 있음
<figcaption>: 부모 figure 요소가 포함하는 다른 콘텐츠에 대한 설명을 작성
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
<hr>: 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제를 분리할 때 사용
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
<hr>
<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>
<li>: 목록의 항목을 나타냄
<ol>: 정렬이된 숫자 목록을 표현할 때 사용
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
<ul>: 정렬되지 않은 목록을 표현할때 사용
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
<p>: 하나의 문단을 표현
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Some species live in houses where they hunt insects attracted by artificial light.</p>
<pre>: 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 반환
<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>
인라인 텍스트 시멘틱
<a>: href 속성을 이용해, 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 생성
<ul>
<li><a href="https://example.com">Website</a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
<abbr>: 약어를 정의하며, 약어의 full 단어를 title 속성에 명시함
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<b>
- 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용하여, 폰트를 bold 처리해 줌
- 해당 태그는 특별한 의미를 가지지 않기 때문에, strong과 같은 태그를 먼저 사용하고 마지막 수단으로 사용할 것을 권장함
<p>The two most popular science courses offered by the school are <b class="term">chemistry</b> (the study of chemicals and the composition of substances) and <b class="term">physics</b> (the study of the nature and properties of matter and energy).</p>
<bdo>: 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용
<p>In the computer's memory, this is stored as <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo></p>
<br>: 텍스트 안에 줄바꿈(캐리지 리턴)을 생성
<p>
O’er all the hilltops<br>
Is quiet now,<br>
In all the treetops<br>
Hearest thou<br>
Hardly a breath;<br>
The birds are asleep in the trees:<br>
Wait, soon like these<br>
Thou too shalt rest.
</p>
<cite>: 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 함
<figure>
<blockquote>
<p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
</blockquote>
<figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>
<code>: 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시할때 사용
<p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>
<data>: 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결할때 사용
<p>New Products:</p>
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
<li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
<dfn>: 현재 맥락이나 문장에서 정의하고 있는 용어에 사용
<p>A <dfn id="def-validator">validator</dfn> is a program that checks for syntax errors in code or documents.</p>
<em>: 텍스트의 강세를 나타냄
<p>Get out of bed <em>now</em>!</p>
<p>We <em>had</em> to do something about it.</p>
<p>This is <em>not</em> a drill!</p>
<i>
- 텍스트에서 어떤 이유로 주위와 구분해야 할때 사용함. 보통 브라우저에서는 이탤릭체(italic)로 표시됨
- 해당 태그는 특별한 의미를 가지지 않기 때문에, em, strong, mark 등 다른 태그를 우선시해서 사용하는것을 권장함
<p>I looked at it and thought <i>This can't be real!</i></p>
<p><i class="latin">Musa</i> is one of two or three genera in the family <i class="latin">Musaceae</i>; it includes bananas and plantains.</p>
<p>The term <i>bandwidth</i> describes the measure of how much information can pass through a data connection in a given amount of time.</p>
<kbd>: 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 표현할때 사용
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>
<mark>: 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타낼때 사용 (형광팬으로 텍스트를 칠하는 것과 같음)
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>
<q>: 짧은 인라인 인용문을 표현할 때 사용
<p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>
<ruby>: 동아시아 문자의 발음을 표기할 때 사용하는 루비 주석을 표현할때 사용
<rt>: 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정
<rp>: 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
<s>: 글자에 취소선, 즉 글자를 가로지르는 선을 그릴때 사용
<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>
<samp>: 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타낼때 사용
<p>I was trying to boot my computer, but I got this hilarious message:</p>
<p><samp>Keyboard not found <br>Press F1 to continue</samp></p>
<small>: 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타낼때 사용
<p>MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.</p>
<hr>
<p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p>
<span>: div와 같이 가장 많이 사용하는 태그 중 하나로, 컨텐츠를 담을 인라인 통용 컨테이너로 사용
<p>Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and <span class="ingredient">garlic</span> to a blender and blend into a paste.</p>
<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>
<strong>: 중대하거나 긴급한 콘텐츠를 나타내며, 보통 브라우저는 굵은 글씨로 표시된다
<p>... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: <strong>never feed him after midnight</strong>.</p>
<sub>: 아래 첨자를 표현할때 사용
<p>Almost every developer's favorite molecule is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as "caffeine."</p>
<sup>: 윗 첨자를 표현할때 사용
<p>The <b>Pythagorean theorem</b> is often expressed as the following equation:</p>
<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>
<time>: 시간의 특정 지점 또는 구간을 나타낸다
<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>
<p>The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least <time datetime="PT2H30M">2h 30m</time>.</p>
<u>: 올바르지 않은 문자를 구분하기 위해 사용. 브라우저에서는 밑줄로 표현해 줌
<p>You could use this element to highlight <u>speling</u> mistakes, so the writer can <u>corect</u> them.</p>
<var>: 수학 또는 프로그래밍에서의 변수의 이름을 나타낼때 사용
<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
<wbr>: 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타낼때 사용
<div id="example-paragraphs">
<p>Fernstraßenbauprivatfinanzierungsgesetz</p>
<p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
<p>Fernstraßen­bau­privat­finanzierungs­gesetz</p>
</div>
이미지 & 멀티미디어
<img>: 문서에 이미지를 넣을때 사용
<map>: area 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용
<area>: 이미지의 핫스팟 영역을 정의하고 hyperlink를 추가할 수 있음 (단, map 요소 안에서만 사용할 수 있음)
<map name="infographic">
<area shape="rect" coords="184,6,253,27"
href="https://mozilla.org"
target="_blank" alt="Mozilla" />
<area shape="circle" coords="130,136,60"
href="https://developer.mozilla.org/"
target="_blank" alt="MDN" />
<area shape="poly" coords="130,6,253,96,223,106,130,39"
href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
target="_blank" alt="Graphics" />
<area shape="poly" coords="253,96,207,241,189,217,223,103"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" />
<area shape="poly" coords="207,241,54,241,72,217,189,217"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank" alt="JavaScript" />
<area shape="poly" coords="54,241,6,97,36,107,72,217"
href="https://developer.mozilla.org/docs/Web/API"
target="_blank" alt="Web APIs" />
<area shape="poly" coords="6,97,130,6,130,39,36,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />
<audio>: 문서에 소리 컨텐츠를 넣을때 사용
<figure>
<figcaption>Listen to the T-Rex:</figcaption>
<audio
controls
src="/media/cc0-audio/t-rex-roar.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>
<track>: 미디어 요소(audio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용
<video controls
src="/media/cc0-videos/friday.mp4">
<track default
kind="captions"
srclang="en"
src="/media/examples/friday.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
<video>: 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입할때 사용
<video controls width="250">
<source src="/media/cc0-videos/flower.webm"
type="video/webm">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
내장 콘텐츠
<embed>: 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타낼때 사용
<iframe>: 현재 문서 안에 다른 HTML 페이지를 삽입할때 사용
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
<object>: 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타낼때 사용
<object type="application/pdf"
data="/media/examples/In-CC0.pdf"
width="250"
height="200">
</object>
<param>: object 요소의 매개변수를 정의할때 사용
스크립트
<canvas>: '캔버스 스크립팅 API' 또는 'WebGL API'와 함께 사용해 그래픽과 애니메이션을 그릴 수 있음
<noscript>: 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의할때 사용
<script>: 데이터 또는 실행가능한 코드(e.g. javascript)를 문서에 포함할때 사용
수정사항 표시
<del>: 문서에서 제거된 텍스트의 범위를 나타낼때 사용
<ins>: 문서에 추가된 텍스트의 범위를 나타낼때 사용
<blockquote>
There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
표 콘텐츠
<caption>: 표의 설명 또는 제목을 나타낼때 사용
<col>: 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용
<colgroup>: 표의 열을 묶는 그룹을 정의할때 사용
<table>
<caption>Superheros and sidekicks</caption>
<colgroup>
<col>
<col span="2" class="batman">
<col span="2" class="flash">
</colgroup>
<tr>
<td> </td>
<th scope="col">Batman</th>
<th scope="col">Robin</th>
<th scope="col">The Flash</th>
<th scope="col">Kid Flash</th>
</tr>
<tr>
<th scope="row">Skill</th>
<td>Smarts</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</table>
<table>: 행과 열로 이루어진 표를 나타낼때 사용
<tbody>: 표의 여러 행을 묶어서 표의 본문을 구성할 때 사용
<td>: 데이터를 포함하는 표의 셀을 정의
<th>: 표의 셀의 헤더를 정의할때 사용
<thead>: 표의 헤더를 묶어서 구성할때 사용
<tr>: 표의 셀을 표현할 때 사용
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
양식
<button>: 클릭 가능한 버튼을 나타낼때 사용
<datalist>: 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 option 요소들을 담을때 사용
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
<fieldset>: 웹 양식의 여러 컨트롤과 레이블(label)을 묶을 때 사용
<form>: 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서구획을 나타낼때 사용
<input>: 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성할때 사용
<label>: 사용자 인터페이스 항목의 설명할때 사용
<legend>: 부모 fieldset 콘텐츠의 설명할때 사용
<fieldset>
<legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster">
<label for="kraken">Kraken</label><br/>
<input type="radio" id="sasquatch" name="monster">
<label for="sasquatch">Sasquatch</label><br/>
<input type="radio" id="mothman" name="monster">
<label for="mothman">Mothman</label>
</fieldset>
<meter>: 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타낼때 사용
<label for="fuel">Fuel level:</label>
<meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter>
<optgroup>: 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타낼때 사용
<option>: select, optgroup, datalist 요소의 항목을 정의할때 사용
<select>: 옵션 메뉴를 제공하는 컨트롤을 나타낼때 사용
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<output>: 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소
<progress>: 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 나타낼때 사용
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
<textarea>: 멀티라인 일반 텍스트 편집 컨트롤을 나타낼때 사용
대화형 요소
<details>: "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성
<dialog>: 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타낼때 사용
<menu>: 사용자가 수행하거나 하는 명령 묶음을 나타낼때 사용
<summary>: details 요소의 요약, 캡션 또는 범례를 지정
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
A keyboard.
</details>
웹 컴포넌트
<slot>: 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더
<template>: 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공
Reference
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org
'Frontend > HTML, CSS, JS' 카테고리의 다른 글
| HTML 블록(block) , 인라인(inline), 인라인 블록(inline-block) (0) | 2021.12.23 |
|---|---|
| HTML의 기본 문법(속성, 값, 부모/자식 요소, 빈 태그) (0) | 2021.12.21 |
| 날짜/시간 라이브러리 moment.js 버그? (0) | 2021.12.16 |
| 웹(Web)에서 HTML, CSS, JS의 역할 (0) | 2021.10.27 |
| CSS를 이용하여 이미지를 정사각형 모양으로 자르기 (0) | 2021.07.25 |
