HTML 기본 구조 및 태그 배우기 | 웹 개발 입문

소개

이 랩에서는 학생들이 기본적인 HTML 문서 구조를 생성하고 필수적인 HTML 태그를 이해하는 기본적인 기술을 배우게 됩니다. 이 랩은 참가자들이 적절한 DOCTYPE 선언과 함께 HTML 문서를 설정하고, HTML 루트 태그를 추가하고, head 섹션을 구성하고, 다양한 유형의 HTML 태그를 탐색하는 과정을 안내합니다.

참가자들은 HTML5 문서를 생성하는 것으로 시작하여, 문서 유형을 선언하고, 기본 페이지 레이아웃을 구성하며, <html>, <head>, <body>와 같은 주요 요소의 목적을 이해하는 방법을 배우게 됩니다. 랩이 끝나면 학생들은 잘 구성된 HTML 문서를 생성하고 다양한 HTML 태그를 사용하여 웹 페이지 콘텐츠를 구조화하는 방법에 대한 포괄적인 이해를 갖게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 85%입니다.학습자들로부터 99%의 긍정적인 리뷰율을 받았습니다.

DOCTYPE 선언으로 HTML 문서 설정

이 단계에서는 DOCTYPE 선언을 추가하여 HTML 문서의 기본 토대를 설정하는 방법을 배우게 됩니다. DOCTYPE 선언은 웹 브라우저에 문서가 어떤 HTML 버전을 사용하고 있는지 알려주어 적절한 렌더링과 호환성을 보장하므로 매우 중요합니다.

먼저 WebIDE 를 열고 ~/project 디렉토리에 index.html이라는 새 파일을 생성합니다.

HTML5 의 DOCTYPE 선언은 간단하고 직관적입니다. HTML 문서의 맨 첫 번째 줄에 추가합니다.

<!doctype html>

이 선언은 브라우저에 최신 버전의 HTML 인 HTML5 를 사용하고 있음을 알립니다. 대소문자를 구분하지 않지만, 일관성과 가독성을 위해 소문자 버전을 사용하는 것이 좋습니다.

DOCTYPE 선언과 함께 완전한 기본 HTML 문서 구조를 만들어 보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>

참고: WebIDE 에서 HTML 파일을 미리 보는 방법에 대해 자세히 알아보세요.

브라우저에서 예시 출력은 다음과 같이 표시됩니다.

Welcome to HTML!

기억해야 할 주요 사항:

DOCTYPE 선언은 HTML 문서의 첫 번째 줄에 있어야 합니다.
브라우저가 어떤 HTML 버전을 사용하고 있는지 이해하는 데 도움이 됩니다.
최신 웹 개발의 경우 HTML5 에 <!DOCTYPE html>을 사용합니다.
선언은 HTML 태그가 아니라 브라우저에 대한 지침입니다.

HTML 루트 태그 및 기본 구조 추가

이 단계에서는 HTML 문서의 기본 구조에 대해 배우고, HTML 루트 태그와 기본 문서 구조에 중점을 둡니다. <html> 태그는 다른 모든 HTML 요소를 포함하는 컨테이너이며 HTML 페이지의 루트 요소 역할을 합니다.

이전 단계에서 WebIDE 에서 생성한 index.html 파일을 엽니다. 완전한 루트 태그와 필수 구성 요소를 추가하여 이전 HTML 구조를 확장해 보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML Structure</h1>
    <p>This is the basic structure of an HTML document.</p>
  </body>
</html>

주요 구성 요소를 살펴보겠습니다.

<html> 태그: 다른 모든 HTML 콘텐츠를 감싸는 루트 요소
lang="en" 속성: 문서의 언어를 지정합니다 (이 경우 영어)
두 개의 주요 자식 요소:
- <head>: 문서에 대한 메타데이터를 포함합니다.
- <body>: 웹 페이지의 보이는 콘텐츠를 포함합니다.

웹 브라우저에서 예시 출력은 다음과 같습니다.

Welcome to HTML Structure
This is the basic structure of an HTML document.

기억해야 할 주요 사항:

모든 HTML 문서는 <html> 루트 태그를 가져야 합니다.
lang 속성은 접근성 및 검색 엔진 최적화에 도움이 됩니다.
문서는 <head> 및 <body> 섹션으로 나뉩니다.
유효한 HTML 을 위해서는 태그의 적절한 중첩이 중요합니다.

Meta 및 Title 태그로 Head 섹션 구성

이 단계에서는 HTML 문서의 <head> 섹션에 대해 배우고, meta 태그와 title 태그를 사용하여 웹 페이지에 대한 중요한 정보를 제공하는 방법을 배우게 됩니다.

WebIDE 에서 index.html 파일을 열고 다음 예제로 <head> 섹션을 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A simple HTML learning page" />
    <title>My HTML Learning Journey</title>
  </head>
  <body>
    <h1>Welcome to HTML Metadata</h1>
    <p>This page demonstrates head section configuration.</p>
  </body>
</html>

주요 meta 태그와 그 목적을 살펴보겠습니다.

<meta charset="UTF-8">: 문서의 문자 인코딩을 지정합니다.
<meta name="viewport">: 다양한 장치에서 적절한 렌더링을 보장합니다.
<meta name="description">: 검색 엔진에 대한 간략한 페이지 설명을 제공합니다.
<title>: 브라우저 탭에 표시되는 페이지 제목을 설정합니다.

브라우저 탭에서 예시 출력:

My HTML Learning Journey

기억해야 할 주요 사항:

<head> 섹션에는 HTML 문서에 대한 메타데이터가 포함되어 있습니다.
Meta 태그는 브라우저 및 검색 엔진에 추가 정보를 제공합니다.
<title> 태그는 페이지 식별 및 SEO 에 중요합니다.
항상 문자 인코딩 및 viewport meta 태그를 포함합니다.

싱글 및 더블 HTML 태그 이해

이 단계에서는 두 가지 유형의 HTML 태그, 즉 단일 (self-closing) 태그와 이중 태그에 대해 배우게 됩니다. 이러한 태그 간의 차이점을 이해하는 것은 잘 구조화된 HTML 문서를 만드는 데 매우 중요합니다.

WebIDE 에서 index.html 파일을 열고 body 섹션을 다음 예제로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Tags Exploration</title>
  </head>
  <body>
    <!-- Double Tags (Opening and Closing) -->
    <h1>Welcome to HTML Tags</h1>
    <p>This is a paragraph with <strong>bold text</strong>.</p>

    <!-- Single (Self-Closing) Tags -->
    <img src="example.jpg" alt="Example Image" />
    <br />
    <input type="text" placeholder="Enter your name" />
  </body>
</html>

다양한 유형의 태그를 살펴보겠습니다.

이중 태그 (Paired Tags):

여는 태그 <tag>와 닫는 태그 </tag>를 갖습니다.
콘텐츠는 여는 태그와 닫는 태그 사이에 배치됩니다.
예: <h1>, <p>, <strong>, <div>

단일 태그 (Self-Closing Tags):

별도의 닫는 태그가 없습니다.
태그 내에서 자체적으로 닫힙니다.
예: <img>, <br>, <input>

브라우저에서 예시 출력은 다음과 같습니다.

Welcome to HTML Tags
This is a paragraph with bold text.
[An image would be displayed here]
[A text input field would be shown]

기억해야 할 주요 사항:

이중 태그는 콘텐츠를 감싸고 여는 태그와 닫는 태그가 모두 필요합니다.
단일 태그는 자체 포함되어 있으며 콘텐츠를 감싸지 않습니다.
적절한 HTML 구조를 유지하려면 항상 이중 태그를 닫으십시오.
일부 단일 태그는 추가 정보를 제공하기 위해 속성을 가질 수 있습니다.

Body 태그 및 페이지 콘텐츠 배치 탐색

이 단계에서는 <body> 태그와 HTML 문서 내에서 콘텐츠를 구조화하는 방법에 대해 배우게 됩니다. body 태그는 웹 페이지의 모든 보이는 콘텐츠가 배치되는 곳입니다.

WebIDE 에서 index.html 파일을 열고 body 섹션을 다음 예제로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Content Placement Example</title>
  </head>
  <body>
    <!-- Headings -->
    <h1>Welcome to HTML Content Placement</h1>
    <h2>Subheading Level 2</h2>
    <h3>Subheading Level 3</h3>

    <!-- Paragraphs -->
    <p>This is a paragraph explaining the importance of content structure.</p>

    <!-- Lists -->
    <h4>Key HTML Elements:</h4>
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
      <li>Lists</li>
    </ul>

    <!-- Div for grouping content -->
    <div>
      <p>This paragraph is inside a div container.</p>
    </div>

    <!-- Links and Images -->
    <a href="https://example.com">Visit Example Website</a>
    <img src="example.jpg" alt="Example Image" width="300" />
  </body>
</html>

브라우저에서 예시 출력은 다음과 같습니다.

기억해야 할 주요 사항:

<body> 태그는 모든 보이는 페이지 콘텐츠를 포함합니다.
제목 태그 (<h1> ~ <h6>) 를 사용하여 콘텐츠 계층 구조를 만듭니다.
단락, 목록 및 기타 요소는 정보를 구성하는 데 도움이 됩니다.
<div> 태그는 콘텐츠를 그룹화하고 구조화할 수 있습니다.
페이지 상호 작용을 향상시키기 위해 링크와 이미지를 포함합니다.

요약

이 랩에서는 참가자들이 기본적인 HTML 문서 구조를 만드는 기본적인 단계를 배웠습니다. 이 과정은 올바른 브라우저 렌더링과 HTML5 와의 호환성을 보장하는 데 중요한 DOCTYPE 선언을 설정하는 것으로 시작되었습니다. 학습자들은 루트 <html> 태그, <head> 및 <body> 섹션을 포함한 필수 HTML 태그를 탐구하여 문서 구성에서 각 태그의 특정 역할을 이해했습니다.

이 랩은 학생들이 완전한 HTML 문서를 만드는 과정을 안내하여 메타 태그를 추가하고, 문자 인코딩을 설정하고, 페이지 제목을 정의하고, body 태그 내에 콘텐츠를 배치하는 방법을 보여주었습니다. 참가자들은 잘 구조화된 HTML 페이지를 구성하는 실질적인 경험을 얻었으며, 단일 및 이중 HTML 태그, 적절한 태그 중첩, 웹 개발에서 의미론적 마크업의 중요성과 같은 핵심 개념을 배웠습니다.

기본 HTML 구조 및 태그 생성

소개

DOCTYPE 선언으로 HTML 문서 설정

HTML 루트 태그 및 기본 구조 추가

Meta 및 Title 태그로 Head 섹션 구성

싱글 및 더블 HTML 태그 이해

Body 태그 및 페이지 콘텐츠 배치 탐색

요약