# HTML 4개 같이 만들기 — 학생용 프롬프트

수업 주소: `https://eazysolve.com/edu`

## 실습 1 — 프로필 카드

```text
index.html 하나로 대학생 프로필 카드를 만들어줘.
화면 가운데 카드가 있고 이름, 전공, 한 줄 소개, 관심사 태그 3개가 보여야 해.
"인사하기" 버튼을 누르면 반가운 메시지가 뜨게 해줘.
CSS와 JavaScript는 HTML 안에 넣고 휴대폰에서도 보기 좋게 만들어줘.
완성 후 내가 바꾸기 쉬운 문구와 색상 위치를 알려줘.
```

## 실습 2 — 동아리 모집

```text
대학생 동아리 신입 모집 페이지를 index.html 하나로 만들어줘.
첫 화면에는 동아리 이름, 짧은 소개, "가입하기" 버튼을 넣어줘.
아래에는 주요 활동 카드 3개, 모집 일정, 문의 방법을 넣어줘.
가입 버튼을 누르면 모집 일정 구역으로 부드럽게 이동하게 해줘.
밝고 활동적인 분위기로 만들고 휴대폰에서도 카드가 한 줄로 잘 보여야 해.
CSS와 JavaScript는 HTML 안에 포함해줘.
```

## 실습 3 — 점심 랜덤 뽑기

```text
index.html 하나로 "오늘 뭐 먹지?" 랜덤 점심 뽑기를 만들어줘.
사용자가 쉼표로 구분해서 메뉴 후보를 입력하고 "뽑기" 버튼을 누르면 그중 하나를 무작위로 크게 보여줘.
입력이 비어 있으면 안내를 보여주고 결과가 나올 때 짧은 애니메이션을 넣어줘.
CSS와 JavaScript는 HTML 안에 넣고 모바일에서 사용하기 편하게 만들어줘.
```

## 실습 4 — 미니 퀴즈

```text
index.html 하나로 객관식 미니 퀴즈를 만들어줘.
문제는 3개이고 한 번에 한 문제만 보여줘. 각 문제에는 선택지 3개가 있어야 해.
선택하면 정답 또는 오답을 바로 알려주고 "다음 문제" 버튼을 보여줘.
마지막에는 3점 만점 점수와 점수별 메시지, "다시 시작" 버튼을 보여줘.
문제 데이터는 JavaScript 위쪽에 모아 두어 내가 쉽게 바꿀 수 있게 해줘.
모바일에서도 버튼을 누르기 쉽게 만들어줘.
```

## 공통 오류 해결

```text
현재 index.html에서 문제가 발생했어.
재현 방법: [무엇을 눌렀는지]
실제 결과: [무슨 일이 생겼는지]
원하는 결과: [어떻게 되어야 하는지]
오류 메시지: [있으면 붙여넣기]
원인을 먼저 설명하고 필요한 부분만 수정해줘. 이미 작동하는 기능과 디자인은 유지해줘.
```