3. 이미지 분류 · 07 mnist.py
mnist.py

파일 업로드 폼의 최소 구성

무엇을 배울까요?

  • 파일 업로드가 HTML에서 어떤 태그 조합으로 만들어지는지
  • action/method/enctype가 전송 방식에 어떤 영향을 주는지
  • ‘파일 선택 → 제출 → 서버로 전송’ 흐름을 한 눈에 잡기

이해하기 쉬운 예시

  • 과제 파일을 선택해서 제출하는 화면을 떠올리면 딱 이 구조예요.
01

파일 업로드 폼

이 섹션에서 하는 일

웹에서 파일을 선택하고, submit으로 서버(uploader)로 전송하는 최소 구조를 확인해요.

코드(원문 그대로 + 오른쪽 줄주석 해설)
<!DOCTYPE html>
# 문서가 HTML5 문서임을 선언해요(브라우저가 해석 모드를 결정).
<html lang="en">
# HTML 문서 시작이고, lang은 문서 기본 언어 힌트예요.
<body>
# 화면에 보이는 내용이 들어가는 본문(body) 시작이에요.
<form action = "uploader" method = "post" enctype = "multipart/form-data">
# 파일을 서버로 보내는 폼이에요. action은 목적지(uploader), method=post는 데이터를 본문으로 보내요. enctype은 파일 전송에 필수예요.
<input type = "file" name = "file" >
# 파일 선택 버튼을 만드는 입력창이에요. name='file'로 서버에서 이 이름으로 파일을 받아요.
<input type = "submit" value="확인">
# 제출 버튼이에요. 누르면 폼이 전송돼요(여기서는 '확인'이라는 글자).
</form>
# 폼 태그를 닫아서 전송 범위를 끝내요.
</body>
# body 끝.
</html>
# html 문서 끝.
예상 출력
(브라우저 화면)
- 파일 선택 버튼
- 확인(제출) 버튼
출력 해설(왜 이게 나오나요?)

이 코드는 콘솔에 무언가를 출력하는 게 아니라, 브라우저에 ‘파일 선택 UI’를 만들어줘요. 파일을 고르고 확인을 누르면, form의 action(uploader)로 POST 요청이 나가면서 파일이 함께 전송돼요.

핵심 한 줄