[
  {
    "courseSlug": "htmlcss",
    "question": "이 코스에서는 웹페이지의 세 가지 재료를 사람에 비유합니다. CSS는 무엇에 해당하나요?",
    "option1": "골격 — 몸의 구조를 잡아 준다",
    "option2": "옷과 화장 — 겉모습을 꾸며 준다",
    "option3": "근육 — 몸을 움직이게 한다",
    "option4": "신경 — 자극에 반응하게 한다",
    "answerIndex": 1,
    "explanation": "섹션 1 '웹페이지의 정체'에서 HTML은 골격, CSS는 옷과 화장, JS는 근육에 비유합니다. 같은 뼈대(HTML)에 옷(CSS)만 갈아입혀도 완전히 다른 사이트처럼 보인다고 설명해요."
  },
  {
    "courseSlug": "htmlcss",
    "question": "박스 모델의 택배 상자 비유에서 '뽁뽁이'(물건과 상자 벽 사이의 완충재)에 해당하는 CSS 속성은 무엇인가요?",
    "option1": "margin — 옆 상자와의 간격",
    "option2": "border — 상자의 벽",
    "option3": "padding — 벽과 내용 사이의 안쪽 여백",
    "option4": "box-shadow — 상자가 떠 있는 느낌",
    "answerIndex": 2,
    "explanation": "섹션 4 박스 모델에서 content는 물건, padding은 뽁뽁이, border는 상자 벽, margin은 옆 상자와의 간격에 비유합니다. 뽁뽁이는 상자 '안'에 있으므로 안쪽 여백인 padding이에요."
  },
  {
    "courseSlug": "htmlcss",
    "question": "우리 플랫폼은 컴포넌트 코드를 한 줄도 바꾸지 않고 다크 모드를 지원합니다. 코스에서 설명한 그 원리는 무엇인가요?",
    "option1": "모든 색이 :root 변수에 모여 있어, @media 블록이 변수 값만 갈아끼우기 때문",
    "option2": "다크 모드 전용 CSS 파일을 페이지마다 하나씩 따로 만들어 두었기 때문",
    "option3": "JS가 화면의 모든 색 속성을 찾아서 어두운 색으로 바꿔 주기 때문",
    "option4": "브라우저가 페이지의 모든 색을 자동으로 반전시켜 주기 때문",
    "answerIndex": 0,
    "explanation": "섹션 5에서 global.css의 :root에 색 '이름표'(--bg, --ink, --primary)를 붙여 두고, @media (prefers-color-scheme: dark)에서 이름표의 값만 바꿔치기하면 사이트 전체가 옷을 갈아입는다고 설명합니다."
  },
  {
    "courseSlug": "htmlcss",
    "question": "겉보기엔 <div onClick=...>도 클릭이 됩니다. 그런데 코스에서 \"누르는 것은 반드시 <button>\"이라고 강조하는 이유는 무엇인가요?",
    "option1": "div는 클릭 이벤트를 처리하는 속도가 button보다 훨씬 느려서",
    "option2": "div에 onClick을 달면 화면에 아예 표시되지 않아서",
    "option3": "키보드 Tab으로 접근할 수 없고 스크린리더도 버튼인 줄 몰라서",
    "option4": "button 태그가 아니면 CSS 스타일을 적용할 수 없어서",
    "answerIndex": 2,
    "explanation": "섹션 2의 '클릭은 button에게' 경고 내용입니다. div에 onClick을 달면 키보드 Tab으로 접근이 안 되고 스크린리더도 버튼인 줄 모르기 때문에, 우리 코드 리뷰에서도 자주 나오는 지적이라고 해요."
  },
  {
    "courseSlug": "htmlcss",
    "question": "수습 티켓 FE-06 상황입니다. 폰(화면 폭 640px 이하)에서 두 칸짜리 카드 바둑판이 깨져서, 좁은 화면에서만 한 칸으로 바꾸려 합니다. 코스 내용대로라면 어떻게 고쳐야 할까요?",
    "option1": ".card-grid에 display: flex와 align-items: center를 추가한다",
    "option2": ":root의 --primary 변수 값을 더 밝은 색으로 바꾼다",
    "option3": ".card-grid의 padding과 margin을 크게 늘려 간격을 조정한다",
    "option4": "@media (max-width: 640px) 블록 안에서 grid-template-columns를 1fr로 바꾼다",
    "answerIndex": 3,
    "explanation": "섹션 7 반응형에서 @media (max-width: 640px)는 화면 폭이 640px 이하일 때만 CSS를 적용하는 조건문이고, 그 안에서 grid-template-columns: 1fr로 두 칸 바둑판을 한 칸으로 접는 예시를 그대로 보여 줍니다."
  }
]
