본문 바로가기

교육과정

 (33)
[9] streamlit custom CSS 적용하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit에 직접 코딩한 CSS를 적용하는 방법을 배워보겠습니다. 다만 웹 프론트엔드 관련 지식이 필요하고, CSS를 직접 코딩해야하므로 너무 어려우신 분들은 스킵하셔도 무방합니다. st.markdown으로 CSS 적용하기 streamlit에서 custom CSS를 적용하기 위해서는 st.markdown으로 """, unsafe_allow_html=True) 이제 브라우저의 개발자 도구를 이용해서 스타일을 적용하고 싶은 태그를 확인하고, CSS를 적용하면 됩니다. title 색깔 변화 먼저 title 텍스트를 빨간색으로 바꿔보겠습니다. CSS를 적용하기 위해서 먼저 검사를 이용해서 태그 정보를 확인하겠습니다..
[8] streamlit button 이용한 데이터 삭제 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit button을 이용해서 등록되어 있는 포켓몬을 삭제하는 기능을 구현해보겠습니다. streamlit button streamlit button 문서: https://docs.streamlit.io/library/api-reference/widgets/st.button streamlit button은 버튼 UI를 간단하게 구현할 수 있고, 눌렀을 때 동작을 조건문으로 작성할 수 있습니다. 삭제 버튼 UI 추가 포켓몬 속성 텍스트 밑에 삭제 버튼을 추가해주겠습니다. 이 때, 반드시 key 값을 설정해주어야 합니다. use_container_width 옵션은 True로 설정해서 버튼의 너비를 조정하겠습니..
[7] streamlit toggle 이용한 form 자동완성 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 유저가 처음 페이지에 진입했을 때, 폼이 텅 비어있으면 어떻게 채워야 할지 당황스럽겠죠? 이번 챕터에서는 streamlit toggle을 이용해서 미리 정의한 데이터로 폼을 자동완성하는 기능을 구현해보겠습니다. 데이터 준비 먼저 폼을 자동으로 채워줄 예시 데이터를 준비하겠습니다. example_pokemon = { "name": "알로라 디그다", "types": ["땅", "강철"], "image_url": "https://storage.googleapis.com/firstpenguine-coding-school/pokemons/alora_digda.webp" } st.toggle toggle은 쉽게 말해서 껐다 켰다 할 수 있..
[6] streamlit session state 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 session state를 이용해서 데이터를 관리하는 방법을 배워보겠습니다. streamlit session state streamlit session state는 페이지가 살아있을 때, 데이터를 저장하는 일종의 딕셔너리입니다. streamlit session state 문서: https://docs.streamlit.io/library/api-reference/session-state streamlit이 공식적으로 제공하는 설명 영상이 상당히 자세해서 정확히 이해하고 싶으신 분들은 한번 보시기를 추천합니다. 간단히 요약하면 session state를 사용하면 streamlit에 의해서 페이지가 리로딩 될 때에도 ..
[5] streamlit form으로 데이터 추가하기 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit form을 이용해서 유저의 입력을 받아서 포켓몬을 추가하는 기능을 구현해보겠습니다. streamlit form streamlit form은 유저의 입력을 받는 폼을 구성할 수 있는 기능입니다. 공식 문서에 코드 사용법과 예시 화면이 나와있습니다. streamlit form 문서: https://docs.streamlit.io/library/api-reference/control-flow/st.form 텍스트 입력, 숫자 입력, 슬라이드 바, 체크 박스 등등 다양한 데이터를 입력하는 위젯을 제공하고 있으며, with문으로 사용할 수 있습니다. streamlit form은 반드시 Submit 버튼을 ..
[4] streamlit columns 이용한 위젯 배치 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 데이터 준비 그 전에, 여러마리 포켓몬들을 화면에 그리려면 데이터가 필요하겠죠? 총 여섯마리 포켓몬의 이름과 속성, 이미지 URL를 복사해서 코드에 붙여넣고, 기존에 pokemon 변수는 지워주겠습니다. pokemons = [ { "name": "피카츄", "types": ["전기"], "image_url": "https://storage.googleapis.com/firstpenguine-coding-school/pokemons/pikachu.webp" }, { "name": "누오", "types": ["물", "땅"], "image_url": "https://storage.googleapis.com/firstpenguine-..
[3] streamlit 기본 위젯 사용법 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 이번 챕터에서는 streamlit 위젯을 이용해서 화면 상에 포켓몬을 그려보도록 하겠습니다. 데이터 준비 그 전에, 포켓몬을 화면에 그리는데 필요한 타입 정보와 포켓몬 정보를 복사해서 코드에 붙여넣겠습니다. 그리고 “누오”라는 포켓몬의 이름과 타입, 이미지 URL을 붙여넣겠습니다. type_emoji_dict = { "노말": "⚪", "격투": "✊", "비행": "🕊", "독": "☠️", "땅": "🌋", "바위": "🪨", "벌레": "🐛", "고스트": "👻", "강철": "🤖", "불꽃": "🔥", "물": "💧", "풀": "🍃", "전기": "⚡", "에스퍼": "🔮", "얼음": "❄️", "드래곤": "🐲", "..
[2] streamlit 개발환경 셋팅 들어가며 🏫 전체 강의 영상 📕 포켓몬 도감 실습 프로젝트 ▶️ 강의 영상 파이썬 개발환경 셋팅 IDE 설치 먼저 python 개발환경을 셋팅하겠습니다. IDE로는 pycharm을 사용하는데, vscode 같은 다른 IDE를 사용하셔도 무방합니다. 다만, jupyter notebook은 강의 내용을 따라오는데 무리가 있으니, 다른 IDE를 사용하는 것이 좋습니다. pycharm을 사용하고 싶은데 어떻게 설치하는지 잘 모르시겠는 분들은 아래 포스팅을 참고해주세요. ⚙️ pycharm IDE 설치 프로젝트 생성 처음 pycharm을 실행하면 프로젝트부터 생성해야합니다. New Project 버튼을 눌러서 프로젝트를 생성할 수 있습니다. 그 다음, 프로젝트 위치를 설정하고 개발에 사용할 python inter..

티스토리툴바