본문 바로가기
프로그래밍 언어/HTML5

[HTML] 요약

by cogito21_cpp 2024. 8. 2.
반응형

HTML 구성

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>문서 제목</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
  </body>
</html>

- <!DOCTYPE html> : 문서 형식 정의(DTD)는 현재 문서가 HTML5 문서임을 명시. 문서의 최상위에 위치하고 대소문자 구별하지 않음

- <html> : HTML 문서의 루트(root) 요소를 정의. 웹 페이지를 구성하는 모든 요소들을 포함. 모든 요소는 html 요소의 자식 요소여야 함

- <head> : HTML 문서의 메타데이터(metadata)를 정의. 

    - 메타데이터(metadata): HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미

    - 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현

    - 메타데이터 이외의 화면에 표시되는 요소를 포함해서는 안 됨

- <body> : 웹 브라우저를 통해 보이는 내용(content) 부분

HTML 요소

<Tag attr="value">Content</Tag>

- Tag: 태그명

- attr: 속성명

- value: 속성값. 큰 따옴표로 작성

- Content: 내용

 

HTML5 태그

◆: HTML5에 추가된 태그

태그 설명
<!-- --> 주석을 정의
<!DOCTYPE> 문서의 타입을 정의
<a> 다른 컨텐츠와 연결되는 하이퍼링크를 정의
<abbr> 축양형이나 머리글자로된 단어만 정의
<acronym> 머리글자로만 된 단어를 정의
HTML5에서는 더 이상 지원하지 않으며, 대신 <abbr> 요소를 사용
<address> 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시
<applet> 문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램)을 정의
HTML5에서는 더 이상 지원하지 않으며, 대신 <embed> 요소나 <object> 요소를 사용
<area> 이미지 맵에서 하이퍼링크가 연결될 영역을 정의
<article>◆ 해당 문서나 페이지 또는 사이트와는 완전히 독리적으로 구성할 수 있는 요소를 정의
<aside>◆ 페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만 해당 콘텐츠로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지의 영역을 정의
<audio>◆ 음악이나 오디오 스크림과 같은 사운드를 정의
<base> 해당 문서의 모든 상대 주소에 대한 기본 URL과 target 속성값을 정의
<basefont> 해당 문서의 모든 텍스트에 대한 색상, 크기 및 폰트의 기본값을 정의
HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용
<bdi>★ 주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의
<bdo> 자식 요소의 텍스트 방향성을 정의
<big> 글자 크기가 큰 텍스트를 정의
HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용
<blockquote> 다른 출처로부터 인용된 영역을 정의
<body> 해당 문서의 콘텐츠 영역을 정의
<br> 행 바꿈(line-break)을 정의
<button> 클릭할 수 있는 버튼을 정의
<canvas>◆ 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용
<caption> 테이블의 캡션을 정의
<center> 가운데로 정렬되는 텍스트를 정의
HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용
<cite> 창작물의 제목을 정의
<code> 컴퓨터 코드를 표현
<col> <colgroup> 요소에 속하는 각 열의 속성을 정의
<colgroup> 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용
<data>◆ 특정 콘텐츠에 기계가 읽을 수 있는 형태의 값을 덧붙여 나타낼 떄 사용
<datalist>◆ <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의
<dd> 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명 부분을 정의
<del> 텍스트 한가운데 라인을 추가하여 문서에서 삭제된 텍스트를 표현
<details>◆ 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항을 명시
<dfn> HTML에서 용어의 정의
<dialog>◆ 대화 상자나 대화 윈도우를 정의
<dir> 리스트를 정의
HTML5에서는 더 이상 지원하지 않으며, 대신 <ul> 요소를 사용
<div> HTML 문서에서 특정 영역이나 구획을 정의
<dl> 용어와 그에 대한 설명을 리스트 형식으로 정의
<dt> 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어 부분을 정의
<em> 강조된 텍스트를 표현
<embed>◆ 외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너를 정의
<fieldset> <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용
<figcaption>◆ <figure> 요소의 캡션을 정의
<figure>◆ 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의
<font> 텍스트의 폰트, 색상 그리고 크기를 정의
HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용
<footer>◆ 문서나 특정 세션의 푸터를 정의
<form> 사용자로부터 입력을 받을 수 있는 입력 폼을 정의
<frame> <frameset> 요소에 포함되는 하나의 프레임을 정의
HTML5에서는 더 이상 지원하지 않음
<frameset> 문서의 레이아웃을 구성하기 위해 사용되는 프레임들의 집합을 정의
HTML5에서는 더 이상 지원하지 않음
<h1>~<h6> 제목을 정의
<head> 해당 문서에 대한 정보인 메타데이터의 집합을 정의
<header>◆ 문서나 특정 섹션의 헤더를 정의
<hr> 콘텐츠 내용에서 주제가 바뀔 떄 사용할 수 있는 수평 가로선을 정의
<html> HTML 문서의 루트 요소를 정의
<i> 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의
<iframe> 인라인 프레임을 정의
<img> 이미지를 정의
<input> 사용자로부터 입력을 받을 수 있는 입력 필드를 정의
<ins> 텍스트 아래쪽에 라인을 추가하여 문서에 추가된 텍스트를 표현
<kbd> 키보드 입력을 표현
<label> 사용자 인터페이스 요소의 라벨을 정의
<legend> <fieldset> 요소의 캡션을 정의
<li> 리스트에 포함되는 아이템을 정의
<link> 해당 문서와 외부 소스 사이의 관계를 정의
<main>◆ 해당 문서의 <body> 요소의 주 콘텐츠를 정의
<map> 클라이언트 사이드 이미지맵을 정의
<mark>◆ 형광펜으로 칠한 것처럼 하이라이트된 텍스트를 정의
<meta> 해당 문서에 대한 정보인 메타데이터를 정의
<meter>◆ 분수 값이나 범위 내에서 특정 스칼라 값이 어느 정도인지 표현
<nav>◆ 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네이게이션 링크의 집합을 정의
<noframe> 프레임 기능을 사용하지 않도록 설정 또는 프레임 기능을 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의
HTML5에서는 더 이상 지원하지 않음
<noscript> 클라이언트 사이드 스크립트를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의
<object> 외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체를 정의
<ol> 순서가 있는 리스트를 정의
<optgroup> 옵션 메뉴를 제공하는 드롭다운 리스트에서 사용되는 옵션들의 그룹을 정의
<option> 옵션 메뉴를 제공하는 드롭다운 리스트에서 사용되는 하나의 옵션을 정의
<output>◆ 스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 표시
<p> 문단을 정의
<param> <object> 요소에 의해 호출 되는 플러그인의 매개 변수를 정의
<picture>◆ <img> 요소의 다중 이미지 리소스를 위한 컨테이너를 정의
<pre> 미리 정의된 형식의 텍스트를 정의
<progress>◆ 작업의 진행률을 표시
<q> 짧은 인용구를 정의
<rp>◆ 루비 주석을 지원하지 않는 브라우저를 위한 대체 내용을 정의
<rt>◆ 루비 주석에서 발음이나 설명을 나타내는 윗첨자를 정의
<ruby>◆ 해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석을 정의
<s> 텍스트 한가운데 라인을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현
<samp> 컴퓨터 프로그램의 샘플 또는 인용 출력을 표시
<script> 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의
<section>◆ HTML 문서에 포함된 독립적인 섹션을 정의
<select> 옵션 메뉴를 제공하는 드롭다운 리스트를 정의
<small> 글자 크기가 작은 텍스트를 정의
<source> <audio>나 <video>에서 사용할 수 있는 다중 미디어 지원을 정의
<span> HTML 문서에서 인라인 요소들을 하나로 묶을 떄 사용
<strike> 텍스트 한가운데 라인을 추가할 떄 사용
HTML5에서는 더 이상 지원하지 않으며, 대신 <del> 요소나 <s> 요소를 사용
<strong> 해당 콘텐츠의 중요성이나 심각함, 긴급함을 강조
<style> 해당 HTML 문서의 스타일 정보를 정의
<sub> 아랫첨자 텍스트를 표현
<summary>◆ <details>에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의
<sup> 윗첨자 텍스트를 표현
<svg> SVG 그래픽을 위한 컨테이너를 정의
<table> 데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블을 정의
<tbody> 테이블에서 내용 콘텐츠들을 하나의 그룹으로 묶을 때 사용
<td> 테이블에 하나의 셀을 정의
<template>◆ 추가 되거나 복사될 수 있는 HTML 요소들을 정의
<textarea> 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의
<tfoot> 테이블에서 푸터 콘텐츠들을 하나의 그룹을 묶을 떄 사용
<th> 테이블에서 제목이 되는 헤더 셀들을 정의
<thead> 테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶을 때 사용
<time>◆ 사람이 읽을 수 있는 형태의 날짜와 시간 데이터를 정의
<title> 해당 문서의 제목을 정의
<tr> 테이블에서 셀들로 이루어진 하나의 행을 정의
<track>◆ <audio>나 <video> 같은 미디어 요소를 위한 텍스트 트랙을 정의
<tt> 텔레타이프 텍스트를 표시
HTML5에서는 더 이상 지원하지 않으며, 대신 CSS를 사용
<u> 철자가 틀린 단어나 중국어의 고유 명사처럼 문체상의 일반적인 텍스트와는 달라야만 하는 텍스트를 표현
<ul> 순서가 없는 리스트를 정의
<var> 변수를 정의
<video>◆ 무비 클립이나 비디오 스트림과 같은 비디오를 정의
<wbr>◆ 단어 중간에서 행바꿈 될 수 있는 위치를 정의

 

반응형

'프로그래밍 언어 > HTML5' 카테고리의 다른 글

[HTML] 그래픽  (0) 2024.08.02
[HTML] 이미지/멀티미디어  (0) 2024.08.02
[HTML] 폼(양식)  (0) 2024.08.02
[HTML] 링크/목록/표  (0) 2024.08.02
[HTML] HTML5 텍스트 요소  (0) 2024.08.02

관련글

티스토리툴바