📋🍔

HTML Form & UI 기획

3주차: 사용자로부터 데이터 입력받기

오늘의 핵심 미션

1. 지난주 HTML 복습 완벽 마스터

2. 팀원들과 친해지고 나의 HTML 솜씨 뽐내기

3. 학교 근처 맛집을 위한 패스트오더 UI 설계하기

Step 1. 뇌풀기 Quiz 타임 🧠

지난 시간 플립러닝과 과제로 배운 HTML 구조, 얼마나 기억하나요?

QuizN 40문항

HTML 스피드 퀴즈

태그, 속성, 문서 구조 등 핵심 개념을 다집니다.
빠르고 정확하게 정답을 맞히는 것이 관건! 스마트폰을 준비해주세요.
(※ 출결 근거자료 확보를 위해 반드시 본명으로 접속 부탁드립니다)

예상 소요 시간

약 20~30분 진행

Step 2. 팀빌딩: 조별 자리 배치 안내

짐을 챙겨서 화면의 지정된 조별 좌석으로 신속하게 이동해 주세요!

칠판 / 스크린 (교탁)
1조
3조
중앙 통로
2조
4조
마지막 줄 5조

Step 3. 자기소개 공유 및 대표 선정

조별 발표 진행 가이드라인

  • 발표 순서 정하기 생일이 오늘과 가장 가까운 사람부터 시작해서 시계 방향으로 돌아갑니다.
  • 무엇을 발표하나요? 지난주 과제였던 '나의 자기소개 HTML 웹페이지'를 화면에 띄우고 1분 내외로 핵심만 재미있게 설명합니다.

조별 대표 선정 타이틀 (택 1)

모든 공유가 끝나면 아래 기준 중 하나로 단 한 명의 대표 학생을 선정해 주세요.

👨‍💻 태그 만수르 상
배운 HTML 태그(table, ul/ol, a, img 등)를 있는 대로 꽉꽉 눌러 담아 코드를 가장 길고 화려하게 짠 사람!
🗣️ TMI 장인 상
"이런 것까지 적었다고?" 싶을 정도로 자기소개 내용이 가장 독특하고 재미있어서 반 전체가 꼭 봐야 하는 사람!
🔥 꺾이지 않는 마음 상
비록 결과물은 삐뚤빼뚤하거나 이미지가 엑스박스가 떴을지라도, 이것저것 시도해본 도전 정신이 아름다운 사람!

Step 4. 패스트오더 아이디에이션

📝 HTML Form 이란?

사용자가 웹 사이트로 정보를 보낼 수 있게 해주는 핵심 요소입니다. 로그인, 회원가입, 그리고 오늘 우리가 만들 상품 주문 페이지에 필수적이죠!

<input type="text"> (글자 입력)
<input type="radio"> (단일 선택)
<input type="checkbox"> (다중 선택)
<select> (드롭다운)
조별 회의 10분

학교 근처 맛집 패스트오더 만들기

조별로 명지전문대 근처의 맛집(음식점 혹은 카페)을 하나 선정하고, 해당 가게의 메뉴를 주문할 수 있는 폼(Form)을 기획합니다. 학식도 환영합니다!

식당 선정 기준: '도보'로 갈 수 있는 곳

※ 교수님 피셜: "저는 2시간 걸어서 집까지 퇴근한 적이 있습니다. 본인 체력만 허락한다면 2시간 거리 맛집도 '학교 근처'로 흔쾌히 인정해 드립니다. 🏃‍♂️💨"

Step 5. 종이 위에 UI 스케치 ✏️

회의한 내용을 바탕으로 실제 주문 화면을 스케치합니다. (15분 진행)

필수 제약 조건

그냥 빈 네모칸만 그리지 마세요. 오늘 배운 Form 태그들이 화면에 어떻게 배치될지 구체적으로 스케치해야 합니다.
다음 4가지 요소 중 최소 3가지 이상 필수 포함!

  • 단답/장문 텍스트 (요청사항 등)
  • 라디오 버튼 (사이즈 M/L 택1 등)
  • 체크박스 (추가 토핑 다중선택 등)
  • 셀렉트 박스 (수령 시간 선택 등)
명지 햄버거 패스트오더
1. 세트 선택 (Radio)
2. 추가 토핑 (Checkbox)
3. 요청 사항 (Textarea)
피클 빼주세요...
주문하기

예시 와이어프레임 (Wireframe)

🚀 오늘의 개별 과제

D-7: 다음 주 수업 전까지!

"스케치를 실제 코드로 생명 불어넣기"

오늘 조원들과 함께 짱구를 굴려 만든 멋진 종이 스케치, 다들 사진 찍어 가셨죠?
집에 돌아가서 배운 HTML Form 태그들을 이용해 직접 웹 브라우저에 렌더링해 오는 것이 이번 주 과제입니다.

  • VS Code를 열고 HTML 기본 뼈대 잡기
  • form, input, select 등 알맞은 태그 배치하기
  • 완성된 결과물과 코드를 마크다운으로 작성해 PDF로 제출!

🤔 "만들어보니 어떤가요? 디자인이 너무 안 예쁘지 않나요?"

"주문 버튼을 눌러도 아무 일도 안 일어나죠?"

그 답답함을 해결하기 위해, 다음 주부터 드디어 CSS를 배웁니다!
과제 제출 형식 Level Up! 🌟

개발자의 우아한 글쓰기, 마크다운(Markdown)

과제 제출할 때 스크린샷 캡처하고 복붙하느라 힘드셨죠?

기존 방식 (비효율)

VS Code 캡처 -> 워드나 한글에 붙여넣기 -> 레이아웃 깨짐 -> 코드 복사 불가능... 😱

"교수님도 코드 긁어서 실행해 볼 수가 없어요!"

마크다운 방식 (프로페셔널)

가볍고, 빠르며, 코드를 예쁘게 보여주는 텍스트 기반 포맷. GitHub, Notion 등 현업에서 100% 사용합니다.

"오늘부터는 마크다운 작성 후 PDF로 제출받습니다!"

마크다운 핵심 문법 딱 4가지!

homework.md (이렇게 쓰면)

# 1. 제목입니다 (H1)
## 소제목입니다 (H2)

- 목록 1번
- 목록 2번

가장 중요한 `코드 블록`은 백틱(`) 3개로.
```html
<input type="text">
```

이미지는 느낌표(!)와 괄호로 삽입합니다.
![스크린샷](image.png)

Preview (이렇게 보입니다)

1. 제목입니다 (H1)

소제목입니다 (H2)

  • 목록 1번
  • 목록 2번

가장 중요한 코드 블록은 백틱(`) 3개로.

html <input type="text">

이미지는 느낌표(!)와 괄호로 삽입합니다.


스크린샷 이미지 표시

전용 에디터 추천: MarkText 📝

VS Code로도 작성 가능하지만, 초보자도 쉽게 쓸 수 있는 전용 무료 프로그램을 추천합니다.

1. 무료 다운로드

공식 GitHub 저장소에 접속하여 다운로드 페이지로 이동합니다.

github.com/marktext/marktext

우측 하단의 Releases (또는 Downloads) 항목 클릭 후, 자신의 운영체제(Windows/Mac)에 맞는 설치 파일 다운로드!

2. 꿀팁 & PDF 내보내기

마법의 붙여넣기

화면을 캡처한 후, MarkText에서 Ctrl + V 를 누르면 이미지 파일 자동 생성과 동시에 마크다운 문법이 바로 작성됩니다!

과제 제출용 PDF 저장

좌측 상단 3줄 햄버거 메뉴(≡) 클릭
➡️ File ➡️ Export ➡️ PDF 클릭!