HTML tutorial

Acorn Academy 구라쌤·2024년 11월 1일

1. HTML 이란?

HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)은 웹 페이지를 만들기 위해 사용되는 기본적인 언어입니다. HTML은 웹 페이지의 구조와 콘텐츠를 정의하고, 브라우저가 텍스트, 이미지, 링크, 비디오 등의 요소를 화면에 표시하는 방식에 대해 설명합니다.

HTML 문서의 기본 구조는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>문서 제목</title>
</head>
<body>
    <h1>헤더</h1>
    <p>이것은 HTML 페이지의 본문입니다.</p>
    <a href="https://example.com">예제 링크</a>
</body>
</html>

<!DOCTYPE html> HTML5 문서임을 명시하는 선언입니다.
<html> HTML 문서의 시작과 끝을 나타내는 태그입니다.
<head> 문서의 메타데이터(예: 제목, 스타일, 문자 인코딩 등)를 포함합니다.
<body> 실제로 브라우저에 표시될 콘텐츠를 포함합니다.

2. 요소(element)

태그(tag): HTML에서 <tagname>...</tagname> 형태로 구성된 구문을 말합니다. 태그는 시작 태그(<tagname>)와 종료 태그(</tagname>)로 구성되며, HTML 문서 내에서 콘텐츠의 구조와 의미를 정의합니다.
요소(element): 태그가 해석되어 웹 페이지 상에 나타난 결과를 의미합니다. 즉, HTML 엘리먼트는 태그와 그 사이의 콘텐츠까지 포함하는 구조와 의미를 가지는 HTML 구성 요소입니다.

<p>Hello, World!</p>

위의 코드에서
<p>와 </p>는 각각 시작 태그와 종료 태그입니다.
<p>Hello, World!</p> 전체가 HTML 엘리먼트입니다. 여기서 <p> 태그가 "Hello, World!" 텍스트를 문단으로 해석하도록 지시하며, 브라우저는 이를 화면에 문단 형태로 표시하게 됩니다.

3. 블록요소와 인라인요소

HTML에서는 요소가 페이지에서 차지하는 공간과 레이아웃에 따라 블록(block) 요소와 인라인(inline) 요소로 나뉩니다.
이 구분은 요소가 페이지에서 어떻게 배치되고, 다른 요소와의 관계에서 어떻게 작용하는지에 영향을 줍니다.

블록 요소 (Block Element)

특징:
- 페이지에서 새 줄부터 시작하여, 기본적으로 전체 너비를 차지합니다.
- 한 줄에 하나씩 배치되며, 다음 요소는 블록 요소 아래에 배치됩니다.
- 부모 요소의 가로 너비를 모두 사용하려는 성질이 있어서, 가로 크기를 지정하지 않으면 기본적으로 부모 요소의 너비를 가득 채웁니다.
- width, height, margin, padding 등의 스타일 속성을 지정할 수 있습니다.
예시:
- <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>, <article> 등
사용 예:
```
<div>
  <h1>블록 요소 예시</h1>
  <p>이 문장은 블록 요소로 처리되는 문단입니다.</p>
</div>
```
위의 예에서 <div>, <h1>, <p> 는 모두 블록 요소이며, 각 요소는 페이지에서 새 줄로 시작합니다.

인라인 요소 (Inline Element)

특징:
- 현재 줄에 함께 배치되며, 줄을 차지하지 않고 다른 인라인 요소와 나란히 배치됩니다.
- 콘텐츠만큼의 너비만 차지하고, 기본적으로 줄을 넘어서는 크기를 차지하지 않습니다.
- width, height를 설정해도 적용되지 않지만, margin, padding은 수평 방향으로만 제한적으로 적용됩니다.
예시:
- <span>, <a>, <img>, <strong>, <em>, <label>, <input>, <button> 등
사용 예:
```
   <p>이 문장에는 <span>인라인 요소</span>가 포함되어 있습니다</p>
```
요약
블록 요소는 페이지 레이아웃을 구성하는 데 사용되며, 한 줄 전체를 차지하여 주로 큰 구조를 만듭니다.
인라인 요소는 문장 내에서 텍스트나 이미지와 같은 작은 요소를 나란히 배치하는 데 사용됩니다.

4. HTML 기본 태그

1. div 요소

블록 요소:
- <div> 는 블록 요소이므로, 새 줄에서 시작하고 부모 요소의 가로 너비를 전부 차지합니다.
- 다른 블록 요소와 마찬가지로, 높이(height)와 너비(width)를 지정할 수 있으며, 여백(margin)과 패딩(padding)도 자유롭게 설정할 수 있습니다.
의미가 없는 요소:
- <div>는 본질적으로 의미를 가지지 않는 중립적인 요소입니다. 이 자체로는 콘텐츠에 아무런 의미를 부여하지 않으며, 순전히 레이아웃을 목적으로 사용됩니다.
- 화면에 특별한 스타일이 없으며, 사용자가 지정한 스타일이나 속성을 통해 모양이 결정됩니다.
그룹화 및 구조화:
- 여러 요소를 묶어서 하나의 그룹으로 처리할 때 사용합니다. 예를 들어, 여러 개의 텍스트와 이미지를 포함한 콘텐츠를 하나로 묶어 레이아웃을 잡거나, 특정 스타일을 적용하는 데 유용합니다.
- 특정 스타일이나 JavaScript 기능을 여러 요소에 한 번에 적용할 때도 <div> 를 이용해 그룹화할 수 있습니다.
CSS 및 JavaScript와 함께 사용:
- <div> 는 주로 CSS와 함께 사용되어, 페이지 레이아웃을 구성하거나 특정 스타일을 적용하는 데 사용됩니다.
- 또한, <div> 는 JavaScript로 쉽게 접근할 수 있기 때문에, 이벤트 리스너를 추가하거나 특정 기능을 적용할 때도 많이 사용됩니다.

   <!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #f3f3f3;
            padding: 20px;
        }
        .header, .content, .footer {
            padding: 10px;
            margin: 10px 0;
        }
        .header {
            background-color: #4CAF50;
            color: white;
        }
        .content {
            background-color: #ffffff;
        }
        .footer {
            background-color: #ddd;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header">헤더 영역</div>
    <div class="content">콘텐츠 영역</div>
    <div class="footer">푸터 영역</div>
</div>

</body>
</html>

설명
.container: <div class="container"> 는 전체 페이지 레이아웃을 잡는 컨테이너로 사용됩니다. 전체 페이지 너비의 80%를 차지하고, 가운데 정렬되도록 margin: 0 auto;를 사용했습니다.
.header, .content, .footer : 각 영역을 <div> 로 나누어 별도로 스타일을 적용했습니다. 이렇게 하면 각 섹션에 맞는 스타일과 레이아웃을 쉽게 조정할 수 있습니다.

condepen.io 에서 실습하기

2. p 요소

블록 요소:
- <p> 는 블록 요소로, 페이지에서 새 줄에서 시작하며 가로 너비를 전부 차지합니다.
- 다른 블록 요소와 마찬가지로, 상하에 여백이 기본적으로 설정되어 있어 문단 간 간격이 자동으로 추가됩니다.
기본 문단 스타일:
- <p> 요소는 기본적으로 상하에 여백이 포함되어 있어 문단 간 간격을 자동으로 형성합니다.
- 이 여백은 CSS를 통해 변경할 수 있으며, 스타일링을 통해 글꼴, 색상, 정렬 등 다양한 설정을 할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>p 요소 예제</title>
</head>
<body>

<p>이것은 첫 번째 문단입니다. 문단 태그를 사용하여 텍스트를 문단 단위로 나눌 수 있습니다.</p>

<p>이것은 두 번째 문단입니다. 문단 태그는 텍스트를 그룹화하여 읽기 쉽고 정돈된 형태로 표시해 줍니다.</p>

</body>
</html>

설명
위 예제에서 <p> 요소는 두 개의 문단을 생성하며, 각 문단은 기본적으로 페이지에서 새 줄로 표시됩니다.

condepen.io 에서 실습하기

3. hn 요소

<h1>부터 <h6>까지의 <h> 요소는 HTML에서 제목(heading)을 표시하는 데 사용되는 요소입니다. 제목 요소는 페이지의 구조를 계층적으로 표현하고, 콘텐츠의 중요도를 구분하는 데 중요한 역할을 합니다.

계층적 구조
- <h1>부터 <h6>까지의 요소는 제목의 중요도를 나타내며, <h1>이 가장 중요하고 <h6>이 가장 덜 중요한 제목입니다.
- <h1> 은 일반적으로 페이지의 주요 제목(메인 타이틀)으로 사용되며, <h2>, <h3> 등은 그 아래의 하위 제목으로 사용됩니다.
- 계층 구조가 명확하면 웹 페이지의 구조가 더 논리적으로 표시되며, 검색 엔진 최적화(SEO)에도 도움이 됩니다.
자동 스타일:
- 기본적으로 브라우저는 <h1>부터 <h6>까지의 요소에 각각 다른 크기와 두꺼운 글씨체를 적용합니다.
- <h1>은 기본적으로 가장 큰 글씨 크기를 가지며, <h6>은 가장 작은 글씨 크기를 가집니다. CSS를 통해 스타일을 변경할 수 있습니다.
블록 요소:
- <h1>부터 <h6>까지의 제목 요소는 모두 블록 요소이므로, 페이지에서 새 줄에서 시작하며, 부모 요소의 너비를 차지합니다.

<!DOCTYPE html>
<html>
<head>
    <title>제목 요소 예시</title>
</head>
<body>

<h1>이것은 페이지의 주요 제목입니다 (h1)</h1>
<p>여기에는 페이지의 주요 내용을 소개하는 문장이 올 수 있습니다.</p>

<h2>이것은 첫 번째 섹션의 제목입니다 (h2)</h2>
<p>첫 번째 섹션의 내용을 설명하는 문단입니다.</p>

<h3>첫 번째 소제목입니다 (h3)</h3>
<p>소제목에 대한 상세한 설명이 들어갈 수 있습니다.</p>

<h2>이것은 두 번째 섹션의 제목입니다 (h2)</h2>
<p>두 번째 섹션의 내용을 설명하는 문단입니다.</p>

</body>
</html>

예제설명
<h1>은 페이지에서 가장 중요한 제목이므로, 주로 페이지의 주요 제목에 사용됩니다.
<h2>, <h3>는 각 섹션의 제목이나 소제목으로 사용할 수 있습니다.
위의 구조는 페이지를 계층적으로 표현하므로, 사용자가 쉽게 내용을 파악할 수 있도록 돕습니다.

condepen.io 에서 실습하기

4. ul 요소

<ul> 요소는 unordered list(순서 없는 목록)을 만드는 데 사용됩니다. 주로 순서가 중요하지 않은 목록을 표시할 때 사용하며, 기본적으로 각 항목 앞에 불릿(bullet)이나 기호가 표시됩니다.

`<ul>` 요소의 특징

순서 없는 목록
- <ul>은 순서가 필요 없는 목록을 만들 때 사용됩니다. 목록의 각 항목은 순서 없이 나열되며, 기본적으로 각 항목 앞에 불릿 기호가 표시됩니다.
- 불릿 기호는 브라우저에 따라 기본 스타일이 조금씩 다를 수 있으며, CSS로 모양을 변경할 수 있습니다.
목록 항목을 위한 <li> 요소
- <ul> 요소 안에서 각각의 항목은 <li>(list item) 요소로 표시됩니다.
- <li> 요소는 <ul>이나 <ol> 요소 내에서 사용해야 하며, 각각의 <li>가 목록의 하나의 항목을 나타냅니다.
기본 스타일
- <ul> 목록은 기본적으로 왼쪽에 들여쓰기가 적용되며, 각 항목 앞에 불릿이 표시됩니다.
- CSS를 사용하여 불릿 모양, 위치, 들여쓰기 등을 커스터마이징할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>ul 요소 예제</title>
</head>
<body>

<h2>과일 목록</h2>
<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>체리</li>
    <li>포도</li>
</ul>

</body>
</html>

5. ol 요소

<ol> 요소는 ordered list(순서 있는 목록)을 만드는 데 사용됩니다. 주로 순서가 중요한 목록을 표시할 때 사용하며, 기본적으로 각 항목에 숫자나 문자와 같은 순번이 표시됩니다.

순서 있는 목록
- <ol>은 순서가 필요한 목록을 만들 때 사용됩니다. 목록의 각 항목은 순서에 따라 나열되며, 기본적으로 각 항목 앞에 숫자가 표시됩니다.
- 순서가 중요할 때, 예를 들어 단계적인 절차나 순서대로 나열된 항목을 표현할 때 유용합니다.
목록 항목을 위한 <li> 요소
- <ol> 요소 안에서 각각의 항목은 <li>(list item) 요소로 표시됩니다.
- <li> 요소는 <ol>이나 <ul> 요소 내에서 사용해야 하며, 각각의 <li>가 목록의 하나의 항목을 나타냅니다.
기본 스타일
- <ol> 목록은 기본적으로 왼쪽에 들여쓰기가 적용되며, 각 항목 앞에 숫자(1, 2, 3...)가 표시됩니다.
- CSS를 사용하여 숫자 대신 로마 숫자, 알파벳 등 다른 스타일을 지정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>ol 요소 예제</title>
</head>
<body>

<h2>순서 있는 목록</h2>
<ol>
    <li>HTML 배우기</li>
    <li>CSS 배우기</li>
    <li>JavaScript 배우기</li>
    <li>프론트엔드 개발 완성</li>
</ol>

</body>
</html>

6. table 요소

<table> 요소는 표(table)를 만들기 위해 사용됩니다. <table>은 데이터를 행과 열로 구조화하여 표현할 때 유용합니다. 주로 숫자 데이터나 정보를 정리된 형태로 보여줄 때 사용됩니다.

HTML 표는 <table> 요소를 기본으로 하여, 그 안에 여러 행(<tr>), 열(<td>, <th>)로 구성됩니다.

<table>: 표의 전체 영역을 감싸는 요소
<tr>: 표의 행(row)을 나타냄
<td>: 표의 셀(cell)을 나타내며, 일반적인 데이터를 표시
<th>: 헤더 셀(header cell)을 나타내며, 표의 제목이나 열 이름을 표시. 기본적으로 텍스트가 굵고 가운데 정렬됨

<!DOCTYPE html>
<html>
<head>
    <title>table 요소 예제</title>
</head>
<body>

<h2>학생 성적표</h2>
<table>
    <tr>
        <th>이름</th>
        <th>과목</th>
        <th>점수</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>수학</td>
        <td>90</td>
    </tr>
    <tr>
        <td>이몽룡</td>
        <td>영어</td>
        <td>85</td>
    </tr>
</table>

</body>
</html>

HTML `<thead>`와 `<tbody>`

HTML에서 표를 구성할 때 <table> 요소 안에 여러 섹션으로 구분할 수 있습니다. <thead>와 <tbody>는 표의 구조와 가독성을 높이기 위해 사용하는 주요 섹션입니다.

`<thead>`

설명: <thead>는 표의 헤더(머리글) 부분을 정의합니다. 이 섹션에는 일반적으로 열 제목이 포함되어 있어 각 열의 내용을 설명하는 역할을 합니다.
위치: <table> 태그 안에서 <thead>는 주로 표의 맨 위에 배치되며, 그 아래에 <tbody>가 위치합니다.
예시:

    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>직업</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>25</td>
                <td>개발자</td>
            </tr>
        </tbody>
    </table>

`<tbody>`

설명: <tbody>는 표의 본문 부분을 정의하며, 실제 데이터가 들어가는 곳입니다. 이 섹션은 여러 행(<tr>)으로 구성되며, 각 행은 열(<td>)을 포함합니다.
위치: <thead>와 <tfoot> 사이에 위치할 수 있으며, 표에서 반복되는 데이터 목록을 담는 부분입니다.
예시:

    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>직업</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>25</td>
                <td>개발자</td>
            </tr>
            <tr>
                <td>김영희</td>
                <td>30</td>
                <td>디자이너</td>
            </tr>
        </tbody>
    </table>

참고

<thead>와 <tbody>를 사용하면 HTML 표의 구조가 더 명확해지며, CSS나 JavaScript를 사용하여 표의 특정 부분을 쉽게 스타일링하거나 조작할 수 있습니다.

<thead>는 일반적으로 한 번만 사용할 수 있지만 <tbody>는 여러 개 사용할 수 있습니다. 이는 큰 표를 여러 섹션으로 나눌 때 유용합니다.

7. a 요소 (anchor)

HTML의 <a> 요소는 "anchor"의 약자로, 웹페이지에서 하이퍼링크를 정의하는 데 사용됩니다. <a> 태그는 다른 페이지로 이동하거나, 파일을 다운로드하거나, 이메일을 전송하는 등의 작업을 가능하게 합니다.

기본 사용법

<a> 태그는 href 속성에 링크를 설정하고, 링크 텍스트를 태그 안에 넣습니다.

<a href="https://example.com">Example 사이트로 이동</a>

위 예제에서는 href 속성에 URL을 지정하여, "Example 사이트로 이동" 텍스트가 클릭 가능하도록 합니다.

주요 속성

href
링크의 대상 URL을 정의하는 필수 속성입니다. 외부 웹사이트, 내부 페이지, 파일을 가리킬 수 있습니다.

  <a href="https://example.com">외부 사이트 링크</a>
  <a href="/contact.html">내부 페이지 링크</a>

target
링크가 열리는 방식을 설정합니다.
- _self: 현재 탭에서 링크를 엽니다. (기본값)
- _blank: 새 탭에서 링크를 엽니다.
- _parent: 상위 프레임에서 링크를 엽니다.
- _top: 가장 상위 프레임에서 링크를 엽니다.
```
<a href="https://example.com" target="_blank">새 탭에서 열기</a>
```

책갈피 기능

목적지 설정: 이동할 위치에 id 속성을 사용하여 책갈피를 설정합니다.
링크 작성: <a> 태그의 href 속성에 #id값 형식으로 지정하여, 책갈피로 연결합니다.

예시

책갈피 목적지 설정

페이지 내에서 이동할 목적지 요소에 id 속성을 추가합니다.

<h2 id="section1">섹션 1</h2>
<p>여기는 섹션 1의 내용입니다.</p>

<h2 id="section2">섹션 2</h2>
<p>여기는 섹션 2의 내용입니다.</p>

책갈피 링크 작성

<a> 태그를 사용하여 href 속성에 #id값을 설정합니다. 이를 클릭하면 지정된 id 위치로 이동합니다.
```
<a href="#section1">섹션 1로 이동</a>
<a href="#section2">섹션 2로 이동</a>
```

전체 예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>책갈피 예제</title>
</head>
<body>
  <h1>HTML 책갈피 기능 예제</h1>

  <!-- 책갈피 링크 -->
  <a href="#section1">섹션 1로 이동</a>
  <a href="#section2">섹션 2로 이동</a>

  <!-- 책갈피 목적지 -->
  <h2 id="section1">섹션 1</h2>
  <p>여기는 섹션 1의 내용입니다.</p>

  <h2 id="section2">섹션 2</h2>
  <p>여기는 섹션 2의 내용입니다.</p>
</body>
</html>

참고

책갈피 기능은 같은 페이지 내 특정 위치로의 이동을 가능하게 하며, 사용자가 빠르게 원하는 정보를 찾을 수 있도록 돕습니다.
#id값을 사용하여 페이지 내에서 이동할 위치를 지정하므로, id는 페이지 내에서 유일해야 합니다.

8. span 요소

<span> 요소는 HTML에서 인라인 요소로, 문서 내에서 특정 텍스트를 그룹화하거나 스타일을 적용할 때 주로 사용됩니다. <span> 자체는 의미를 지니지 않으며, 기본적으로 스타일이나 이벤트 핸들러를 적용하기 위한 컨테이너 역할을 합니다.

주요 특징

인라인 요소: <span>은 인라인 요소로, 텍스트나 다른 인라인 요소를 감싸지만 줄 바꿈을 발생시키지 않습니다.
스타일링: CSS를 통해 스타일을 적용하거나, 자바스크립트로 이벤트를 바인딩할 때 사용됩니다.
구조적 의미 없음: 의미가 없는 요소이기 때문에, 일반적으로 문서 구조에 직접적인 영향을 미치지 않습니다. 단순히 스타일을 적용하거나 특정 스크립트 기능을 부여하는 용도로 사용됩니다.

사용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>span 요소 예제</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>이 문장에는 <span class="highlight">강조된 부분</span>이 포함되어 있습니다.</p>
</body>
</html>

9. `b` 요소와 `strong` 요소

HTML에서 <b> 요소와 <strong> 요소는 모두 텍스트를 굵게 표시하는 데 사용됩니다. 하지만 두 요소는 용도와 의미에서 차이가 있습니다.

`<b>` 요소

기본 용도: 텍스트를 시각적으로 굵게 표시합니다.
의미적 강조 없음: 단순히 시각적인 용도로 굵게 표시할 때 사용되며, 특별한 의미나 중요성을 부여하지 않습니다.
사용 사례: 중요하지 않은 텍스트를 단순히 시각적으로 강조할 때 적합합니다.

<p>이 문장에서 <b>특별한 단어</b>가 굵게 표시됩니다.</p>

`<strong>` 요소

기본 용도: 텍스트에 의미적 강조를 부여하면서 굵게 표시합니다.
의미적 강조 있음: 중요한 정보를 전달하며, 검색 엔진 최적화(SEO) 및 접근성 측면에서 의미 있는 정보로 인식됩니다.
사용 사례: 문맥상 중요한 내용이나 경고를 강조할 때 사용합니다.

<p>이 문장은 <strong>매우 중요한 내용</strong>을 포함하고 있습니다.</p>

차이점 정리

요소	시각적 효과	의미적 강조	주요 사용 사례
`<b>`	굵게 표시	없음	단순한 시각적 강조가 필요할 때
`<strong>`	굵게 표시	있음	중요한 정보나 경고를 의미적으로 강조할 때

요약

<b> 요소는 단순히 텍스트를 굵게 만드는 시각적 효과만 제공합니다.
<strong> 요소는 텍스트를 굵게 표시하면서도 의미적으로 중요한 텍스트임을 나타내며, SEO와 접근성 측면에서 더 유리합니다.

특정 정보에 의미를 더해 강조해야 한다면 <strong> 요소를 사용하는 것이 좋습니다.

10. i 요소와 em 요소

HTML에서 <i> 요소와 <em> 요소는 모두 텍스트를 기울임꼴로 표시하는 데 사용됩니다. 하지만 두 요소는 용도와 의미에서 차이가 있습니다.

`<i>` 요소

기본 용도: 텍스트를 시각적으로 기울임꼴로 표시합니다.
의미적 강조 없음: 단순히 시각적인 용도로 기울임꼴을 사용할 때 사용되며, 특별한 의미나 강조를 부여하지 않습니다.
사용 사례: 용어나 외국어, 특별한 이름, 아이콘 등을 표현할 때 적합합니다.

<p>이 문장에서 <i>라틴어</i> 단어가 기울임꼴로 표시됩니다.</p>

`<em>` 요소

기본 용도: 텍스트에 의미적 강조를 부여하면서 기울임꼴로 표시합니다.
의미적 강조 있음: 중요한 정보를 전달하며, 검색 엔진 최적화(SEO) 및 접근성 측면에서 강조된 내용으로 인식됩니다.
사용 사례: 문맥상 중요한 단어나 강조해야 할 내용에 사용됩니다.

<p>이 문장은 <em>매우 중요한 내용</em>을 포함하고 있습니다.</p>

차이점 정리

요소	시각적 효과	의미적 강조	주요 사용 사례
`<i>`	기울임꼴 표시	없음	용어나 외국어, 아이콘 등 특별한 텍스트에 사용
`<em>`	기울임꼴 표시	있음	중요한 정보나 문맥상 강조할 때 사용

요약

<i> 요소는 단순히 텍스트를 기울임꼴로 만드는 시각적 효과만 제공합니다.
<em> 요소는 텍스트를 기울임꼴로 표시하면서도 의미적으로 강조된 텍스트임을 나타내며, SEO와 접근성 측면에서 더 유리합니다.

특정 정보에 의미를 더해 강조해야 한다면 <em> 요소를 사용하는 것이 좋습니다.

11. code 요소

HTML의 <code> 요소는 프로그래밍 코드 또는 컴퓨터가 이해할 수 있는 텍스트를 표시하는 데 사용됩니다. <code> 요소는 텍스트를 고정폭 글꼴로 렌더링하여 일반 텍스트와 구분되도록 합니다.

기본 사용법

<code> 요소는 짧은 코드 스니펫이나 명령어를 강조할 때 주로 사용됩니다.

<p>사용자 이름을 입력하려면 <code>username</code> 속성을 사용하세요.</p>

위 예제에서 <code> 요소는 "username" 텍스트를 고정폭 글꼴로 표시합니다.

`<code>` 요소와 `<pre>` 요소의 결합

긴 코드 블록을 표시할 때는 <pre> 요소와 함께 사용하여 코드의 줄바꿈과 들여쓰기를 유지할 수 있습니다. <pre> 요소는 코드의 서식을 그대로 유지하도록 합니다.

<pre><code>
function greet(name) {
  console.log("Hello, " + name + "!");
}
</code></pre>

위 예제에서 <pre><code>를 사용하여 줄바꿈과 들여쓰기를 그대로 유지한 코드 블록을 표시합니다.

주요 사용 사례

코드 스니펫: 코드의 일부를 강조하여 보여줄 때.
명령어, 변수, 함수 이름: 프로그래밍 문서에서 명령어나 함수, 변수 이름을 표시할 때.
짧은 코드 블록: 줄바꿈이 필요하지 않은 코드 표현에 적합합니다.

`<kbd>`, `<samp>`와의 차이점

<kbd>: 사용자 입력을 나타내며, 키보드로 입력하는 텍스트나 단축키에 사용됩니다.
<samp>: 시스템에서 출력되는 샘플 텍스트를 나타냅니다.
<code>: 프로그래밍 코드나 컴퓨터 코드에 사용됩니다.

예제

<p>명령어를 입력하세요: <kbd>Ctrl + C</kbd></p>
<p>코드 출력 예시: <samp>Hello, World!</samp></p>
<p>다음 JavaScript 코드를 사용하세요: <code>alert("Hello, World!");</code></p>

요약

<code> 요소는 코드, 명령어, 컴퓨터와 관련된 텍스트를 표시하는 데 사용됩니다.
고정폭 글꼴로 렌더링되어 일반 텍스트와 구분됩니다.
긴 코드 블록은 <pre>와 함께 사용하여 서식을 유지할 수 있습니다.

코드 예시나 프로그램 관련 설명을 작성할 때 <code> 요소를 사용하여 텍스트를 명확하게 구분할 수 있습니다.

12. dl 요소

HTML의 <dl> 요소는 정의 목록(description list)을 생성하는 데 사용됩니다. 정의 목록은 용어와 그에 대한 설명을 나열하는 구조로, 용어-설명 쌍을 표시하는 데 적합합니다. <dl> 요소 안에는 <dt>와 <dd> 요소가 포함됩니다.

구성 요소

<dl> (definition list)
- 정의 목록 전체를 감싸는 요소입니다.
- 목록의 시작과 끝을 나타냅니다.
<dt> (definition term)
- 정의할 용어나 항목을 나타내는 요소입니다.
- 일반적으로 용어, 제목 또는 항목 이름을 포함합니다.
<dd> (definition description)
- 용어의 설명이나 정의를 제공하는 요소입니다.
- 바로 이전의 <dt> 요소에 대한 설명을 나타냅니다.

기본 사용법

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 마크업 언어입니다.</dd>

  <dt>CSS</dt>
  <dd>HTML 요소의 스타일을 지정하는 스타일 시트 언어입니다.</dd>

  <dt>JavaScript</dt>
  <dd>웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.</dd>
</dl>

위 예제에서 <dt>는 용어(HTML, CSS, JavaScript)를 나타내고, <dd>는 각각의 용어에 대한 설명을 제공합니다.

`<dl>` 요소의 사용 사례

용어와 정의: 사전 형식의 용어와 설명을 나열할 때.
FAQ(자주 묻는 질문): 질문과 답변을 나열할 때.
제품 정보: 제품의 사양과 설명을 나열할 때.

예제: FAQ 형식으로 사용

<dl>
  <dt>질문 1: HTML이란 무엇인가요?</dt>
  <dd>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</dd>

  <dt>질문 2: CSS의 역할은 무엇인가요?</dt>
  <dd>CSS는 HTML 요소의 스타일을 지정하여 페이지를 꾸밉니다.</dd>

  <dt>질문 3: JavaScript는 어떤 역할을 하나요?</dt>
  <dd>JavaScript는 웹 페이지에 동적인 기능을 추가하는 데 사용됩니다.</dd>
</dl>

요약

<dl> 요소는 용어와 설명을 나열하는 정의 목록을 생성합니다.
<dt> 요소는 용어나 항목을 정의하고, <dd> 요소는 그에 대한 설명을 제공합니다.
주로 용어 사전, FAQ, 제품 정보와 같은 설명 목록에 유용하게 사용됩니다.

5. 여러가지 form 요소

input 요소

HTML의 <input> 요소는 다양한 유형의 사용자 입력을 받을 수 있는 필드를 생성하는 데 사용됩니다. type 속성에 따라 입력 방식이 달라지며, 각 타입마다 고유한 기능과 제약이 있습니다.

주요 `<input>` 타입

type="text"
- 일반 텍스트를 입력받기 위한 필드를 생성합니다.
- 사용 예: 사용자 이름, 주소 등 일반 텍스트 입력.
```
<input type="text" placeholder="이름을 입력하세요">
```
type="password"
- 비밀번호 입력 필드를 생성하며, 입력한 텍스트가 가려집니다.
- 사용 예: 로그인, 회원가입 등 비밀번호 입력.
```
<input type="password" placeholder="비밀번호">
```
type="email"
- 이메일 주소 입력 필드를 생성하며, 이메일 형식이 아닌 입력 시 브라우저에서 경고를 표시합니다.
- 사용 예: 이메일 주소 입력 필드.
```
<input type="email" placeholder="example@example.com">
```
type="file"
- 파일 업로드를 위한 필드를 생성합니다. 사용자가 파일을 선택할 수 있는 버튼을 제공합니다.
- 사용 예: 이미지 업로드, 문서 업로드 등.
```
<input type="file">
```
type="number"
- 숫자 입력 필드를 생성하며, 숫자가 아닌 값은 입력할 수 없습니다. 최대값, 최소값, 단계(step) 속성을 사용하여 제한할 수 있습니다.
- 사용 예: 나이, 수량 등 숫자 입력.
```
<input type="number" min="1" max="100" step="1" placeholder="나이를 입력하세요">
```
type="color"
- 색상 선택 필드를 생성하며, 클릭 시 색상 선택기가 나타납니다.
- 사용 예: 색상 선택기(디자인 도구, 사용자 인터페이스 색상 설정 등).
```
<input type="color">
```
type="datetime-local"
- 날짜와 시간을 동시에 선택할 수 있는 필드를 생성합니다.
- 사용 예: 예약 날짜와 시간 선택.
```
<input type="datetime-local">
```
type="range"
- 슬라이더 형태로 값을 선택할 수 있는 필드를 생성합니다. 주로 숫자 범위에서 선택할 때 사용됩니다.
- 사용 예: 볼륨 조절, 밝기 설정 등.
```
<input type="range" min="0" max="100" step="1">
```
type="checkbox"
- 체크박스를 생성하여 선택할 수 있는 옵션을 제공합니다. 여러 개의 옵션을 동시에 선택할 수 있습니다.
- 사용 예: 동의 항목, 여러 선택지에서 다중 선택.
```
<label><input type="checkbox"> 동의합니다</label>
```
type="radio"
- 라디오 버튼을 생성하며, 같은 name 속성을 가진 그룹에서 하나의 옵션만 선택할 수 있습니다.
- 사용 예: 성별, 설문조사 등 단일 선택이 필요한 항목.
```
<label><input type="radio" name="gender" value="male"> 남성</label>
 <label><input type="radio" name="gender" value="female"> 여성</label>
```

요약

`type` 속성	설명	사용 예
`text`	일반 텍스트 입력	이름, 주소 등
`password`	비밀번호 입력, 입력값이 가려짐	로그인, 회원가입 비밀번호
`email`	이메일 주소 입력, 이메일 형식 검사	이메일 입력
`file`	파일 업로드 필드	이미지 업로드, 문서 업로드
`number`	숫자만 입력 가능	나이, 수량 등
`color`	색상 선택	UI 색상 설정
`datetime-local`	날짜와 시간 동시 선택	예약 시간 설정
`range`	슬라이더로 값 선택	볼륨 조절, 밝기 설정
`checkbox`	다중 선택 가능한 체크박스	동의 항목, 여러 선택지에서 다중 선택
`radio`	단일 선택 가능한 라디오 버튼	성별, 설문조사 등

각 타입의 <input> 요소는 사용자 경험을 개선하고 입력값을 더 쉽게 제어할 수 있도록 돕습니다. 필요한 입력 형식에 맞춰 적절한 타입을 선택하여 사용하세요.

select 요소

HTML의 <select> 요소는 사용자가 미리 정의된 목록에서 하나 또는 여러 개의 옵션을 선택할 수 있도록 하는 드롭다운 리스트를 생성합니다. 일반적으로 폼 안에서 사용되어 선택된 값을 서버에 전송할 수 있습니다.

기본 구조

<select> 요소는 <option> 태그와 함께 사용됩니다. 각 <option> 태그는 선택 가능한 항목을 정의합니다.

<select name="fruits">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="cherry">체리</option>
</select>

주요 속성

name
<select> 요소의 이름을 지정하며, 폼이 제출될 때 선택된 옵션의 값을 참조하는 데 사용됩니다.
multiple
다중 선택을 허용하는 속성입니다. 이 속성을 추가하면 사용자가 목록에서 여러 개의 항목을 선택할 수 있습니다.

<select name="fruits" multiple>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="cherry">체리</option>
</select>

size
표시되는 옵션의 수를 지정합니다. 기본적으로 1이며, 이를 증가시키면 드롭다운 대신 스크롤 가능한 목록 형태로 나타납니다.

<select name="fruits" size="3">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="cherry">체리</option>
</select>

`<option>` 요소의 주요 속성

value
선택된 옵션이 제출될 때 서버로 전송되는 값입니다. 이 속성을 지정하지 않으면 <option> 태그의 텍스트가 기본값으로 사용됩니다.
selected
기본 선택된 옵션을 지정합니다. 폼이 로드될 때 이 옵션이 선택된 상태로 표시됩니다.

<select name="fruits">
  <option value="apple" selected>사과</option>
  <option value="banana">바나나</option>
  <option value="cherry">체리</option>
</select>

예제

<form action="/submit" method="post">
  <label for="fruit">과일 선택:</label>
  <select id="fruit" name="fruit" multiple>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="cherry">체리</option>
    <option value="date">대추야자</option>
  </select>
  <button type="submit">제출</button>
</form>

요약

<select> 요소는 드롭다운 목록을 생성하여 사용자가 하나 또는 여러 개의 옵션을 선택할 수 있게 합니다.
다중 선택을 허용하려면 multiple 속성을 추가합니다.

textarea 요소

HTML의 <textarea> 요소는 여러 줄의 텍스트를 입력받는 입력 필드를 생성합니다. 일반적인 <input type="text">와 달리, 여러 줄의 텍스트를 입력할 수 있어 주로 댓글 작성이나 메시지 입력 등의 용도로 사용됩니다.

기본 사용법

<textarea> 요소는 여는 태그와 닫는 태그 사이에 초기 텍스트를 넣을 수 있으며, 사용자 입력 필드의 기본 텍스트로 표시됩니다.

<textarea name="comments" rows="4" cols="50">여기에 내용을 입력하세요...</textarea>

주요 속성

name
- <textarea>의 이름을 지정하여, 폼 제출 시 이 필드의 값을 참조합니다.
- 서버로 전송될 데이터의 필드 이름이 됩니다.
rows
- 텍스트 영역의 세로 크기(줄 수)를 지정합니다.
- 기본값은 브라우저에 따라 다르며, 사용자가 원하는 크기로 조정 가능합니다.
```
<textarea name="comments" rows="5"></textarea>
```
cols
- 텍스트 영역의 가로 크기(문자 수)를 지정합니다.
- 기본값은 브라우저에 따라 다르며, 사용자가 원하는 크기로 조정 가능합니다.
```
<textarea name="comments" cols="30"></textarea>
```
placeholder
- 사용자에게 입력할 내용을 힌트로 제공하는 텍스트를 설정합니다.
- <textarea> 요소 안에 기본적으로 표시되는 안내 텍스트입니다.
```
<textarea name="comments" placeholder="여기에 메시지를 입력하세요"></textarea>
```
maxlength
- 사용자가 입력할 수 있는 최대 문자 수를 지정합니다.
```
<textarea name="comments" maxlength="200"></textarea>
```
readonly
- 읽기 전용 필드로 설정하여 사용자가 내용을 수정하지 못하게 합니다.
```
<textarea name="comments" readonly>수정할 수 없는 텍스트입니다.</textarea>
```

disabled

비활성화된 상태로 설정하여, 사용자 입력을 받을 수 없게 합니다.

<textarea name="comments" disabled>이 텍스트 영역은 비활성화되었습니다.</textarea>

예제: 여러 속성을 포함한 `<textarea>`

  <textarea id="comments" name="comments" rows="4" cols="50" maxlength="200" placeholder="여기에 의견을 작성해 주세요"></textarea>

요약

<textarea> 요소는 여러 줄의 텍스트를 입력받는 필드를 생성합니다.
rows와 cols 속성으로 텍스트 영역의 크기를 조절할 수 있으며, placeholder, maxlength 등의 속성으로 사용자 경험을 개선할 수 있습니다.
readonly와 disabled 속성을 통해 읽기 전용 또는 비활성 상태로 설정할 수 있습니다.

주석, 설명, 메시지 작성과 같은 긴 텍스트 입력이 필요한 경우 <textarea> 요소를 사용하여 사용자에게 편리한 입력 환경을 제공합니다.

form 구성하기

HTML의 <form> 요소는 사용자 입력을 수집하여 서버로 데이터를 전송하는 양식을 생성하는 데 사용됩니다. <form> 안에 포함된 <input>, <select>, <textarea>, <button> 등의 요소가 사용자로부터 데이터를 입력받는 역할을 합니다.

기본 구조

<form> 요소는 action과 method 속성을 통해 데이터가 전송되는 방식과 목적지를 정의합니다.

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

주요 속성

action
- 폼 데이터를 전송할 URL을 지정합니다. 사용자가 폼을 제출할 때 이 URL로 데이터가 전송됩니다.
- 예: action="/submit"는 데이터를 /submit 경로로 전송함을 의미합니다.
method
- 폼 데이터를 전송하는 HTTP 메서드를 지정합니다. 일반적으로 GET과 POST 중 하나를 사용합니다.
  - GET: URL에 데이터를 쿼리 문자열로 포함하여 전송합니다. 데이터가 URL에 표시되므로 보안이 중요하지 않은 데이터 전송에 적합합니다.
  - POST: 데이터를 HTTP 요청의 본문에 포함하여 전송합니다. 보안이 중요한 데이터 전송이나 대량의 데이터 전송에 적합합니다.

<form action="/submit" method="post">
  <!-- 폼 내용 -->
</form>

제출 버튼

폼을 제출하려면 type="submit" 속성이 있는 <button>이나 <input> 요소가 필요합니다. 제출 버튼을 클릭하면 폼이 설정된 action URL과 method로 전송됩니다.

<button type="submit">제출</button>

또는

<input type="submit" value="제출">

폼 전송 예제

<form action="/submit" method="post">
  <label for="username">사용자 이름:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>

  <label for="age">나이:</label>
  <input type="number" id="age" name="age" min="1" max="100">

  <button type="submit">제출</button>
</form>

요약

<form> 요소는 사용자 입력을 서버로 전송하는 HTML 폼을 생성합니다.
action 속성은 데이터가 전송될 URL을 지정하며, method 속성은 데이터 전송 방식을 정의합니다 (GET 또는 POST).
제출 버튼 (<button type="submit"> 또는 <input type="submit">)을 통해 폼을 전송할 수 있습니다.

폼 요소를 적절히 구성하여 사용자 입력을 쉽게 수집하고 서버로 전송할 수 있습니다.

radio 와 checkbox

<input type="radio">와 <input type="checkbox">는 각각 단일 선택과 다중 선택을 위한 입력 필드입니다. 이들은 <form> 요소 내에 포함되어 사용자의 선택을 서버로 전송할 수 있습니다.

예제: 라디오 버튼과 체크박스가 포함된 폼

다음 예제에서는 radio와 checkbox 입력 필드를 포함한 폼을 보여줍니다. 사용자는 하나의 옵션(라디오 버튼)과 여러 개의 옵션(체크박스)을 선택할 수 있습니다.

<form action="/submit" method="post">
  <!-- 라디오 버튼 그룹 -->
  <fieldset>
    <legend>성별을 선택하세요:</legend>
    <label><input type="radio" name="gender" value="male"> 남성</label>
    <label><input type="radio" name="gender" value="female"> 여성</label>
    <label><input type="radio" name="gender" value="other"> 기타</label>
  </fieldset>

  <!-- 체크박스 그룹 -->
  <fieldset>
    <legend>관심사를 선택하세요 (복수 선택 가능):</legend>
    <label><input type="checkbox" name="interest" value="sports"> 스포츠</label>
    <label><input type="checkbox" name="interest" value="music"> 음악</label>
    <label><input type="checkbox" name="interest" value="movies"> 영화</label>
    <label><input type="checkbox" name="interest" value="books"> 책</label>
  </fieldset>

  <!-- 제출 버튼 -->
  <button type="submit">제출</button>
</form>

설명

라디오 버튼 (type="radio")
- 같은 name 속성을 가진 라디오 버튼은 하나만 선택할 수 있습니다.
- 예를 들어, 위의 gender 필드에서는 사용자가 남성, 여성, 기타 중 하나의 옵션만 선택할 수 있습니다.
체크박스 (type="checkbox")
- 체크박스는 여러 개 선택이 가능하며, 선택한 항목들은 동일한 name 속성으로 서버에 배열 형식으로 전달됩니다.
- 예를 들어, 위의 interest 필드에서는 사용자가 스포츠, 음악, 영화, 책 중 여러 개를 선택할 수 있습니다.

제출 시 데이터 전송 형식

폼이 제출되면 선택된 값들이 name=value 형식으로 서버에 전송됩니다.

라디오 버튼: 선택된 성별이 하나만 전송됩니다.
- 예: gender=male
체크박스: 선택된 관심사들이 배열 형식으로 전송됩니다.
- 예: interest=sports&interest=music

요약

<input type="radio">는 단일 선택이 필요한 옵션에 적합하며, 같은 name을 공유하는 옵션들 중 하나만 선택할 수 있습니다.
<input type="checkbox">는 다중 선택이 필요한 옵션에 적합하며, 여러 개의 항목을 동시에 선택할 수 있습니다.
폼을 통해 라디오 버튼과 체크박스 값을 함께 서버로 전송할 수 있습니다.

6. HTML Semantic Tags

HTML의 시맨틱 태그는 콘텐츠의 의미를 명확히 하기 위해 사용되는 태그로, 각 요소의 용도와 구조를 직관적으로 표현합니다. 시맨틱 태그는 검색 엔진 최적화(SEO), 접근성, 코드의 가독성 및 유지보수성 향상에 기여합니다.

주요 시맨틱 태그

<header>
- 페이지나 섹션의 머리글을 정의합니다.
- 보통 로고, 내비게이션, 검색 창 등이 포함됩니다.
```
<header>
  <h1>사이트 이름</h1>
  <nav>내비게이션</nav>
</header>
```

<nav>

내비게이션 링크를 그룹화하는 데 사용합니다.
사이트나 페이지 내 다른 부분으로의 링크를 제공합니다.

<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#about">소개</a></li>
    <li><a href="#contact">연락처</a></li>
  </ul>
</nav>

<main>
- 문서의 주요 콘텐츠를 나타내며, 페이지에서 한 번만 사용됩니다.
- 헤더, 푸터, 내비게이션 등을 제외한 주요 콘텐츠를 포함합니다.
```
<main>
  <h2>메인 콘텐츠 제목</h2>
  <p>여기에 주요 콘텐츠가 표시됩니다.</p>
</main>
```
<section>
- 관련된 콘텐츠를 그룹화하는 독립적인 섹션을 정의합니다.
- 제목과 함께 사용하여 특정 주제를 나타내는 데 적합합니다.
```
<section>
  <h2>섹션 제목</h2>
  <p>섹션의 내용입니다.</p>
</section>
```
<article>
- 독립적으로 재사용 가능한 콘텐츠를 나타냅니다.
- 블로그 글, 뉴스 기사, 포럼 게시물 등 독립적인 콘텐츠를 위한 태그입니다.
```
<article>
  <h2>기사 제목</h2>
  <p>기사의 내용입니다.</p>
</article>
```
<aside>
- 메인 콘텐츠와는 별도로 관련된 정보나 부가적인 내용을 표시합니다.
- 사이드바, 관련 링크, 인용문 등으로 사용됩니다.
```
<aside>
  <h2>관련 링크</h2>
  <p>이 글과 관련된 추가 정보입니다.</p>
</aside>
```

시맨틱 태그의 장점

SEO 개선: 시맨틱 태그는 검색 엔진이 페이지 구조와 콘텐츠의 중요도를 이해하는 데 도움을 줍니다.
접근성 향상: 스크린 리더와 같은 접근성 도구가 콘텐츠를 올바르게 해석하고, 사용자에게 더 나은 경험을 제공합니다.
코드 가독성 향상: 개발자가 코드의 구조와 역할을 쉽게 파악할 수 있어 유지보수성이 높아집니다.

요약

태그	설명	사용 예
`<header>`	페이지나 섹션의 머리글	로고, 내비게이션
`<nav>`	내비게이션 링크 모음	페이지 간 링크
`<main>`	주요 콘텐츠 영역	메인 콘텐츠
`<section>`	관련된 콘텐츠 그룹화	주제별 섹션
`<article>`	독립적이고 재사용 가능한 콘텐츠	블로그 글, 뉴스 기사
`<aside>`	부가 정보 또는 관련 정보	사이드바, 관련 링크
`<footer>`	페이지나 섹션의 바닥글	저작권, 연락처 정보

HTML 시맨틱 태그를 통해 페이지 구조를 명확하게 표현하고, 콘텐츠의 의미를 더 잘 전달할 수 있습니다.

Sementic 셈플 페이지

다음 예제는 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등 주요 시맨틱 태그가 모두 포함된 간단한 웹 페이지입니다. 이 페이지 구조는 콘텐츠의 의미와 구조를 명확히 표현합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>시맨틱 태그 샘플 페이지</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>
    <!-- 소개 섹션 -->
    <section id="about">
      <h2>소개</h2>
      <p>이 웹사이트는 시맨틱 태그를 사용하여 구성된 샘플 페이지입니다.</p>
    </section>

    <!-- 기사 섹션 -->
    <section id="articles">
      <h2>기사</h2>
      
      <!-- 첫 번째 기사 -->
      <article>
        <h3>첫 번째 기사 제목</h3>
        <p>첫 번째 기사의 내용입니다. 여기에는 중요한 정보가 포함되어 있습니다.</p>
      </article>

      <!-- 두 번째 기사 -->
      <article>
        <h3>두 번째 기사 제목</h3>
        <p>두 번째 기사의 내용입니다. 독립적으로 읽히는 내용입니다.</p>
      </article>
    </section>

    <!-- 사이드바 -->
    <aside>
      <h2>관련 정보</h2>
      <p>여기는 주 콘텐츠와 관련된 추가 정보가 포함된 영역입니다.</p>
    </aside>
  </main>

  <!-- 푸터 -->
  <footer>
    <p>&copy; 2024 웹사이트 이름. 모든 권리 보유.</p>
    <p>문의: contact@example.com</p>
  </footer>

</body>
</html>

설명

<header>: 페이지 상단에 로고와 내비게이션 메뉴를 포함합니다.
<nav>: 내비게이션 링크를 제공하여 페이지 내 다른 섹션으로 이동할 수 있습니다.
<main>: 페이지의 주요 콘텐츠를 포함하며, about 섹션, articles 섹션, aside를 포함하고 있습니다.
<section>: 페이지의 주제별 콘텐츠를 그룹화하여 소개와 기사 섹션으로 나누었습니다.
<article>: 각 기사는 독립적이고 재사용 가능한 콘텐츠로 작성되었습니다.
<aside>: 주 콘텐츠와는 별도로 관련 정보를 제공하는 사이드바입니다.

이 샘플 페이지는 시맨틱 태그를 통해 페이지 구조를 명확히 하여, 검색 엔진 및 접근성 도구가 콘텐츠의 의미를 쉽게 이해할 수 있도록 돕습니다.

7. audio 와 video

audio 요소

HTML의 <audio> 요소는 웹 페이지에 오디오 파일을 삽입하고 재생할 수 있게 합니다. <audio> 요소는 음악, 음성 녹음, 효과음 등 다양한 오디오 콘텐츠를 페이지에 추가하는 데 사용됩니다.

기본 사용법

<audio> 요소는 src 속성에 오디오 파일의 경로를 지정하거나, <source> 요소를 사용하여 여러 파일 형식을 지원할 수 있습니다.

<audio src="audio-file.mp3" controls></audio>

위 예제에서 controls 속성을 사용하여 오디오 플레이어의 기본 컨트롤을 사용자에게 제공합니다.

주요 속성

src
- 재생할 오디오 파일의 경로를 지정합니다. 이 속성을 설정하지 않고 <source> 요소를 사용하여 여러 파일 형식을 추가할 수도 있습니다.
```
<audio src="audio-file.mp3"></audio>
```
controls
- 오디오 플레이어에 재생, 일시 정지, 볼륨 조절 등의 기본 컨트롤을 추가합니다. 이 속성을 추가하지 않으면 컨트롤이 표시되지 않아 JavaScript로 제어해야 합니다.
```
<audio src="audio-file.mp3" controls></audio>
```
autoplay
- 페이지가 로드될 때 오디오가 자동으로 재생되도록 설정합니다. 주의: 대부분의 브라우저에서는 자동 재생 시 음소거가 필요합니다.
```
<audio src="audio-file.mp3" autoplay muted></audio>
```
loop
- 오디오 재생이 끝나면 자동으로 다시 재생합니다.
```
<audio src="audio-file.mp3" controls loop></audio>
```
muted
- 오디오를 자동으로 음소거하여 재생합니다. autoplay와 함께 사용할 때 유용합니다.
```
<audio src="audio-file.mp3" controls autoplay muted></audio>
```
preload
- 오디오 파일의 로딩 방식을 제어합니다. none, metadata, auto 중 하나로 설정할 수 있습니다.
  - none: 오디오를 로드하지 않음.
  - metadata: 오디오의 메타데이터(길이 등)만 로드.
  - auto: 오디오를 자동으로 미리 로드.
```
<audio src="audio-file.mp3" controls preload="metadata"></audio>
```

`<source>` 요소와 여러 파일 형식 지원

오디오 파일 형식(예: MP3, OGG)이 브라우저마다 다르게 지원될 수 있기 때문에 <source> 요소를 사용하여 여러 파일 형식을 지정할 수 있습니다.

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  브라우저가 오디오 요소를 지원하지 않습니다.
</audio>

위 예제에서는 MP3와 OGG 파일 형식을 모두 제공하여 브라우저 호환성을 높였습니다.

예제: 모든 주요 속성을 포함한 `<audio>`

<audio controls autoplay loop muted preload="auto">
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  <p>브라우저가 오디오 요소를 지원하지 않습니다.</p>
</audio>

요약

<audio> 요소는 웹 페이지에 오디오 콘텐츠를 추가하는 데 사용됩니다.
controls 속성을 통해 사용자에게 재생, 일시 정지, 볼륨 조절 기능을 제공합니다.
<source> 요소를 사용하여 여러 파일 형식을 제공하면 브라우저 호환성을 높일 수 있습니다.
autoplay, loop, muted, preload 등의 속성으로 재생 방식을 세부적으로 설정할 수 있습니다.

오디오를 통해 사용자에게 멀티미디어 경험을 제공할 때 <audio> 요소를 활용하여 편리하게 오디오 파일을 포함할 수 있습니다.

video 요소

HTML의 <video> 요소는 웹 페이지에 비디오 파일을 삽입하고 재생할 수 있게 합니다. <video> 요소는 영화, 클립, 애니메이션 등의 비디오 콘텐츠를 페이지에 추가하는 데 사용됩니다.

기본 사용법

<video> 요소는 src 속성에 비디오 파일의 경로를 지정하거나, <source> 요소를 사용하여 여러 파일 형식을 지원할 수 있습니다.

<video src="video-file.mp4" controls></video>

위 예제에서 controls 속성을 사용하여 비디오 플레이어의 기본 컨트롤(재생, 일시 정지, 볼륨 조절 등)을 제공합니다.

주요 속성

src
- 재생할 비디오 파일의 경로를 지정합니다. 이 속성을 설정하지 않고 <source> 요소를 사용하여 여러 파일 형식을 추가할 수도 있습니다.
```
<video src="video-file.mp4"></video>
```
controls
- 비디오 플레이어에 재생, 일시 정지, 볼륨 조절 등의 기본 컨트롤을 추가합니다. 이 속성을 추가하지 않으면 컨트롤이 표시되지 않아 JavaScript로 제어해야 합니다.
```
<video src="video-file.mp4" controls></video>
```
autoplay
- 페이지가 로드될 때 비디오가 자동으로 재생되도록 설정합니다. 주의: 대부분의 브라우저에서는 자동 재생 시 음소거가 필요합니다.
```
<video src="video-file.mp4" autoplay muted></video>
```
loop
- 비디오 재생이 끝나면 자동으로 다시 재생됩니다.
```
<video src="video-file.mp4" controls loop></video>
```
muted
- 비디오를 자동으로 음소거하여 재생합니다. autoplay와 함께 사용할 때 유용합니다.
```
<video src="video-file.mp4" controls autoplay muted></video>
```
preload
- 비디오 파일의 로딩 방식을 제어합니다. none, metadata, auto 중 하나로 설정할 수 있습니다.
  - none: 비디오를 로드하지 않음.
  - metadata: 비디오의 메타데이터(길이 등)만 로드.
  - auto: 비디오를 자동으로 미리 로드.
```
<video src="video-file.mp4" controls preload="metadata"></video>
```
poster
- 비디오가 로드되기 전에 보여줄 이미지의 URL을 지정합니다. 주로 비디오의 대표 이미지로 사용됩니다.
```
<video src="video-file.mp4" controls poster="poster-image.jpg"></video>
```

`<source>` 요소와 여러 파일 형식 지원

비디오 파일 형식(예: MP4, WebM, Ogg)이 브라우저마다 다르게 지원될 수 있기 때문에 <source> 요소를 사용하여 여러 파일 형식을 지정할 수 있습니다.

<video controls>
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.webm" type="video/webm">
  <source src="video-file.ogv" type="video/ogg">
  브라우저가 비디오 요소를 지원하지 않습니다.
</video>

위 예제에서는 MP4, WebM, Ogg 파일 형식을 모두 제공하여 브라우저 호환성을 높였습니다.

예제: 모든 주요 속성을 포함한 `<video>`

<video controls autoplay loop muted preload="auto" poster="poster-image.jpg">
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.webm" type="video/webm">
  <p>브라우저가 비디오 요소를 지원하지 않습니다.</p>
</video>

요약

<video> 요소는 웹 페이지에 비디오 콘텐츠를 추가하는 데 사용됩니다.
controls 속성을 통해 사용자에게 재생, 일시 정지, 볼륨 조절 기능을 제공합니다.
<source> 요소를 사용하여 여러 파일 형식을 제공하면 브라우저 호환성을 높일 수 있습니다.
autoplay, loop, muted, preload, poster 등의 속성으로 재생 방식을 세부적으로 설정할 수 있습니다.

비디오 콘텐츠를 웹 페이지에 추가할 때 <video> 요소를 사용하여 다양한 사용자 경험을 제공할 수 있습니다.

7. iframe

HTML의 <iframe> 요소는 다른 HTML 문서를 현재 페이지 안에 삽입하는 데 사용됩니다. 주로 외부 웹 페이지, 동영상, 지도 등을 포함하여 웹 페이지에 통합할 때 사용됩니다.

기본 사용법

<iframe> 요소의 src 속성에 포함할 문서의 URL을 지정하여 사용합니다.

<iframe src="https://example.com" width="600" height="400"></iframe>

위 예제에서는 가로 600px, 세로 400px 크기의 example.com 웹 페이지가 포함됩니다.

주요 속성

src
- 포함할 문서의 URL을 지정합니다.
```
<iframe src="https://example.com"></iframe>
```
width와 height
- <iframe>의 너비와 높이를 지정합니다. 기본 단위는 픽셀(px)입니다.
```
<iframe src="https://example.com" width="600" height="400"></iframe>
```

name

<iframe>의 이름을 설정하여 다른 링크나 폼의 target 속성에서 참조할 수 있습니다.

<iframe name="myIframe" src="https://example.com"></iframe>
<a href="https://anotherpage.com" target="myIframe">이 페이지를 iFrame에 열기</a>

allowfullscreen
- 전체 화면 모드로 전환할 수 있는 권한을 허용합니다. YouTube 동영상처럼 전체 화면 기능이 필요한 콘텐츠에 유용합니다.
```
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
```
loading
- <iframe>의 로딩 방식을 제어합니다. lazy로 설정하면 필요할 때 로드하여 페이지 로딩 속도를 개선할 수 있습니다.
  - lazy: 사용자가 <iframe> 영역에 접근할 때 로드됩니다.
  - eager: 페이지가 로드될 때 함께 로드됩니다.
```
<iframe src="https://example.com" loading="lazy"></iframe>
```
sandbox
- <iframe> 내부 콘텐츠에 대해 제한된 보안 설정을 적용합니다. 다양한 값을 통해 스크립트 실행, 폼 제출 등을 제한할 수 있습니다.
  - allow-scripts: 스크립트 실행을 허용합니다.
  - allow-same-origin: 동일 출처 정책을 허용합니다.
  - allow-popups: 팝업을 허용합니다.
```
<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>
```

예제: YouTube 동영상 포함하기

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

위 예제에서는 YouTube 동영상이 웹 페이지에 포함됩니다. allowfullscreen 속성을 사용하여 동영상을 전체 화면으로 시청할 수 있도록 설정했습니다.

보안과 SEO 주의 사항

<iframe>의 콘텐츠는 SEO에 직접적인 영향을 미치지 않습니다. 검색 엔진이 <iframe> 내부의 콘텐츠를 인덱싱하지 않을 수 있습니다.
보안상의 이유로, 외부 콘텐츠를 삽입할 때는 sandbox 속성을 사용하여 보안 정책을 설정하는 것이 좋습니다.

요약

<iframe> 요소는 다른 웹 페이지나 외부 콘텐츠를 현재 페이지에 포함하는 데 사용됩니다.
src 속성을 통해 포함할 콘텐츠의 URL을 지정하고, width와 height 속성으로 크기를 조절할 수 있습니다.
sandbox, allowfullscreen, loading 등의 속성으로 보안과 로딩 방식을 제어할 수 있습니다.

<iframe> 요소는 동영상, 지도, 외부 페이지를 웹 페이지에 삽입할 때 유용하게 사용할 수 있습니다.

8. HTML5 canvas

HTML의 <canvas> 요소는 자바스크립트를 사용하여 그래픽을 그리거나 애니메이션을 만들기 위한 2D 그래픽 컨텍스트를 제공합니다. 게임, 데이터 시각화, 애니메이션 등 다양한 그래픽 콘텐츠를 웹에서 동적으로 렌더링할 수 있습니다.

기본 사용법

<canvas> 요소는 너비(width)와 높이(height) 속성을 통해 크기를 설정하며, 그 안에 직접 콘텐츠를 넣을 수는 없습니다. 자바스크립트와 함께 사용하여 도형, 이미지, 텍스트 등을 그릴 수 있습니다.

<canvas id="myCanvas" width="400" height="300">브라우저가 `<canvas>` 요소를 지원하지 않습니다.</canvas>

위 예제에서 <canvas> 요소는 가로 400px, 세로 300px 크기의 캔버스를 생성합니다.

기본 속성

width (기본값: 300)
- 캔버스의 너비를 지정합니다. 픽셀 단위로 설정되며, HTML 속성으로 설정하지 않으면 기본값 300px이 적용됩니다.
height (기본값: 150)
- 캔버스의 높이를 지정합니다. 픽셀 단위로 설정되며, HTML 속성으로 설정하지 않으면 기본값 150px이 적용됩니다.

자바스크립트로 캔버스 접근 및 렌더링

캔버스 요소 가져오기
- 캔버스를 제어하려면 자바스크립트를 사용하여 <canvas> 요소에 접근하고, getContext("2d") 메서드를 통해 2D 렌더링 컨텍스트를 가져옵니다.
```
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
```

기본 도형 그리기

fillRect(x, y, width, height): 사각형을 채워서 그립니다.
strokeRect(x, y, width, height): 사각형의 윤곽선을 그립니다.
clearRect(x, y, width, height): 지정된 영역을 지워 투명하게 만듭니다.

// 빨간색 사각형 그리기
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

// 파란색 윤곽선 사각형 그리기
ctx.strokeStyle = "blue";
ctx.strokeRect(150, 10, 100, 100);

// 부분 삭제
ctx.clearRect(20, 20, 50, 50);

경로와 도형 그리기
- beginPath(), moveTo(x, y), lineTo(x, y): 경로를 시작하고 점을 이동하여 선을 만듭니다.
- stroke(), fill(): 경로를 윤곽선 또는 채우기로 그립니다.
```
 ctx.beginPath();
  ctx.moveTo(10, 150);
  ctx.lineTo(100, 250);
  ctx.lineTo(200, 150);
  ctx.closePath();
  ctx.stroke();
```
텍스트 그리기
- fillText(text, x, y): 지정된 위치에 채워진 텍스트를 표시합니다.
- strokeText(text, x, y): 지정된 위치에 윤곽선 텍스트를 표시합니다.
- font, textAlign, textBaseline 속성을 사용하여 텍스트 스타일을 지정할 수 있습니다.
```
ctx.font = "20px Arial";
 ctx.fillStyle = "green";
 ctx.fillText("Hello Canvas", 50, 50);
```
이미지 그리기
- drawImage(image, x, y): 지정된 위치에 이미지를 표시합니다.
- drawImage(image, x, y, width, height): 이미지의 크기를 조절하여 표시합니다.
```
const img = new Image();
img.src = "image.jpg";
img.onload = function() {
  ctx.drawImage(img, 10, 10, 200, 150);
};
```

애니메이션 만들기

requestAnimationFrame()을 사용하여 애니메이션 루프를 생성할 수 있습니다.

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 50, 50);
  x += 2;
  if (x > canvas.width) x = 0;
  requestAnimationFrame(animate);
}
animate();

캔버스 사용 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Canvas 예제</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300">브라우저가 `<canvas>` 요소를 지원하지 않습니다.</canvas>

  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // 빨간색 사각형 그리기
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 100, 100);

    // 파란색 윤곽선 사각형 그리기
    ctx.strokeStyle = "blue";
    ctx.strokeRect(150, 10, 100, 100);

    // 텍스트 추가
    ctx.font = "20px Arial";
    ctx.fillStyle = "green";
    ctx.fillText("Hello Canvas", 50, 200);
  </script>
</body>
</html>

요약

<canvas> 요소는 자바스크립트로 그래픽을 그리기 위한 공간을 제공합니다.
getContext("2d") 메서드를 통해 캔버스에 접근하여 도형, 텍스트, 이미지 등을 그릴 수 있습니다.
requestAnimationFrame()을 사용하여 애니메이션을 구현할 수 있습니다.

<canvas> 요소는 게임, 데이터 시각화, 애니메이션 등 다양한 그래픽 콘텐츠를 웹 페이지에 동적으로 추가하는 데 매우 유용합니다.

Acorn Academy 구라쌤

이정호

이전 포스트

Visual Studio Code 활용

다음 포스트

HTML tutorial

1. HTML 이란?

2. 요소(element)

3. 블록요소와 인라인요소

블록 요소 (Block Element)

인라인 요소 (Inline Element)

4. HTML 기본 태그

1. div 요소

2. p 요소

3. hn 요소

4. ul 요소

<ul> 요소의 특징

5. ol 요소

6. table 요소

HTML <thead>와 <tbody>

<thead>

<tbody>

7. a 요소 (anchor)

기본 사용법

주요 속성

책갈피 기능

예시

전체 예시 코드

참고

8. span 요소

주요 특징

사용 예시

9. b 요소와 strong 요소

<b> 요소

<strong> 요소

차이점 정리

요약

10. i 요소와 em 요소

<i> 요소

<em> 요소

차이점 정리

요약

11. code 요소

기본 사용법

<code> 요소와 <pre> 요소의 결합

주요 사용 사례

<kbd>, <samp>와의 차이점

예제

요약

12. dl 요소

구성 요소

기본 사용법

<dl> 요소의 사용 사례

예제: FAQ 형식으로 사용

요약

5. 여러가지 form 요소

input 요소

주요 <input> 타입

요약

select 요소

기본 구조

주요 속성

<option> 요소의 주요 속성

예제

요약

textarea 요소

기본 사용법

주요 속성

예제: 여러 속성을 포함한 <textarea>

요약

form 구성하기

기본 구조

주요 속성

제출 버튼

폼 전송 예제

요약

radio 와 checkbox

예제: 라디오 버튼과 체크박스가 포함된 폼

설명

제출 시 데이터 전송 형식

요약

6. HTML Semantic Tags

주요 시맨틱 태그

시맨틱 태그의 장점

요약

`<ul>` 요소의 특징

HTML `<thead>`와 `<tbody>`

`<thead>`

`<tbody>`

9. `b` 요소와 `strong` 요소

`<b>` 요소

`<strong>` 요소

`<i>` 요소

`<em>` 요소

`<code>` 요소와 `<pre>` 요소의 결합

`<kbd>`, `<samp>`와의 차이점

`<dl>` 요소의 사용 사례

주요 `<input>` 타입

`<option>` 요소의 주요 속성

예제: 여러 속성을 포함한 `<textarea>`

`<source>` 요소와 여러 파일 형식 지원

예제: 모든 주요 속성을 포함한 `<audio>`

`<source>` 요소와 여러 파일 형식 지원

예제: 모든 주요 속성을 포함한 `<video>`