Dream of E&C - Wiki

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== HTML : 월드와이드웹의 핵심 마크업 언어 ======

HTML (HyperText Markup Language)은 월드 와이드 웹(World Wide Web)의 핵심 마크업 언어로, 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용됩니다. 이 문서는 HTML의 기본 개념부터 고급 기능까지, 웹 개발의 필수 요소인 HTML에 대해 종합적으로 설명합니다. HTML은 웹 브라우저가 콘텐츠를 올바르게 해석하고 표시할 수 있도록 표준화된 방법을 제공하며, CSS(스타일) 및 JavaScript(상호작용)와 함께 웹의 3대 핵심 기술 중 하나입니다.

===== 1. HTML이란 무엇인가? =====

HTML은 웹 페이지의 뼈대를 구성하는 언어입니다. ''HyperText''는 문서 간의 연결(링크)을 의미하며, ''Markup Language''는 텍스트를 태그를 사용하여 구조화하고 의미를 부여하는 언어를 뜻합니다. HTML은 프로그래밍 언어가 아니며, 웹 브라우저가 텍스트, 이미지, 비디오, 링크 등 다양한 웹 콘텐츠를 어떻게 배치하고 보여줄지 지시하는 역할을 합니다.

----
==== 1) HTML의 목적 ====

HTML의 주된 목적은 웹 문서의 구조를 정의하고, 브라우저가 해당 구조에 따라 콘텐츠를 렌더링하도록 지시하는 것입니다. 예를 들어, 어떤 텍스트가 제목인지, 어떤 것이 단락인지, 이미지가 어디에 위치해야 하는지 등을 HTML 태그를 통해 명시합니다.

----
==== 2) HTML의 기능 ====

HTML은 다음과 같은 주요 기능을 제공합니다:
  *   **콘텐츠 구조화**: 제목, 단락, 목록, 테이블 등 웹 페이지의 내용을 논리적으로 구성합니다.
  *   **미디어 포함**: 이미지, 오디오, 비디오와 같은 멀티미디어 요소를 웹 페이지에 삽입합니다.
  *   **하이퍼링크 생성**: 다른 웹 페이지나 문서 내 특정 위치로 이동할 수 있는 링크를 만듭니다.
  *   **폼 요소 제공**: 사용자로부터 입력을 받을 수 있는 텍스트 필드, 버튼, 체크박스 등 폼 요소를 생성합니다.

===== 2. HTML의 핵심 개념 =====

HTML 문서는 여러 핵심 구성 요소로 이루어져 있으며, 이를 이해하는 것이 중요합니다.

----
==== 1) 요소(Elements) ====

HTML 요소는 웹 페이지의 구성 요소를 나타냅니다. 대부분의 HTML 요소는 시작 태그, 내용, 그리고 종료 태그로 구성됩니다.
  *   **시작 태그**: 요소의 시작을 알립니다. 예: ''<p>''
  *   **내용**: 요소가 포함하는 실제 텍스트나 다른 요소들입니다. 예: ''이것은 단락입니다.''
  *   **종료 태그**: 요소의 끝을 알립니다. 시작 태그와 비슷하지만 앞에 슬래시(''/'')가 붙습니다. 예: ''</p>''

예시:
<file>
<p>이것은 단락 요소입니다.</p>
</file>

----
==== 2) 태그(Tags) ====

태그는 꺾쇠괄호(''%%<''>%%'') 안에 요소 이름을 넣어 표현합니다. 태그는 크게 두 가지 종류가 있습니다:
  *   **쌍을 이루는 태그 (Paired Tags)**: 시작 태그와 종료 태그가 모두 존재합니다. 예: ''<p></p>'', ''<a></a>''
  *   **단일 태그 (Self-closing Tags)**: 내용이 없거나 종료 태그가 필요 없는 태그입니다. 예: ''<img />'', ''<br />'', ''<hr />''

----
==== 3) 속성(Attributes) ====

속성은 HTML 요소에 추가 정보를 제공합니다. 속성은 항상 시작 태그 안에 ''이름="값"'' 형식으로 정의됩니다.
  *   ''href'': 앵커(링크) 태그(''<a>'')에서 링크의 목적지 URL을 지정합니다.
  *   ''src'': 이미지 태그(''<img>'')에서 이미지 파일의 경로를 지정합니다.
  *   ''alt'': 이미지 태그(''<img>'')에서 이미지를 표시할 수 없을 때 대체 텍스트를 제공하여 접근성을 높입니다.
  *   ''class'' / ''id'': 요소를 식별하거나 CSS 스타일을 적용하는 데 사용됩니다.

예시:
<file>
<a href="https://www.dokuwiki.org">DokuWiki 공식 웹사이트</a>
<img src="image.jpg" alt="예시 이미지" />
</file>

===== 3. HTML 문서의 기본 구조 =====

모든 HTML 문서는 웹 브라우저가 올바르게 해석할 수 있도록 특정 구조를 따릅니다.

----
==== 1) DOCTYPE 선언 ====

HTML 문서의 가장 첫 줄에는 항상 ''<!DOCTYPE html>'' 선언이 있어야 합니다. 이는 브라우저에게 문서가 HTML5 표준을 따르는 HTML 문서임을 알려주는 역할을 합니다.

----
==== 2) HTML 루트 요소 ====

''<html>'' 태그는 HTML 문서의 모든 내용을 포함하는 최상위(루트) 요소입니다. ''lang'' 속성을 사용하여 문서의 기본 언어를 지정하는 것이 권장됩니다 (예: ''<html lang="ko">'').

----
==== 3) HEAD 섹션 ====

''<head>'' 태그는 웹 페이지에 대한 메타데이터(데이터에 대한 데이터)를 포함합니다. 이 섹션의 내용은 웹 브라우저에 직접 표시되지 않지만, 문서의 설정, 제목, 스타일 시트 링크, 스크립트 등을 정의합니다.
  *   ''<title>'': 브라우저 탭이나 창에 표시될 문서의 제목을 정의합니다.
  *   ''<meta>'': 문서의 메타데이터를 정의합니다 (예: 문자 인코딩, 뷰포트 설정, 검색 엔진 키워드).
  *   ''<link>'': 외부 스타일 시트(CSS) 파일을 연결합니다.
  *   ''<script>'': JavaScript 코드를 포함하거나 외부 JavaScript 파일을 연결합니다.

----
==== 4) BODY 섹션 ====

''<body>'' 태그는 웹 페이지에 실제로 표시될 모든 콘텐츠를 포함합니다. 제목, 단락, 이미지, 링크, 목록, 테이블 등 사용자가 볼 수 있는 모든 요소는 이 ''<body>'' 태그 안에 위치해야 합니다.

예시:
<file>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 DokuWiki HTML 문서</title>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>이것은 DokuWiki에서 작성된 HTML 문서의 예시입니다.</p>
</body>
</html>
</file>

===== 4. 자주 사용되는 HTML 태그 =====

HTML은 웹 콘텐츠를 구조화하기 위한 다양한 태그를 제공합니다. 다음은 가장 일반적으로 사용되는 몇 가지 태그입니다.

----
==== 1) 텍스트 관련 태그 ====

  *   **제목 태그**: ''<h1>''부터 ''<h6>''까지 있으며, ''<h1>''이 가장 중요하고 ''<h6>''이 가장 덜 중요합니다.
      <file>
      <h1>가장 큰 제목</h1>
      <h3>중간 크기 제목</h3>
      <h6>가장 작은 제목</h6>
      </file>
  *   **단락 태그**: ''<p>'' 태그는 텍스트 단락을 정의합니다.
      <file>
      <p>이것은 일반적인 텍스트 단락입니다.</p>
      </file>
  *   **텍스트 서식 태그**:
      *   ''<strong>'': 중요한 텍스트를 나타내며, 일반적으로 **굵게** 표시됩니다.
      *   ''<em>'': 강조된 텍스트를 나타내며, 일반적으로 //기울임꼴//로 표시됩니다.
      *   ''<br />'': 강제 줄 바꿈을 삽입합니다.
      *   ''<hr />'': 주제별 구분을 나타내는 수평선을 그립니다.

----
==== 2) 링크와 이미지 ====

  *   **링크 태그**: ''<a>'' (''anchor'') 태그는 다른 웹 페이지나 문서 내 섹션으로 이동하는 하이퍼링크를 만듭니다. ''href'' 속성으로 목적지를 지정합니다.
      <file>
      <a href="https://www.google.com">Google로 이동</a>
      <a href="#section2">문서 내 섹션 2로 이동</a>
      </file>
  *   **이미지 태그**: ''<img>'' 태그는 웹 페이지에 이미지를 삽입합니다. ''src'' 속성으로 이미지 파일의 경로를 지정하고, ''alt'' 속성으로 대체 텍스트를 제공합니다.
      <file>
      <img src="path/to/my_image.jpg" alt="아름다운 풍경 사진" />
      </file>

----
==== 3) 목록 ====

  *   **순서 없는 목록 (Unordered List)**: ''<ul>'' 태그로 정의하며, 각 항목은 ''<li>'' (list item) 태그로 표시됩니다. 일반적으로 글머리 기호로 표시됩니다.
      <file>
      <ul>
          <li>항목 1</li>
          <li>항목 2</li>
          <li>항목 3</li>
      </ul>
      </file>
  *   **순서 있는 목록 (Ordered List)**: ''<ol>'' 태그로 정의하며, 각 항목은 ''<li>'' 태그로 표시됩니다. 일반적으로 숫자나 알파벳으로 순서가 매겨집니다.
      <file>
      <ol>
          <li>첫 번째 항목</li>
          <li>두 번째 항목</li>
          <li>세 번째 항목</li>
      </ol>
      </file>

----
==== 4) 테이블 ====

''<table>'' 태그는 행과 열로 데이터를 정리하여 표시합니다.
  *   ''<thead>'': 테이블의 헤더 부분을 정의합니다.
  *   ''<tbody>'': 테이블의 본문 내용을 정의합니다.
  *   ''<tr>'': 테이블 행(table row)을 정의합니다.
  *   ''<th>'': 테이블 헤더 셀(table header)을 정의합니다.
  *   ''<td>'': 테이블 데이터 셀(table data)을 정의합니다.

예시:
<file>
<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>김철수</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
        <tr>
            <td>이영희</td>
            <td>25</td>
            <td>디자이너</td>
        </tr>
    </tbody>
</table>
</file>

위 HTML 코드는 DokuWiki에서 다음과 같이 렌더링될 수 있습니다:

^ 이름 ^ 나이 ^ 직업 ^
| 김철수 | 30 | 개발자 |
| 이영희 | 25 | 디자이너 |

----
==== 5) 폼 ====

''<form>'' 태그는 사용자 입력을 위한 폼을 생성하는 데 사용됩니다.
  *   ''<input>'': 다양한 유형의 입력 필드(텍스트, 비밀번호, 버튼, 체크박스 등)를 만듭니다. ''type'' 속성으로 종류를 지정합니다.
  *   ''<textarea>'': 여러 줄의 텍스트 입력을 위한 영역을 만듭니다.
  *   ''<button>'': 클릭 가능한 버튼을 만듭니다.
  *   ''<label>'': 폼 컨트롤에 대한 설명을 제공합니다.

예시:
<file>
<form action="/submit-form" method="post">
    <label for="username">사용자 이름:</label><br>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">비밀번호:</label><br>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="제출">
</form>
</file>

===== 5. HTML과 CSS, JavaScript의 관계 =====

현대 웹 개발에서 HTML은 단독으로 사용되지 않고, CSS와 JavaScript와 긴밀하게 협력하여 기능적인 웹 페이지를 만듭니다.

  *   **HTML (구조)**: 웹 페이지의 내용과 논리적인 구조를 정의합니다. "무엇이 있는가?"를 담당합니다.
  *   **CSS (스타일)**: HTML 요소의 시각적인 표현(색상, 글꼴, 레이아웃 등)을 담당합니다. "어떻게 보이는가?"를 담당합니다.
  *   **JavaScript (동작)**: 웹 페이지에 동적인 기능과 상호작용을 추가합니다. "무엇을 하는가?"를 담당합니다.

세 가지 기술은 웹을 구성하는 핵심 기둥이며, 각각의 역할을 명확히 구분하여 웹 페이지를 개발하는 것이 효율적입니다.

===== 6. HTML의 장점 =====

HTML은 웹 개발에서 보편적으로 사용되는 만큼 여러 가지 강력한 장점을 가지고 있습니다.

----
==== 1) 보편성 및 표준화 ====

HTML은 전 세계적으로 웹 문서의 표준으로 인정받고 있으며, 모든 웹 브라우저가 HTML을 이해하고 렌더링할 수 있습니다. 이는 웹 콘텐츠가 어떤 기기나 브라우저에서든 일관되게 표시될 수 있도록 보장합니다.

----
==== 2) 검색 엔진 최적화 (SEO) ====

HTML은 검색 엔진이 웹 페이지의 내용을 이해하고 색인화하는 데 중요한 역할을 합니다. 의미론적인 HTML 태그(예: ''<header>'', ''<article>'', ''<footer>'')를 사용하면 검색 엔진이 콘텐츠의 중요성을 더 잘 파악하여 검색 순위를 높이는 데 도움이 됩니다.

----
==== 3) 접근성 (Accessibility) ====

올바르게 구조화된 HTML은 스크린 리더와 같은 보조 기술이 웹 페이지의 내용을 해석하고 시각 장애인이나 다른 장애를 가진 사용자에게 정보를 전달하는 데 필수적입니다. ''alt'' 속성, ''label'' 태그 등은 웹 접근성을 향상시키는 데 기여합니다.

===== 7. HTML의 발전 (HTML5) =====

HTML은 지속적으로 발전해 왔으며, 2014년에 공식적으로 권고된 HTML5는 웹 개발에 혁신적인 변화를 가져왔습니다.

----
==== 1) 새로운 의미론적 태그 ====

HTML5는 웹 페이지의 구조를 더 명확하게 정의할 수 있는 새로운 의미론적 태그를 도입했습니다.
  *   ''<header>'': 문서나 섹션의 머리글을 정의합니다.
  *   ''<nav>'': 탐색 링크를 포함하는 섹션을 정의합니다.
  *   ''<article>'': 독립적이고 자체 포함된 콘텐츠를 정의합니다.
  *   ''<section>'': 문서의 독립적인 섹션을 정의합니다.
  *   ''<aside>'': 문서의 주 콘텐츠와 간접적으로 관련된 콘텐츠를 정의합니다.
  *   ''<footer>'': 문서나 섹션의 바닥글을 정의합니다.

----
==== 2) 멀티미디어 지원 강화 ====

이전에는 플러그인(예: Flash)이 필요했던 멀티미디어 콘텐츠를 HTML5는 네이티브로 지원합니다.
  *   ''<audio>'': 오디오 콘텐츠를 삽입합니다.
  *   ''<video>'': 비디오 콘텐츠를 삽입합니다.

----
==== 3) 새로운 API 및 기능 ====

HTML5는 웹 애플리케이션 개발을 위한 다양한 새로운 API(Application Programming Interface)를 제공합니다.
  *   **Canvas API**: JavaScript를 사용하여 2D 그래픽을 그릴 수 있습니다.
  *   **Geolocation API**: 사용자의 지리적 위치 정보를 얻을 수 있습니다.
  *   **Web Storage API**: 브라우저에 데이터를 로컬로 저장할 수 있습니다 (로컬 스토리지, 세션 스토리지).
  *   **Drag and Drop API**: HTML 요소를 드래그 앤 드롭할 수 있는 기능을 제공합니다.

=== 결론 ===

HTML은 웹의 근간을 이루는 마크업 언어로, 웹 페이지의 구조와 콘텐츠를 정의하는 데 필수적인 역할을 합니다. 간단한 텍스트부터 복잡한 웹 애플리케이션에 이르기까지, 모든 웹 콘텐츠는 HTML을 기반으로 구축됩니다. CSS와 JavaScript와 함께 HTML은 현대 웹의 상호작용적이고 시각적으로 풍부한 경험을 가능하게 하는 핵심 기술입니다. 지속적인 발전(HTML5 및 이후 버전들)을 통해 HTML은 더욱 강력하고 유연한 웹 개발 환경을 제공하며, 앞으로도 웹의 미래를 이끌어 나갈 것입니다.