본문 바로가기
작업/웹 개발

제 1장 - HTML 기본 구조 완전 정복 : 왕초보도 쉽게 이해하는 첫 걸음

by 자이언트 박 2025. 4. 28.

웹 개발의 첫걸음은 ‘HTML 문서의 뼈대’부터 배우는 것입니다. 아무리 멋진 디자인이나 화려한 스크립트를 추가해도, 기본 구조가 잘못돼 있으면 페이지가 제대로 표시되지 않거나 검색엔진에 노출되지 않습니다. 이 장에서는 왕초보도 한눈에 이해할 수 있도록 HTML5 표준 문서의 필수 요소들을 차근차근 살펴보고, 간단한 예제 코드를 통해 직접 구조를 만들어 보겠습니다.

1. <!DOCTYPE html> 선언

HTML5 문서 최상단에 반드시 추가해야 하는 선언문입니다. 브라우저에게 “이 페이지는 HTML5 표준을 따릅니다”라고 알려 주어, 최신 렌더링 모드로 문서를 표시하도록 합니다. 만약 이 선언이 빠지면 브라우저는 호환 모드(Quirks Mode)로 동작해 레이아웃이 깨지거나 의도치 않은 동작이 발생할 수 있습니다.

<!DOCTYPE html>

2. <html lang="ko"> 요소

<html> 태그는 페이지 전체를 감싸는 루트 요소입니다. 여기에 lang="ko" 속성을 지정하면 검색엔진과 스크린리더(음성 낭독기)가 페이지의 주 언어를 인식할 수 있어 접근성(Accessibility)과 SEO에 도움이 됩니다.

<html lang="ko">

3. <head> 안의 기본 메타 태그

<head> 요소 안에는 문서 전반에 영향을 미치는 정보들을 담습니다. 검색 결과에 노출되는 제목(<title>)과 설명(<meta name="description">), 문자 인코딩, 뷰포트 설정 등 필수 태그를 반드시 포함하세요.

<head>
  <meta charset="UTF-8">                                
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <meta name="description" content="왕초보도 쉽게 이해하는 HTML 기본 구조 완벽 가이드입니다.">  
  <title>HTML 기본 구조 완전 정복</title>             
</head>

4. <body> 요소: 실제 콘텐츠

<body> 안에는 사용자에게 보여질 실제 내용이 들어갑니다. 시맨틱 태그를 활용하면 구조가 명확해지고 검색엔진이 페이지를 더 잘 이해합니다.

<body>
  <header>
    <h1>HTML 기본 구조 완전 이해하기</h1>
  </header>

  <main>
    <p>이제 여러분도 HTML 문서의 뼈대를 완벽하게 작성할 수 있습니다.</p>
  </main>

  <footer>
    <small>© 2025 YourName. All rights reserved.</small>
  </footer>
</body>

5. 전체 예제 코드

지금까지 살펴본 요소를 하나로 합치면 다음과 같습니다. 복사하여 붙여넣기만으로도 기본 문서 구조가 완성됩니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="왕초보도 쉽게 이해하는 HTML 기본 구조 완벽 가이드입니다.">
    <title>HTML 기본 구조 완전 정복</title>
  </head>
  <body>
    <header>
      <h1>HTML 기본 구조 완전 이해하기</h1>
    </header>

    <main>
      <p>이제 여러분도 HTML 문서의 뼈대를 완벽하게 작성할 수 있습니다.</p>
    </main>

    <footer>
      <small>© 2025 YourName. All rights reserved.</small>
    </footer>
  </body>
</html>

6. 마무리 및 다음 강좌 예고

지금까지 HTML5 문서의 기본 골격을 완성했습니다.

  • ✔ <!DOCTYPE html> 선언
  • ✔ <html lang> 속성
  • ✔ <head> 내부 메타 태그
  • ✔ <body> 실제 콘텐츠

다음 제2장에서는 <p>, <h1>~<h6> 태그를 통해 본격적으로 페이지를 구성하는 방법을 배우고, 직접 예제를 입력해 보며 실습을 진행합니다. 기대해 주세요!

'작업 > 웹 개발' 카테고리의 다른 글

제2장 – 텍스트 & 제목 태그 배우기: <p>, <h1>~<h6> 한눈에 정리  (0) 2025.04.28

관련글

티스토리툴바