순수 HTML5로 만드는 대표기업 서비스

나는 HTML5를 처음 배우는 학생이야.
이력서를 HTML로 만들고 싶어.
<h1>~<h6>, <ul>, <table> 태그를 사용해서
이름, 경력, 기술스택, 학력을 포함한
기본 이력서 구조를 만들어줘.
각 태그가 왜 사용됐는지 주석으로 설명해줘.

HTML5 시맨틱 태그를 사용해서
기술 블로그 아티클 페이지를 만들어줘.

포함할 것:
- <article> 태그로 본문 감싸기
- <header>에 제목, 작성자, 날짜
- <blockquote>로 인용구
- <nav>로 목차 (앵커 링크로 본문 이동)
- <footer>에 태그, 관련 글 링크

meta description과 Open Graph 태그도 추가해줘.
SEO에 유리한 heading 구조를 설명해줘.

삼성전자 개인정보처리방침 같은
대규모 법률 문서 페이지의 HTML5 구조를 설계해줘.

요구사항:
- 목차(<nav>)에서 클릭하면 해당 조항으로 스크롤
- 각 조항은 <section id="article-1"> 형태
- 검색 엔진이 각 조항을 개별 인덱싱 가능하도록
- 인쇄 시 레이아웃이 깨지지 않는 구조
- JSON-LD 구조화 데이터 (WebPage 스키마)
- 접근성: 스크린 리더로 목차에서 조항 탐색 가능

실제 기업이 사용하는 수준의 마크업을 만들어줘.

HTML5 폼 태그로 간단한 문의 양식을 만들어줘.

입력 필드:
- 이름 (text, required)
- 이메일 (email, required)
- 메시지 (textarea)
- 제출 버튼

required 속성으로 필수 입력을 설정하고
placeholder로 입력 안내를 넣어줘.
자바스크립트 없이 브라우저 기본 유효성 검사만 사용해줘.

HTML5 폼으로 회원가입 양식을 만들어줘.
네이버, 카카오처럼 브라우저 기본 유효성 검사를 최대한 활용해줘.

입력 필드:
- 이름 (text, required, minlength=2)
- 이메일 (email, required) → @빠지면 자동 경고
- 비밀번호 (password, minlength=8, pattern으로 영문+숫자 강제)
- 휴대폰 (tel) → 모바일에서 숫자 키패드
- 생년월일 (date)
- 성별 (radio: 남/여/선택안함)
- 관심 분야 (checkbox: 프론트엔드/백엔드/AI/보안)
- 약관 동의 (checkbox, required)
- 자기소개 (textarea, maxlength=500)

각 input type이 모바일/데스크톱에서
어떻게 다르게 동작하는지 주석으로 설명해줘.
<datalist>로 이메일 도메인 추천도 추가해줘.

HTML5로 3단계 설문조사 페이지를 설계해줘.

1단계: 기본 정보 (이름, 이메일, 나이대)
2단계: 선호도 조사 (라디오, 체크박스, range 슬라이더)
3단계: 자유 의견 (textarea + 파일 첨부)

접근성 요구사항:
- 모든 input에 <label> 연결 (for/id 매칭)
- fieldset + legend로 그룹화
- aria-describedby로 입력 힌트 제공
- 탭 순서가 논리적
- 에러 시 어떤 필드가 잘못됐는지 명확

스크린 리더로 읽었을 때 자연스러운 순서로 설계해줘.

HTML5 <video>와 <audio> 태그로
간단한 미디어 플레이어 페이지를 만들어줘.

포함할 것:
- 비디오: controls, poster(썸네일), 자막(track)
- 오디오: controls, 여러 형식 지원(mp3, ogg)
- 이미지 갤러리: <figure>와 <figcaption>

controls 속성이 자동 생성하는
재생/일시정지/볼륨 조절을 설명해줘.

HTML5로 유튜브 영상 페이지 구조를 만들어줘.

구조:
- <video> 메인 플레이어 (poster + controls + preload)
- <track>으로 자막 (한국어/영어)
- 영상 제목, 조회수, 날짜 (<time> 태그)
- 영상 설명 (<details>/<summary>로 접기/펼치기)
- 관련 영상 목록 (사이드바, <aside>)

<source>로 WebM + MP4 두 형식을 제공해서
모든 브라우저에서 재생 가능하게 해줘.

HTML5로 넷플릭스 수준의 미디어 페이지 구조를 설계해줘.

최적화 요구사항:
- <video preload="metadata"> (데이터 절약)
- <source>로 해상도별 파일 분리
- loading="lazy"로 이미지 지연 로딩
- <picture> + srcset으로 반응형 썸네일
- 접근성: 자막(track), 오디오 설명
- 구조화 데이터: VideoObject 스키마 (JSON-LD)

Core Web Vitals LCP 최적화도 설명해줘.

HTML5의 <details>와 <summary> 태그로
FAQ 페이지를 만들어줘.

질문 5개를 포함하고
클릭하면 답변이 펼쳐지는 구조로.

자바스크립트 없이 HTML만으로
접기/펴기가 되는 원리를 설명해줘.

HTML5로 애플처럼 제품 사양 비교 페이지를 만들어줘.

구조:
- <table>로 제품 3개 비교 (스펙 행렬)
- <details>로 '상세 사양 더 보기' 접기/펼치기
- <dialog>로 '빠른 보기' 모달 창
- <meter>로 배터리 용량 시각화
- <progress>로 성능 점수 표시

각 HTML5 태그가 자바스크립트 없이
자체적으로 제공하는 기능을 설명해줘.

자바스크립트 없이 HTML5 태그만으로
최대한 인터랙티브한 제품 랜딩 페이지를 설계해줘.

활용할 HTML5 요소:
- <details>/<summary>: FAQ + 기능 설명 아코디언
- <dialog>: 문의하기 모달
- <meter>: 고객 만족도 표시
- <progress>: 프로젝트 진행률
- <datalist>: 검색 자동완성
- <input type="range">: 가격 필터 슬라이더
- <input type="color">: 색상 커스터마이저
- contenteditable: 실시간 편집 데모

각 요소가 브라우저에서 기본 제공하는 인터랙션을
최대한 활용하는 구조로 설계해줘.
왜 이 방식이 자바스크립트보다 빠르고 안정적인지 설명해줘.

1. 역할: 나는 [HTML5를 배우는 학생]이야
2. 맥락: [어떤 서비스를 만들고 있는지]
3. 지시: [구체적으로 무엇을 해달라는지]
4. 형식: [코드 + 주석 / 비교표 / 단계별 설명]

    <label for="email">이메일 *</label>
    <input type="email" id="email" required>
    <!-- type=email → @빠지면 자동 경고 -->

    <label for="phone">연락처</label>
    <input type="tel" id="phone">
    <!-- type=tel → 모바일 숫자 키패드 -->

    <label for="date">상담일</label>
    <input type="date" id="date">
    <!-- type=date → 브라우저 달력 UI -->

    <label for="msg">메시지</label>
    <textarea id="msg" maxlength="500"></textarea>

    <button type="submit">보내기</button>
  </form>
</section>

<!-- 3. 미디어: 비디오 + 오디오 -->
<section id="media">
  <h2>미디어</h2>
  <figure>
    <video controls poster="thumb.jpg" preload="metadata">
      <source src="v.webm" type="video/webm">
      <source src="v.mp4" type="video/mp4">
      <track src="sub-ko.vtt" kind="subtitles" srclang="ko" label="한국어" default>
    </video>
    <figcaption>HTML5 비디오 — 플러그인 불필요</figcaption>
  </figure>
  <audio controls>
    <source src="a.mp3" type="audio/mpeg">
  </audio>
</section>

<!-- 4. 인터랙티브: FAQ + 모달 + 시각화 -->
<section id="faq">
  <h2>FAQ</h2>
  <details>
    <summary>HTML5만으로 서비스를 만들 수 있나요?</summary>
    <p>네! 이 페이지가 증거입니다.</p>
  </details>
  <details>
    <summary>JS 없이 폼 검증이 되나요?</summary>
    <p>type=email, required, pattern이 자동 검사합니다.</p>
  </details>
  <details>
    <summary>모바일에서도 되나요?</summary>
    <p>type=tel은 숫자 키패드, type=date는 달력을 자동 표시합니다.</p>
  </details>

  <p>만족도: <meter value="0.85" min="0" max="1">85%</meter></p>
  <p>진행률: <progress value="60" max="100">60%</progress></p>
</section>