실습 코드: HTML 기본 웹페이지 구조와 시맨틱 요소 상세 가이드

GoGoComputer·2024년 11월 6일

HTML CSS study

목록 보기

19/20

실습 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>The Basic Language of the Web: HTML</title>
  </head>

  <body>
    <!--
    <h1>The Basic Language of the Web: HTML</h1>
    <h2>The Basic Language of the Web: HTML</h2>
    <h3>The Basic Language of the Web: HTML</h3>
    <h4>The Basic Language of the Web: HTML</h4>
    <h5>The Basic Language of the Web: HTML</h5>
    <h6>The Basic Language of the Web: HTML</h6>
    -->

    <header>
      <h1>📘 The Code Magazine</h1>

      <nav>
        <a href="blog.html">Blog</a>
        <a href="#">Challenges</a>
        <a href="#">Flexbox</a>
        <a href="#">CSS Grid</a>
      </nav>
    </header>

    <article>
      <header>
        <h2>The Basic Language of the Web: HTML</h2>

        <img
          src="img/laura-jones.jpg"
          alt="Headshot of Laura Jones"
          height="50"
          width="50"
        />

        <p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>

        <img
          src="img/post-img.jpg"
          alt="HTML code on a screen"
          width="500"
          height="200"
        />
      </header>

      <p>
        All modern websites and web applications are built using three
        <em>fundamental</em>
        technologies: HTML, CSS and JavaScript. These are the languages of the
        web.
      </p>

      <p>
        In this post, let's focus on HTML. We will learn what HTML is all about,
        and why you too should learn it.
      </p>

      <h3>What is HTML?</h3>
      <p>
        HTML stands for <strong>H</strong>yper<strong>T</strong>ext
        <strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
        language that web developers use to structure and describe the content
        of a webpage (not a programming language).
      </p>
      <p>
        HTML consists of elements that describe different types of content:
        paragraphs, links, headings, images, video, etc. Web browsers understand
        HTML and render HTML code as websites.
      </p>
      <p>In HTML, each element is made up of 3 parts:</p>

      <ol>
        <li>The opening tag</li>
        <li>The closing tag</li>
        <li>The actual element</li>
      </ol>

      <p>
        You can learn more at
        <a
          href="https://developer.mozilla.org/en-US/docs/Web/HTML"
          target="_blank"
          >MDN Web Docs</a
        >.
      </p>

      <h3>Why should you learn HTML?</h3>

      <p>
        There are countless reasons for learning the fundamental language of the
        web. Here are 5 of them:
      </p>

      <ul>
        <li>To be able to use the fundamental web dev language</li>
        <li>
          To hand-craft beautiful websites instead of relying on tools like
          Worpress or Wix
        </li>
        <li>To build web applications</li>
        <li>To impress friends</li>
        <li>To have fun 😃</li>
      </ul>

      <p>Hopefully you learned something new here. See you next time!</p>
    </article>

    <aside>
      <h4>Related posts</h4>

      <ul>
        <li>
          <img
            src="img/related-1.jpg"
            alt="Person programming"
            width="75"
            width="75"
          />
          <a href="#">How to Learn Web Development</a>
          <p>By Jonas Schmedtmann</p>
        </li>
        <li>
          <img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
          <a href="#">The Unknown Powers of CSS</a>
          <p>By Jim Dillon</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="JavaScript code on a screen"
            width="75"
            height="75"
          />
          <a href="#">Why JavaScript is Awesome</a>
          <p>By Matilda</p>
        </li>
      </ul>
    </aside>

    <footer>Copyright &copy; 2027 by The Code Magazine.</footer>
  </body>
</html>

이 HTML 코드를 쉽고 자세하게 설명해드리겠습니다. 이 코드는 웹페이지의 기본 구조를 나타내며, 다양한 HTML 요소를 사용하여 잡지 스타일의 기사와 관련 게시물을 포함하고 있습니다. 단계별로 자세히 살펴보겠습니다.

1. 문서 타입 선언

<!DOCTYPE html>

목적: 문서에서 사용된 HTML 버전을 브라우저에 알려줍니다.
설명: <!DOCTYPE html> 선언은 브라우저에게 이 문서가 HTML5 문서임을 알리며, 올바른 렌더링을 보장합니다.

2. 루트 요소 `<html>`

<html lang="en">

목적: 웹페이지의 모든 콘텐츠를 포함합니다.
속성:
- lang="en": 문서의 언어를 영어로 설정하여 접근성과 SEO를 향상시킵니다.

3. 문서 헤드 `<head>`

<head>
  <meta charset="UTF-8" />
  <title>The Basic Language of the Web: HTML</title>
</head>

<meta charset="UTF-8" />:
- 목적: 문서의 문자 인코딩을 정의합니다.
- 설명: UTF-8은 모든 문자와 기호를 지원하여 텍스트가 올바르게 표시되도록 합니다.
<title>:
- 목적: 웹페이지의 제목을 설정합니다.
- 설명: 브라우저 탭에 나타나며 검색 엔진에서 사용됩니다.

4. 문서 본문 `<body>`

<body>
  <!--
  <h1>The Basic Language of the Web: HTML</h1>
  <h2>The Basic Language of the Web: HTML</h2>
  <h3>The Basic Language of the Web: HTML</h3>
  <h4>The Basic Language of the Web: HTML</h4>
  <h5>The Basic Language of the Web: HTML</h5>
  <h6>The Basic Language of the Web: HTML</h6>
  -->
  ...
</body>

주석:
- 문법: 
- 설명: 주석 처리된 헤딩들은 <h1>에서 <h6>까지의 다양한 크기의 헤딩을 보여줍니다. 현재는 비활성화되어 페이지에 표시되지 않습니다.

<header>
  <h1>📘 The Code Magazine</h1>

  <nav>
    <a href="blog.html">Blog</a>
    <a href="#">Challenges</a>
    <a href="#">Flexbox</a>
    <a href="#">CSS Grid</a>
  </nav>
</header>

<h1>:
- 내용: "📘 The Code Magazine"
- 설명: 웹페이지의 주요 제목이며, 책 이모지를 포함하여 시각적인 매력을 더합니다.
네비게이션 <nav>:
- 목적: 사이트의 네비게이션 링크를 포함합니다.
- <a href="...">:
  - href="blog.html": "Blog" 페이지로 연결됩니다.
  - href="#": 현재는 아무 곳으로도 연결되지 않는 자리 표시자 링크입니다.

6. 주요 기사 `<article>`

<article>
  <header>
    <h2>The Basic Language of the Web: HTML</h2>
    ...
  </header>
  ...
</article>

목적: 블로그 게시물과 같은 독립적인 구성을 나타냅니다.
서브헤더 <h2>: 기사의 제목을 소개합니다.

기사 헤더 내용

<img
  src="img/laura-jones.jpg"
  alt="Headshot of Laura Jones"
  height="50"
  width="50"
/>

<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>

<img
  src="img/post-img.jpg"
  alt="HTML code on a screen"
  width="500"
  height="200"
/>

작성자 이미지 <img>:
- src: 이미지 파일의 경로입니다.
- alt: 이미지 로드 실패 시 표시되는 대체 텍스트입니다.
- 크기: height와 width로 이미지 크기를 지정합니다.
작성자 정보 <p>:
- 내용: "Posted by Laura Jones on Monday, June 21st 2027"
- <strong>: 작성자 이름을 강조합니다.
기사 이미지 <img>:
- 표시: 기사 내용과 관련된 이미지를 표시합니다.

기사 본문 내용

<p>
  All modern websites and web applications are built using three
  <em>fundamental</em>
  technologies: HTML, CSS and JavaScript. These are the languages of the
  web.
</p>

단락 <p>:
- 내용: 기본적인 웹 기술에 대한 소개입니다.
- 강조 <em>: "fundamental" 단어를 강조합니다.

소제목과 내용

<h3>What is HTML?</h3>

소제목 <h3>: HTML에 대한 새로운 섹션을 소개합니다.

<p>
  HTML stands for <strong>H</strong>yper<strong>T</strong>ext
  <strong>M</strong>arkup <strong>L</strong>anguage...
</p>

설명:
- <strong>: "HTML" 약어의 각 글자를 강조하여 표시합니다.
- 내용: HTML의 정의와 설명을 제공합니다.

순서가 있는 목록 `<ol>`

<p>In HTML, each element is made up of 3 parts:</p>

<ol>
  <li>The opening tag</li>
  <li>The closing tag</li>
  <li>The actual element</li>
</ol>

목적: HTML 요소의 구성 요소를 나열합니다.
<ol>: 순서가 있는(번호 매겨진) 목록을 생성합니다.
<li>: 각 목록 항목을 나타냅니다.

외부 링크

<p>
  You can learn more at
  <a
    href="https://developer.mozilla.org/en-US/docs/Web/HTML"
    target="_blank"
    >MDN Web Docs</a
  >.
</p>

하이퍼링크 <a>:
- href: MDN Web Docs의 HTML 페이지 URL입니다.
- target="_blank": 링크를 새 브라우저 탭에서 열도록 합니다.
- 내용: 클릭 가능한 텍스트 "MDN Web Docs".

순서가 없는 목록 `<ul>`

<h3>Why should you learn HTML?</h3>

<p>
  There are countless reasons for learning the fundamental language of the
  web. Here are 5 of them:
</p>

<ul>
  <li>To be able to use the fundamental web dev language</li>
  <li>
    To hand-craft beautiful websites instead of relying on tools like
    Worpress or Wix
  </li>
  <li>To build web applications</li>
  <li>To impress friends</li>
  <li>To have fun 😃</li>
</ul>

소제목 <h3>: HTML을 배워야 하는 이유를 소개합니다.
순서가 없는 목록 <ul>:
- 목적: 특정 순서 없이 항목을 나열합니다.
- 목록 항목 <li>: 각 항목은 하나의 이유를 나타냅니다.
- 이모지: 마지막 항목에 재미 요소를 추가합니다.

7. 관련 게시물 `<aside>`

<aside>
  <h4>Related posts</h4>
  ...
</aside>

목적: 주요 기사와 관련이 있지만 별도의 콘텐츠를 포함합니다.
소제목 <h4>: "Related posts" 섹션의 제목입니다.

추가 사항

시맨틱 HTML: <header>, <nav>, <article>, <aside>, <footer>와 같은 태그의 사용은 콘텐츠의 의미와 구조를 향상시킵니다.
접근성:
- alt 속성: 이미지를 위한 대체 텍스트를 제공하여 스크린 리더를 사용하는 사용자에게 도움을 줍니다.
- lang 속성: 보조 기술이 콘텐츠의 언어를 이해하도록 돕습니다.
최선의 실천:
- 올바른 중첩: 모든 태그가 정확하게 열리고 닫히도록 합니다.
- 오타 수정: 관련 게시물 섹션에서 이미지 태그 중 하나에 오타가 있습니다: heigth="75"는 height="75"로 수정해야 합니다.

웹페이지 구조 요약

헤더:
- 사이트 제목과 네비게이션 메뉴.
주요 콘텐츠:
- HTML에 대한 기사로 이미지, 소제목, 목록이 포함됩니다.
사이드바:
- 관련 게시물과 이미지, 링크를 포함합니다.

흐름 이해하기

소개: 웹페이지는 사이트 제목과 다른 부분으로의 쉬운 접근을 위한 네비게이션 메뉴를 포함한 헤더로 시작합니다.
주요 기사:
- 제목과 작성자: 기사의 제목과 작성자 정보를 제공합니다.
- 내용: HTML이 무엇인지, 왜 중요한지, 배우는 이유 등을 다룹니다.
- 이미지: 콘텐츠를 강화하는 시각적 요소입니다.
- 링크: 추가 학습을 위한 외부 리소스를 제공합니다.
관련 게시물:
- 독자가 관심을 가질 만한 추가 기사를 제공합니다.
- 구조: 각 관련 게시물은 이미지, 제목, 작성자를 포함합니다.

이 코드의 활용 방법

교육 목적: HTML 구조와 요소를 배우는 초보자에게 훌륭한 예시입니다.
템플릿: 블로그 게시물이나 기사를 작성할 때 기본 템플릿으로 사용할 수 있습니다.
연습: 내용을 수정하고, 오타를 수정하며, 스타일링을 실험해볼 수 있습니다.

잠재적인 개선 사항

CSS를 사용한 스타일링:
- 스타일을 추가하여 시각적 외관을 개선합니다.
- 다양한 화면 크기에 맞게 레이아웃을 반응형으로 만듭니다.
인터랙티브 요소:
- JavaScript를 구현하여 드롭다운 메뉴나 이미지 슬라이더와 같은 인터랙티브 기능을 추가합니다.
동적 콘텐츠:
- 백엔드와 통합하여 최근 기사나 댓글과 같은 동적 콘텐츠를 표시합니다.

결론

이 HTML 코드는 기본적인 HTML 요소를 사용한 잘 구조화된 웹페이지의 예시입니다. 다음을 보여줍니다:

시맨틱 마크업: 다양한 콘텐츠 유형에 적합한 태그 사용.
접근성 실천: 모든 사용자를 돕는 속성 포함.
조직된 콘텐츠: 가독성을 위한 명확한 섹션 구분.

이 코드의 각 부분을 이해함으로써 웹페이지가 어떻게 구축되는지, 그리고 자신만의 페이지를 만드는 방법에 대한 통찰력을 얻을 수 있습니다.

궁금하신 점이나 추가로 설명이 필요한 부분이 있으시면 언제든지 말씀해주세요!

GoGoComputer

IT를 좋아합니다.

이전 포스트

HTML 특수 기호와 엔터티 사용 가이드

다음 포스트

실습 코드: HTML 기본 웹페이지 구조와 시맨틱 요소 상세 가이드

HTML CSS study

실습 코드

1. 문서 타입 선언

2. 루트 요소 `<html>`

3. 문서 헤드 `<head>`

4. 문서 본문 `<body>`

5. 헤더 섹션 `<header>`

6. 주요 기사 `<article>`

기사 헤더 내용

기사 본문 내용

소제목과 내용

순서가 있는 목록 `<ol>`

외부 링크

순서가 없는 목록 `<ul>`

7. 관련 게시물 `<aside>`

관련 게시물 내용

8. 푸터 `<footer>`

추가 사항

웹페이지 구조 요약

흐름 이해하기

이 코드의 활용 방법

잠재적인 개선 사항

결론

HTML 특수 기호와 엔터티 사용 가이드

CSS 기초부터 심화까지: 웹 페이지 스타일링 완벽 마스터

0개의 댓글

실습 코드: HTML 기본 웹페이지 구조와 시맨틱 요소 상세 가이드

HTML CSS study

실습 코드

1. 문서 타입 선언

2. 루트 요소 <html>

3. 문서 헤드 <head>

4. 문서 본문 <body>

5. 헤더 섹션 <header>

6. 주요 기사 <article>

기사 헤더 내용

기사 본문 내용

소제목과 내용

순서가 있는 목록 <ol>

외부 링크

순서가 없는 목록 <ul>

7. 관련 게시물 <aside>

관련 게시물 내용

8. 푸터 <footer>

추가 사항

웹페이지 구조 요약

흐름 이해하기

이 코드의 활용 방법

잠재적인 개선 사항

결론

HTML 특수 기호와 엔터티 사용 가이드

CSS 기초부터 심화까지: 웹 페이지 스타일링 완벽 마스터

0개의 댓글

2. 루트 요소 `<html>`

3. 문서 헤드 `<head>`

4. 문서 본문 `<body>`

5. 헤더 섹션 `<header>`

6. 주요 기사 `<article>`

순서가 있는 목록 `<ol>`

순서가 없는 목록 `<ul>`

7. 관련 게시물 `<aside>`

8. 푸터 `<footer>`