입문 — 첫 사이트까지 ⏱ 10분 +110 XP

HTML 구조 읽기

태그와 중첩 구조를 이해하고 AI가 만든 HTML 코드를 읽는 눈을 기릅니다.

🧑‍🏫

멘토 한마디

조급해하지 마세요. 한 챕터, 한 문제씩이면 충분합니다. 제가 응원할게요! 🚀

HTML은 웹페이지의 뼈대를 만드는 언어입니다. 직접 외워서 쓰지 않더라도, AI가 만들어 준 HTML을 '읽을 줄' 알면 어디를 고쳐 달라고 정확히 말할 수 있습니다. 이번 챕터에서는 HTML의 기본 구조를 읽는 법을 배웁니다.

태그란 무엇인가

HTML은 태그(tag)로 이루어집니다. 태그는 꺾쇠괄호로 감싼 이름표입니다. 대부분 여는 태그와 닫는 태그가 짝을 이루고, 그 사이에 내용이 들어갑니다.

<p>안녕하세요</p>

여기서 <p>는 여는 태그, </p>는 닫는 태그이며, 슬래시(/)가 닫음을 뜻합니다. p는 문단(paragraph)을 의미합니다.

HTML의 핵심은 중첩(nesting)입니다. 태그 안에 태그가 들어가 상자 안의 상자처럼 구조를 만듭니다. 들여쓰기를 보면 누가 누구 안에 들어 있는지 보입니다.

<body>
  <h1>내 카페</h1>
  <ul>
    <li>아메리카노</li>
    <li>라떼</li>
  </ul>
</body>

핵심 여는 태그가 있으면 반드시 닫는 태그가 있고, 안쪽 태그가 바깥쪽 태그보다 먼저 닫혀야 합니다.

전체 문서는 보통 <html> 안에 <head>(페이지 정보)와 <body>(화면에 보이는 내용)가 들어가는 구조입니다. AI 코드를 읽을 때 <body> 안쪽을 보면 실제 화면에 나올 내용이 보입니다.

주의 닫는 태그를 빼먹거나 순서가 엉키면 페이지가 깨집니다. AI 코드를 고칠 때도 태그 짝이 맞는지 확인하세요.