웹 개발 기초: HTML 문서 구조와 기본적인 HTML 태그

📚 학습 목표

HTML 문서의 전체 구조 이해
기본적인 HTML 태그 학습
각 태그의 용도 및 사용법 이해

1. HTML 문서의 구조

HTML(HyperText Markup Language)은 웹 페이지의 기본 구성요소로, 웹 페이지의 구조와 콘텐츠를 정의합니다. HTML 문서는 특정한 구조를 가지고 있으며, 이는 웹 브라우저가 내용을 올바르게 표시할 수 있도록 돕습니다.

1.1 기본 HTML 문서 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>헤더 내용</h1>
    </header>
    <main>
        <section>
            <h2>섹션 제목</h2>
            <p>여기에 본문 내용이 들어갑니다.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 웹사이트 이름</p>
    </footer>
</body>
</html>

1.2 주요 구성 요소 설명

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html>: HTML 문서의 루트 요소입니다.
<head>: 메타데이터(문서 제목, 스타일시트 링크 등)를 포함합니다.
<body>: 웹 페이지의 실제 콘텐츠가 들어가는 부분입니다.

2. 기본적인 HTML 태그들

HTML에는 다양한 태그가 있으며, 각 태그는 특정한 역할과 기능을 가지고 있습니다. 아래는 자주 사용되는 기본 HTML 태그들을 정리한 것입니다.

2.1 텍스트 관련 태그

<h1> ~ <h6>: 제목 태그 - 페이지의 구조를 정의하는 데 사용됩니다.
```
  <h1>메인 제목</h1>
  <h2>부제목</h2>
```
<p>: 문단 태그 - 텍스트를 문단으로 구분하기 위해 사용됩니다.
```
  <p>이것은 하나의 문단입니다.</p>
```
<span>: 인라인 태그 - 특정 텍스트 부분에 스타일을 적용할 때 사용됩니다.
```
  <p>이 문장에서 <span style="color: red;">특정 부분</span>을 강조합니다.</p>
```

2.2 구조 관련 태그

<div>: 블록 레벨 요소 - 일반적으로 콘텐츠를 그룹화할 때 사용됩니다.
```
  <div>
      <h3>제목</h3>
      <p>내용</p>
  </div>
```

<header>, <footer>: 문서의 머리말과 바닥글을 정의합니다.

  <header>
      <h1>웹사이트 이름</h1>
  </header>
  <footer>
      <p>연락처 정보</p>
  </footer>

<main>: 주요 콘텐츠 영역을 나타냅니다.

  <main>
      <p>이곳은 주요 콘텐츠가 들어갑니다.</p>
  </main>

2.3 링크 및 미디어 관련 태그

<a>: 하이퍼링크를 생성합니다.

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

<img>: 이미지를 삽입합니다.

  <img src="image.jpg" alt="설명 텍스트">

2.4 리스트 관련 태그

<ul>: 순서 없는 목록, <ol>: 순서 있는 목록입니다.

  <ul>
      <li>항목 1</li>
      <li>항목 2</li>
  </ul>

  <ol>
      <li>첫 번째 항목</li>
      <li>두 번째 항목</li>
  </ol>

3. 각 태그의 용도와 사용법

3.1 태그의 용도

구조 정의: HTML 태그는 웹 페이지의 논리적 구조(헤더, 본문, 푸터 등)를 정의하여 콘텐츠의 가독성을 높입니다.
스타일링: CSS와의 조합을 통해 웹 페이지의 시각적 표현을 조정합니다.
상호작용: JavaScript와 결합하여 사용자와의 상호작용을 가능하게 합니다.

3.2 예제

다음은 HTML 문서의 구조와 기본 태그를 활용한 예제입니다.

<!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>
    </header>
    <main>
        <section>
            <h2>소개</h2>
            <p>안녕하세요! 이 페이지는 HTML의 기초를 배우기 위한 예제입니다.</p>
        </section>
        <section>
            <h2>좋아하는 것들</h2>
            <ul>
                <li>코딩</li>
                <li>음악 감상</li>
                <li>여행</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2023 나의 웹사이트</p>
    </footer>
</body>
</html>

📌 마무리

이 포스트에서는 HTML 문서의 기본 구조와 다양한 태그들에 대해 알아보았습니다. HTML은 웹 페이지의 토대가 되는 언어로, 각 태그의 용도를 잘 이해하고 활용하는 것이 중요합니다.