// 이 파일이 하는 일: "태그로 페이지에 살 붙이기" 코스 — 글자만 있던 HTML 문서에
// 링크·이미지·목록·표·구역(div)·간단한 스타일을 얹어 '진짜 웹페이지'의 모양을 갖추게 하는
// 초급 정적 학습 페이지. 대상은 코딩을 처음 접하는 중·고등학생 — 앞 강좌에서 배운
// "태그로 문서를 만든다"에서 출발해, 속성(attribute)이라는 새 개념을 이번에 처음 소개한다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_LINK_BASIC = `<!-- a 태그: 누르면 다른 곳으로 데려다 주는 '문' -->
<a href="https://www.google.com">구글로 가기</a>

<!-- 뜯어보면 세 부분이에요:
     a          → 태그 이름 (anchor, 닻이라는 뜻)
     href="..." → 속성: 어디로 갈지 주소를 적는 칸
     구글로 가기  → 화면에 보이는 글자 (여기를 클릭!) -->`;

const CODE_ATTRIBUTE = `<!-- 속성(attribute) = 태그에 다는 '옵션 스티커' -->
<태그이름 속성이름="값">내용</태그이름>

<!-- 규칙 3가지만 기억해요:
     ① 여는 태그 안에만 쓴다  (닫는 태그엔 X)
     ② 이름="값" 모양이다     (등호와 따옴표!)
     ③ 여러 개 달 땐 띄어쓰기로 구분한다 -->
<a href="https://www.google.com" target="_blank">새 탭으로 구글</a>`;

const CODE_TARGET_BLANK = `<!-- target="_blank": 지금 페이지를 두고 '새 탭'에서 열기 -->
<a href="https://www.youtube.com">유튜브 (지금 탭에서 열림)</a>
<a href="https://www.youtube.com" target="_blank">유튜브 (새 탭에서 열림)</a>

<!-- 언제 새 탭? 내 페이지를 떠나 '딴 사이트'로 보낼 때 자주 씁니다.
     내 페이지 안에서 이동할 땐 보통 그냥 둬요. -->`;

const CODE_IMG_BASIC = `<!-- img 태그: 이미지를 페이지에 '꽂아 넣는' 태그 -->
<img src="cat.jpg" alt="창밖을 보는 고양이">

<!-- src = source(출처). 이미지 파일이 어디 있는지 주소
     alt = alternative(대체). 이미지가 안 나올 때 대신 보여 줄 설명

     특이한 점: img는 닫는 태그가 없어요!
     글자를 '감싸는' 게 아니라 그 자리에 '꽂히는' 태그라서요. -->`;

const CODE_IMG_PATH = `<!-- 경로 두 가지: 상대 경로 vs 절대 경로 -->

<!-- ① 상대 경로: '지금 이 HTML 파일 위치'에서 출발하는 길 안내 -->
<img src="cat.jpg" alt="고양이">            <!-- 같은 폴더의 cat.jpg -->
<img src="photos/dog.jpg" alt="강아지">     <!-- photos 폴더 안의 dog.jpg -->

<!-- ② 절대 경로: 인터넷 전체에서 통하는 '완전한 주소' -->
<img src="https://example.com/img/sky.jpg" alt="하늘 사진">

<!-- 비유: 상대 경로는 "우리 집에서 두 블록 직진",
     절대 경로는 "서울시 ○○구 ○○로 12" 같은 전체 주소예요. -->`;

const CODE_IMG_DEBUG = `이미지가 안 보일 때 점검 순서 (위에서부터!)

① 파일 이름 오타?   cat.jpg 인데 Cat.jpg 라고 썼나?
                    (대소문자·확장자 .jpg/.png 까지 정확히)
② 파일 위치가 맞나?  HTML 파일과 같은 폴더에 있나?
                    폴더 안이면 src에 "폴더이름/" 을 붙였나?
③ 따옴표·등호 빠짐?  src="cat.jpg" 모양이 온전한가?
④ alt는 나오나?     깨진 그림 자리에 alt 글자가 보이면
                    → 태그는 맞고 '주소'가 틀린 것!`;

const CODE_UL = `<!-- ul = unordered list, 순서 '없는' 목록 (● 점이 찍힘) -->
<ul>
  <li>떡볶이</li>
  <li>마라탕</li>
  <li>탕후루</li>
</ul>

<!-- ul은 '목록 전체'를 감싸는 바구니,
     li(list item)는 바구니에 담긴 '항목 하나하나'예요. -->`;

const CODE_OL = `<!-- ol = ordered list, 순서 '있는' 목록 (1. 2. 3. 번호가 붙음) -->
<ol>
  <li>물을 끓인다</li>
  <li>면과 스프를 넣는다</li>
  <li>3분 기다린다</li>
</ol>

<!-- 라면 끓이기처럼 '순서가 중요한' 내용은 ol,
     좋아하는 음식처럼 '순서가 상관없는' 내용은 ul! -->`;

const CODE_NESTED = `<!-- 목록 안에 목록: li 안에 ul을 통째로 넣으면 됩니다 -->
<ul>
  <li>좋아하는 게임
    <ul>
      <li>마인크래프트</li>
      <li>발로란트</li>
    </ul>
  </li>
  <li>좋아하는 음식
    <ul>
      <li>떡볶이</li>
    </ul>
  </li>
</ul>

<!-- 들여쓰기를 보세요 — 안쪽 목록이 한 칸 더 들어가 있죠?
     브라우저도 화면에서 한 단계 안으로 들여서 보여 줍니다. -->`;

const CODE_TABLE = `<!-- 표의 역할 분담: table(표 전체) > tr(행) > th/td(칸) -->
<table>
  <tr>                <!-- tr = table row, 가로 한 줄 -->
    <th>요일</th>      <!-- th = table header, 제목 칸 (굵게 나옴) -->
    <th>월</th>
    <th>화</th>
  </tr>
  <tr>
    <td>1교시</td>     <!-- td = table data, 내용 칸 -->
    <td>수학</td>
    <td>국어</td>
  </tr>
  <tr>
    <td>2교시</td>
    <td>영어</td>
    <td>체육</td>
  </tr>
</table>`;

const CODE_TABLE_THINK = `표를 만들기 전에 '행과 열'로 먼저 생각해 보기

        │ 월     화     수     ← 열(세로줄): 요일
────────┼─────────────────
 1교시  │ 수학   국어   과학
 2교시  │ 영어   체육   음악
   ↑
 행(가로줄): 교시

코드로 옮길 땐 "가로 한 줄 = tr 하나"만 기억하면 됩니다.
1행(요일 줄) → 첫 번째 tr, 2행(1교시 줄) → 두 번째 tr...
줄마다 칸 개수가 같아야 표가 반듯하게 나와요!`;

const CODE_DIV = `<!-- div = division(구역). 내용물을 담는 '투명한 상자' -->
<div>
  <h2>자기소개</h2>
  <p>안녕하세요, 웹을 배우는 중입니다.</p>
</div>

<div>
  <h2>좋아하는 것</h2>
  <ul>
    <li>음악 듣기</li>
    <li>게임</li>
  </ul>
</div>

<!-- div 자체는 화면에 아무것도 안 그려요. 그냥 묶기만 합니다.
     "그럼 왜 써?" → 다음 강좌에서 상자째로 색칠하고 옮기기 위해서! -->`;

const CODE_STYLE = `<!-- style 속성: 태그에 직접 "이렇게 보여 줘"라고 적는 옵션 -->
<p style="color: red;">이 문장은 빨간색!</p>
<p style="font-size: 30px;">이 문장은 큼직하게!</p>
<p style="color: blue; font-size: 24px;">파랗고 크게 — 세미콜론(;)으로 이어요</p>

<div style="background-color: yellow;">
  <p>div에 주면 상자 안 전체가 노란 배경!</p>
</div>

<!-- color(글자색) · font-size(글자 크기) · background-color(배경색)
     이 세 개만 갖고 놀아도 페이지 분위기가 확 바뀝니다. -->`;

const CODE_FINAL = `<!DOCTYPE html>
<html>
  <head>
    <title>내 최애 소개</title>
  </head>
  <body>
    <h1 style="color: purple;">내 최애를 소개합니다 🎤</h1>

    <div>
      <h2>누구냐면</h2>
      <p>내가 제일 좋아하는 가수를 소개할게요.</p>
      <img src="singer.jpg" alt="무대 위의 최애 가수">
      <img src="concert.jpg" alt="콘서트 응원봉 물결">
    </div>

    <div>
      <h2>왜 좋아하냐면</h2>
      <ul>
        <li>노래를 정말 잘한다</li>
        <li>무대 위에서 제일 빛난다</li>
        <li>팬들에게 다정하다</li>
      </ul>
    </div>

    <div>
      <h2>더 알아보기</h2>
      <a href="https://www.youtube.com" target="_blank">뮤직비디오 보러 가기</a>
      <a href="https://www.melon.com" target="_blank">노래 들으러 가기</a>
      <a href="https://www.google.com" target="_blank">최애 검색해 보기</a>
    </div>
  </body>
</html>`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '목록' },
  { n: 4, label: '표' },
  { n: 5, label: 'div 상자' },
  { n: 6, label: '스타일 맛보기' },
  { n: 7, label: '미니 실습' },
];

export default function Lv1HtmlLinksImagesListsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>🏗️ 태그로 페이지에<br />살 붙이기</h1>
        <p>
          지난 시간에 만든 페이지, 솔직히 좀 밋밋했죠? 글자만 있었으니까요. 오늘은 거기에{' '}
          <strong>링크·이미지·목록·표</strong>를 하나씩 얹어서, 여러분이 매일 보는{' '}
          <strong>'진짜 웹페이지'의 모양</strong>을 갖춰 봅니다. 마지막엔 내 최애를 소개하는
          페이지를 직접 완성해서 친구에게 자랑할 거예요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">실습: '내 최애 소개' 페이지 완성</span>
          <span className="chip">선수 지식: 태그가 뭔지 정도면 충분</span>
        </div>
      </div>

      <Section n={1} title="링크: 웹을 웹답게" sub="a 태그와 href — 그리고 '속성'이라는 새 개념">
        <p>
          웹(web)은 '거미줄'이라는 뜻이에요. 왜 거미줄이냐면, 전 세계 페이지들이{' '}
          <strong>링크</strong>로 서로 이어져 있어서죠. 파란 글씨를 누르면 다른 페이지로 휙 —
          이 당연한 동작이 없으면 웹은 그냥 문서 더미일 뿐입니다. 링크를 만드는 태그가{' '}
          <span className="icode">&lt;a&gt;</span>예요.
        </p>
        <Code>{CODE_LINK_BASIC}</Code>
        <p>
          그런데 여기서 <strong>처음 보는 모양</strong>이 하나 등장했어요.{' '}
          <span className="icode">href="..."</span> — 태그 이름 옆에 붙은 이{' '}
          <span className="icode">이름="값"</span> 짝을 <strong>속성(attribute)</strong>이라고
          부릅니다. 태그가 "나 링크야"라고 종류를 말한다면, 속성은 "그래서{' '}
          <strong>어디로</strong> 가는 링크인데?"라는 <strong>세부 옵션</strong>을 적는 칸이에요.
        </p>
        {/* 학습 포인트: 속성은 이 강좌 전체를 관통하는 개념 — src, alt, target, style 모두 속성이다 */}
        <Code>{CODE_ATTRIBUTE}</Code>
        <p>
          속성은 오늘 계속 나올 거예요. 이미지의 <span className="icode">src</span>, 새 탭의{' '}
          <span className="icode">target</span>, 스타일의 <span className="icode">style</span> —
          전부 속성입니다. 지금 이 <span className="icode">이름="값"</span> 모양에 익숙해지면
          오늘 수업의 절반은 끝난 거나 다름없어요.
        </p>
        <Code>{CODE_TARGET_BLANK}</Code>
        <div className="tip">
          <b>비유</b> 태그가 <strong>가전제품</strong>이라면 속성은{' '}
          <strong>다이얼과 버튼</strong>이에요. 선풍기(태그)는 그대로인데 바람 세기 다이얼(속성)을
          어떻게 돌리느냐에 따라 동작이 달라지죠. <span className="icode">&lt;a&gt;</span>라는
          제품에 <span className="icode">href</span> 다이얼로 목적지를,{' '}
          <span className="icode">target</span> 다이얼로 여는 방식을 정하는 겁니다.
        </div>
      </Section>

      <Section n={2} title="이미지 넣기" sub="src와 alt, 그리고 경로라는 길 찾기">
        <p>
          글자만 있는 페이지에 사진 한 장이 들어가는 순간, 분위기가 완전히 달라져요. 이미지를
          넣는 태그는 <span className="icode">&lt;img&gt;</span> — 그리고 방금 배운{' '}
          <strong>속성</strong>이 바로 활약합니다.
        </p>
        <Code>{CODE_IMG_BASIC}</Code>
        <p>
          <span className="icode">alt</span>는 "어차피 안 보이는데 대충 써도 되지 않나?" 싶지만,
          생각보다 중요해요. 이미지 주소가 틀렸을 때 <strong>대신 표시</strong>되고, 눈이 불편해
          화면 낭독기를 쓰는 사람에겐 <strong>그 이미지의 전부</strong>가 됩니다. "사진1" 말고
          "창밖을 보는 고양이"처럼, 그림을 말로 옮긴다는 느낌으로 적어 주세요.
        </p>
        <p>
          그런데 <span className="icode">src</span>에 적는 주소, 즉 <strong>경로(path)</strong>에는
          두 종류가 있어요. 여기서 많이들 헷갈리니 천천히 봅시다.
        </p>
        <Code>{CODE_IMG_PATH}</Code>
        <p>
          연습할 땐 <strong>이미지 파일을 HTML 파일과 같은 폴더에 두고 상대 경로로</strong> 시작하는
          게 제일 쉬워요. 그리고 이미지가 안 보이는 날은 반드시 옵니다(모두가 겪어요!). 그럴 때
          당황하지 말고 이 순서로 점검하세요.
        </p>
        {/* 학습 포인트: '안 될 때 점검 순서'를 미리 손에 쥐여 주면 좌절 대신 디버깅을 배운다 */}
        <Code>{CODE_IMG_DEBUG}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 일부러 <span className="icode">src</span>를{' '}
          <span className="icode">"cat123.jpg"</span>처럼 틀리게 적고 저장해 보세요. 깨진 그림
          아이콘과 함께 <span className="icode">alt</span>에 적은 글자가 나타날 거예요. '틀리면
          어떻게 되는지'를 미리 봐 두면, 진짜 문제가 생겼을 때 하나도 안 무섭습니다.
        </div>
      </Section>

      <Section n={3} title="목록 만들기" sub="ul과 ol — 점이냐 번호냐, 그것이 문제로다">
        <p>
          "좋아하는 음식: 떡볶이, 마라탕, 탕후루" — 이렇게 한 줄에 욱여넣는 것보다, 항목을
          하나씩 줄 세우면 훨씬 읽기 좋죠. 그게 <strong>목록(list)</strong>이고, HTML엔 목록
          태그가 <strong>두 종류</strong> 있습니다. 차이는 딱 하나 — <strong>순서가 중요한가?</strong>
        </p>
        <Code>{CODE_UL}</Code>
        <Code>{CODE_OL}</Code>
        <p>
          이름을 풀면 외우기 쉬워요. <span className="icode">ul</span> ={' '}
          <strong>u</strong>nordered <strong>l</strong>ist(순서 없는 목록, ● 점),{' '}
          <span className="icode">ol</span> = <strong>o</strong>rdered <strong>l</strong>ist(순서
          있는 목록, 1. 2. 3. 번호). 그리고 둘 다 안에 들어가는 항목은 똑같이{' '}
          <span className="icode">li</span>(<strong>l</strong>ist <strong>i</strong>tem)로 적습니다.
          바구니(<span className="icode">ul</span>/<span className="icode">ol</span>)만 다르고
          내용물(<span className="icode">li</span>)은 같은 셈이죠.
        </p>
        <p>
          한 발 더 — <strong>목록 안에 목록</strong>도 넣을 수 있어요. 분류 안에 세부 항목이
          있을 때 쓰는 <strong>중첩(nesting)</strong>이라는 기술입니다. 맛보기만 해 볼게요.
        </p>
        <Code>{CODE_NESTED}</Code>
        <div className="tip">
          <b>헷갈릴 땐 이 질문</b> "항목 순서를 뒤섞어도 뜻이 통하나?" — 통하면{' '}
          <span className="icode">ul</span>(좋아하는 음식은 순서 바꿔도 그만), 안 통하면{' '}
          <span className="icode">ol</span>(라면 끓이는 순서를 뒤섞으면 큰일). 이 질문 하나로
          평생 안 헷갈립니다.
        </div>
      </Section>

      <Section n={4} title="표로 정리하기" sub="table·tr·td·th의 역할 분담 — 행과 열로 생각하기">
        <p>
          시간표, 급식 메뉴, 게임 전적 — <strong>가로세로 칸으로 정리해야 보기 좋은</strong> 정보가
          있어요. 그럴 때 쓰는 게 <strong>표(table)</strong>입니다. 표는 태그 네 개가{' '}
          <strong>역할을 나눠</strong> 만들어요. 한꺼번에 보면 복잡하니, 역할부터 정리할게요.
        </p>
        <p>
          <span className="icode">table</span>은 표 <strong>전체를 감싸는 틀</strong>,{' '}
          <span className="icode">tr</span>(table row)은 <strong>가로 한 줄(행)</strong>,{' '}
          <span className="icode">td</span>(table data)는 줄 안의 <strong>칸 하나</strong>,{' '}
          <span className="icode">th</span>(table header)는 칸 중에서도{' '}
          <strong>제목 역할</strong>을 하는 칸(자동으로 굵게 나와요)입니다.
        </p>
        <Code>{CODE_TABLE}</Code>
        <p>
          표를 코드로 짤 때 요령은, 코드부터 치지 말고 <strong>종이에 행과 열을 먼저 그려 보는</strong>{' '}
          거예요. 그다음 "가로 한 줄 = <span className="icode">tr</span> 하나"라는 규칙으로
          위에서부터 한 줄씩 옮기면 됩니다.
        </p>
        {/* 학습 포인트: '행 단위로 옮긴다'는 사고 절차를 주면 중첩 태그가 외울 것에서 그릴 것으로 바뀐다 */}
        <Code>{CODE_TABLE_THINK}</Code>
        <div className="tip">
          <b>미니 도전</b> 위 시간표 코드에 <strong>'수요일' 열을 추가</strong>해 보세요. 어디를
          고쳐야 할까요? — 모든 <span className="icode">tr</span>마다 칸을 하나씩(첫 줄엔{' '}
          <span className="icode">th</span>, 나머지 줄엔 <span className="icode">td</span>) 더하면
          됩니다. "열 하나 = 모든 행에 칸 하나씩"이라는 감각, 이게 행과 열로 생각하는 연습이에요.
        </div>
      </Section>

      <Section n={5} title="상자에 담기: div와 구역 나누기" sub="화면엔 안 보이지만 제일 많이 쓰는 태그">
        <p>
          페이지에 내용이 늘어나면 슬슬 어수선해져요. 자기소개 따로, 좋아하는 것 따로, 연락처
          따로 — <strong>구역을 나누고 싶어지는</strong> 순간이 옵니다. 그때 쓰는 게{' '}
          <span className="icode">&lt;div&gt;</span>(division, 구역)예요. 관련 있는 내용물을
          한데 담는 <strong>투명한 상자</strong>라고 생각하면 됩니다.
        </p>
        <Code>{CODE_DIV}</Code>
        <p>
          코드를 저장하고 열어 보면... <strong>아무것도 안 달라져 보여요.</strong> 실망하지
          마세요, 그게 정상입니다! <span className="icode">div</span>는 화면에 뭘 그리는 태그가
          아니라 <strong>묶는</strong> 태그거든요. 이사할 때 물건을 상자에 담아 두면 옮기기도
          좋고 라벨 붙이기도 좋듯이, 내용을 상자에 담아 두면 <strong>나중에 꾸미고 배치할 때</strong>{' '}
          상자째로 다룰 수 있어요. 실제로 여러분이 보는 모든 웹사이트는 수십, 수백 개의{' '}
          <span className="icode">div</span> 상자로 짜여 있습니다.
        </p>
        <div className="tip">
          <b>페이지를 블록으로 보는 눈</b> 지금 자주 가는 사이트를 하나 떠올려 보세요. 위엔
          로고와 메뉴, 가운데엔 본문, 아래엔 회사 정보... 전부 <strong>네모난 블록</strong>으로
          나눠져 있죠? 웹 개발자는 페이지를 글자가 아니라 <strong>블록 덩어리</strong>로 봅니다.
          오늘부터 사이트를 볼 때 "여긴 상자가 몇 개일까?" 하고 눈으로 구역을 그려 보세요 —
          공짜로 하는 최고의 연습이에요.
        </div>
      </Section>

      <Section n={6} title="스타일 맛보기" sub="글자색 하나 바꿨을 뿐인데 — CSS 세계의 예고편">
        <p>
          여기까지 만든 페이지, 내용은 갖췄는데 전부 <strong>검은 글씨에 흰 배경</strong>이라
          심심하죠. 꾸미기의 세계를 살짝만 맛봅시다. 태그에 <span className="icode">style</span>{' '}
          <strong>속성</strong>(또 속성이에요!)을 달면 그 태그의 생김새를 바꿀 수 있어요.
        </p>
        <Code>{CODE_STYLE}</Code>
        <p>
          모양은 <span className="icode">꾸밀항목: 값;</span> — 여기서{' '}
          <strong>등호(=)가 아니라 콜론(:)</strong>인 걸 눈여겨보세요. 사실{' '}
          <span className="icode">style</span> 속성의 따옴표 안은 HTML이 아니라{' '}
          <strong>CSS</strong>라는 <strong>별개의 언어</strong>거든요. HTML이 페이지의{' '}
          <strong>뼈대와 내용</strong>을 맡는다면, CSS는 <strong>색·크기·배치 같은 겉모습</strong>을
          전담하는 언어예요. 오늘 본 건 그 거대한 세계의 문틈으로 살짝 들여다본 정도입니다.
        </p>
        <div className="tip">
          <b>지금은 이 정도면 충분</b> "내가 쓴 한 줄로 화면이 <strong>바뀐다</strong>" — 오늘
          가져갈 건 이 경험 하나예요. color 값에 <span className="icode">red</span> 대신{' '}
          <span className="icode">hotpink</span>, <span className="icode">gold</span>,{' '}
          <span className="icode">tomato</span> 같은 이름도 넣어 보세요(진짜 있는 색이에요!).
          CSS를 제대로 배우는 건 다음 과정의 몫이니, 지금은 마음껏 알록달록하게 놀면 됩니다.
        </div>
      </Section>

      <Section n={7} title="미니 실습: 최애 소개 페이지" sub="오늘 배운 걸 전부 한 페이지에">
        <p>
          이제 오늘의 주인공, <strong>실습</strong>입니다. 여러분이 제일 좋아하는 것 —
          가수든, 게임이든, 음식이든, 축구팀이든 — 하나를 골라 <strong>소개 페이지</strong>를
          만들어 보세요. 조건은 딱 네 가지입니다.
        </p>
        <p>
          <strong>① 이미지 2장</strong> (<span className="icode">img</span> +{' '}
          <span className="icode">src</span>·<span className="icode">alt</span>) ·{' '}
          <strong>② 링크 3개</strong> (<span className="icode">a</span> +{' '}
          <span className="icode">href</span>, 새 탭으로!) · <strong>③ 목록 1개</strong>{' '}
          (<span className="icode">ul</span> 또는 <span className="icode">ol</span>) ·{' '}
          <strong>④ 구역은 <span className="icode">div</span>로</strong> 나누기. 스타일은
          자유 — 원하는 만큼 알록달록하게.
        </p>
        <Code>{CODE_FINAL}</Code>
        <p>
          위 코드는 <strong>예시</strong>일 뿐이에요. 그대로 베끼면 재미없죠 — 주제도, 목록
          내용도, 링크도 전부 <strong>여러분의 최애</strong>로 바꾸세요. 이미지는 좋아하는 사진
          2장을 HTML 파일과 <strong>같은 폴더</strong>에 넣고 파일 이름을{' '}
          <span className="icode">src</span>에 적으면 됩니다(섹션 2에서 배운 상대 경로!). 안
          보이면? 당황하지 말고 <strong>점검 순서 ①→④</strong>를 따라가면 반드시 잡혀요.
        </p>
        {/* 학습 포인트: 완성 경험 + 보여 주기(공유)까지가 실습의 한 세트 — 만들고 끝나면 절반만 한 것 */}
        <div className="tip">
          <b>마지막 단계: 자랑하기</b> 완성했다면 브라우저에 띄운 화면을 <strong>친구나 가족에게
          꼭 보여 주세요.</strong> "이거 내가 만든 거야"라고 말하는 순간의 기분 — 그게 개발자들이
          이 일을 계속하는 이유 중 하나거든요. 친구가 "이 링크 눌러도 돼?"라고 물으면, 여러분은
          이미 <strong>사용자가 있는 페이지</strong>를 만든 겁니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🏗️ 여기까지 왔다면</h3>
          <p className="muted">
            글자뿐이던 문서가 링크로 세상과 이어지고, 이미지가 박히고, 목록과 표로 정리되고,
            div 상자로 구역까지 나뉘었어요. 무엇보다 <strong>속성(attribute)</strong>이라는
            개념을 손에 넣었죠 — <span className="icode">href</span>,{' '}
            <span className="icode">src</span>, <span className="icode">style</span> 전부 그
            하나의 문법이었으니까요. 그런데 문득 궁금하지 않나요? 내가 쓴 이 태그들을{' '}
            <strong>브라우저는 대체 어떻게 읽어서</strong> 화면으로 바꿔 내는 걸까요? 다음{' '}
            <Link to="/learn/lv1-how-browsers-work"><strong>브라우저는 내 코드를 어떻게
            읽을까</strong></Link> 강좌에서, 우리가 만든 페이지가 화면이 되기까지의 여정을
            따라가 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
