HTML 정리

728x90

HTML (Hyper Text Markup Language)

브라우저가 읽을 수 있게 태그를 이용하여 구조를 만들어 놓은 문서 (확장자가 .html)

W3C (World Wide Web Consortium) 에서 웹 표준 관리함. (HTML, CSS, DOM, VG, XHTML, XML)

Hyper Text : 문서(텍스트,이미지,영상)를 서로 연결해주는 링크

Markup : 표시한다.

Languge : 그러한 언어

HTML 버전

버전	연도	DOCTYPE 및 설명
HTML 1.0	1991	팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML
HTML 2.0	1995	국제 표준으로 제정된 최초의 HTML
HTML 3.2	1997	W3C에 의해 제정된 최초의 HTML
HTML 4.01	1999	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0	2000	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5	2014	<!DOCTYPE html>

스크립트 실행의 직렬화

웹 작성자가 멀티 스레딩의 복잡성에 노출되지 않도록 HTML 및 DOM API는 스크립트가 다른 스크립트의 동시 실행을 감지 할 수 없도록 설계되었습니다.

이 일반적인 디자인 원칙의 예외는 JavaScript SharedArrayBuffer 클래스입니다. SharedArrayBuffer개체를 사용하면 실제로 다른 에이전트의 스크립트가 동시에 실행되고 있음을 확인할 수 있습니다.
또한 JavaScript 메모리 모델로 인해 직렬화 된 스크립트 실행을 통해 표현할 수 없을 뿐만 아니라 이러한 스크립트간에 직렬화 된 구문 실행을 통해 표현할 수없는 상황도 있습니다.

→ 무슨 말인지 이해x 자바스크립트 공부하면서 수정할 예정

in-memory representation

DOM HTML or the DOM 으로 불린다.

HTML 구문 : 대부분 레거시 웹 브라우저와 호환됨. 문서가 text/html MIME유형으로 전송되면 웹 브라우저에서 HTML 문서로 처리
XML 구문 : 문서가 application/xhtml+xml MIME유형으로 전송되면 XML 문서로 취급되고 XML 프로세서에 의해 해석됨

기본 구조

<!DOCTYPE html> : 현재 문서는 HTML5 문서임을 명시
<html>          : HTML 문서의 root 요소를 정의
  <head>        : HTML 문서의 metadata 정의
    <title>     : HTML 문서의 제목 정의 (= 웹 브라우저 툴바표시,즐겨찾기 제목,검색엔진 결과제목)
    </title>
  </head>
  
  <body>        : 웹 브라우저 통해 보이는 내용
    <h1> </h1>  : 제목(heading)
    <p> </p>    : 단락(paragraph)
  </body>
</html>

웹 개발 - HTML 기본 구조, 태그

기본 구조 : 현재 문서는 HTML5 문서임을 명시 : HTML 문서의 root 요소를 정의 : HTML 문서의 metadata 정의 : HTML 문서의 제목 정의 (= 웹 브라우저 툴바표시,즐겨찾기 제목,검색엔진 결과제목

11001.tistory.com

웹 페이지가 만들어지는 과정

브라우저는 문서를 읽고 파싱하여 Render Tree를 생성한다.
이때 DOM과 CCSOM (요소와 연관된 스타일 정보의 구조화된 표현)이 필요하다.
브라우저는 렌더링을 수행한다.

DOM (문서 개체 모델) 이란?

DOM (Document Object Model) DOM 이란? 마크 업을 구문 분석할 때 브라우저가 생성하는 객체로, Document를 Object(Node)의 집합체로 "해석"해 놓은 것이다. 모든 사람의 요구에 맞는 새 HTML 파일을 그때마다 생.

11001.tistory.com

요소(element)

Opening / Closing tag와 Content 모두를 통틀어 Element라고 함.
※ Empty tag : Opening tag만 존재하는 tag (img, br, hr 등)

구조

내용(Content) : Element의 내용, 단순 텍스트
Opening tag : Element의 시작을 의미.
Closing tag : Element의 끝을 의미

포함 요소(Nesting elements)

요소 안에 다른 요소가 들어갈 수 있음.

마지막에 열린 tag가 우선적으로 닫혀야 한다.

잘못된 예시
<p>This is <strong>Test</p> example.</string>

잘된 예시
<p>This is <strong>Test</strong> example.</p>

분류 (HTML 4.01)

블록 레벨 요소(Block level element)
단락, 목록, 네비게이션 메뉴, 꼬라말 등
다른 블록 레벨 요소에 포함될 수 있으며 구조적인 요소를 나타낼 때 사용
앞/뒤 element 사이에 새로운 줄을 만들고 사용가능한 좌우 최대 너비 차지함.
인라인 요소(Inline element)
하이퍼링크, 텍스트 강조 등 항상 블록 레벨 요소에 포함된다.
새로운 줄 추가되지 않고 문장, 단어 등 줄의 어디서나 시작될 수 있다.

분류 (HTML 5)

모든 HTML Element는 하나 이상의 콘텐츠 카테고리에 속하게 되는 개념으로 변경

Main content categorie : 많은 요소들에 의해 공유된 공통 규칙을 설명
Form-related content categories : form-related 요소에 공통 규칙을 설명
Specific content categories : 일부 요소에 의해 공유되는 희귀 카테고리 설명.

콘텐츠 종류

Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content

참고로 아래에 들어가면 모든 Element 확인 가능

HTML Standard

WebSocket/open_event FirefoxYesSafari?ChromeYes OperaYesEdgeYes Edge (Legacy)12+Internet Explorer? Firefox AndroidYesSafari iOS?Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

html.spec.whatwg.org

속성(Attribute)

속성명="속성값" 으로 구성된다. 항상 Opening tag 내에서 정의된다.

- 속성명 : 소문자 사용 권장
- 속성값 : " " 따옴표로 감싸기 권장 (띄워쓰기 들어가면 반드시 따옴표 사용)

<Opening tag 속성명="속성값">Content</Closing tag>
<p class="cat"Content</p>

<input name=address disabled>    : =값이 빈 문자열이면 생략 가능
<input name=address disabled="">

웹 개발 - HTML 태그

HTML 태그 제목(Heading) , 단락(Paragraph), 인용구(Quotation) 텍스트 크기/구분/위치 등에 영향주는 태그 태그명 empty tag 설명 예시 이미지 X (heading) 제목을 나타내는 태그 ~ 순서로 텍스트 크기 점점 작..

11001.tistory.com

웹 개발 - HTML 태그 (목록, 표)

목록 텍스트 크기/구분/위치 등에 영향주는 태그 태그명 empty tag 설명 예시 이미지 X (ordered list) 항목을 순서 붙여서 나열 속성 - start : 시작 번호 지정 - type : 순서를 붙이는 유형 (숫자, 영어, 로

11001.tistory.com

웹 개발 - HTML 이미지, 오디오, 비디오, 링크 삽입

이미지, 오디오, 비디오, 링크 삽입 이미지 삽입 태그 속성 src : 이미지 파일의 경로 (필수) alt : 이미지가 없을 경우 대체하여 나타낼 텍스트. 없으면 alt="" 입력 width : 이미지 너비 설정 height

11001.tistory.com

엔티티(Entity)

HTML 예약어를 기존 의미대로 사용하기 위해 별도로 만든 문자셋

HTML에는 미리 예약된 문자인, 예약어 (reserved characters) 가 있고 이를 코드에 사용하면 다른 의미로 해석함.

<p> 같은것이 예약어고, <p>를 문자그대로 표현하고 싶을때 쓰는 것.

&엔티티이름;
혹은
&#엔티티숫자;

엔티티(Entity) 문자	엔티티 이름	16진수 엔티티 숫자	설명
			줄 바꿈 없는 공백
<	<	<	보다 작은
>	>	>	보다 큰
&	&	&	AND 기호
"	"	"	큰따옴표
'	'	'	작은따옴표

더 많은 엔티티 : www.w3.org/TR/html4/sgml/entities.html

발음 구별 부호(diacritical marks)

악센트(accent) : 문자 위에 붙여서 쎄게 말해야 된다는것을 의미하는 부호

발음 구별 부호	문자	16진주 엔티티	결과
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

심볼(Symbol) 특수문자

키보드에 입력 못하는 심볼 특수문자들 (수학 용어, 그리스 문자, 국제 통화)

심볼 특수문자	엔티티 이름	16진수 엔티티	설명
¢	¢	¢	센트
£	£	£	파운드화
¥	¥	¥	엔화
€	€	€	유로화
©	©	©	저작권
®	®	®	등록상표
×	×	×	곱셈
÷	÷	÷	나눗셈

문자셋(Character set)

웹 브라우저가 HTML 문서 표현하기 위해 문서가 어떤 문자셋으로 저장되었는지 알아야 함.

<head>태그 내의 <meta>태그에 명시해줘야 함.

1. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.

2. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.

3. ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.

4. UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋입니다.

HTML4에서 UTF-8의 경우
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5에서 UTF-8의 경우
<meta charset="UTF-8">

HTML 스타일

style 속성 : CSS스타일을 하나의 HTML요소에 직접 설정 가능.

<태그명 style="속성명:속성값">

글자색 변경
<태그명 style="color:글자색">

배경색 변경
<태그명 style="background-color:배경색">

글자 크기 변경
<태그명 style="font-size:크기%">

문단 정렬 변경
<태그명 style="text-align:center">

여러 스타일의 설정 (세미콜론으로 구분함)
<태그명 style="background-color:배경색; color:글자색; font-size:폰트크기%; text-align:정렬방법">

HTML 색

<태그명 style="color:색상"

색상 이름으로 표현

aqua
blue
gray
lime
navy
purple
silver
white
black
fuchsia
green
maroon
olive
red
teal
yellow

<h1 style="color:blue">파란색</h1>
<h1 style="color:green">녹색</h1>
<h1 style="color:silver">은색</h1>
<h1 style="color:teal">청록색</h1>
<h1 style="color:red">빨간색</h1>

RGB 색상값으로 표현

Red, Green, Blue 혼합하여 색을 표현 (0~255까지 범위)

<h1 style="color:rgb(0,0,255)">파란색</h1>
<h1 style="color:rgb(0,128,0)">녹색</h1>
<h1 style="color:rgb(192,192,192)">은색</h1>
<h1 style="color:rgb(0,128,128)">청록색</h1>
<h1 style="color:rgb(255,0,0)">빨간색</h1>

16진수 색상값으로 표현

RGB 색상값을 16진수로 표현한 것. (00~FF까지 범위)

<h1 style="color:#0000FF">파란색</h1>
<h1 style="color:#008000">녹색</h1>
<h1 style="color:#C0C0C0">은색</h1>
<h1 style="color:#008080">청록색</h1>
<h1 style="color:#FF0000">빨간색</h1>

HTML 배경

배경을 다른 색으로 변경

HTML5 이전 : bgcolor 속성 이용

HTML5 : CSS 이용하여 배경색 변경

<style>
    body { background-color: lightblue; }
    h1 { background-color: rgb(255,128,0); }
    p { background-color: #FFFFCC; }
</style>내용

배경을 다른 이미지로 변경

<태그이름 background="이미지주소">

HTML 링크

<a>태그

href속성 : URL주소 명시 (텍스트,단락,이미지 등에도 사용가능)
<a href="링크주소">HTML 링크</a>

target속성 : 링크로 연결된 문서를 어디서 열지 명시
_blank	 : 링크로 연결된 문서를 새 창이나 새 탭에서 open
_self	 : 링크로 연결된 문서를 현재 프레임(frame)에서 open      (Default)
_parent	 : 링크로 연결된 문서를 부모 프레임(frame)에서 open
_top	 : 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 open
프레임명 : 링크로 연결된 문서를 지정된 프레임(frame)에서 open




페이지 책갈피
name 속성 : name="책갈피명"으로 책갈피 생성, href="#책갈피명"으로 링크이동 가능

<a href="#bookmark">책갈피 이동</a>
<a name="bookmark">내용</a>

링크의 상태(state)

링크상태 : 설명
link	: 아직 한 번도 방문한 적이 없는 상태 (기본설정) - 파란색+밑줄
visited	: 한 번이라도 방문한 적이 있는 상태             - 보라색+밑줄
hover	: 링크 위에 마우스를 올려놓은 상태
active	: 링크를 마우스로 누르고 있는 상태              - 빨간색+밑줄


링크 상태에 따라 style 변화 줄 수 있음.
<head>
	<style>
		a:link    { color: teal; }
		a:visited { color: maroon; text-decoration: none }
		a:hover   { color: yellow; text-decoration: none }
		a:active  { color: red; text-decoration: none }
	</style>
</head>

HTML 이미지

이미지란 2차원 평면 위에 그려진 시각적 요소 (JPEG, GIF, PNG)

이미지 삽입
<img>태그

src속성 : 이미지주소 URL 
alt속성 : 이미지 불러올 수 없는 경우 대체할 문자열
<img src="이미지주소" alt="대체문자열">


이미지 크기(width, height) 설정
style속성 : 크기 설정
width속성, height속성 : 너비,높이 pixel 단위로 설정

<head>
    <style>
        img {
            width:100%;
            border: solid 1px black;
        }
    </style>
</head>

<body>
    <img src="이미지경로" alt="html size" width="320" height="320"> → head>style에서 작성한것 기반
    <img src="이미지경로" alt="style size" style="width:320px; height:320px">
</body>


이미지의 테두리(border) 설정
<img src="이미지경로" alt="이미지테두리"style="width:320px; height:320px; border: 5px solid black">


이미지에 링크(link) 설정
<a href="경로" target="_blank">
    <img src="이미지경로" alt="대체문자열" style="width:320px; height:32px">
</a>


이미지 맵 만들기
<map>태그 : 이미지 맵 생성(이미지 일부를 버튼처럼 사용하는 기능) -하나이상의 <area>태그 가지며, 이것이 버튼역할
<img>태그 usemap속성을 <map>태그 name속성과 연결

<img src="이미지경로" alt="대체문자열" usemap="#이미지맵이름" style="width:320px; height:240px" />
<map name="이미지맵이름">
    <area shape="rect" coords="90,60,180,130" alt="대체문자열" href="링크경로">
    <area shape="rect" coords="210,200,70,130" alt="대체문자열" href="링크경로">
</map>

띄어쓰기, 줄 나누기

<!DOCTYPE html> : <html> 정의 전에 선언. 선언된 페이지의 HTML 버전 알려줌 (대소문자 구분x)

HTML 4.01 : 아래 3가지 방법으로 선언가능
SGML을 기반으로 하기 때문에 DTD를 참조해야 합니다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
→ 모든 HTML 요소와 속성들 포함. 더 이상 사용되지 않거나 아직 정식으로 포함되지 못한 요소들은 포함 X
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
→ 모든 HTML 요소와 속성들 포함. 더 이상 사용되지 않거나 아직 정식으로 포함되지 못한 요소들까지도 포함. 하지만 프레임셋(frameset) 콘텐츠 사용 허용 X
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
→ 모든 HTML 요소와 속성들 포함. 더 이상 사용되지 않거나 아직 정식으로 포함되지 못한 요소들까지도 포함. 프레임셋(frameset) 콘텐츠 사용 허용

HTML 5 : 단 한 가지 방법으로도 DOCTYPE을 선언가능
SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요 X
SGML(Standard Generalized Markup Language)은 문서용 마크업 언어를 정의하기 위한 메타 언어


<html> : 웹페이지 시작과 끝
<html lang="ko">
<!--브라우저가 해석하지 않는 주석-->
<head> : 웹페이지 정보,문서에서 사용할 외부 파일 링크할때 사용
  <title>브라우저 탭 제목</title>
  <meta charset="utf-8">
</head>
<body>
<h1>큰제목</h1>
<ol>
  <li>기술소개</li>
  <li>기본문법</li>
  <li>하이퍼텍스트와 속성</li>
  <li>리스트와 태그의 중첩</li>
</ol>
 
<h2>부제목</h2>
</body>
</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) 위치를 정의함.

저작자표시 동일조건 (새창열림)

'프론트엔드 개발' 카테고리의 다른 글

react-native 에서 tailwind 문법으로 스타일 적용하기 (twrnc 라이브러리) (0)	2024.11.13
tsconfig의 moduleResolution 란? (0)	2024.10.04
Next.js 서버사이드/클라이언트 사이드 분산추적/모니터링 툴 elastic-node-apm, elastic-rum 설치 이슈와 해결방법 (0)	2023.12.02
2022년 03월 까지 웹 개발 정복하기 (21.05.26 up) (0)	2021.04.07

HTML (Hyper Text Markup Language)

HTML 버전

기본 구조

요소(element)

구조

포함 요소(Nesting elements)

분류 (HTML 4.01)

분류 (HTML 5)

속성(Attribute)

엔티티(Entity)

발음 구별 부호(diacritical marks)

심볼(Symbol) 특수문자

문자셋(Character set)

HTML 스타일

HTML 색

HTML 배경

HTML 링크

HTML 이미지

'프론트엔드 개발' 카테고리의 다른 글

티스토리툴바