웹 개발 입문
글자 입력받기선택하게 하기숫자와 날짜 입력버튼을 누르면 무슨 일이 일어나냥연습하기 Level 1미니 프로젝트 · BMI 계산기
놀면 뭐 하니,
그냥 하는거야.

숫자와 날짜 입력

코딩냥

글자와 선택은 배웠으니, 이제 숫자와 날짜다냥. 나이, 키, 예약 날짜… 이런 걸 받을 때 쓰는 위젯이다냥. 특히 슬라이더는 마우스로 쓱 움직이는 재미가 있다냥!

오늘의 학습 목표

  • st.slider 로 막대를 밀어 숫자를 고른다.
  • st.number_input 으로 숫자를 직접 입력받는다.
  • st.date_input 으로 날짜를 고른다.
실습 준비·필요한 패키지와 버전
  • streamlit1.40 이상파이썬 코드로 웹 화면 만들기

설치하기 — 터미널에 그대로 붙여넣기

pip install "streamlit>=1.40"

설치 확인 — 버전 번호가 찍히면 성공

python -c "import streamlit; print(streamlit.__version__)"

위 버전은 최소 기준이라, 더 높은 버전이 깔려 있으면 그대로 써도 된다냥. 버전이 안 찍히고 에러가 나면 설치가 안 된 거라 설치 명령을 다시 실행해보자냥.

1단계 · 막대를 밀어서 — slider

코딩냥

slider 는 막대를 좌우로 밀어서 숫자를 고르는 위젯이다냥. 최소·최대값을 정해두니까, 그 범위를 벗어난 값은 아예 고를 수가 없다냥. 안전하다냥!

import streamlit as st

age = st.slider("나이를 골라주세요", 0, 100, 20)
#                 설명            최소 최대 시작값

st.write("고른 나이: " + str(age) + "살")

숫자 세 개의 뜻

st.slider("나이", 0, 100, 20) 에서

  • 0 : 최솟값
  • 100 : 최댓값
  • 20 : 처음에 놓여 있는 값

뒤의 시작값은 생략해도 된다냥. 그럼 최솟값에서 시작한다냥!

2단계 · 직접 숫자 치기 — number_input

코딩냥

슬라이더는 대충 고를 때 좋지만, "정확히 173" 처럼 딱 떨어지는 값은 직접 치는 게 편하다냥. 그럴 때 number_input 이다냥. 옆의 + - 버튼으로 조금씩 조절할 수도 있다냥.

import streamlit as st

height = st.number_input("키(cm)를 입력하세요", min_value=0, max_value=250, value=170)

st.write("입력한 키: " + str(height) + "cm")

슬라이더 vs 숫자 입력

  • 범위 안에서 대충 고르면 됨 → slider
  • 정확한 값을 꼭 쳐야 함 → number_input

키·몸무게처럼 정확해야 하는 건 number_input, 만족도(1~5)처럼 대략 고르는 건 slider 가 어울린다냥!

3단계 · 날짜 고르기 — date_input

코딩냥

예약, 생일, 기념일… 날짜를 받을 땐 date_input 이다냥. 달력이 뿅 하고 나와서 날짜를 콕 찍으면 된다냥. 사용자가 이상한 날짜를 못 치게 막아준다냥!

import streamlit as st

day = st.date_input("예약 날짜를 골라주세요")

st.write("예약일: " + str(day))

고른 날짜의 정체

date_input 이 주는 값은 파이썬의 날짜(date) 객체라냥. str() 로 감싸면 "2026-07-21" 같은 글자로 바꿔서 보여줄 수 있다냥.

4단계 · 직접 해보기

미션 · 여행 예약 화면

  • date_input 으로 출발 날짜
  • slider 로 여행 일수(1~30일)
  • number_input 으로 인원 수

고른 값으로 "OO 부터 O일간, O명이 여행합니다" 를 만들어 보여주자냥. 숫자를 글자와 이어 붙일 땐 str() 을 꼭 기억한다냥!

복습 퀴즈

Q1.막대를 좌우로 밀어서 범위 안의 숫자를 고르는 위젯은?
Q2.키처럼 정확한 숫자를 직접 쳐야 할 때 쓰는 위젯은?
Q3.달력에서 날짜를 고르는 위젯은?
코딩냥

이제 글자·선택·숫자·날짜까지 다 받을 수 있다냥! 그런데 여기서 아주 중요한 질문이 하나 있다냥 — 버튼을 누르면 도대체 무슨 일이 일어나는 걸까냥? 다음 시간은 이 수업에서 제일 중요한 강이다냥. 꼭 집중해서 듣자냥!

9 / 33
이전2부 · 사용자에게 입력받기 · 선택하게 하기다음2부 · 사용자에게 입력받기 · 버튼을 누르면 무슨 일이 일어나냥