AI와 같이 만든 HTML 기본 구조 학습 문제

 
안녕하세요 찐망고입니다.
 
하드 코딩을 하지 않는 이시기에 굳이 HTML도 이전처럼 수업을 할 필요가 있나 싶지만 
아주 기초적인 레벨이고 검수는 할 정도의 실력을 키우자는 의미로
기본구조의 과정을 이틀내로 복습까지 끝내봤는데
그래도 기본 문제는 풀어봐야 할 거 같아 만들어본 문제입니다.
 
재미나이랑 클로드를 이용했고
혹시 문제 파일이 아니라 프롬프트가 필요하다면 댓글남겨 주세요!
 

HTML 기본 구조 학습 문제

HTML 기본 구조 학습 문제

HTML 기본 구조 학습 문제

HTML 기본 구조 학습 문제

 
문제 패턴은 이런 형태고 html파일은 두개이고 20문제씩 풀 수 있습니다.
 
요즘은 모든 태그를 무작정 외우는 시대는 아닙니다.
하지만 화면을 보고 구조적인 아웃라인 설계능력과 검수는 여전히 프론트엔드/퍼블리싱의
기본기이자 실력의 차이를 만든다 생각합니다.
 
이번 퀴즈 세트는 단순 문법 암기를 넘어,
실무에서 시맨틱 마크업을 할 때 반드시 지켜야 하는
엄격한 제약 규칙들(예: main 태그의 유일성, section 내 제목 필수 권장 등)과
웹 접근성(aria-label, sr-only 기법)을 녹여내어 탄탄하게 구성했습니다. 
 
HTML 기본 구조를 가볍고 빠르게 리마인드하고 싶으신 분들은
첨부된 파일(혹은 아래 링크)을 통해 가볍게 테스트해 보세요! (PC에서만가능)

html_quiz1.html

0.01MB

html_quiz2.html

0.02MB

 
 
다운받으신 .html 파일을 PC에서 더블클릭해 브라우저로 열면,
별도의 프로그램 설치 없이 즉시 동적인 퀴즈 인터페이스와 해설 가이드를 확인하실 수 있습니다!

 

모바일은 여기!

 

See the Pen html_quiz1 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

See the Pen html_quiz2 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.