// 이 파일이 하는 일: "나의 첫 웹페이지: HTML 첫걸음" 코스 — 코딩을 한 번도 안 해 본 사람이
// 메모장 수준의 도구(VS Code)만으로 브라우저에 뜨는 '진짜 내 페이지'를 오늘 만들도록,
// 웹페이지의 정체(그냥 텍스트 파일이다)에서 출발해 기본 골격·제목/문단·강조·저장→새로고침 리듬·
// 자주 하는 실수까지 7개 섹션으로 안내하는 정적 학습 페이지. 눈높이는 중·고등학생.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

import { Link } from 'react-router-dom';

// ── 예제 코드 상수들 ──

const CODE_WHATIS = `여러분이 매일 보는 웹페이지의 정체는...

  ┌──────────────────┐        ┌──────────────────┐
  │  index.html       │        │   🖥 브라우저      │
  │  (그냥 텍스트 파일) │  ───→  │  글자를 읽고       │
  │                  │  읽기   │  화면을 '그려' 줌   │
  └──────────────────┘        └──────────────────┘

핵심: 웹페이지는 특별한 프로그램이 아니라 '글자로 된 문서'예요.
브라우저(크롬·엣지·사파리)가 그 문서를 읽고, 규칙(HTML)에 따라
제목은 크게, 문단은 줄을 나눠서 화면에 그려 주는 것뿐입니다.
그래서 인터넷이 없어도, 서버가 없어도, 내 컴퓨터의 파일 하나로
'진짜 웹페이지'를 만들 수 있어요. 오늘 그걸 직접 해 봅니다.`;

const CODE_FOLDER = `내 문서/
└── my-first-web/          ← 오늘의 작업 폴더 (이름은 영문 추천)
    └── index.html          ← 우리가 만들 첫 파일

· 폴더 하나 = 프로젝트 하나. 바탕화면에 파일을 흩어 두지 않기.
· index.html 이라는 이름은 관례예요 — "이 폴더의 대표 페이지"라는 뜻.
· 확장자 .html이 브라우저에게 "나를 웹페이지로 읽어 줘"라고 알려 줍니다.
  (.txt로 저장하면 그냥 메모로 취급돼요 — 섹션 7에서 다시!)`;

const CODE_SKELETON = `<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>나의 첫 페이지</title>
  </head>
  <body>
    안녕하세요! 이건 제가 만든 첫 웹페이지예요.
  </body>
</html>

<!-- 딱 이만큼이 웹페이지 한 장의 '뼈대'입니다.
     head = 페이지에 대한 정보(제목·글자 인코딩) — 화면엔 안 보임
     body = 화면에 실제로 보이는 모든 내용
     저장하고 이 파일을 더블클릭하면... 브라우저가 열립니다! -->`;

const CODE_HEADINGS = `<body>
  <h1>김미림</h1>                 <!-- 페이지에서 가장 큰 제목, 보통 1개만 -->
  <h2>저를 소개합니다</h2>          <!-- 그다음 크기의 소제목 -->
  <p>안녕하세요. 저는 웹페이지를 처음 만들어 보는 김미림입니다.</p>
  <p>오늘 처음으로 HTML이라는 것을 배웠어요.</p>

  <h2>좋아하는 것</h2>
  <p>음악 듣기, 그림 그리기, 그리고 이제는 코딩도요.</p>
</body>

<!-- h1이 가장 크고 h6가 가장 작아요. 크기 때문이 아니라
     '중요도의 순서'를 표현하려고 씁니다. 책의 장(h1)과 절(h2)처럼요.
     p는 paragraph(문단) — 문단마다 p를 새로 열어 줍니다. -->`;

const CODE_TAG_ANATOMY = `태그의 3단 구조 — 샌드위치를 떠올리세요

   <p>  안녕하세요, 반가워요!  </p>
   ─┬─  ─────────┬─────────  ─┬──
  여는 태그      내용         닫는 태그
  (빵 위)      (속재료)     (빵 아래, /가 붙음)

· 여는 태그 <p> 와 닫는 태그 </p> 가 내용을 감쌉니다.
· 닫는 태그의 슬래시(/)가 "여기까지!"라는 표시예요.
· 예외: <br /> 처럼 내용 없이 혼자 다니는 태그도 있어요(섹션 5).`;

const CODE_ABOUT_ME = `<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>김미림을 소개합니다</title>
  </head>
  <body>
    <!-- 여기는 주석: 브라우저는 무시하고, 나만 보는 메모예요 -->
    <h1>김미림</h1>
    <p>안녕하세요! 저는 <strong>웹페이지를 처음 만들어 본</strong> 김미림입니다.</p>

    <hr />  <!-- 가로 구분선: 내용의 단락을 눈으로 나눠 줘요 -->

    <h2>저는 이런 사람이에요</h2>
    <p>
      아침엔 <em>느긋하고</em>, 밤엔 <em>집중이 잘 되는</em> 편이에요.<br />
      좋아하는 계절은 가을,<br />
      좋아하는 음식은 떡볶이입니다.
    </p>

    <h2>앞으로의 목표</h2>
    <p>두 달 안에 <strong>나만의 홈페이지</strong>를 완성하는 것!</p>

    <!-- TODO: 다음 시간에 사진과 링크를 넣어 보자 -->
  </body>
</html>`;

const CODE_LOOP = `개발의 리듬 — 오늘부터 몸에 새길 4박자

  ① 고친다     VS Code에서 글자 하나를 바꾼다
  ② 저장한다   Ctrl + S  (Mac은 Cmd + S)
  ③ 새로고침   브라우저에서 F5 (또는 Ctrl + R)
  ④ 확인한다   내가 바꾼 게 화면에 떴나?

  ①→②→③→④→①→②→③→④→ ... (무한 반복)

· 저장을 안 하면 브라우저는 '옛날 파일'을 계속 보여 줘요.
  "바꿨는데 왜 안 변하지?"의 90%는 저장을 빼먹은 것.
· 프로 개발자도 하루 종일 이 4박자를 돕니다. 단지 더 빠를 뿐!`;

const CODE_MISTAKE_TAG = `<!-- 실수 ①: 닫는 태그를 빼먹으면? -->
<p>첫 번째 문단
<p>두 번째 문단</p>

<!-- 브라우저는 관대해서 에러 화면 대신 '알아서 추측'해 그려 줘요.
     그런데 strong을 안 닫으면? -->
<p><strong>여기부터 굵게... 어라, 안 닫았네.</p>
<p>다음 문단까지 전부 굵어져 버립니다!</p>

<!-- 에러가 안 나서 오히려 무섭습니다. 조용히 이상해지거든요.
     습관: 여는 태그를 쓰면 닫는 태그부터 먼저 쓰고, 내용을 채우기. -->`;

const CODE_MISTAKE_CHARSET = `<!-- 실수 ③: 한글이 ê¹€ë¯¸ë¦¼ 처럼 깨져 보인다면? -->
<head>
  <meta charset="UTF-8" />   <!-- 이 한 줄이 있는지 확인! -->
</head>

<!-- charset은 "이 문서의 글자를 UTF-8 방식으로 읽어 줘"라는 안내예요.
     이게 없으면 브라우저가 글자 해석 방식을 잘못 추측해서
     한글·이모지가 외계어처럼 깨질 수 있습니다.
     섹션 3의 뼈대에 처음부터 넣어 둔 이유가 바로 이거예요. -->`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
function Section({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`sec-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

const SECTIONS = [
  { n: 1, label: '웹페이지의 정체' },
  { n: 2, label: '도구 준비' },
  { n: 3, label: '첫 HTML 파일' },
  { n: 4, label: '제목과 문단' },
  { n: 5, label: '내 소개에 살 붙이기' },
  { n: 6, label: '개발의 리듬' },
  { n: 7, label: '자주 하는 실수' },
];

export default function Lv1FirstHtmlPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>나의 첫 웹페이지<br />— HTML 첫걸음 🌐</h1>
        <p>
          "코딩은 어렵고 준비물이 많다"는 소문과 달리, 웹페이지 만들기의 준비물은{' '}
          <strong>메모장 수준의 도구 하나</strong>뿐이에요. 오늘 이 시간이 끝나면, 여러분
          컴퓨터의 브라우저에 <strong>여러분이 직접 만든 '진짜 페이지'</strong>가 떠 있을
          겁니다. 인터넷도, 서버도, 어려운 수학도 필요 없어요. 시작해 볼까요?
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습: 나를 소개하는 한 페이지</span>
          <span className="chip">선수 지식: 없음 — 진짜 첫걸음</span>
        </div>
      </div>

      {/* 섹션 바로가기 */}
      <nav className="pill-nav">
        {SECTIONS.map((s) => (
          <a key={s.n} href={`#sec-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Section n={1} title="웹페이지의 정체" sub="웹페이지는 결국 텍스트 파일이다">
        <p>
          유튜브, 네이버, 지금 보고 있는 이 페이지까지 — 세상 모든 웹페이지의 정체를 알면
          코딩이 훨씬 만만해져요. 정답부터 말하면, 웹페이지는{' '}
          <strong>그냥 글자로 된 문서(텍스트 파일)</strong>입니다. 게임처럼 복잡한 프로그램이
          아니라, 여러분이 메모장에 쓰는 일기와 같은 종류의 파일이에요.
        </p>
        <p>
          다만 그 문서에는 <strong>약속된 표시</strong>가 들어 있어요. "여긴 제목이야",
          "여긴 문단이야" 같은 표시요. 이 약속의 이름이 바로{' '}
          <strong>HTML(HyperText Markup Language)</strong>입니다. 그리고{' '}
          <strong>브라우저</strong>(크롬·엣지·사파리)가 이 문서를 읽어서, 표시대로 제목은
          크게, 문단은 나눠서 화면에 <strong>그려</strong> 줍니다.
        </p>
        <Code>{CODE_WHATIS}</Code>
        <p>
          여기서 오늘의 가장 중요한 사실 하나. 이 문서는{' '}
          <strong>인터넷 없이도 내 컴퓨터에서 만들고 열 수 있어요.</strong> 브라우저는 멀리
          있는 서버의 문서만 여는 게 아니라, 내 컴퓨터에 저장된{' '}
          <span className="icode">.html</span> 파일도 똑같이 열어 줍니다. 그러니 오늘 우리는
          아무것도 설치된 서버 없이, 파일 하나로 웹페이지를 만들 거예요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 아무 웹페이지에서나 마우스 오른쪽 클릭 →{' '}
          <strong>"페이지 소스 보기"</strong>를 눌러 보세요. 화려한 화면 뒤에 숨어 있던
          '글자로 된 원본 문서'가 나타납니다. 지금은 외계어처럼 보여도 괜찮아요 — 50분 뒤엔
          그중 몇 줄이 <strong>읽히기 시작</strong>할 테니까요.
        </div>
      </Section>

      <Section n={2} title="도구 준비: VS Code와 작업 폴더" sub="요리 전에 도마와 칼부터">
        <p>
          HTML 문서는 정말로 메모장으로도 만들 수 있어요. 하지만 우리는 처음부터 개발자들이
          실제로 쓰는 도구, <strong>VS Code(Visual Studio Code)</strong>를 쓸 거예요.
          공짜인 데다, 코드에 <strong>색을 입혀 주고</strong>(어디가 태그인지 한눈에 보임),
          내가 태그를 열면 <strong>닫는 태그를 지어서 추천</strong>해 주거든요. 메모장보다
          실수를 훨씬 덜 하게 됩니다.
        </p>
        <p>
          설치는 간단해요. 공식 사이트(code.visualstudio.com)에서 내 운영체제용 설치 파일을
          받아 실행하면 끝. 처음 열면 영어 화면이 낯설 수 있는데, 오늘 쓸 건 딱 두 가지예요.{' '}
          <strong>파일 열기/저장</strong>, 그리고 <strong>폴더 열기</strong>(File → Open
          Folder). 나머지 버튼은 몰라도 전혀 지장 없습니다.
        </p>
        <p>
          도구를 준비했으면 <strong>작업 폴더</strong>를 만듭시다. 바탕화면이나 문서 폴더에{' '}
          <span className="icode">my-first-web</span> 같은 폴더를 하나 만들고, VS Code로 그{' '}
          <strong>폴더째</strong> 여세요. 앞으로 이 강좌의 파일은 전부 이 폴더 안에서
          살아갑니다.
        </p>
        <Code>{CODE_FOLDER}</Code>
        <p>
          폴더 이름 옆의 <span className="icode">.html</span>이라는 꼬리표, 이걸{' '}
          <strong>확장자</strong>라고 불러요. 파일 이름의 마침표 뒤에 붙어서 "이 파일은 어떤
          종류다"를 알려 주는 표시입니다. <span className="icode">.txt</span>는 그냥 메모,{' '}
          <span className="icode">.html</span>은 웹페이지, <span className="icode">.png</span>는
          그림. 같은 글자 내용이라도 확장자가 <span className="icode">.html</span>이어야
          브라우저가 "아, 웹페이지구나" 하고 그려 줍니다.
        </p>
        <div className="tip">
          <b>정리하는 습관 = 실력의 절반</b> "프로젝트 하나 = 폴더 하나"는 개발자의 기본
          예절이에요. 파일이 바탕화면에 흩어져 있으면 나중에 파일끼리 서로를 못 찾는 문제
          (다음 강좌에서 이미지를 넣을 때!)가 생깁니다. 오늘 만든 폴더 습관이 두 달 뒤의
          여러분을 구해 줘요.
        </div>
      </Section>

      <Section n={3} title="첫 HTML 파일 만들기" sub="뼈대를 세우고, 저장하고, 브라우저로 열기">
        <p>
          이제 진짜로 만들어 봅시다. VS Code에서 새 파일을 만들어 이름을{' '}
          <span className="icode">index.html</span>로 저장하고, 아래 내용을{' '}
          <strong>직접 타이핑</strong>하세요. 복사-붙여넣기보다 손으로 쳐야 손가락이
          기억합니다.
        </p>
        <Code>{CODE_SKELETON}</Code>
        <p>
          한 줄씩 뜯어 볼게요. 맨 위의 <span className="icode">&lt;!DOCTYPE html&gt;</span>은
          "이 문서는 최신 HTML 규칙으로 쓰였어요"라고 브라우저에게 알리는{' '}
          <strong>선언문</strong>이에요. 항상 파일의 첫 줄에 딱 한 번 씁니다. 그 아래부터
          문서 전체가 <span className="icode">&lt;html&gt;</span>로 감싸이고, 그 안이 두
          부분으로 나뉘어요.
        </p>
        <p>
          <strong><span className="icode">&lt;head&gt;</span>는 '문서에 대한 정보'</strong>를
          담는 곳이에요. 브라우저 탭에 표시될 제목(<span className="icode">&lt;title&gt;</span>),
          글자를 읽는 방식(<span className="icode">charset</span>) 같은 것들이죠. 화면
          본문에는 <strong>안 보입니다</strong>. 반대로{' '}
          <strong><span className="icode">&lt;body&gt;</span>는 '화면에 보이는 모든 것'</strong>이
          사는 곳이에요. 우리가 쓰는 글, 제목, 나중에 배울 이미지까지 전부{' '}
          <span className="icode">body</span> 안에 들어갑니다. 머리(head)엔 생각이, 몸(body)엔
          보이는 모습이 — 이름 그대로예요.
        </p>
        <p>
          다 쳤으면 <strong>저장</strong>(<span className="icode">Ctrl + S</span>)하고, 파일
          탐색기에서 <span className="icode">index.html</span>을{' '}
          <strong>더블클릭</strong>하세요. 브라우저가 열리면서... 여러분이 쓴 문장이 화면에
          떠 있을 겁니다. 축하해요 — 방금 <strong>생애 첫 웹페이지</strong>를 만들었습니다.
        </p>
        <div className="tip">
          <b>탭 제목을 확인해 보세요</b> 브라우저 위쪽 탭에 "나의 첫 페이지"라고 떠 있나요?
          그게 바로 <span className="icode">&lt;head&gt;</span> 안에 쓴{' '}
          <span className="icode">&lt;title&gt;</span>이에요. 본문엔 안 보이지만 이렇게 탭에서
          일하고 있죠. head가 하는 일을 처음으로 눈으로 확인한 순간입니다.
        </div>
      </Section>

      <Section n={4} title="제목과 문단 넣기" sub="h1~h6와 p — 글에 위계를 세우는 법">
        <p>
          빈 종이에 글만 덩그러니 있으면 읽기 힘들죠. 책이 <strong>장 제목 → 절 제목 →
          본문</strong>으로 정리되듯, 웹페이지도 제목과 문단으로 정리합니다. 도구는 딱
          두 종류예요. 제목은 <span className="icode">&lt;h1&gt;</span>부터{' '}
          <span className="icode">&lt;h6&gt;</span>까지, 문단은{' '}
          <span className="icode">&lt;p&gt;</span>.
        </p>
        <Code>{CODE_HEADINGS}</Code>
        <p>
          <span className="icode">h1</span>이 가장 크고 중요한 제목,{' '}
          <span className="icode">h6</span>로 갈수록 작아져요. 여기서 초보자가 자주 놓치는
          포인트 하나 — h 태그는 <strong>글자를 크게 만드는 버튼이 아니라, 중요도의 순서를
          매기는 도구</strong>입니다. 페이지의 대표 제목은 <span className="icode">h1</span>{' '}
          하나, 그 아래 소제목은 <span className="icode">h2</span>, 그 안의 더 작은 묶음은{' '}
          <span className="icode">h3</span>... 이렇게 <strong>건너뛰지 않고 순서대로</strong>{' '}
          쓰는 게 좋은 습관이에요.
        </p>
        <p>
          그리고 지금까지 눈치챘을 수도 있는 규칙을 정식으로 소개할게요. 태그는 대부분{' '}
          <strong>3단 구조</strong>입니다.
        </p>
        <Code>{CODE_TAG_ANATOMY}</Code>
        <p>
          여는 태그(<span className="icode">&lt;p&gt;</span>)와 닫는 태그
          (<span className="icode">&lt;/p&gt;</span>)가 내용을 샌드위치처럼 감싸요. 닫는
          태그에만 슬래시(<span className="icode">/</span>)가 붙는다는 것, 꼭 기억하세요.
          여는 것과 닫는 것이 <strong>짝</strong>이라는 감각만 잡히면 HTML의 절반은 끝난
          겁니다.
        </p>
        <div className="tip">
          <b>실험해 보기</b> 위 예제를 여러분의 <span className="icode">body</span> 안에
          넣고 저장 → 브라우저 새로고침(<span className="icode">F5</span>) 해 보세요. 그다음{' '}
          <span className="icode">h1</span>을 <span className="icode">h3</span>으로 바꿔서
          다시 새로고침 — 제목이 작아지죠? 이렇게 <strong>바꾸고 → 확인하는 실험</strong>이
          코딩을 배우는 가장 빠른 길이에요(섹션 6에서 이 리듬을 제대로 다룹니다).
        </div>
      </Section>

      <Section n={5} title="내 소개 페이지에 살 붙이기" sub="strong·em·br·hr, 그리고 나만 보는 메모">
        <p>
          이제 오늘의 실습 목표, <strong>'나를 소개하는 한 페이지'</strong>를 완성해
          봅시다. 뼈대(섹션 3)와 제목·문단(섹션 4)에 세 가지 양념을 더할 거예요.
        </p>
        <p>
          첫째, <strong>강조</strong>. <span className="icode">&lt;strong&gt;</span>은 "이건
          중요해!"라며 <strong>굵게</strong>, <span className="icode">&lt;em&gt;</span>은
          "여기에 어감을 실어 줘"라며 <em>기울여</em> 보여 줍니다. 둘째,{' '}
          <strong>줄바꿈과 구분선</strong>. <span className="icode">&lt;br /&gt;</span>은 문단을
          새로 열 정도는 아니지만 줄만 바꾸고 싶을 때(시·주소·짧은 목록),{' '}
          <span className="icode">&lt;hr /&gt;</span>은 내용이 크게 바뀌는 지점에 가로 구분선을
          긋습니다. 이 둘은 감쌀 내용이 없어서 <strong>닫는 태그 없이 혼자</strong> 다니는
          특별한 태그예요.
        </p>
        <p>
          셋째, <strong>주석</strong>. <span className="icode">&lt;!-- 이렇게 --&gt;</span>{' '}
          사이에 쓴 글은 브라우저가 <strong>완전히 무시</strong>합니다. 화면엔 안 나오고,
          코드를 여는 사람에게만 보여요. "여긴 나중에 고치자", "이 부분은 이런 뜻" 같은{' '}
          <strong>나를 위한 메모</strong>를 남기는 자리입니다.
        </p>
        <Code>{CODE_ABOUT_ME}</Code>
        <p>
          이 예제를 참고하되, 내용은 <strong>여러분 자신의 이야기</strong>로 바꾸세요. 이름,
          성격, 좋아하는 것, 목표 — 뭐든 좋아요. 조건은 하나입니다.{' '}
          <strong>제목(h1·h2), 문단(p), 강조(strong·em)를 모두 한 번 이상</strong> 쓸 것.
          저장하고 브라우저로 열었을 때 '나'가 담긴 페이지가 뜨면 오늘의 실습 성공이에요.
        </p>
        <div className="tip">
          <b>strong과 em, 뭐가 다르죠?</b> 화면만 보면 "굵게/기울임"이지만, 속뜻은{' '}
          <strong>중요함(strong)</strong>과 <em>어감·강세(em)</em>로 달라요. "마감은{' '}
          <strong>금요일</strong>입니다"처럼 놓치면 안 되는 정보엔 strong, "저는 떡볶이를{' '}
          <em>정말</em> 좋아해요"처럼 말맛을 살릴 땐 em. 겉모습이 아니라 <strong>뜻으로
          태그를 고르는 것</strong> — 이게 HTML을 잘 쓰는 사람의 감각입니다.
        </div>
      </Section>

      <Section n={6} title="수정하고 새로고침: 개발의 리듬" sub="고치고 → 저장하고 → F5 — 이 4박자가 전부다">
        <p>
          소개 페이지를 만들다 보면 자연스럽게 어떤 <strong>동작의 반복</strong>에 빠지게
          돼요. VS Code에서 고치고, 저장하고, 브라우저로 가서 새로고침하고, 확인하고. 사실
          이게 바로 <strong>개발이라는 활동의 기본 박자</strong>입니다. 오늘 이 리듬을 몸에
          익히면, 앞으로 어떤 언어를 배워도 같은 박자로 갑니다.
        </p>
        <Code>{CODE_LOOP}</Code>
        <p>
          이 리듬의 매력은 <strong>즉각성</strong>이에요. <span className="icode">h1</span>의
          글자를 바꾸고 <span className="icode">F5</span>를 누르는 순간, 화면이{' '}
          <strong>바로</strong> 바뀝니다. 내가 쓴 글자가 곧장 결과가 되는 이 재미가, 많은
          개발자를 이 길로 끌어들인 첫 경험이기도 해요.
        </p>
        <p>
          그리고 요령 하나 — <strong>조금 바꾸고, 자주 확인하세요.</strong> 열 군데를 한꺼번에
          고친 뒤 새로고침했다가 화면이 이상해지면, 어디가 문제인지 찾기 어려워요. 한두 줄
          바꾸고 확인, 또 한두 줄 바꾸고 확인. 이렇게 하면 문제가 생겨도 "방금 바꾼 그
          부분"만 의심하면 되니까 금방 잡힙니다.
        </p>
        <div className="tip">
          <b>"바꿨는데 왜 안 변해요?"</b> 앞으로 여러분이 가장 자주 하게 될 질문이에요.
          답의 90%는 <strong>저장을 안 했기 때문</strong>입니다. VS Code 탭의 파일 이름 옆에{' '}
          <strong>동그라미(●)</strong>가 보이면 아직 저장 전이라는 뜻이에요.{' '}
          <span className="icode">Ctrl + S</span>를 누르면 동그라미가 사라지고, 그때 새로고침해야
          바뀐 내용이 보입니다.
        </div>
      </Section>

      <Section n={7} title="자주 하는 실수 미리 보기" sub="미리 알면 당황하지 않는 세 가지 함정">
        <p>
          마지막으로, 처음 배우는 사람 대부분이 밟는 함정 세 개를 <strong>미리</strong>{' '}
          구경해 둡시다. 미리 본 함정은 함정이 아니에요 — 나중에 만나면 "아, 그거!" 하고
          웃으며 지나갈 수 있습니다.
        </p>
        <p>
          <strong>함정 ① 닫는 태그 빼먹기.</strong> HTML의 재미있는(그리고 무서운) 점은,
          문법이 틀려도 <strong>에러 화면이 뜨지 않는다</strong>는 거예요. 브라우저가 최대한
          알아서 추측해 그려 주거든요. 문제는 그 추측이 내 의도와 다를 때 — 예를 들어{' '}
          <span className="icode">&lt;strong&gt;</span>을 안 닫으면 그 뒤 내용이{' '}
          <strong>전부 굵어져</strong> 버립니다.
        </p>
        <Code>{CODE_MISTAKE_TAG}</Code>
        <p>
          <strong>함정 ② .txt로 잘못 저장되기.</strong> 메모장으로 저장하면 파일 이름을{' '}
          <span className="icode">index.html</span>로 써도 실제로는{' '}
          <span className="icode">index.html.txt</span>가 되는 경우가 있어요. 그러면
          더블클릭해도 브라우저가 아니라 메모장이 열리죠. 게다가 윈도우는 기본 설정에서{' '}
          <strong>확장자를 숨겨서</strong> 이걸 알아채기 어렵습니다. 파일 탐색기 상단{' '}
          <strong>보기 → 파일 확장명</strong>에 체크해서 확장자를 항상 보이게 해 두세요.
          VS Code로 저장하면 이 함정은 거의 안 밟습니다.
        </p>
        <p>
          <strong>함정 ③ 한글 깨짐.</strong> 페이지를 열었더니 한글이{' '}
          <span className="icode">ê¹€ë¯¸ë¦¼</span> 같은 외계어로 보인다면, 십중팔구{' '}
          <span className="icode">&lt;head&gt;</span> 안의{' '}
          <span className="icode">&lt;meta charset="UTF-8" /&gt;</span>이 빠진 거예요.
        </p>
        <Code>{CODE_MISTAKE_CHARSET}</Code>
        <div className="tip">
          <b>실수는 커리큘럼의 일부</b> 오늘 소개한 함정을 일부러 한 번씩 밟아 보는 것도
          훌륭한 공부예요. <span className="icode">charset</span> 줄을 지우고 새로고침해서
          한글이 깨지는 걸 직접 본 사람은, 나중에 같은 화면을 만나도 3초 만에 고칩니다.{' '}
          <strong>안전한 내 폴더 안에서는 마음껏 부수고 고쳐 보세요.</strong>
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🌐 여기까지 왔다면</h3>
          <p className="muted">
            오늘 여러분은 웹페이지의 정체(그냥 텍스트 파일!)를 알았고, VS Code와 작업 폴더를
            갖췄고, <strong>뼈대 → 제목·문단 → 강조·구분선·주석</strong>을 거쳐 '나를 소개하는
            한 페이지'를 브라우저에 띄웠어요. 저장→새로고침의 리듬과 세 가지 함정까지 챙겼으니,
            이제 첫걸음이 아니라 <strong>두 걸음째</strong>를 디딜 차례입니다. 그런데 소개
            페이지를 만들다 보면 욕심이 생기죠 — 사진도 넣고 싶고, 좋아하는 사이트로 가는
            링크도 걸고 싶고, 취미를 목록으로 정리하고 싶고. 다음{' '}
            <Link to="/learn/lv1-html-links-images-lists"><strong>태그로 페이지에 살
            붙이기</strong></Link> 강좌에서 링크·이미지·목록 태그로 그 욕심을 전부
            채워 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
