HTML 시작하기

추천 자료: ASP.NET Core 인증 및 권한 부여

4/18/2023
56 minutes to read

데브렉 박용준 강사가 진행하는 HTML 강좌 사이트에 오신 걸 환영합니다.

HTML 책 추천

HTML은 현재 보고 있는 VisualAcademy Docs만 있으면 충분합니다.

다만, 책으로 학습을 이어나가고자 하시는 분들을 위해서 HTML 책은 다음 책을 추천합니다.

Do it! HTML+CSS+자바스크립트 웹 표준의 정석
- http://www.yes24.com/Product/Goods/96674934

HTML 강좌 게시판

현재 VisualAcademy Docs의 HTML 강좌만 보셔도 충분합니다.

추가적인 게시판 형태의 강좌 사이트는 다음 게시판을 참고하세요.

https://www.visualacademy.com/BoardIndex?BoardName=ClientScript

HTML 유료 강의

VisualAcademy Docs는 시간날 때마가 강좌가 업데이트되고 있습니다.

이미 완성된 형태의 동영상 강의를 보시려면,

다음 경로를 통해서 HTML 유료 강의를 보실 수도 있습니다.

http://www.devlec.com/?_pageVariable=strdown_v2&code=PT001TB1170&method=D

월 3만원대로 HTML 강의를 포함하여 데브렉 사이트의 모든 강좌를 보실 수 있습니다.

강의 목차

1. HTML 소개

HTML이란?
HTML의 역사
HTML 문서의 기본 구조

2. HTML 요소와 태그

HTML 요소와 태그의 이해
일반적인 HTML 요소와 그 용도
블록 수준 요소와 인라인 요소

3. HTML 속성

HTML 속성이란?
일반적인 HTML 속성과 그 용도
속성을 사용하여 HTML 요소 수정

4. HTML 머리글과 단락

HTML에서 머리글 만들기
HTML에서 단락 사용
HTML에서 텍스트 서식 지정

5. HTML 링크와 이미지

HTML에서 링크 만들기
웹 페이지에 이미지 추가
이미지를 링크로 사용

6. HTML 목록

HTML에서 비순서 목록
HTML에서 순서 목록
HTML에서 정의 목록

7. HTML 표

HTML에서 표 만들기
표 요소 (행, 열, 셀) 수정
CSS로 표 서식 지정

8. HTML 폼

HTML에서 폼 만들기
폼 요소 (텍스트 필드, 체크박스, 라디오 버튼 등) 추가
서버측 스크립트로 폼 데이터 처리

9. HTML 의미 요소

HTML 의미 요소 이해
접근성과 SEO를 위한 의미 요소 사용
일반적인 의미 요소와 그 용도

10. HTML 미디어 요소

웹 페이지에 오디오와 비디오 추가
YouTube 비디오 삽입
HTML5 미디어 요소 (오디오, 비디오 등) 사용

11. HTML5 소개

HTML5가 무엇인가요?
HTML5의 새로운 기능
HTML4에서 HTML5로의 업그레이드

12. HTML5 의미 요소

HTML5 의미 요소 이해
일반적인 HTML5 의미 요소와 그 용도
접근성과 SEO를 위한 HTML5 의미 요소 사용

13. HTML5 미디어 요소

HTML5로 오디오와 비디오 추가
HTML5 미디어 요소를 사용한 오디오와 비디오 재생
HTML5 미디어의 미래

14. HTML5 양식 요소

HTML5에서의 새로운 양식 요소
사용자 입력을 위한 HTML5 양식 요소 사용

15. HTML5 API

HTML5 API 이해
일반적인 HTML5 API와 그 용도
웹 애플리케이션에 HTML5 API 통합

16. 마무리

HTML 개념 요약
웹 개발에서 HTML의 중요성
추가 공부와 개선을 위한 자원

1. HTML 소개

HTML이란?

HTML은 HyperText Markup Language의 약어로, 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다. HTML은 웹 브라우저에게 페이지의 구조를 알려주는 역할을 하며, 웹 페이지의 콘텐츠를 구조화하고 표시하는 데 사용됩니다.

TIP

마크업 언어(Markup Language)

마크업 언어(Markup Language)는 텍스트를 구조화하고, 스타일링하며, 문서의 정보를 정의하는데 사용되는 일종의 언어입니다. 마크업 언어는 일반 텍스트와 마크업 태그(tag)를 조합하여 문서의 구조를 정의하고, 내용을 표시하는 방식을 지정합니다. 대표적인 마크업 언어로는 HTML, XML, Markdown 등이 있습니다.

HTML의 역사

HTML은 1989년에 Tim Berners-Lee에 의해 처음으로 개발되었습니다. 초기 버전은 단순한 텍스트 기반 문서였으며, 하이퍼링크를 사용하여 다른 문서와 연결할 수 있었습니다. 이후 HTML은 지속적으로 발전하면서, 현재는 HTML5라는 최신 버전이 사용되고 있습니다.

HTML 버전

HTML 버전별 주요 변경 내역을 요약한 표입니다. 참고용으로만 봐주세요.

버전	출시 연도	주요 변경 내용
HTML	1991	초기 버전
HTML 2.0	1995	폼(form) 요소, 이미지 맵(image map), 테이블(table), 인라인 프레임(iframe) 등 추가
HTML 3.2	1997	표(table) 관련 요소 및 속성 개선, 폼(form) 요소 개선 등
HTML 4.0	1997	자바스크립트(script) 개선, 스타일 시트(stylesheet) 추가, 객체(object) 요소 추가 등
HTML 4.01	1999	오류 수정 및 일부 속성 추가 등
XHTML 1.0	2000	XML과의 호환성, 엄격한 문법 규칙, 모듈화된 문법 등 추가
HTML5	2014	새로운 요소와 속성 추가, 멀티미디어 지원 개선, 웹 애플리케이션 개발 지원 등
HTML5.1	2016	오디오 및 비디오 요소 개선, 웹앱 퍼블리싱(web app publishing) 관련 기능 추가 등
HTML5.2	2017	세밀한 구성 요소 추가(예: details, menuitem), MathML 지원, WebAssembly 지원 등
HTML5.3	2018	보안 및 개인 정보 보호, 접근성 등에 대한 지원, 사용자 에이전트의 기능 확장, 폼 관련 속성 개선 등
HTML 6(?)	미정	미래 버전 예상

HTML 문서의 기본 구조

HTML 문서는 일반적으로 다음과 같은 기본 구조를 가집니다.

<!DOCTYPE html>
<html>
<head>
	<title>문서 제목</title>
</head>
<body>
	문서 본문
</body>
</html>

위의 코드에서 <!DOCTYPE html>은 문서의 유형을 나타내며, html 태그는 문서의 루트 요소(root element)입니다. head 태그는 문서의 메타데이터(metadata)를 담고 있으며, title 태그는 문서의 제목을 나타냅니다. body 태그는 문서의 본문을 나타내며, 실제로 브라우저에 표시되는 내용은 body 태그 안에 작성됩니다.

예제 1: 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>예제 페이지</title>
</head>
<body>
  <h1>HTML 기초 태그 예제</h1>
</body>
</html>

2. HTML 요소와 태그

HTML 요소와 태그의 이해

HTML 요소는 브라우저가 해석하고 표시할 수 있는 콘텐츠의 단위입니다. 각 요소는 하나 이상의 태그로 구성되며, 각 태그는 요소의 역할을 정의합니다.

일반적인 HTML 요소와 그 용도

일반적인 HTML 요소에는 다음과 같은 것이 있습니다.

<h1>~<h6> : 제목을 나타내는 태그
<p> : 문단을 나타내는 태그
<a> : 하이퍼링크를 생성하는 태그
<img> : 이미지를 삽입하는 태그
<ul> / <ol> : 순서 없는 / 순서 있는 목록을 나타내는 태그
<li> : 목록의 각 항목을 나타내는 태그
<div> : 구역을 나누는 태그
<span> : 텍스트나 인라인 요소를 그룹화하는 태그

예제 2: 텍스트 태그

<p>이것은 단락입니다.</p>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
<pre>  이것은 미리 형식화된 텍스트입니다.</pre>
<strong>진하게 표시된 텍스트</strong>
<em>이탤릭체 텍스트</em>
<small>작은 텍스트</small>

블록 수준 요소와 인라인 요소

HTML 요소는 블록 수준 요소와 인라인 요소로 나눌 수 있습니다.

블록 수준 요소 : 주로 문단, 제목, 목록 등의 구조적 요소를 나타냅니다. 블록 수준 요소는 새로운 줄에서 시작하며, 가로폭 전체를 차지합니다. 예를 들어 <div>나 <p>가 블록 수준 요소입니다.
인라인 요소 : 주로 텍스트, 이미지 등의 요소를 나타냅니다. 인라인 요소는 줄 내에서 표시되며, 요소의 내용만큼의 너비를 차지합니다. 예를 들어 <a>나 <span>이 인라인 요소입니다.

예제: 블록 인용 태그

<blockquote cite="https://www.example.com">
  인용된 텍스트 예제입니다.
</blockquote>

MDN Web Docs에 모든 HTML 태그 리스트 제공

MDN Web Docs(Mozilla Developer Network Web Documentation)는 웹 개발자를 위한 광범위한 자료와 가이드를 제공하는 오픈 웹 플랫폼입니다. Mozilla Foundation에서 운영하며, 웹 기술과 관련된 정보를 찾고자 하는 웹 개발자들이 자주 참고하는 중요한 출처 중 하나입니다.

MDN Web Docs는 웹 개발을 위한 핵심 기술에 대한 정보를 포함하고 있습니다. 이러한 핵심 기술에는 HTML, CSS, JavaScript, 그리고 웹 API 등이 포함됩니다. 웹 개발자들은 MDN Web Docs에서 튜토리얼, 가이드, 참고 문서, 예제 코드 등 다양한 형태의 자료를 찾아볼 수 있습니다. 이를 통해 개발자들은 웹 표준과 웹 기술에 대한 최신 정보를 얻고, 웹 개발에 필요한 기술을 익힐 수 있습니다.

3. HTML 속성

HTML 속성이란?

HTML 속성은 HTML 요소에 추가 정보를 제공하는 데 사용됩니다. 속성은 일반적으로 요소의 시작 태그에 포함되며, 속성 이름과 값으로 구성됩니다.

일반적인 HTML 속성과 그 용도

일반적인 HTML 속성에는 다음과 같은 것이 있습니다.

id : 요소의 고유한 식별자를 지정합니다.
class : 요소를 그룹화하는 데 사용됩니다.
style : 요소에 적용할 CSS 스타일을 지정합니다.
href : <a> 요소의 링크 대상 URL을 지정합니다.
src : <img> 요소의 이미지 파일 경로를 지정합니다.
alt : <img> 요소의 대체 텍스트를 지정합니다.
title : 요소에 대한 추가 정보를 제공합니다.
data-* : 사용자 정의 데이터 속성을 정의합니다.

속성을 사용하여 HTML 요소 수정

HTML 속성을 사용하여 요소의 특성을 수정할 수 있습니다. 예를 들어, <a> 요소에 href 속성을 추가하여 링크를 변경할 수 있습니다.

<a href="https://www.example.com">Example Link</a>

또는 <img> 요소에 src 및 alt 속성을 추가하여 이미지를 변경하고 대체 텍스트를 지정할 수 있습니다.

<img src="example.jpg" alt="Example Image">

4. HTML 머리글과 단락

HTML에서 머리글 만들기

HTML에서 머리글은 <h1>부터 <h6>까지의 태그를 사용하여 작성할 수 있습니다. 숫자가 작을수록 더 큰 제목을 나타냅니다.

<h1>이것은 제목입니다</h1>
<h2>이것은 부제목입니다</h2>
<h3>이것은 소제목입니다</h3>

HTML에서 단락 사용

HTML에서 단락은 <p> 태그를 사용하여 작성할 수 있습니다.

`html

이것은 첫 번째 단락입니다.

이것은 두 번째 단락입니다.

```

예제: 줄바꿈과 수평선 태그

<p>첫 번째 줄입니다.<br>두 번째 줄입니다.</p>
<hr>
<p>이 텍스트는 수평선 아래에 있습니다.</p>

HTML에서 텍스트 서식 지정 요약

HTML에서 텍스트 서식을 지정하는 방법에는 다음과 같은 것이 있습니다.

굵게 : <strong> 또는 <b> 태그를 사용하여 텍스트를 굵게 표시할 수 있습니다. 기울임 : <em> 또는 <i> 태그를 사용하여 텍스트를 기울임체로 표시할 수 있습니다. 밑줄 : <u> 태그를 사용하여 텍스트에 밑줄을 표시할 수 있습니다. 취소선 : <del> 태그를 사용하여 텍스트에 취소선을 표시할 수 있습니다.

<p>이것은 <strong>굵은</strong> 텍스트입니다.</p>
<p>이것은 <em>기울임</em> 텍스트입니다.</p>
<p>이것은 <u>밑줄</u> 텍스트입니다.</p>
<p>이것은 <del>취소선</del> 텍스트입니다.</p>

HTML에서 텍스트 서식 지정

HTML에서 텍스트 서식을 지정하는 방법은 다양합니다.

굵게 표시하기

텍스트를 굵게 표시하려면 <strong> 또는 <b> 태그를 사용합니다.

<p>이 텍스트는 <strong>굵게</strong> 표시됩니다.</p>
<p>이 텍스트는 <b>굵게</b> 표시됩니다.</p>

기울임체 표시하기

텍스트를 기울임체로 표시하려면 <em> 또는 <i> 태그를 사용합니다.

<p>이 텍스트는 <em>기울임체</em>로 표시됩니다.</p>
<p>이 텍스트는 <i>기울임체</i>로 표시됩니다.</p>

밑줄 표시하기

텍스트에 밑줄을 표시하려면 <u> 태그를 사용합니다.

<p>이 텍스트에는 <u>밑줄</u>이 표시됩니다.</p>

취소선 표시하기

텍스트에 취소선을 표시하려면 <del> 태그를 사용합니다.

<p>이 텍스트에는 <del>취소선</del>이 표시됩니다.</p>

아래 첨자와 윗 첨자 표시하기

아래 첨자를 표시하려면 <sub> 태그를 사용하고, 윗 첨자를 표시하려면 <sup> 태그를 사용합니다.

<p>H<sub>2</sub>O는 물을 나타냅니다.</p>
<p>x<sup>2</sup>은 x의 제곱을 나타냅니다.</p>

글자 크기 조절하기

글자 크기를 조절하려면 <span> 태그와 style 속성을 사용합니다.

<p>이 텍스트는 <span style="font-size: 20px;">크게</span> 표시됩니다.</p>
<p>이 텍스트는 <span style="font-size: 12px;">작게</span> 표시됩니다.</p>

위의 코드에서 style 속성 값으로 font-size 속성을 사용하여 글자 크기를 조절합니다. px 단위로 크기를 지정할 수 있습니다.

5. HTML 링크와 이미지

HTML에서 링크 만들기

HTML에서 링크는 <a> 태그를 사용하여 생성할 수 있습니다. 이 태그는 href 속성을 이용하여 대상 URL을 지정할 수 있습니다.

<a href="https://www.example.com">Visit Example.com</a>

예제: 하이퍼링크 태그

<a href="https://www.example.com">방문할 웹사이트</a>

웹 페이지에 이미지 추가

웹 페이지에 이미지를 추가하려면, <img> 태그를 사용하고 src 속성을 이용하여 이미지 파일의 URL을 지정합니다. 이미지의 크기를 조절하려면 width와 height 속성을 사용할 수 있습니다.

<img src="image.jpg" alt="An example image" width="300" height="200">

예제: 이미지 태그

<img src="example.jpg" alt="예제 이미지" width="200" height="150">

이미지를 링크로 사용

이미지를 링크로 사용하려면, <a> 태그 안에 <img> 태그를 넣으면 됩니다.

<a href="https://www.example.com">
  <img src="image.jpg" alt="An example image" width="300" height="200">
</a>

6. HTML 목록

HTML에서 비순서 목록

HTML에서 비순서 목록을 생성하려면, <ul> 태그를 사용하고 그 안에 <li> 태그로 각 항목을 추가합니다.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

HTML에서 순서 목록

HTML에서 순서 목록을 생성하려면, <ol> 태그를 사용하고 그 안에 <li> 태그로 각 항목을 추가합니다.

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

HTML에서 정의 목록

HTML에서 정의 목록을 생성하려면, <dl> 태그를 사용하고 그 안에 <dt> 태그로 용어를 추가하고, <dd> 태그로 해당 용어의 설명을 추가합니다.

<dl>
  <dt>Term 1</dt>
  <dd>Definition of Term 1</dd>
  <dt>Term 2</dt>
  <dd>Definition of Term 2</dd>
</dl>

예제: 목록 태그

<ol>
  <li>순서 있는 목록 1</li>
  <li>순서 있는 목록 2</li>
  <li>순서 있는 목록 3</li>
</ol>
<ul>
  <li>순서 없는 목록 1</li>
  <li>순서 없는 목록 2</li>
  <li>순서 없는 목록 3</li>
</ul>

예제: 목록의 중첩

<ul>
  <li>목록 1
    <ul>
      <li>하위 목록 1</li>
      <li>하위 목록 2</li>
    </ul>
  </li>
  <li>목록 2</li>
  <li>목록 3</li>
</ul>

7. HTML 표

HTML에서 표 만들기

HTML에서 표를 만들기 위해 <table> 태그를 사용하고, <tr> 태그로 행을 추가하며, <th> 및 <td> 태그로 헤더 셀과 데이터 셀을 추가합니다.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

예제: 표 태그

<table border="1">
  <thead>
    <tr>
      <th>헤더 1</th>
      <th>헤더 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용 1</td>
      <td>내용 2</td>
    </tr>
    <tr>
      <td>내용 3</td>
      <td>내용 4</td>
    </tr>
  </tbody>
</table>

표 요소 (행, 열, 셀) 수정

표의 행, 열, 셀을 수정하려면 HTML 속성을 사용합니다. 예를 들어, rowspan 및 colspan 속성을 사용하여 셀이 차지하는 행 또는 열의 수를 변경할 수 있습니다.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td colspan="2">Data 4</td>
  </tr>
</table>

CSS로 표 서식 지정

CSS를 사용하여 표의 스타일을 지정할 수 있습니다. 예를 들어, 표 경계, 셀 간격, 셀 패딩, 헤더 스타일 등을 변경할 수 있습니다.

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

8. HTML 폼

HTML에서 폼 만들기

HTML에서 폼을 만들기 위해 <form> 태그를 사용하며, action 속성과 method 속성을 설정하여 서버에서 처리할 페이지와 요청 방식을 지정합니다.

<form action="/submit_form" method="post">
  <!-- 폼 요소 추가 -->
</form>

예제: 폼 태그

<form action="/submit" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="제출">
</form>

폼 요소 (텍스트 필드, 체크박스, 라디오 버튼 등) 추가

HTML에서 다양한 입력 요소를 추가하여 사용자로부터 데이터를 수집할 수 있습니다. 예를 들어, 텍스트 필드(<input type="text">), 체크박스(<input type="checkbox">), 라디오 버튼(<input type="radio">) 등을 사용할 수 있습니다.

<form action="/submit_form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="checkbox" id="newsletter" name="newsletter">
  <label for="newsletter">Subscribe to our newsletter</label>
  <br>
  <input type="radio" id="gender_male" name="gender" value="male">
  <label for="gender_male">Male</label>
  <br>
  <input type="radio" id="gender_female" name="gender" value="female">
  <label for="gender_female">Female</label>
  <br>
  <input type="submit" value="Submit">
</form>

예제: 버튼 태그

<button type="button" onclick="alert('버튼이 클릭되었습니다.')">클릭하세요</button>

예제: 셀렉트 박스 태그

<select>
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>

예제: 라디오 버튼 태그

<input type="radio" id="choice1" name="choice" value="1">
<label for="choice1">선택 1</label>
<input type="radio" id="choice2" name="choice" value="2">
<label for="choice2">선택 2</label>

예제: 체크박스 태그

<input type="checkbox" id="check1" name="check1" value="check1">
<label for="check1">체크 1</label>
<input type="checkbox" id="check2" name="check2" value="check2">
<label for="check2">체크 2</label>

예제: 텍스트 영역 태그

<textarea rows="4" cols="50">여기에 텍스트를 입력하세요.</textarea>

예제: 진행 상태 바 태그

<progress value="50" max="100"></progress>

메타 태그

예제: 메타 태그

<meta name="description" content="이 웹 페이지는 메타 태그 예제입니다.">
<meta name="keywords" content="HTML, meta, 예제">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

서버측 스크립트로 폼 데이터 처리

폼 데이터는 서버측 스크립트를 사용하여 처리할 수 있습니다. 예를 들어, PHP, Python, Ruby 등의 언어를 사용하여 폼 데이터를 받아 처리하고 데이터베이스에 저장하거나 이메일로 전송할 수 있습니다.

9. HTML 의미 요소

HTML 의미 요소 이해

HTML 의미 요소(semantic elements)는 웹 페이지의 구조를 명확하게 표현하기 위해 사용하는 태그입니다. 의미 요소는 브라우저, 개발자, 그리고 검색 엔진에게 웹 페이지의 구조와 내용을 명확하게 이해하도록 돕습니다.

접근성과 SEO를 위한 의미 요소 사용

의미 요소는 웹 접근성과 검색 엔진 최적화(SEO)에 도움을 줍니다. 웹 접근성은 시각장애인 등의 사용자들이 웹 페이지를 이해하고 사용할 수 있도록 하는 것이며, SEO는 웹 페이지가 검색 엔진에서 더 높은 순위를 얻도록 최적화하는 것입니다. 의미 요소를 사용하면 웹 페이지의 구조를 명확하게 표현하여 이러한 목적에 도움이 됩니다.

일반적인 의미 요소와 그 용도

일반적인 의미 요소에는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 등이 있습니다. 이 요소들을 사용하여 웹 페이지의 헤더, 내비게이션, 메인 콘텐츠, 본문, 섹션, 사이드바, 푸터 등을 명확하게 구분할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
</head>
<body>

<header>
  <h1>My Website</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>

  <section>
    <h2>Related Articles</h2>
    <p>Some related content...</p>
  </section>
</main>

<aside>
  <h2>Additional Information</h2>
  <p>Some additional content...</p>
</aside>

<footer>
  <p>Copyright &copy; 2023. All rights reserved.</p>
</footer>

</body>
</html>

10. HTML 미디어 요소

웹 페이지에 오디오와 비디오 추가

웹 페이지에 오디오와 비디오를 추가하는 것은 웹 콘텐츠를 더 다양하고 풍부하게 만들어줍니다. HTML5에서는 <audio>와 <video> 태그를 사용하여 오디오와 비디오 파일을 쉽게 삽입할 수 있습니다.

예제: 오디오 태그

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
  오디오를 지원하지 않는 브라우저입니다.
</audio>

예제: 비디오 태그

<video width="320" height="240" controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.ogg" type="video/ogg">
  비디오를 지원하지 않는 브라우저입니다.
</video>

예제: 아이프레임 태그

<iframe src="https://www.example.com" width="300" height="200"></iframe>

YouTube 비디오 삽입

웹 페이지에 YouTube 비디오를 삽입하려면, YouTube에서 공유 버튼을 클릭하여 "퍼가기(embed)" 코드를 복사하고 웹 페이지에 붙여넣으면 됩니다. 이렇게 하면 웹 페이지에 YouTube 비디오 플레이어가 삽입됩니다.

HTML5 미디어 요소 (오디오, 비디오 등) 사용

HTML5에서 제공하는 미디어 요소를 사용하여 웹 페이지에 오디오와 비디오를 쉽게 추가할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>Media Elements</title>
</head>
<body>

<h2>Audio</h2>
<audio controls>
  <source src="audio_file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<h2>Video</h2>
<video width="320" height="240" controls>
  <source src="video_file.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

<h2>YouTube Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

11. HTML5 소개

HTML5가 무엇인가요?

HTML5는 웹 표준의 최신 버전으로, 이전 버전인 HTML 4.01과 XHTML 1.0의 대체제로 개발되었습니다. HTML5는 웹 개발자들에게 더 많은 기능과 유연성을 제공하며, 웹 애플리케이션 개발을 쉽게 만들어줍니다. HTML5는 새로운 요소와 속성, 그리고 개선된 JavaScript API와 함께 웹 브라우저에서의 그래픽, 애니메이션, 오디오, 비디오 등의 기능을 지원합니다.

HTML5의 새로운 기능

HTML5에는 웹 개발자들이 활용할 수 있는 다양한 새로운 기능이 포함되어 있습니다. 몇 가지 예를 들자면:

새로운 시맨틱 요소: <article>, <section>, <nav>, <header>, <footer> 등
그래픽 요소: <canvas>와 <svg>를 통한 2D 및 3D 그래픽 지원
미디어 요소: <audio>와 <video>를 통한 웹 페이지 내 오디오 및 비디오 콘텐츠 재생 지원
폼 요소와 입력 유형의 확장: 날짜, 시간, 이메일, URL 등의 새로운 입력 유형 지원
웹 스토리지: 로컬 스토리지와 세션 스토리지를 통해 사용자 브라우저에 데이터 저장
웹 워커: 백그라운드에서 스크립트를 실행하여 페이지 성능 향상

HTML4에서 HTML5로의 업그레이드

HTML4에서 HTML5로 업그레이드하는 과정은 상대적으로 간단합니다. 기본적으로 다음과 같은 단계를 거치게 됩니다.

문서 유형 선언 변경: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">에서 <!DOCTYPE html>로 변경합니다.
새로운 시맨틱 요소 사용: 적절한 위치에 새로운 시맨틱 요소를 사용하여 문서 구조를 개선합니다.
미디어 및 그래픽 요소 사용: <audio>, <video> 및 <canvas> 요소를 사용하여 미디어 콘텐츠 및 그래픽을 쉽게 삽입합니다.
새로운 폼 요소와 입력 유형 사용: 기존의 <input> 요소에 새로운 유형들을 사용하여 사용자 입력을 더 효과적으로 처리할 수 있습니다. 예를 들어, 이메일 입력을 위한 <input type="email">이나 날짜 입력을 위한 <input type="date"> 등을 사용할 수 있습니다.
웹 스토리지 및 웹 워커 활용: 웹 스토리지를 사용하여 클라이언트 측 데이터를 저장하고 관리하며, 웹 워커를 통해 백그라운드에서 스크립트를 실행하여 페이지의 성능을 향상시킬 수 있습니다.
CSS3 및 JavaScript API 사용: HTML5는 CSS3와 함께 새로운 스타일링 기능을 지원하며, 새로운 JavaScript API를 통해 더 다양한 기능을 구현할 수 있습니다. 이를 활용하여 웹 페이지의 디자인과 기능을 개선합니다.

이러한 단계를 거쳐 HTML4에서 HTML5로 웹 페이지를 업그레이드할 수 있습니다. HTML5를 사용하면 웹 페이지의 구조와 접근성을 개선하고, 더 많은 미디어 및 인터랙티브 콘텐츠를 쉽게 추가할 수 있으며, 웹 페이지의 전반적인 성능과 사용자 경험을 향상시킬 수 있습니다.

12. HTML5 의미 요소

HTML5 의미 요소 이해

HTML5 의미 요소는 웹 페이지의 구조와 콘텐츠를 더욱 명확하게 표현하도록 돕는 태그들입니다. 이 요소들은 웹 페이지의 구조를 개선하고, 접근성을 향상시키며, SEO를 최적화하는 데 도움을 줍니다.

일반적인 HTML5 의미 요소와 그 용도

<header>: 웹 페이지의 헤더 부분을 표현하는데 사용되며, 로고, 제목, 내비게이션 등을 포함할 수 있습니다.
<nav>: 웹 페이지의 주요 내비게이션 영역을 표현하는데 사용됩니다.
<article>: 웹 페이지의 독립적인 콘텐츠를 나타내는데 사용되며, 블로그 게시물이나 뉴스 기사 등에 적합합니다.
<section>: 웹 페이지의 관련 콘텐츠를 그룹화하는데 사용되며, <article>의 여러 섹션을 나눌 때 사용할 수 있습니다.
<aside>: 웹 페이지의 주요 콘텐츠와 간접적으로 관련된 부가적인 콘텐츠를 표현하는데 사용되며, 사이드바나 광고 등에 적합합니다.
<footer>: 웹 페이지의 푸터 부분을 표현하는데 사용되며, 저작권 정보, 연락처 정보 등을 포함할 수 있습니다.
<figure> 및 <figcaption>: 이미지, 다이어그램, 차트 등의 미디어 콘텐츠와 그에 대한 설명(캡션)을 나타내는데 사용됩니다.

접근성과 SEO를 위한 HTML5 의미 요소 사용

HTML5 의미 요소를 사용하면 웹 페이지의 구조가 명확해지고, 스크린 리더와 같은 보조 기술이 웹 페이지의 콘텐츠를 더 쉽게 이해하고 탐색할 수 있습니다. 또한, 검색 엔진이 웹 페이지의 구조를 더 정확하게 파악하고 색인화할 수 있어 SEO를 향상시킬 수 있습니다. 따라서 웹 개발자는 웹 페이지를 작성할 때 HTML5 의미 요소를 적절하게 사용하여 웹 페이지의 접근성과 검색 엔진 최적화를 향상시켜야 합니다.

13. HTML5 미디어 요소

HTML5로 오디오와 비디오 추가

HTML5에서는 오디오와 비디오를 웹 페이지에 쉽게 추가할 수 있는 <audio>와 <video> 태그를 도입했습니다. 이 미디어 요소들은 웹 개발자가 플러그인이나 외부 미디어 플레이어를 사용하지 않고도 웹 페이지에 미디어 콘텐츠를 삽입할 수 있게 해줍니다.

HTML5 미디어 요소를 사용한 오디오와 비디오 재생

웹 페이지에 오디오와 비디오를 추가하려면 <audio>와 <video> 태그를 사용하면 됩니다. 또한, controls 속성을 추가하면 브라우저에서 기본 제공하는 재생 컨트롤을 사용할 수 있습니다. 예를 들어, 다음 코드는 웹 페이지에 오디오와 비디오를 추가하는 방법을 보여줍니다.

<audio src="audio-file.mp3" controls></audio>
<video src="video-file.mp4" width="320" height="240" controls></video>

HTML5 미디어의 미래

HTML5 미디어 요소는 웹 미디어의 미래에 큰 영향을 줄 것으로 예상되며, 웹 개발자들은 이를 사용하여 풍부한 멀티미디어 경험을 제공할 수 있습니다. 또한, W3C와 WHATWG 등의 표준화 기구가 HTML5 미디어 요소를 개선하고, 새로운 기능을 추가함에 따라 웹 미디어는 더욱 강력해질 것입니다.

14. HTML5 양식 요소

HTML5에서의 새로운 양식 요소

HTML5는 웹 개발자들이 사용할 수 있는 새로운 양식 요소를 도입했습니다. 이 새로운 요소들은 사용자 입력을 더욱 풍부하게 만들어줍니다. 일부 예시로는 <datalist>, <output>, <progress> 및 <meter> 등이 있습니다.

사용자 입력을 위한 HTML5 양식 요소 사용

HTML5 양식 요소를 사용하여 사용자 입력을 받는 웹 양식을 만들 수 있습니다. 예를 들어, <datalist> 요소를 사용하여 사용자가 선택할 수 있는 옵션을 제공하거나 <progress> 요소로 작업 진행 상태를 표시할 수 있습니다.

<label for="country">Choose a country:</label>
<input list="countries" id="country" name="country">
<datalist id="countries">
  <option value="United States">
  <option value="United Kingdom">
  <option value="Canada">
  ...
</datalist>

15. HTML5 API

HTML5 API 이해

HTML5 API는 웹 애플리케이션 개발자가 사용할 수 있는 일련의 자바스크립트 API입니다. 이 API는 웹 애플리케이션의 기능과 성능을 향상시키는 데 도움이 됩니다. 일반적인 HTML5 API에는 Geolocation API, Web Storage API, WebSocket API 등이 포함됩니다.

일반적인 HTML5 API와 그 용도

HTML5 API를 사용하여 웹 애플리케이션에 다양한 기능을 통합할 수 있습니다. 예를 들어, Geolocation API를 사용하여 사용자의 위치 정보를 가져오거나 Web Storage API로 클라이언트 측에서 데이터를 저장하고 관리할 수 있습니다.

웹 애플리케이션에 HTML5 API 통합

웹 애플리케이션에 HTML5 API를 통합하려면 자바스크립트를 사용하여 해당 API에 액세스하고 필요한 기능을 구현해야 합니다. 예를 들어, 다음 코드는 Geolocation API를 사용하여 사용자의 현재 위치를 가져오는 방법을 보여줍니다.

navigator.geolocation.getCurrentPosition(function(position) {
  console.log('Latitude: ' + position.coords.latitude);
  console.log('Longitude: ' + position.coords.longitude);
});

16. 마무리

HTML 개념 요약

이 글에서는 HTML의 기본 개념과 사용 방법을 살펴보았습니다. HTML은 웹 페이지의 구조와 내용을 정의하는 데 사용되는 마크업 언어입니다.

웹 개발에서 HTML의 중요성

웹 개발에서 HTML은 매우 중요한 역할을 합니다. 웹 페이지의 구조와 내용을 표현하는 기반이기 때문입니다. 웹 페이지는 HTML, CSS, 자바스크립트와 같은 기술들의 조합으로 구성됩니다.

추가 공부와 개선을 위한 자원

웹 개발에 대한 지식을 더욱 확장하려면 다양한 자원을 활용할 수 있습니다. MDN Web Docs, W3Schools, 웹 개발 관련 도서 등을 통해 HTML 외에도 CSS, 자바스크립트 등의 웹 기술을 익힐 수 있습니다.

부록: validator.w3.org 소개

validator.w3.org는 W3C(World Wide Web Consortium)에서 제공하는 온라인 HTML, CSS, XML 등의 문서 검증 도구입니다. 이 도구를 사용하면 웹 문서가 웹 표준에 맞게 작성되었는지 검사할 수 있습니다.

HTML, CSS, XML 등 웹 문서는 브라우저에 따라 다르게 해석될 수 있습니다. 이에 따라 웹 문서의 구조, 스타일, 마크업 등이 잘못 작성되어 웹페이지가 제대로 작동하지 않는 문제가 발생할 수 있습니다. 이를 방지하기 위해 validator.w3.org에서는 W3C가 제공하는 웹 표준을 기준으로 웹 문서의 구조, 스타일, 마크업 등을 검사하여 오류를 찾아주는 기능을 제공합니다.

HTML, CSS, XML 등 웹 문서의 URL을 입력하면 해당 문서가 웹 표준을 준수하고 있는지 검증 결과를 보여줍니다. 검증 결과에 따라 웹 문서를 수정하거나 보완하는 작업을 진행할 수 있습니다. 이를 통해 웹 페이지의 품질을 높이고 웹 표준 준수를 유지할 수 있습니다.

예제: details_summary.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Details와 Summary 태그 예제</title>
</head>
<body>
  <details>
    <summary>자세히 보기</summary>
    <p>이 텍스트는 details 태그 안에 있습니다. summary를 클릭하면 텍스트가 표시됩니다.</p>
  </details>
</body>
</html>

예제: abbreviation.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Abbreviation 태그 예제</title>
</head>
<body>
  <p>웹 접근성은 <abbr title="Web Content Accessibility Guidelines">WCAG</abbr>를 따라야 합니다.</p>
</body>
</html>

예제: figure_figcaption.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Figure와 Figcaption 태그 예제</title>
</head>
<body>
  <figure>
    <img src="example.jpg" alt="예제 이미지" width="200" height="150">
    <figcaption>이미지 설명: 예제 이미지</figcaption>
  </figure>
</body>
</html>

예제: mark.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Mark 태그 예제</title>
</head>
<body>
  <p>이 텍스트는 <mark>하이라이트</mark>되어 있습니다.</p>
</body>
</html>

예제: time.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Time 태그 예제</title>
</head>
<body>
  <p>예제 이벤트는 <time datetime="2023-04-19T12:00">2023년 4월 19일 오후 12시</time>에 시작합니다.</p>
</body>
</html>

예제: address.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Address 태그 예제</title>
</head>
<body>
  <address>
    서울특별시 강남구<br>
    대표 전화: 02-1234-5678<br>
    이메일: info@example.com
  </address>
</body>
</html>

예제: dl_dt_dd.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>dl, dt, dd 태그 예제</title>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language의 약자로 웹 페이지를 작성하는 언어입니다.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets의 약자로 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다.</dd>
  </dl>
</body>
</html>

예제: nav.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Nav 태그 예제</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="home.html">홈</a></li>
      <li><a href="about.html">소개</a></li>
      <li><a href="contact.html">연락처</a></li>
    </ul>
  </nav>
</body>
</html>

예제: main.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Main 태그 예제</title>
</head>
<body>
  <header>
    <h1>웹사이트 제목</h1>
  </header>
  <nav>
    <!-- 네비게이션 바 -->
  </nav>
  <main>
    <h2>메인 콘텐츠 제목</h2>
    <p>이곳에 메인 콘텐츠가 위치합니다.</p>
  </main>
  <footer>
    <!-- 푸터 영역 -->
  </footer>
</body>
</html>

예제: aside.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Aside 태그 예제</title>
</head>
<body>
  <header>
    <!-- 헤더 영역 -->
  </header>
  <nav>
    <!-- 네비게이션 바 -->
  </nav>
  <main>
    <!-- 메인 콘텐츠 영역 -->
  </main>
  <aside>
    <h3>관련 기사</h3>
    <ul>
      <li><a href="related_article1.html">관련 기사 1</a></li>
      <li><a href="related_article2.html">관련 기사 2</a></li>
      <li><a href="related_article3.html">관련 기사 3</a></li>
    </ul>
  </aside>
  <footer>
    <!-- 푸터 영역 -->
  </footer>
</body>
</html>

예제: fieldset_legend.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Fieldset과 Legend 태그 예제</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>개인 정보</legend>
      <label for="name">이름:</label>
      <input type="text" id="name" name="name"><br>
      <label for="email">이메일:</label>
      <input type="email" id="email" name="email"><br>
    </fieldset>
    <input type="submit" value="제출">
  </form>
</body>
</html>

예제: meter.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Meter 태그 예제</title>
</head>
<body>
  <label for="disk_c">디스크 C 사용량:</label>
  <meter id="disk_c" value="0.6" min="0" max="1">60%</meter>
</body>
</html>

예제: data.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Data 태그 예제</title>
</head>
<body>
  <ul>
    <li><data value="21000">21,000 원</data></li>
    <li><data value="35000">35,000 원</data></li>
    <li><data value="42000">42,000 원</data></li>
  </ul>
</body>
</html>

예제: wbr.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Wbr 태그 예제</title>
</head>
<body>
  <p>이것은 브라우저에 따라 단어가 줄바꿈 되는<wbr>예제입니다.</p>
</body>
</html>

예제: ruby_rtc_rt.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Ruby, Rtc, Rt 태그 예제</title>
</head>
<body>
  <ruby>
    漢 <rt>한</rt>
    字 <rt>자</rt>
  </ruby>
</body>
</html>

예제: samp.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Samp 태그 예제</title>
</head>
<body>
  <p>컴퓨터 출력 예제: <samp>이것은 컴퓨터 출력 예제입니다.</samp></p>
</body>
</html>

예제: small.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Small 태그 예제</title>
</head>
<body>
  <p>일반 텍스트 <small>작은 텍스트</small></p>
</body>
</html>

예제: kbd_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Kbd 태그 예제</title>
</head>
<body>
  <p>다음 단축키를 사용하세요: <kbd>Ctrl</kbd> + <kbd>C</kbd> (복사)</p>
</body>
</html>

예제: var_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Var 태그 예제</title>
</head>
<body>
  <p>변수 예제: f(<var>x</var>) = <var>x</var>² + 3<var>x</var> + 2</p>
</body>
</html>

예제: bdi_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Bdi 태그 예제</title>
</head>
<body>
  <p>다른 방향의 텍스트: <bdi>مرحبا</bdi></p>
</body>
</html>

예제: bdo_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Bdo 태그 예제</title>
</head>
<body>
  <p>오른쪽에서 왼쪽으로 읽기: <bdo dir="rtl">이 텍스트는 오른쪽에서 왼쪽으로 읽힙니다.</bdo></p>
</body>
</html>

예제: dfn_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Dfn 태그 예제</title>
</head>
<body>
  <p><dfn>HTML</dfn>은 HyperText Markup Language의 약자입니다.</p>
</body>
</html>

예제: code_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Code 태그 예제</title>
</head>
<body>
  <p>다음 코드를 참조하세요: <code>console.log("Hello, World!");</code></p>
</body>
</html>

예제: pre_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Pre 태그 예제</title>
</head>
<body>
  <pre>
    function example() {
      console.log("이것은 예제입니다.");
    }
  </pre>
</body>
</html>

예제: listing_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Listing 태그 예제</title>
</head>
<body>
  <listing>
    10 PRINT "Hello, World!"
    20 END
  </listing>
</body>
</html>

예제: dialog_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Dialog 태그 예제</title>
</head>
<body>
  <dialog open>
    <p>이것은 대화상자입니다.</p>
    <button>닫기</button>
  </dialog>
</body>
</html>

예제: ins_del_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Ins와 Del 태그 예제</title>
</head>
<body>
  <p>원래 문장: <del>오타가 있는 문장</del></p>
  <p>수정된 문장: <ins>오타가 없는 문장</ins></p>
</body>
</html>

예제: progress_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Progress 태그 예제</title>
</head>
<body>
  <label for="file">파일 업로드 진행률:</label>
  <progress id="file" value="70" max="100">70%</progress>
</body>
</html>

예제: blockquote_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Blockquote 태그 예제</title>
</head>
<body>
  <blockquote cite="https://example.com">
    이것은 인용문입니다.
  </blockquote>
</body>
</html>

예제: q_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Q 태그 예제</title>
</head>
<body>
  <p>유명한 인용문: <q>시간은 금이다.</q></p>
</body>
</html>

예제: cite_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Cite 태그 예제</title>
</head>
<body>
  <p>참고한 책: <cite>C# 교과서</cite></p>
</body>
</html>

예제: em_strong_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Em과 Strong 태그 예제</title>
</head>
<body>
  <p>이 문장은 <em>강조</em>되고, 이 문장은 <strong>더 강조</strong>됩니다.</p>
</body>
</html>

예제: i_b_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>I와 B 태그 예제</title>
</head>
<body>
  <p>이 문장은 <i>이탤릭체</i>이고, 이 문장은 <b>굵게</b> 표시됩니다.</p>
</body>
</html>

예제: mark_example.html

```html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Mark 태그 예제</title>
</head>
<body>
  <p>이 문장에 <mark>하이라이트</mark>가 표시됩니다.</p>
</body>
</html>

예제: abbr_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Abbr 태그 예제</title>
</head>
<body>
  <p><abbr title="World Health Organization">WHO</abbr>는 세계 보건 기구입니다.</p>
</body>
</html>

예제: address_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Address 태그 예제</title>
</head>
<body>
  <address>
    서울특별시 강남구<br>
    이메일: example@example.com
  </address>
</body>
</html>

예제: details_summary_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Details와 Summary 태그 예제</title>
</head>
<body>
  <details>
    <summary>더 알아보기</summary>
    <p>이곳에 추가 정보가 표시됩니다.</p>
  </details>
</body>
</html>

예제: time_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Time 태그 예제</title>
</head>
<body>
  <p>이벤트 시작 시간: <time datetime="2023-04-25T18:00">2023년 4월 25일 오후 6시</time></p>
</body>
</html>

예제: figure_figcaption_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Figure와 Figcaption 태그 예제</title>
</head>
<body>
  <figure>
    <img src="example_image.jpg" alt="예제 이미지">
    <figcaption>이것은 예제 이미지입니다.</figcaption>
  </figure>
</body>
</html>

예제: main_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Main 태그 예제</title>
</head>
<body>
  <header>
    <h1>헤더</h1>
  </header>
  <main>
    <h2>메인 콘텐츠</h2>
    <p>이곳은 메인 콘텐츠 영역입니다.</p>
  </main>
  <footer>
    <p>푸터</p>
  </footer>
</body>
</html>

예제: aside_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Aside 태그 예제</title>
</head>
<body>
  <main>
    <h2>메인 콘텐츠</h2>
    <p>이곳은 메인 콘텐츠 영역입니다.</p>
  </main>
  <aside>
    <h3>부가 정보</h3>
    <p>이곳은 부가 정보를 제공하는 영역입니다.</p>
  </aside>
</body>
</html>

예제: nav_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Nav 태그 예제</title>
</head>
<body>
  <header>
    <h1>헤더</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#home">홈</a></li>
      <li><a href="#about">소개</a></li>
      <li><a href="#contact">연락처</a></li>
    </ul>
  </nav>
  <main>
    <h2>메인 콘텐츠</h2>
    <p>이곳은 메인 콘텐츠 영역입니다.</p>
  </main>
  <footer>
    <p>푸터</p>
  </footer>
</body>
</html>

예제: article_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Article 태그 예제</title>
</head>
<body>
  <article>
    <h2>포스트 제목</h2>
    <p>포스트 내용입니다.</p>
  </article>
</body>
</html>

예제: section_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Section 태그 예제</title>
</head>
<body>
  <section>
    <h2>섹션 제목</h2>
    <p>섹션 내용입니다.</p>
  </section>
</body>
</html>

예제: header_footer_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Header와 Footer 태그 예제</title>
</head>
<body>
  <header>
    <h1>웹사이트 로고</h1>
    <nav>
      <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
        <li><a href="#contact">연락처</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>메인 콘텐츠 제목</h2>
    <p>메인 콘텐츠 내용입니다.</p>
  </main>
  <footer>
    <p>저작권 정보 및 기타 정보</p>
  </footer>
</body>
</html>

예제: dl_dt_dd_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Dl, Dt, Dd 태그 예제</title>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language의 약자로 웹 페이지를 작성하는 언어입니다.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets의 약자로 웹 페이지의 스타일을 꾸미는 언어입니다.</dd>
    <dt>JavaScript</dt>
    <dd>웹 페이지의 동작을 제어하는 프로그래밍 언어입니다.</dd>
  </dl>
</body>
</html>

예제: fieldset_legend_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Fieldset과 Legend 태그 예제</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>개인 정보</legend>
      <label for="name">이름:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="email">이메일:</label>
      <input type="email" id="email" name="email">
    </fieldset>
  </form>
</body>
</html>

예제: summary_details_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Summary와 Details 태그 예제</title>
</head>
<body>
  <details>
    <summary>클릭하여 내용 표시/숨기기</summary>
    <p>이곳에 내용이 표시됩니다. 다시 클릭하면 내용이 숨겨집니다.</p>
  </details>
</body>
</html>

예제: ruby_rt_rp_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Ruby, Rt, Rp 태그 예제</title>
</head>
<body>
  <p><ruby>漢字<rt>한자</rt></ruby>는 한자 문자를 나타냅니다.</p>
</body>
</html>

예제: data_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Data 태그 예제</title>
</head>
<body>
  <p>이 제품의 가격은 <data value="10000">10,000원</data>입니다.</p>
</body>
</html>

예제: wbr_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Wbr 태그 예제</title>
</head>
<body>
  <p>이것은예제문장입니다<wbr>하지만어디서든줄바꿈이<wbr>가능합니다.</p>
</body>
</html>

예제: output_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Output 태그 예제</title>
  <script>
    function calculate() {
      let a = parseInt(document.getElementById('value1').value);
      let b = parseInt(document.getElementById('value2').value);
      let result = a + b;
      document.getElementById('result').value = result;
    }
  </script>
</head>
<body>
  <form oninput="calculate()">
    <input type="number" id="value1" name="value1">
    <span>+</span>
    <input type="number" id="value2" name="value2">
    <span>=</span>
    <output id="result" name="result"></output>
  </form>
</body>
</html>

예제: meter_example.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Meter 태그 예제</title>
</head>
<body>
  <label>저장 공간 사용량:</label>
  <meter min="0" max="100" low="40" high="80" optimum="30" value="60">60%</meter>
</body>
</html>