구름톤 딥다이브 1일차

호우·2025년 10월 29일

구름톤 딥다이브

목록 보기

1/1

HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 만드는 표준
마크업 언어입니다. 아래 정리만 익혀도 기본 페이지를 스스로 구성할 수
있어요.

TL;DR

HTML 문서는 기본 골격이 있다: <!DOCTYPE html>, <html>,
<head>, <body>.
요소(Element)는 태그로 감싸고, 속성(Attribute)으로 추가
정보를 준다.
시맨틱 태그를 쓰면 의미·접근성·SEO가 좋아진다.
블록 vs 인라인 차이를 알아야 레이아웃이 보인다.
id는 유일한 식별자, class는 여러 요소에 반복 적용.

1) HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>페이지 제목</title>
  </head>
  <body>
    <!-- 여기에 웹페이지 콘텐츠가 들어갑니다 -->
  </body>
</html>

<!DOCTYPE html>: HTML5 문서 선언\
<html>: 최상위 루트 요소\
<head>: 메타데이터(인코딩, 제목, 외부 CSS/JS 등)\
<body>: 실제 화면에 보이는 콘텐츠

2) 요소(Element)와 속성(Attribute)

<a href="https://www.google.com">이것은 링크입니다.</a>

요소: <a>…</a>
속성: href="https://www.google.com"
콘텐츠: 이것은 링크입니다.

속성은 시작 태그 안에 이름="값" 형태로 작성합니다.

3) 자주 쓰는 태그

태그 이름 역할

<h1>~<h6> 제목 문서 구조(계층) 표현, h1이 가장 상위
<p> 단락 문단
<a> 앵커 다른 문서/위치로 이동(링크)
<img> 이미지 src, alt 필수
<ul>, <ol>, <li> 목록 순서 없는/있는 목록 + 항목
<br> 줄바꿈 닫는 태그 없음(빈 요소)

4) 시맨틱(semantic) 태그로 의미를 드러내기

태그 용도 설명

<header> 머리말 페이지/섹션 소개, 내비게이션 등
<nav> 내비게이션 메뉴/링크 모음
<main> 주요 콘텐츠 문서의 핵심 영역(문서당 1개 권장)
<section> 구획 주제별 구획(보통 제목 포함)
<article> 독립 콘텐츠 블로그 글/기사처럼 단독 배포 가능
<aside> 보조 영역 광고/관련 링크 등
<footer> 꼬리말 저작권/연락처/관련 링크

시맨틱 태그는 가독성·접근성·SEO에 유리합니다.

5) 블록(Block) vs 인라인(Inline)

구분 특징 예시

블록 새 줄에서 시작, 가로폭 div, p, h1, ul,
전체 차지, 너비/높이 section, footer
지정 가능

인라인 줄바꿈 없음, 내용 span, a, img,
크기만 차지, 보통 strong, input
너비/높이 지정 어려움

레이아웃 이슈가 생길 때 대부분 블록/인라인 성질을 먼저 확인하세요.

6) `id` vs `class`

속성 특징 주 사용처

id 문서 내 유일 JS로 특정 요소 조작, 앵커 링크(#target)
class 여러 요소 재사용 공통 스타일(CSS), 그룹 지정

규칙: 스타일 = class, 특정 타깃팅/앵커 = id

7) 주석(Comments)

<!-- 이 부분은 브라우저에 표시되지 않습니다. -->

설명/메모/임시 비활성화에 활용\
프로덕션 빌드에서는 민감한 내용이 남지 않도록 주의

8) 실무 팁 & 흔한 실수

인코딩: <meta charset="utf-8" />로 한글 깨짐 방지\
대체 텍스트: 이미지엔 반드시 alt 제공(접근성/SEO)\
링크 새 탭: 외부 링크는 target="_blank" rel="noopener" 권장\
시맨틱 구조: 제목 계층(h1→h2→h3)은 순서 유지\
중복 id 금지: 같은 id가 여러 개면 JS/스타일링/앵커가 꼬입니다\
폼 요소 레이블: <label for="id">와 <input id="id">를 매칭

9) 연습용 스니펫

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>나의 첫 페이지</title>
  </head>
  <body>
    <header>
      <h1>블로그 제목</h1>
      <nav>
        <a href="#about">소개</a>
        <a href="#posts">글 목록</a>
      </nav>
    </header>

    <main>
      <section id="about">
        <h2>소개</h2>
        <p>HTML은 웹의 뼈대입니다. 시맨틱 태그로 구조를 의미 있게 설계해요.</p>
        <img src="me.jpg" alt="프로필 사진" />
      </section>

      <section id="posts">
        <h2>최근 글</h2>
        <article>
          <h3>첫 글: 시맨틱 태그란?</h3>
          <p>코드만 봐도 의미를 알 수 있게 만드는 태그를 말해요.</p>
          <a href="https://example.com" target="_blank" rel="noopener">자세히 보기</a>
        </article>
      </section>
    </main>

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

호우

구름톤 딥다이브 1일차