Real Front-End Series [Web(Front) - HTML]

TIaB·2026년 2월 24일

frontend

FrontEnd

목록 보기

1/7

HTML5 소개

HTML?

Markup Language

텍스트에 구조와 의미를 부여하기 위해 특정 기호, 태그를 사용하는 언어 - 프로그래밍보다는 표시용 언어
주로 문서의 형식과 내용을 정의하는데 사용
XML, HTML

HTML

Hyper Text Markup Language
- 웹 페이지에서 주로 사용되는 마크업 언어
  - 텍스트 뿐 아니라 이미지, 링크 등 다양한 요소를 문서 내에 포함
  - W3C에서 표준 관장
- 인터프리터 언어로 웹 브라우저에 의해 해석됨
  - DOM 트리를 구성하고 화면에 표십

html 문서의 구조

<!-- 문서의 유형을 나타내는 태그. 이제부터 html 형태로 읽어주세요.-->
<!DOCTYPE html>

<!-- html 문서의 시작을 여는 태그. lang 속성으로 문서의 언어 지정 -->
<html lang="ko">
  
  <!-- head : 화면에는 보이지 않지만 브라우저가 알아야 할 정보 표시 -->
  <head>
    
    <!-- 문자 인코딩 및 문서 키워드, 요약 정보 표시 -->
    <meta charset="UTF-8">
    
    <!-- 제목 표시줄에 표시되는 내용으로 방문자나 검색 엔진에 정보 제공 -->
    <title>first html</title>
  <head>
  <!-- 실제 내용이 들어가는 태그 -->
  <body>
    <h1>Hello Html!</h1>
  </body>

</html>

주석문 : 
- 주석은 사용자에게 그대로 전달되기 때문에 주의

HTML 기본

Tag

HTML 문서를 구성하는 요소
- 여는 태그에서 닫는 태그까지의 모든 것을 element라고 함
- 일반적으로 <html>이 최상위 root 태그
태그들은 중첩되며 사용될 수 있으나 꼬이면 안됨
html 태그는 대소문자를 가리지 않음
- 관례상 소문자 사용

용도에 따른 Tag의 종류

구분	용도	종류
구조적 요소	문서 구조	`<html>`, `<head>`, `<body>`, `<header>`, `<footer>`, `<nav>`, `<section>`, `<article>`, `<aside>`
구조적 요소	공간 분할	`<div>`, `<span>`
텍스트 관련 요소	헤딩	`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`
텍스트 관련 요소	단락 및 텍스트	`<p>`, `<pre>`
리스트 요소	일반 목록	`<ol>`, `<ul>`, `<li>`
리스트 요소	구성된 리스트	`<dl>`, `<dt>`, `<dd>`
링크 및 미디어	링크	`<a>`
링크 및 미디어	미디어	`<img>`, `<video>`, `<audio>`, `<object>`, `<embed>`
폼 요소	폼	`<form>`
폼 요소	입력 필드	`<input>`, `<textarea>`, `<select>`, `<button>`, `<label>`, `<fieldset>`, `<legend>`
테이블 요소	테이블	`<table>`
테이블 요소	행 및 셀	`<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>`, `<tfoot>`

block 요소와 inline 요소

block 요소
- 태그를 사용하면 자동적으로 줄바꿈이 되는 요소
- 주로 문서의 구조나 레이아웃을 정의하는데 사용됨
inline 요소
- 태그를 사용하면 한 줄 안에서 다른 인라인 요소와 함꼐 표시
- 주로 텍스트와 관련된 요소에 사용됨

Tag의 Attribute(속성)

태그에 대한 추가적인 정보 제공
- 여는 태그를 기록하며 name = "value"의 형태
- value를 작성할 때는 " "또는 ' '를 사용할 수 있으며 기본적으로는 " 를 사용
- 필요할 경우 여러 개의 attribute 사용 가능
attribute 사용 예시

<a href="http://www.naver.com>네이버로</a>

<input type="text" value="hong" readonly />

global 속성

모든 태그에서 사용할 수 있는 속성

속성명	설명	사용 예시
id	엘리먼트의 고유 식별자를 지정함.	`<div id="uniqueId">Content</div>`
class	여러 엘리먼트에 공통적으로 적용할 클래스를 지정함.	`<p class="text">Text</p>`
style	인라인 스타일을 정의함.	`<span style="color: red;">Red Text</span>`
data-*	사용자 정의 데이터 속성을 추가함.	`<div data-custom="value">Custom Data</div>`
title	엘리먼트에 대한 추가 정보를 제공함.	`<a href="#" title="More info">Link</a>`
...	기타 전역 속성들	...
tabindex	엘리먼트의 포커스 순서를 지정함.	`<button tabindex="1">Button</button>`
hidden	엘리먼트를 숨김.	`<div hidden>Hidden Content</div>`

특수문자와 공백

태그를 표현하는 문자( <, > )등 일부 문자는 예약어로 지정되어 사용 불가
이와 같은 문자를 사용하기 위해 미리 지정된 entity를 사용
white space는 개수와 상관 없이 공백 하나로 인정

Result	Description	Entity 표현	Result	Description	Entity 표현
공백	non-breaking space	` `	$	dollar	`&dollar;`
<	less than	`<`	₩	원화 표시	`&won;`
>	greater than	`>`	©	copyright	`©`
&	ampersand	`&`	®	registered trademark	`®`

emmet

the essential toolkit for web developers
자주 사용되는 emmet 약어들

abbreviation	설명	사용 예
!	html5 문서의 기본 구조 생성	`!`
>	하위 요소 생성	`header>ul>li`
+	동급 요소 생성	`section>article>h2+p`
*	반복 개수 지정	`ul>li*5`
# 또는 .	각각 id와 class 지정	`ul#menu>li.item*3`
( )	그룹핑	`div.container>(header>nav>ul>li*5>a)+(#content>section)+footer`
[attribute]	속성 지정	`td[title=name colspan=5]`
{ }	텍스트 입력	`a.button{Click Me}`
$	넘버링	`ul.list>li.item*5{$}`

기본 태그

heading

`<h1>` ~ `<h6>`

제목(heading)을 표시하는 태그로 block 요소
검색 엔진은 heading을 이용해서 웹 페이지의 구조와 콘텐츠를 색인화하므로 중요
중요도에 따라 h1 ~ h6 사용

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

일반문자

list

목록형 요소

관련된 아이템들을 목록화 하기 위한 태그들

태그 명	전체 이름	설명
`<ul>`	Unordered List	순서가 없는 목록을 생성함. 하위 요소로 `<li>`를 가짐
`<ol>`	Ordered List	순서가 있는 목록을 생성함. 하위 요소로 `<li>`를 가짐
`<li>`	List Item	목록 항목을 정의함

중첩 리스트 표현
- <li>에 닫는 태그를 사용하고 내부에 중첩 리스트 삽입

 <ul>
  <li>
    공과대학
    <ol>
      <li>컴퓨터공학과</li>
      <li>전자공학과</li>
    </ol>
  </li>
  <li>
    경영대학
    <ol>
      <li>경영학과</li>
      <li>회계학과</li>
    </ol>
  </li>
</ul>

table

행과 열을 이용해서 데이터를 구조적으로 저장하는 역할

태그 명	전체 이름	설명
`<table>`	Table	테이블
`<tr>`	Table Row	테이블의 행
`<td>`	Table Data	테이블의 셀(데이터)
`<th>`	Table Header	테이블의 헤더 셀
`<caption>`	Caption	테이블의 제목
`<thead>`	Table Head	테이블의 헤더 부분
`<tbody>`	Table Body	테이블의 본문 부분
`<tfoot>`	Table Foot	테이블의 바닥글 부분
`<col>`	Column	테이블의 열에 대한 속성
`<colgroup>`	Column Group	테이블의 여러 열에 대한 속성

<table>
      <caption>
        사용자 정보
      </caption>
      <colgroup>
        <col style="background-color: #f0f0f0" />
        <col span="2" style="background-color: #d0e0f0" />
      </colgroup>
      <thead>
        <tr>
          <th>이름</th>
          <th>나이</th>
          <th>키</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>홍길동</td>
          <td>25</td>
          <td>175cm</td>
        </tr>
        <tr>
          <td>김철수</td>
          <td>30</td>
          <td>180cm</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>평균</td>
          <td>27.5</td>
          <td>177.5cm</td>
        </tr>
      </tfoot>
    </table>
    <br>

셀 병합

<td>의 colspan, rowspan 활용

속성	설명	활용 예
colspan	가로로 셀 병합	`<td colspan="2">`
rowspan	세로로 셀 병합	`<td rowspan="2">`

<table>
  <tbody>
    <tr>
      <th>단</th>
      <th colspan="2">내용</th>
      <tr>
        <td rowspan="9">3단</td>
        <td>3*1</td>
        <td>3</td>
      </tr>
      <tr>
        <td>3*2</td>
        <td>6</td>
      </tr>
      <tr>
        <td>3*3</td>
        <td>9</td>
      </tr>
      <tr>
        <td>3*4</td>
        <td>12</td>
      </tr>
      <tr>
        <td>3*5</td>
        <td>15</td>
      </tr>
      <tr>
        <td>3*6</td>
        <td>18</td>
      </tr>
      <tr>
        <td>3*7</td>
        <td>21</td>
      </tr>
      <tr>
        <td>3*8</td>
        <td>24</td>
      </tr>
      <tr>
        <td>3*9</td>
        <td>27</td>
      </tr>
    </tr>
  </tbody>
</table>

img

이미지를 표현하기 위해서 사용되는 태그
주요 속성

속성명	설명
src	이미지 파일의 경로를 지정 - 절대경로: `/`로 시작, 프로젝트 root 기준 - 상대경로: `./`, `../` 현재 파일 기준 - 외부 사이트: `http://www.naver.com/~`
alt	이미지를 설명하는 텍스트 이미지가 로드되지 않을 때 대체 텍스트로 사용됨
width, height	이미지의 너비/높이를 픽셀 단위 또는 `%` 등으로 지정 CSS를 통해 설정하는 것을 권장
title	이미지에 대한 추가 정보를 제공 마우스를 올리면 툴팁으로 표시됨
loading	이미지 로딩 방식을 설정 (`lazy`, `eager`)

link

a

anchor로 텍스트, 이미지 등을 클릭해서 다른 문서나 위치, 사이트로 이동하는 기능
주요 속성

속성명	설명
href	링크의 목적지 URL을 지정 절대/상대/외부사이트 연결
target	링크를 열 때의 창이나 탭을 지정 _self : 현재 화면에서 열림 (기본 값) _blank : 새창이나 새 탭으로 열림
title	링크에 대한 추가 정보 마우스를 올리면 툴팁으로 표시
download	링크를 클릭할 때 파일 다운로드를 시작

새 창 또는 탭을 결정할 수는 없음 (브라우저 정책)

<a href="http://www.google.com" target="_blank">구글로</a>
<a href="http://www.ssafy.com" target="_self">싸피로</a>

페이지 내에서 이동

동일한 페이지 내에 id 속성으로 대상 생성
href에서 #id 형태로 링크 설정

<a href="#end">끝으로</a>
    <!--END-->
    <div id="start">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, cum cupiditate voluptatum recusandae laborum ullam saepe optio non rerum necessitatibus animi beatae rem sunt eveniet. Cum
      ad optio impedit in eius! Deleniti nobis sunt iure vitae porro exercitationem vero nihil tempora impedit magni, aliquam ipsa explicabo a in earum dolore ab veniam, commodi maxime delectus
      adipisci magnam, sed fugit aliquid? Culpa nostrum corporis minima itaque qui totam inventore aliquam, nobis quae cum esse ducimus pariatur optio consequatur quibusdam iusto aperiam enim sed
      deserunt quam nihil facilis tenetur? Nihil similique suscipit repellendus nostrum totam, tenetur non? Consectetur eligendi tempora reprehenderit exercitationem.
    </div>
    <div>
      Voluptas possimus quidem, similique placeat doloribus provident ipsum. Recusandae natus ipsa necessitatibus magni saepe hic labore ipsum modi quo dignissimos, ex dolor quos maxime ut debitis
      provident perspiciatis facilis optio autem tempore veniam nobis numquam dolorem itaque. Commodi, fugiat rem nulla similique deserunt numquam. Nulla molestias ullam quas aut recusandae. Mollitia
      ex numquam excepturi illo est ea? Quia nesciunt aperiam, veniam doloribus est eaque officia magni in reprehenderit nam earum alias vero non nobis a fuga? Nisi, corrupti sequi omnis molestias
      quasi nihil aspernatur totam eum. Facere expedita consectetur cumque hic nostrum odit sit praesentium ullam numquam voluptas! Neque, deleniti.
    </div>
    <div id="end">
      Veniam vel sapiente odio placeat consequuntur quae delectus in minus accusantium eligendi quisquam, ipsa expedita quas quo quod odit maiores culpa perferendis iste doloribus ut dolores! Quam
      quis, nesciunt voluptatem similique illo numquam. Omnis, corporis corrupti! Inventore voluptatibus delectus consectetur corporis, dolore enim libero totam impedit quod assumenda, tempore ratione
      nemo iste laborum eos. Velit harum quidem iusto optio dolor, impedit officiis ab voluptatibus modi dolore quibusdam! Aliquid omnis exercitationem iusto vero voluptatibus perspiciatis, iste
      voluptatem aspernatur delectus quas unde ad ut nemo libero ipsum mollitia odio qui eum suscipit fuga deserunt iure, tempora totam. Corporis magnam porro sit rerum!
    </div>
    <a href="#start">처음으로</a>

form 활용

form

사용자로부터 데이터를 입력 받아 서버로 전송하기 위해서 사용되는 요소
- key=value의 형태로 파라미터가 전달된다.

속성

<form>의 속성

속성	설명	사용 가능한 값
action	요청을 처리할 서버의 URL 지정	상대/절대/외부 서버
method	폼 데이터를 전송할 방법을 지정	get : URL 쿼리 문자열로 전송 post : HTTP 요청 본문에 포함하여 전송 dialog : 대화형 다이얼로그 창에서 사용 (일반 form 전송 아님)
enctype	폼 데이터 인코딩 방식을 지정	application/x-www-form-urlencoded : 기본 방식 multipart/form-data : 파일 업로드 시 사용 text/plain : 인코딩 없이 전송
target	폼 제출 후 결과를 열 위치 지정	_blank, _self
name	폼의 이름을 지정	사용자 정의 값
autocomplete	폼 입력 자동 완성 여부 설정	on, off
novalidate	폼 유효성 검사를 비활성화	값 없음

`<form>`의 하위 태그들

태그 이름	설명
`<fieldset>`	관련된 입력 요소를 그룹화하여 시각적으로 구분함
`<legend>`	`<fieldset>`의 제목을 정의함
`<label>`	입력 필드에 대한 설명이나 이름을 제공함
`<input>`	사용자로부터 데이터를 입력받기 위한 필드
`<textarea>`	여러 줄의 텍스트 입력을 위한 필드
`<button>`	폼 제출 등을 위한 버튼

input

값을 입력 받기 위한 폼 구성 요소
공통 attribute

속성	설명
type	GUI 컴포넌트(input 요소)의 타입을 지정 text, password, radio, checkbox 등
id	한 화면에서 유일한 값으로 CSS, JavaScript에서 요소를 구분하기 위한 값 주로 해당 페이지에서 사용
name	input 요소의 이름으로 서버에 전달되는 parameter의 name 주로 서버에서 사용
value	input 요소의 기본 값으로 서버에 전달되는 parameter의 value name과 쌍으로 연결되어 서버로 전달

id vs name
id는 프론트 단에서 사용되고 name은 서버로 보냄.

label

<input> 등 요소에 설명을 추가하기 위해 사용
사용법

label 내부에 input 작성

<label>user:<input type="text" name="username" value="hong" /></label>

input 요소에 id를 지정하고 이를 통해 label과 연결

<label for="user">user:</label>
<input type="text" id="user" name="username" value="hong" />

CSS를 통해 간격이 동일한 <label>을 생성하기 위해선 두 번째 방법 추천

Form 전송 방식의 비교

구분	GET	POST
상황	• 전송 방식을 명시적으로 post라고 하지 않은 경우 default • 주소창에 직접 값을 입력해 요청하는 경우 • form에서 명시적으로 get 방식으로 전달한 경우	• 전송 방식을 명시적으로 post 방식으로 선언한 경우
파라미터 전달	• 주소창의 query string으로 파라미터 전달 예: www.google.co.kr?page=1&q=today	• 요청의 body에 포함되어 전달
데이터 양	• 브라우저별 길이 제한 존재 → 상대적으로 적은 데이터 전송	• 용량 제한이 거의 없음
보안성	• URL에 노출될 수 있어 보안에 취약	• URL에 노출되지 않아 상대적으로 보안에 강함
용도	• 서버 데이터에 영향을 주지 않는 단순 조회 • 북마크가 필요한 경우	• 서버 데이터에 영향을 주는 작업 (수정, 삭제, 추가) • 보안이 필요한 경우, 파일 업로드 등

input

`<input>`의 type (1/2)

type	설명
hidden	사용자에게 보이지 않지만 서버로 넘겨지는 값을 갖는 필드
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
password	비밀번호 입력
search	검색 상자 (검색 초기화 기능 제공)
tel	전화번호 입력 필드
url	URL 주소를 입력할 수 있는 필드
email	이메일 주소를 입력받는 필드
number	숫자를 조절할 수 있는 입력 필드 (min, max, value 속성 사용 가능)
range	숫자를 조절할 수 있는 슬라이드 막대
color	색상표 삽입

`<input>`의 type (2/2)

type	설명
checkbox	주어진 항목들에서 2개 이상 선택 가능
radio	주어진 항목들에서 하나만 선택 가능
date	사용자 지역을 기준으로 날짜 입력
month	사용자 지역을 기준으로 월 입력
week	사용자 지역을 기준으로 주 입력
time	사용자 지역을 기준으로 시간 입력
button	동작할 수 있는 버튼 삽입
file	파일을 첨부할 수 있는 버튼
submit	폼의 내용을 서버로 전송
reset	입력 필드들에 대한 초기화

input의 기타 속성

속성이름	설명	사용 가능한 값 예시	적용 가능한 타입
name	입력 필드의 이름을 지정함	문자열	모든 타입 (*)
value	입력 필드의 기본 값을 지정함	문자열	모든 타입 (*)
placeholder	입력 필드에 안내 텍스트를 표시함	문자열	모든 타입 (*)
required	입력 필드를 필수 입력으로 지정함 (validation)	값 없음	모든 타입 (*)
readonly	입력 필드를 읽기 전용으로 설정함	값 없음	모든 타입 (*)
disabled	입력 필드를 비활성화함 (서버 전송 없음)	값 없음	모든 타입 (*)
minlength	입력 가능한 최소 문자 수를 지정함	정수	text, password, email, textarea
maxlength	입력 가능한 최대 문자 수를 지정함	정수	text, password, email, textarea
min	입력 가능한 최소 값을 지정함	정수 또는 소수	number, date, time, range
max	입력 가능한 최대 값을 지정함	정수 또는 소수	number, date, time, range
step	숫자 입력 필드의 증가 단위를 지정함	정수 또는 소수	number, range
pattern	입력 값의 정규 표현식 패턴을 지정함	문자열	text, search, email, url

checkbox와 radio 타입

checkbox : 여러 항목 중 0개 이상을 선택할 때 사용
radio : 여러 항목 중 최대 하나를 선택할 때 사용
속성 특성
- name : 항목들이 그룹핑되어야 하므로 input의 name 속성이 같아야 함
- value : <checkbox>의 경우 동일한 name으로 여러 값이 전달되므로 서버에서 배열로 처리
- checked : 요소들의 초기 선택 상태 설정
요소 선택과 <label> 사용
- 요소 선택의 편의를 위해 반드시 <label>과 연동해서 처리할 것

<label><input type="checkbox" name="major" value="civil" id="m_civil" checked>토목공학</label>

button

<button> 또는 <input type="button"> 사용 가능
- 기본 type은 submit
  - 클릭 시 언제나 서버로 form 내용을 전송
차이점
- <button>은 content를 포함할 수 있기 때문에 이미지 등 다양한 내용을 포함 가능
  - <input>의 형태는 단순한 문자열 형태의 value만 가질 수 있음
- Screen Reader를 통한 접근성 향상 가능

select

drop down 목록에서 값을 선택할 때 사용
주요 속성

속성명	설명	속성명	설명
size	스크롤을 하지 않고 표시할 옵션의 개수를 지정	multiple	여러 개의 옵션을 선택할 수 있게 함

하위 태그

태그명	설명
`<optgroup>`	옵션 그룹을 묶어 표시하며 선택되는 항목은 아님. `label` 속성으로 그룹의 제목을 표현
`<option>`	선택 가능한 항목을 정의. 서버로 전송되는 값을 나타내는 `value`와 화면에 표시되는 label 포함

APPENDIX : semantic 태그

공간 분할 태그

레이아웃을 구성하고 컨텐츠를 구분하는데 사용되는 태그
- 웹 페이지의 구조를 설계하는데 중요한 역할 수행

구분	`<div>`	`<span>`
용도	행을 구분하며 block 형식으로 공간을 분할 페이지의 구조, 틀을 만들 때 사용	행 구분 없이 inline 형식으로 공간을 분할 특정 부분에 스타일을 적용할 때 주로 사용
크기 지정	width, height를 이용해서 크기를 가질 수 있음	크기를 지정할 수 없음
margin 속성	4방향 지정 가능	좌우만 지정 가능

기존의 페이지는 영역을 구분하기 위해 대부분 <div> 사용

일단 <div>로 묶고 해당 영역을 구분하기 위해 id 사용
- 어떤 용도로 사용되었는지 파악하기가 어렵고 개발자마다 사용하는 id가 다름
강제적인 tag 이름(idv)에는 의미가 없고 의미를 갖는 속성(id)의 값은 강제성이 없음

semantic 태그

태그 자체에 의미를 부여
- 컨텐츠의 의미를 나타내는 것이지 위치를 특정하거나 모양이 달라지는 것은 아님
단순한 의미 전달 뿐 아니라 SEO, Screen Reader에서의 활용 등 다양한 분야에서 장점

무엇인가의 제목
- 반드시 페이지의 제목일 필요는 없음, section이나 article의 제목일 수도 있음
일반적으로 로고, 메뉴, 검색 창 등과 함께 표시

<nav>

문서를 연결하는 네비게이션 링크 표시

<section>과 <article>

<section> : 주제별 컨텐츠 영역을 표시하며 일반적으로 내부에 여러 개의 <article>을 포함
<article> : 실제 컨텐츠의 내용 등록

<aside>

본문 이외의 내용을 표시
- 광고나 링크 모음 등 본문의 주제와 약간 다른 내용들

TIaB

Study Logging...

다음 포스트

Result	Description	Entity 표현	Result	Description	Entity 표현
공백	non-breaking space	` `	$	dollar	`&dollar;`
<	less than	`<`	₩	원화 표시	`&won;`
>	greater than	`>`	©	copyright	`©`
&	ampersand	`&`	®	registered trademark	`®`

Result	Description	Entity 표현	Result	Description	Entity 표현
공백	non-breaking space	` `	$	dollar	`&dollar;`
<	less than	`<`	₩	원화 표시	`&won;`
>	greater than	`>`	©	copyright	`©`
&	ampersand	`&`	®	registered trademark	`®`

Real Front-End Series [Web(Front) - HTML]

FrontEnd

HTML5 소개

HTML?

Markup Language

HTML

html 문서의 구조

HTML 기본

Tag

용도에 따른 Tag의 종류

block 요소와 inline 요소

Tag의 Attribute(속성)

기본 태그

heading

<h1> ~ <h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

list

목록형 요소

table

셀 병합

img

link

a

페이지 내에서 이동

form 활용

form

속성

<form>의 하위 태그들

input

label

Form 전송 방식의 비교

input

<input>의 type (1/2)

<input>의 type (2/2)

input의 기타 속성

checkbox와 radio 타입

button

select

APPENDIX : semantic 태그

공간 분할 태그

공간 분할 태그

기존의 페이지는 영역을 구분하기 위해 대부분 <div> 사용

semantic 태그

header

<nav>

<section>과 <article>

<aside>

<footer>

Real Front-End Series [Web(Front) - CSS 1]

0개의 댓글

`<h1>` ~ `<h6>`

`<form>`의 하위 태그들

`<input>`의 type (1/2)

`<input>`의 type (2/2)

Result	Description	Entity 표현	Result	Description	Entity 표현
공백	non-breaking space	` `	$	dollar	`&dollar;`
<	less than	`<`	₩	원화 표시	`&won;`
>	greater than	`>`	©	copyright	`©`
&	ampersand	`&`	®	registered trademark	`®`