HTML 기초부터 시맨틱 마크업까지

2025. 8. 18. 11:45ㆍ웹퍼블리싱

🎯 CSS 완전정복 시리즈

HTML 기초부터 최신 CSS 레이아웃까지, 실무에 바로 적용 가능한 웹 퍼블리싱 기술을 단계별로 마스터해보세요!

📚 전체 시리즈 목차

Part 1: HTML & CSS 기초 마스터

  • ✅ #01: HTML 기초부터 시맨틱 마크업까지 ← 현재 글
  • 📝 #02: CSS 기초와 스타일 적용 방법

Part 2: CSS 박스모델과 타이포그래피

  • 📝 #03: CSS 박스모델 완전 정복
  • 📝 #04: 타이포그래피와 텍스트 스타일링

...총 15편으로 구성된 완전한 CSS 마스터 과정

🎬 시작하기 전에

웹 개발을 처음 시작하시나요? 혹은 CSS는 어느 정도 아는데 기초를 다시 탄탄히 하고 싶으신가요?

이 시리즈는 완전 초보자도 따라할 수 있으면서, 실무에서 바로 써먹을 수 있는 실용적인 내용으로 구성했습니다. 특히 이번 1편에서는 HTML의 기초 개념부터 접근성을 고려한 시맨틱 마크업까지, 웹 개발의 가장 단단한 첫걸음을 함께 떼어보겠습니다.

📖 이번 편에서 배울 내용

✅ 학습 목표

  • ☐ HTML 문서의 기본 구조 이해하기
  • ☐ 주요 HTML 태그들의 용도와 사용법 익히기
  • ☐ 시맨틱 마크업의 중요성과 실전 적용법
  • ☐ 웹 접근성을 고려한 마크업 작성하기
  • ☐ VSCode 필수 확장 프로그램과 Emmet 활용법

🌐 HTML이란?

HTML의 정의

HTML(HyperText Markup Language)은 웹페이지의 뼈대와 의미를 정의하는 마크업 언어입니다. 우리가 보는 웹사이트의 모든 글자, 이미지, 비디오 등은 모두 HTML로 그 구조가 짜여 있습니다.

<!-- 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>
    <h1>안녕하세요!</h1>
    <p>HTML을 배우고 있습니다.</p>
</body>
</html>
💡 HTML의 역할 • 구조(Structure): 제목, 문단, 목록 등 문서의 뼈대를 정의합니다.
• 의미(Semantics): 각 콘텐츠가 '제목'인지, '내비게이션'인지 등의 의미를 부여합니다.
• 연결(Hyperlink): 하이퍼링크를 통해 다른 문서나 리소스를 연결합니다.

🏗️ HTML 문서의 기본 구조

1. DOCTYPE 선언

<!DOCTYPE html>

• 이 문서가 HTML5 표준에 따라 작성되었음을 브라우저에 알리는 선언입니다.
• 반드시 문서의 가장 첫 줄에 위치해야 합니다.

2. html 요소

<html lang="ko">

• 문서 전체의 콘텐츠를 감싸는 최상위(루트) 요소입니다.
• lang="ko" 속성은 이 문서의 주된 언어가 한국어임을 명시하여, 검색엔진이나 스크린 리더 등에게 중요한 정보를 제공합니다. (웹 접근성 향상)

3. head 요소

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>

• 웹페이지 자체의 정보를 담는 영역입니다.
• 브라우저 화면에는 직접 보이지 않지만, 문자 인코딩(charset), 반응형 웹 설정(viewport), 페이지 제목(title) 등 중요한 메타데이터를 포함합니다.

4. body 요소

<body>
    <!-- 실제 웹페이지에 표시될 모든 내용이 여기에 들어갑니다. -->
</body>

• 사용자의 눈에 실제로 보이는 모든 콘텐츠(텍스트, 이미지, 링크 등)가 위치하는 영역입니다.

📝 주요 HTML 태그들

제목 태그 (h1 ~ h6)

<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>
<h3>세 번째 제목</h3>
<!-- h4, h5, h6까지 있습니다. -->
• <h1> 태그는 페이지의 핵심 주제를 나타내며, 검색엔진 최적화(SEO)를 위해 페이지당 한 번만 사용하는 것을 권장합니다.
• 제목의 계층 구조를 지켜주세요. (예: <h1> 다음에 갑자기 <h3>가 나오지 않도록 주의)

문단과 줄바꿈 태그 (p, br)

<p>하나의 문단을 나타냅니다. 문단과 문단 사이에는 자연스럽게 여백이 생깁니다.</p>

<p>새로운 문단을 시작하려면 p 태그를 새로 작성해야 합니다.<br>
이렇게 문단 내에서 강제로 줄을 바꾸고 싶을 때는 <br> 태그를 사용합니다.</p>

이미지 태그 (img)

<img src="images/photo.jpg" alt="푸른 하늘과 넓은 들판이 있는 풍경 사진">
⚠️ 중요! • alt 속성은 절대 생략하지 마세요! 웹 접근성과 SEO에 매우 중요합니다.
• 이미지가 로딩되지 않았을 때 대체 텍스트로 표시되며, 스크린 리더 사용자가 어떤 이미지인지 파악할 수 있게 도와줍니다.

🎯 시맨틱 마크업이란?

시맨틱 마크업의 정의

시맨틱(Semantic)이란 '의미론적인'이라는 뜻으로, 시맨틱 마크업은 태그 자체가 콘텐츠의 의미를 명확하게 설명하도록 HTML을 작성하는 방식입니다. 예를 들어, 단순히 글자를 키우기 위해 <h1>을 쓰는 것이 아니라, '이것이 이 페이지의 가장 중요한 제목이기 때문에' <h1>을 사용하는 것입니다.

❌ 잘못된 예 (Non-semantic)

<!-- 모든 구조를 div로만 작성 -->
<div>사이트 제목</div>
<div>
    <div>메뉴1</div>
    <div>메뉴2</div>
</div>
<div>메인 콘텐츠</div>
<div>Copyright 2024</div>

✅ 올바른 예 (Semantic)

<!-- 태그만 봐도 구조와 의미를 알 수 있음 -->
<header>
    <h1>사이트 제목</h1>
    <nav>
        <a href="#menu1">메뉴1</a>
        <a href="#menu2">메뉴2</a>
    </nav>
</header>
<main>
    <p>메인 콘텐츠</p>
</main>
<footer>
    <p>Copyright 2024</p>
</footer>

주요 시맨틱 태그들

  • <header>: 페이지나 특정 섹션의 머리말 영역 (사이트 로고, 제목, 내비게이션 등)
  • <nav>: 다른 페이지나 페이지 내 다른 부분으로 연결되는 링크(메뉴)들을 모아놓은 영역
  • <main>: 페이지의 핵심 콘텐츠. 문서에 단 한 번만 사용해야 합니다.
  • <section>: 문서의 독립적인 구획. 보통 제목(h1~h6)을 포함합니다.
  • <article>: 블로그 글, 뉴스 기사처럼 독립적으로 배포하거나 재사용할 수 있는 콘텐츠
  • <aside>: 본문 내용과 직접적인 관련이 적은 부가 콘텐츠 (광고, 관련 링크 등)
  • <footer>: 페이지나 특정 섹션의 꼬리말 영역 (저작권, 연락처 정보 등)

🌟 웹 접근성과 시맨틱 마크업

시맨틱 마크업이 중요한 이유

  1. 웹 접근성 향상: 스크린 리더가 의미 있는 태그를 통해 구조를 파악하고 사용자에게 정확한 정보를 전달할 수 있습니다.
  2. SEO (검색엔진 최적화): 검색엔진이 콘텐츠의 구조와 중요도를 더 잘 이해하여 검색 결과에 긍정적인 영향을 줍니다.
  3. 코드 가독성 및 유지보수: 개발자가 코드의 구조를 한눈에 파악하기 쉬워져 유지보수가 용이해집니다.

🛠️ 실습: 간단한 프로필 페이지 만들기

📝 따라해보기

지금까지 배운 내용을 바탕으로, 아래 코드를 VSCode에 직접 작성해보세요! Emmet을 활용하면 더 빠르게 만들 수 있습니다.

<!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>
        <nav>
            <a href="#about">소개</a>
            <a href="#skills">보유 스킬</a>
            <a href="#contact">연락처</a>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>소개</h2>
            <!-- 이미지가 없을 경우, placeholder 이미지를 사용해볼 수 있습니다. -->
            <img src="https://via.placeholder.com/150" alt="김개발 프로필 사진">
            <p>안녕하세요! 웹 개발의 세계를 탐험하고 있는 예비 개발자, 김개발입니다.</p>
        </section>
        
        <section id="skills">
            <h2>보유 스킬</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript (학습 중)</li>
            </ul>
        </section>
        
        <section id="contact">
            <h2>연락처</h2>
            <p>이메일: <a href="mailto:kim@example.com">kim@example.com</a></p>
            <p>깃허브: <a href="https://github.com/kimdev" target="_blank" rel="noopener noreferrer">github.com/kimdev</a></p>
        </section>
    </main>
    
    <footer>
        <p>© 2024 김개발. All rights reserved.</p>
    </footer>
</body>
</html>

🎓 정리 및 다음 편 예고

✅ 이번 편 핵심 정리

  • HTML은 웹페이지의 구조와 의미를 담당하는 뼈대입니다.
  • <!DOCTYPE>, <html>, <head>, <body>는 HTML 문서의 필수 구조입니다.
  • <h1>, <p>, <ul>, <a>, <img> 등 주요 태그의 사용법을 익혔습니다.
  • <div> 대신 <header>, <main> 등 의미에 맞는 시맨틱 태그를 사용해야 합니다.
  • 시맨틱 마크업은 웹 접근성, SEO, 유지보수를 위해 매우 중요합니다.

🔥 다음 편 예고

#02: CSS 기초와 스타일 적용 방법

다음 편에서는 오늘 만든 HTML 프로필 페이지에 CSS로 멋진 디자인을 입혀보겠습니다.
CSS의 기본 문법, 선택자, 색상 표현법 등 스타일링의 첫걸음을 함께 시작해봐요!

💬 소통과 질문

🙋‍♀️ 궁금한 점이나 막히는 부분이 있다면 댓글로 편하게 질문해주세요!

  • 실습하시면서 만든 결과물을 공유해주시면 함께 보고 피드백을 나눠요! 😊
  • 다음 편에서 더 깊게 다뤘으면 하는 내용도 자유롭게 제안해주세요.

태그: #CSS완전정복 #HTML #HTML기초 #웹개발 #프론트엔드 #웹퍼블리싱 #시맨틱마크업 #웹접근성 #VSCode #초보자가이드 #웹개발입문

'웹퍼블리싱' 카테고리의 다른 글

CSS 텍스트 말줄임 효과  (1) 2025.08.09

관련글

티스토리툴바