52 lines
2.8 KiB
Markdown
52 lines
2.8 KiB
Markdown
# HTML 5
|
|
HTML 태그는 웹 페이지의 구조와 내용을 정의하는 데 사용되는 기본 요소입니다. 다양한 기능을 가진 태그들이 있으며, 이들을 기능별로 분류하면 다음과 같이 나눌 수 있습니다.
|
|
|
|
## 1. 문서 구조 태그
|
|
* `<html>`: HTML 문서 전체를 감싸는 최상위 태그로, HTML 문서의 시작과 끝을 나타냅니다.
|
|
* `<head>`: 문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트, 스크립트 등을 연결하는 곳입니다.
|
|
* `<body>`: 실제로 보이는 웹 페이지의 내용이 들어가는 부분입니다.
|
|
* `<title>`: 브라우저 탭에 표시되는 문서의 제목입니다.
|
|
* `<meta>`: 문서에 대한 추가적인 정보를 제공하는 태그입니다.
|
|
|
|
## 2. 텍스트 콘텐츠 태그
|
|
* `<h1>` ~ `<h6>`: 제목을 나타내는 태그입니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
|
|
* `<p>`: 단락을 나타냅니다.
|
|
* `<span>`: 텍스트의 일부분을 묶어서 스타일을 적용하거나 스크립트를 연결할 때 사용합니다.
|
|
* `<strong>`: 텍스트를 강조할 때 사용합니다.
|
|
* `<em>`: 텍스트를 기울여 표시할 때 사용합니다.
|
|
|
|
## 3. 목록 태그
|
|
* `<ul>`: 불러온 목록(unordered list)을 나타냅니다.
|
|
* `<ol>`: 순서가 있는 목록(ordered list)을 나타냅니다.
|
|
* `<li>`: 목록의 각 항목을 나타냅니다.
|
|
|
|
## 4. 링크 태그
|
|
* `<a>`: 하이퍼링크를 생성하여 다른 페이지나 웹사이트로 이동할 수 있도록 합니다.
|
|
|
|
## 5. 멀티미디어 태그
|
|
* `<img>`: 이미지를 웹 페이지에 삽입합니다.
|
|
* `<figure>`: 이미지, 차트, 짧은 비디오 클립 등의 콘텐츠와 캡션을 함께 묶어서 나타냅니다.
|
|
* `<figcaption>`: `<figure>` 요소의 캡션을 나타냅니다.
|
|
|
|
## 6. 테이블 태그
|
|
* `<table>`: 테이블을 생성합니다.
|
|
* `<tr>`: 테이블의 행을 나타냅니다.
|
|
* `<td>`: 테이블의 셀을 나타냅니다.
|
|
|
|
## 7. 폼 태그
|
|
* `<form>`: 사용자 입력을 받는 폼을 생성합니다.
|
|
* `<input>`: 다양한 종류의 입력 필드를 생성합니다 (텍스트, 비밀번호, 라디오 버튼, 체크박스 등).
|
|
* `<button>`: 버튼을 생성합니다.
|
|
|
|
## 8. 섹션 태그
|
|
* `<div>`: 콘텐츠를 논리적으로 구분하는 섹션을 생성합니다.
|
|
* `<main>`: 문서의 주요 내용을 담는 부분을 나타냅니다.
|
|
* `<header>`: 섹션의 헤더 부분을 나타냅니다.
|
|
* `<nav>`: 네비게이션 링크를 모아놓은 섹션을 나타냅니다.
|
|
* `<section>`: 문서의 독립적인 섹션을 나타냅니다.
|
|
* `<article>`: 독립적인 콘텐츠 블록을 나타냅니다.
|
|
* `<aside>`: 본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
|
|
* `<footer>`: 섹션의 푸터 부분을 나타냅니다.
|
|
|
|
|