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 | ã | ã |
| ̀ | 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 |