HTML 주요 요소와 속성, 한눈에 보기

# 개요

웹 개발 프로젝트에 필요한 HTML 요소(Elements)와 속성(Attributes)에 대해 간단한 개요와 설명을 통해 웹 페이지를 설계하고 구현하는 데 필요한 정보를 알아봅니다.
이를 통해 웹 표준을 준수하는 동시에, 효과적이고 의미론적(Semantic) 마크업 구조를 구현할 수 있도록 돕습니다.

HTML5 기준으로 작성합니다.
모든 브라우저에서 사용할 수 있어야 합니다.(IE 지원 불가는 별도 표시)
Deprecated(더 이상 사용되지 않는) 요소나 속성은 제외합니다.
의미론적(Semantic)인 내용 위주로 작성합니다.
표시적 의미(화면에 표시되는 방식)로 사용되지 않음을 전제하므로 그에 대한 내용은 최대한 생략합니다.
빈 태그(Empty Tags)는 <TAG />와 같이 /를 포함하여 표시합니다.
해당 요소에 필수적으로 사용되어야 하는 속성(Required Attributes)은 설명에 (필수)를 표시합니다.(그 외는 모두 선택 속성)
개인적 경험에 의해 사용 빈도, 중요도, 난이도가 높은 요소는 강조/첨언 합니다.
개인적 경험에 의해 사용 빈도, 중요도, 난이도가 낮은 요소는 생략/간소화 합니다.

# 주요 범위 요소

HTML 문서의 기본 구조(범위)를 형성하는 요소입니다.
lang 속성은 전역 속성으로, <html>에서 사용하면 문서 전체의 언어를 지정합니다.

HTML

content_copy

L
L
L
L
L

1
2
3
4
5
<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body></body>
</html>

문서의 기본 구조

요소	설명	표시 특성	참조
`<html>`	HTML 문서의 범위를 지정.		MDN
`<head>`	HTML 문서의 정보를 지정.		MDN
`<body>`	HTML 문서의 구조를 지정.	`block`	MDN

# 메타데이터 요소

문서의 기본 정보를 지정하거나 다른 리소스와의 관계를 지정합니다.
일부 메타데이터 요소는 브라우저와 검색 엔진 등에 제공하며 효과적인 SEO 최적화와 사용자 경험 향상에 기여합니다.
모두 <head> 요소 내에 포함돼야 합니다.

요소	설명	참조
`<title>`	브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 지정.	MDN
`<base />`	HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 지정. 한 문서에 하나의 `<base />` 요소만 포함 가능. - `href`: 기준 URL - `target`: `target` 속성을 사용하는 요소(`<a>`)의 기본값	MDN
`<link />`	외부 리소스(HTML, CSS, Icon 등)의 연결 및 현재 문서와의 관계를 명시. - `rel`: (필수)현재 문서와 외부 리소스와의 관계(Link Types) - `href`: 외부 리소스의 URL - `type`: 외부 리소스의 MIME 타입	MDN
`<meta />`	기타 메타데이터를 나타내기 위해 지정. (검색엔진이나 브라우저에 정보 제공) - `charset`: 문자인코딩 방식 - `name`: 메타 데이터의 이름(정보의 종류) - `http-equiv`: 서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공) - `content`: `name`, `http-equiv`의 값	MDN
`<style>`	문서나 문서 일부에 대한 스타일 정보(CSS)를 지정. - `type`: MIME 타입	MDN

# 콘텐츠 구분 요소

문서의 각 콘텐츠 구조를 의미론적으로 구분하기 위해 사용합니다.
기능적 차이는 없습니다.

요소	설명	표시 특성	참조
`<h1>` `<h2>` `<h3>` `<h4>` `<h5>` `<h6>`	문서의 정보 계층을 구조화.(Heading) 문서나 구분된 영역의 제목을 지정, 문서의 목차. 숫자가 낮을수록 높은 단계(중요한)의 제목. 한 문서에 하나의 `<h1>` 요소만 포함 가능.	`block`	MDN
`<header>`	문서의 헤더를 지정. 주로 로고, 제목, 검색 등을 포함.	`block`	MDN
`<footer>`	문서의 푸터를 지정. 주로 작성자, 저작권, 관련 문서 등을 포함.	`block`	MDN
`<main>`	문서의 주 콘텐츠를 지정. 한 문서에 하나의 `<main>` 요소만 포함 가능.	`block`	MDN
`<article>`	독립적으로 구분되거나 재사용 가능한 영역을 지정. 매거진, 신문 기사, 블로그 등. Heading(`<h1>`) 요소를 포함하여 식별. 작성일자와 시간을 `<time>`의 `datetime` 속성으로 작성.	`block`	MDN
`<section>`	문서의 일반적인 영역을 지정. Heading(`<h1>` ~ `<h6>`) 요소를 포함하여 식별.	`block`	MDN
`<aside>`	문서의 별도 콘텐츠를 지정. 주로 광고나 기타 링크 등의 사이드바를 지정.	`block`	MDN
`<nav>`	다른 페이지 링크를 제공하는 영역을 지정.(Navigation) 주로 메뉴, 목차, 색인 등을 지정.	`block`	MDN
`<address>`	연락처 정보를 제공하기 위해 포함하여 사용.	`block`	MDN
`<div>`	본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정.(Division)	`block`	MDN

HTML

content_copy

L
L
L
L
L

1
2
3
4
5
<section>
  <h2>Title</h2>
  <div>Contents1</div>
  <div>Contents2</div>
</section>

제목과 함께 사용하는 섹션 구분

# 텍스트 콘텐츠 요소

텍스트를 구조화하고 의미를 부여합니다.
정보의 가독성과 접근성을 향상시키는 역할을 합니다.

요소	설명	표시 특성	참조
`<ol>`	정렬된 목록을 지정.(Ordered List) 자식으로 `<li>`만 포함 가능. 항목 순서는 중요도를 의미할 수 있음. `start`: 항목에 매겨지는 번호의 시작 값 `type`: 항목에 매겨지는 번호의 유형	`block`	MDN
`<ul>`	정렬되지 않은 목록을 지정.(Unordered List) 자식으로 `<li>`만 포함 가능.	`block`	MDN
`<li>`	목록의 각 항목.(List Item) 단독으로 사용할 수 없으며, `<ol>` 혹은 `<ul>` 자식으로 포함돼야 함. `value`: 항목의 순서를 지정.	`list-item`	MDN
`<dl>`	용어와 정의(설명)의 그룹을 지정.(Description List) `<dt>`, `<dd>`만 포함 가능. 키(key)/값(value) 형태를 표시할 때 유용.	`block`	MDN
`<dt>`	용어를 지정.(Definition Term)	`block`	MDN
`<dd>`	정의(설명)를 지정.(Definition Details)	`block`	MDN
`<p>`	하나의 문단을 지정.(Paragraph) 일반적으로 정보통신보조기기 등은 다음 문단으로 넘어갈 수 있는 단축키를 제공함.	`block`	MDN
`<hr />`	문단의 분리를 위해 지정.(Horizontal Rule) 표현적 관점에서 수평선으로 표시되지만, 의미적 관점으로만 사용해야 함.	`block`	MDN
`<pre>`	서식이 미리 지정된 텍스트를 지정.(Preformatted Text) 텍스트의 공백과 줄바꿈을 유지하며 표시할 수 있음. 기본적으로 Monospace 글꼴로 표시됨.	`block`	MDN
`<blockquote>`	일반적인 인용문을 지정.(Block Quotation) -`cite`: 인용된 정보의 URL	`block`	MDN

HTML

content_copy

L
L
L
L
L
L

1
2
3
4
5
6
<dl>
  <dt>Coffee</dt>
  <dd>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</dd>
  <dt>Milk</dt>
  <dd>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</dd>
</dl>

용어와 설명을 표시

# 인라인 텍스트 요소

텍스트를 강조하거나 스타일을 적용해, 보다 가독성 높은 문서를 작성할 수 있습니다.

요소	설명	표시 특성	참조
`<a>`	다른 URL로 연결할 수 있는 하이퍼링크를 지정.(Anchor) 다른 페이지, 같은 페이지 위치(`#`, 해시 태그), 파일, 이메일 주소, 전화번호 등. - `download`: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 - `href`: 링크 URL - `rel`: 현재 문서와 링크 URL의 관계(Link Types) - `target`: 링크 URL의 표시(브라우저 탭) 위치 - `type`: 링크 URL의 MIME 타입	`inline`	MDN
`<abbr>`	약어를 지정.(Abbreviation) 주로 `title` 속성을 사용하여 전체 글자나 설명을 제공.	`inline`	MDN
`<b>`	문체가 다른 글자의 범위를 지정.(Bring Attention) 특별한 의미를 가지지 않음. 읽기 흐름에 도움을 주는 용도로 사용. 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용. 기본적으로 글자가 두껍게(Bold) 표시됨.	`inline`	MDN
`<mark>`	사용자의 관심을 끌기 위해 하이라이팅할 때 사용.(Mark Text) 기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색(Yellow)으로 표시됨.	`inline`	MDN
`<em>`	단순한 의미 강조를 표시.(Emphasis) 중첩할 수 있으며, 중첩될수록 강조 의미가 강해짐. 정보통신보조기기 등에서 구두 강조로 발음됨. 기본적으로 이탤릭체(Italic type)로 표시됨.	`inline`	MDN
`<strong>`	의미의 중요성을 나타내기 위해 사용.(Strong Importance) 기본적으로 글자가 두껍게(Bold) 표시됨.	`inline`	MDN
`<i>`	특별한 의미 없이, 평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용. 기본적으로 이탤릭체(Italic type)로 표시됨.	`inline`	MDN
`<dfn>`	용어를 정의할 때 사용.(Definition) 기본적으로 이탤릭체(Italic type)로 표시됨.	`inline`	MDN
`<cite>`	창작물에 대한 참조를 지정.(Citation) 책, 논문, 영화, TV 프로그램, 노래, 게임 등. 기본적으로 이탤릭체(Italic type)로 표시됨.	`inline`	MDN
`<q>`	짦은 인용문을 지정.(Inline Quotation) 긴 인용문을 지정할 경우 `<blockquote>`를 사용.	`inline`	MDN
`<u>`	밑줄이 있는 글자를 지정.(Underline) 순수하게 꾸미는 용도의 요소로 사용. `<a>`와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의. CSS `text-decoration: underline;` 사용을 권장함.	`inline`	MDN
`<code>`	컴퓨터 코드 범위를 지정.(Inline Code) 기본적으로 Monospace 글꼴로 표시됨.	`inline`	MDN
`<kbd>`	텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 지정.(Keyboard Input)	`inline`	MDN
`<sup>`	위 첨자(`<sup>`)를 지정.(Superscripted text)	`inline`	MDN
`<sub>`	아래 첨자(`<sub>`)를 지정.(Subscript text)	`inline`	MDN
`<time>`	날짜나 시간을 나타내기 위한 목적으로 사용. - `datetime`: 유효한 날짜 문자	`inline`	MDN
`<span>`	본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정.	`inline`	MDN
`<br />`	줄바꿈을 지정.	`inline`	MDN

HTML

content_copy

L

1
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!

약어를 표시

HTML

content_copy

L

1
<cite>The Scream</cite> by Edward Munch. Painted in 1893.

창작물 참조를 표시

HTML

content_copy

L

1
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>, <kbd>ESC</kbd>

키보드 입력을 표시

HTML

content_copy

L

1
X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>O

위/아래 첨자로 수학식을 표시

HTML

content_copy

L
L
L
L

1
2
3
4
<p>
  The Cure will be celebrating their 40th anniversary on
  <time datetime="2018-07-07">July 7</time> in London's Hyde Park.
</p>

날짜를 표시

# 텍스트 수정 요소

텍스트의 추가, 수정, 삭제를 표시해, 변경 사항을 명확하게 전달합니다.

요소	설명	표시 특성	참조
`<ins>`	새로 추가된(변경된) 텍스트의 범위를 지정.(Inserted Text)- `cite`: 변경을 설명하는 리소스의 URI - `datetime`: 변경이 일어난 유요한 날짜 문자	`inline`	MDN
`<del>`	삭제된(변경된) 텍스트의 범위를 지정.(Deleted Text) - `cite`: 변경을 설명하는 리소스의 URI - `datetime`: 변경이 일어난 유요한 날짜 문자	`inline`	MDN

# 멀티미디어 요소

이미지, 오디오, 비디오 등 다양한 멀티미디어 콘텐츠를 웹 페이지에 삽입할 수 있습니다.

요소	설명	표시 특성	참조
`<img />`	이미지를 삽입. - `src`: 이미지 URL - `alt`: 이미지 대체 텍스트 - `width`: 이미지 가로 너비 - `height`: 이미지 세로 너비 - `srcset`: 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의 - `sizes`: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의	`inline`	MDN
`<audio>`	소리 콘텐츠(MP3)를 삽입. `autoplay`가 지정된 경우, `preload`는 무시됨. - `autoplay`: 준비되면 바로 재생 - `controls`: 제어 메뉴를 표시 - `loop`: 재생이 끝나면 다시 처음부터 재생 - `preload`: 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공) - `src`: 콘텐츠 URL - `muted`: 음소거 여부	`inline`	MDN
`<video>`	동영상 콘텐츠(MP4)를 삽입. - `autoplay`: 준비되면 바로 재생 - `controls`: 제어 메뉴를 표시 - `loop`: 재생이 끝나면 다시 처음부터 재생 - `muted`: 음소거 여부 - `poster`: 동영상 썸네일 이미지 URL - `preload`: 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공) - `src`: 콘텐츠 URL - `width`: 동영상 가로 너비 - `height`: 동영상 세로 너비	`inline`	MDN
`<figure>`	이미지나 삽화, 도표 등의 영역을 지정.	`block`	MDN
`<figcaption>`	`<figure>`에 포함되어 이미지나 삽화 등의 설명을 표시.(Figure Caption)	`inline`	MDN

HTML

content_copy

L
L
L
L

1
2
3
4
<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 페이지를 현재 페이지에 삽입. - `name`: 프레임의 이름 - `src`: 포함할 문서의 URL - `width`: 프레임의 가로 너비 - `height`: 프레임의 세로 너비 - `allowfullscreen`: 전체 화면 모드 사용 여부 - `frameborder`: 프레임 테두리 사용 여부 - `sandbox`: 보안을 위한 읽기 전용으로 삽입	`inline`	MDN
`<canvas>`	Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링. - `width`: 캔버스의 가로 너비 - `height`: 캔버스의 세로 너비	`inline`	MDN

HTML

content_copy

L

1
<iframe width="1920" height="765" src="https://www.youtube.com/embed/bdPug9IWz-g" frameborder="0" allowfullscreen></iframe>

유튜브 동영상을 삽입하는 예제

# 스크립트 요소

문서에서 자바스크립트 등의 스크립트(코드)를 직접 포함하거나 참조할 때 사용합니다.

요소	설명	표시 특성	참조
`<script>`	스크립트 코드를 문서에 포함하거나 외부 스크립트 참조. - `async`: 스크립트의 비동기적(Asynchronously) 실행 여부 - `defer`: 문서 파싱(구문 분석) 후 작동 여부 - `src`: 참조할 외부 스크립트 URL - `type`: MIME 타입	`none`	MDN
`<noscript>`	스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의.	`inline`	MDN

# 표 콘텐츠 요소

데이터를 구조화된 표 형태로 표현해, 정보를 체계적이고 이해하기 쉽게 정리합니다.

요소	설명	표시 특성	참조
`<table>`	표를 지정. - `border`: 표 테두리 두께	`table`	MDN
`<tr>`	표의 행을 지정.(Table Row)	`table-row`	MDN
`<th>`	표의 머리글 칸을 지정.(Table Header) - `abbr`: 열에 대한 간단한 설명 - `headers`: 관련된 하나 이상의 다른 머리글 칸 `id` 속성 값 - `colspan`: 확장하려는(병합) 열의 수 - `rowspan`: 확장하려는(병합) 행의 수 - `scope`: 자신이 누구의 '머리글 칸'인지 명시	`table-cell`	MDN
`<td>`	표의 일반 칸을 지정.(Table Data) - `headers`: 관련된 하나 이상의 다른 머리글 칸 `id` 속성 값 - `colspan`: 확장하려는(병합) 열의 수 - `rowspan`: 확장하려는(병합) 행의 수	`table-cell`	MDN
`<caption>`	표의 제목을 지정. 열리는 TABLE 태그 바로 다음에 작성.	`table-caption`	MDN
`<colgroup>`	열의 집합(Column Group). - `span`: 연속되는 열 수	`table-column-group`	MDN
`<col>`	열을 지정.(Column) `<colgroup>`의 자식 요소로 사용. - `span`: 연속되는 열 수	`table-column`	MDN
`<thead>`	표의 머리글을 지정.(Table Head)	`table-header-group`	MDN
`<tbody>`	표의 본문을 지정.(Table Body)	`table-row-group`	MDN
`<tfoot>`	표의 바닥글을 지정.(Table Foot)	`table-footer-group`	MDN

HTML

content_copy

L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table>
  <caption>Fruits</caption>
  <colgroup>
    <col span="2" style="background-color: yellowgreen;">
    <col style="background-color: tomato;">
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>F123A</td>
      <td>Apple</td>
      <td>$22</td>
    </tr>
    <tr>
      <td>F098B</td>
      <td>Banana</td>
      <td>$19</td>
    </tr>
  </tbody>
</table>

표 요소 예시

# 양식 요소

사용자에게 데이터를 입력받고 처리하는 양식을 구성합니다.
이를 통해 사용자와의 상호작용을 가능하게 하고, 데이터를 수집하고 처리할 수 있게 합니다.

요소	설명	표시 특성	참조
`<form>`	웹 서버에 정보를 제출하기 위한 양식 범위를 정의. - `action`: 전송한 정보를 처리할 웹페이지의 URL - `autocomplete`: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 - `method`: 서버로 전송할 HTTP 방식 - `name`: 고유한 양식의 이름 - `novalidate`: 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 - `target`: 서버로 전송 후 응답받을 방식을 지정	`block`	MDN
`<input />`	사용자에게 입력 받을 데이터 양식. - `autocomplete`: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 - `autofocus`: 페이지가 로드될 때 자동으로 포커스 - `checked`: 양식이 선택되었음을 표시 - `disabled`: 양식을 비활성화 - `form`: `<form>`의 `id` 속성 값 - `list`: 참조할 `<datalist>`의 `id` 속성 값 - `max`: 지정 가능한 최대 값 - `min`: 지정 가능한 최소 값 - `maxlength`: 입력 가능한 최대 문자 수 - `multiple`: 둘 이상의 값을 입력 할 수 있는지 여부 - `name`: 양식의 이름 - `placeholder`: 사용자가 입력할 값의 힌트 - `readonly`: 수정 불가한 읽기 전용 - `step`: 유효한 증감 숫자의 간격 - `src`: 이미지의 URL - `alt`: 이미지의 대체 텍스트 - `type`: 입력 받을 데이터의 종류 - `value`: 양식의 초기 값 - `type=button`: 일반 버튼 - `type=checkbox`: 체크박스 - `type=color`: 색상 - `type=email`: 이메일 - `type=file`: 파일 - `type=hidden`: 보이지 않지만 전송할 양식 - `type=image`: 이미지 제출 버튼 - `type=number`: 숫자 - `type=password`: 비밀번호 - `type=radio`: 라디오 버튼 - `type=range`: 범위 컨트롤 - `type=reset`: 초기화 - `type=search`: 검색 - `type=submit`: 제출 버튼 - `type=tel`: 전화번호 - `type=text`: 일반 텍스트 - `type=url`: 절대 URL	`inline-block`	MDN
`label`	라벨 가능 요소(labelable)의 제목(Caption). `for` 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함. - `for`: 참조할 라벨 가능 요소의 `id` 속성 값	`inline`	MDN
`button`	선택 가능한 버튼을 지정. - `autofocus`: 페이지가 로드될 때 자동으로 포커스 - `disabled`: 버튼을 비활성화 - `form`: `<form>`의 `id` 속성 값 - `name`: 폼 데이터와 함께 전송되는 버튼의 이름 - `type`: 버튼의 타입	`inline-block`	MDN
`textarea`	여러 줄의 일반 텍스트 양식. - `autocomplete`: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 - `autofocus`: 페이지가 로드될 때 자동으로 포커스 - `disabled`: 양식을 비활성화 - `form`: `<form>`의 `id` 속성 값 - `maxlength`: 입력 가능한 최대 문자 수 - `name`: 양식의 이름 - `placeholder`: 사용자가 입력할 값의 힌트 - `readonly`: 수정 불가한 읽기 전용 - `rows`: 양식의 줄 수	`inline-block`	MDN
`fieldset`	양식의 관련 요소들을 그룹화. - `disabled`: 그룹 내 모든 양식 요소를 비활성화 - `form`: 그룹이 속할 하나 이상의 `<form>`의 `id` 속성 값 - `name`: 그룹의 이름	`block`	MDN
`legend`	`<fieldset>`의 제목을 지정.	`block`	MDN
`select`	드롭다운 목록을 지정. - `autofocus`: 페이지가 로드될 때 자동으로 포커스 - `disabled`: 양식을 비활성화 - `form`: `<form>`의 `id` 속성 값 - `multiple`: 여러 옵션을 선택할 수 있는지 여부 - `name`: 양식의 이름 - `size`: 한 번에 보여지는 옵션의 수	`inline-block`	MDN
`datalist`	자동완성 목록을 지정. - `id`: `<input>`의 `list` 속성과 바인딩	`none`	MDN
`optgroup`	`<option>`을 그룹화. - `disabled`: 그룹을 비활성화 - `label`: 그룹의 이름	`block`	MDN
`option`	드롭다운이나 자동완성 목록의 옵션을 지정. - `disabled`: 옵션을 비활성화 - `label`: 표시될 옵션의 제목 - `selected`: 옵션이 선택되었음을 표시 - `value`: 양식으로 제출될 값	`inline`	MDN
`progress`	작업의 완료 진행률을 표시. - `max`: 작업의 총량 - `value`: 작업의 진행량	`inline-block`	MDN

HTML

content_copy

L
L
L
L

1
2
3
4
<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="text" />

입력 요소의 다양한 데이터 타입 지정

HTML

content_copy

L
L
L
L
L
L
L
L
L

1
2
3
4
5
6
7
8
9
<!-- 라벨 가능 요소를 참조 -->
<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>

<!-- 라벨 가능 요소를 포함 -->
<label>
  <input type="checkbox" />
  동의하십니까?
</label>

라벨 가능 요소의 참조와 포함

HTML

content_copy

L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form>
  <fieldset>
    <legend>Coffee Size</legend>
    <label>
        <input type="radio" name="size" value="tall" />
        Tall
    </label>
    <label>
        <input type="radio" name="size" value="grande" />
        Grande
    </label>
    <label>
        <input type="radio" name="size" value="venti" />
        Venti
    </label>
  </fieldset>
</form>

같은 목적의 양식을 그룹화

HTML

content_copy

L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

선택 메뉴를 표시

HTML

content_copy

L
L
L
L
L
L
L
L
L

1
2
3
4
5
6
7
8
9
<input type="text" list="fruits">

<datalist id="fruits">
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Mango</option>
  <option>Fineapple</option>
</datalist>

자동완성 목록을 표시

HTML

content_copy

L

1
<progress value="70" max="100">70 %</progress>

작업의 진행률을 표시

# 전역 속성

모든 HTML 요소에서 공통으로 사용할 수 있는 전역 속성(Global Attributes)입니다.

속성	설명	참조
`id`	문서 전체에서 고유한 식별자(idenifier, ID)를 정의.	MDN
`class`	공백으로 구분된 요소의 별칭을 지정.	MDN
`style`	요소에 적용할 CSS를 선언.	MDN
`title`	요소의 정보(설명)을 지정.	MDN
`lang`	요소의 언어(ISO 639-1)를 지정.	MDN
`data-*`	사용자 정의 데이터 속성을 지정. HTML에 JS에서 이용할 수 있는 데이터를 저장하는 용도.	MDN
`draggable`	요소가 Drag and Drop API를 사용 가능한지 여부를 지정.	MDN
`hidden`	요소를 숨김.	MDN
`tabindex`	`Tab`키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정. - 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨. - 비대화형 콘텐츠에 `tabindex="0"`을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용. - `tabindex="-1"`을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. - `tabindex="1"` 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음.	MDN
`contenteditable`	요소의 사용자 편집 여부를 지정.	MDN

HTML

content_copy

L
L
L

1
2
3
<p lang="en">This paragraph is English</p>
<p lang="ko">이 단락은 한글입니다.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>

각 요소의 언어를 지정

HTML

content_copy

L
L
L
L
L
L
L

1
2
3
4
5
6
7
<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div>

<script>
  const meEl = document.getElementById('me')
  console.log(meEl.dataset.myName) // 'Heropy'
  console.log(meEl.dataset.myAge) // '851'
</script>

사용자 정의 데이터 속성을 지정

HTML

content_copy

L

1
<div draggable="true">The element to drag.</div>

드래그앤드롭 가능

HTML

content_copy

L
L
L
L

1
2
3
4
<form id="hidden-form" action="/action" hidden>
  <!-- 숨겨진 양식.. -->
</form>
<button form="hidden-form" type="submit">전송</button>

양식 요소를 숨긴 상태로 '전송'만 가능

HTML

content_copy

L
L
L
L
L

1
2
3
4
5
<h1 tabindex="0">Sign In</h1>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<label>PS: <input type="text" tabindex="-1"></label>
<input type="submit" value="Sign In">

포커스 탐색 순서를 지정