streamlit 꾸미기를 해보자 - 마크다운 활용편

streamlit을 활용할 때, 보기 쉽게 이쁘게 꾸미는 것을 한다면 좋다.

아래에 streamlit에서 제공하는 다양한 tool을 활용할 수 있는 링크도 걸려있으니 참고하자

지금부터 마크다운 문법을 활용한 streamlit 꾸미기를 해보려 한다.

시작 전 나는 어제 사용한 파일에서 열어서 하는 중이라 내용이 같이 뜨지만 굳이 따라하지 않아도 좋다.

 

이 포스팅은 Streamlit으로 프로젝트 한방에 끝내기 with 파이썬(Sara, Evan 저) 교재를 참고했다.

올해 나온 책이라서 공부하는데 너무 편하고 코드가 안될 걱정을 할 필요가 없었다.

streamlit 을 배우고자 하는 분들에게 꼭 추천하는 교재이다. 내가 참고한 페이지는 챕터5 부터로 정확하겐 222페이지를 참고했다.

https://product.kyobobook.co.kr/detail/S000202690179

Streamlit으로 프로젝트 한방에 끝내기 with 파이썬 | Sara, Evan - 교보문고

 

 

1. streamlit 들어가기

먼저 우리는 가상환경에 들어가서 streamlit 을 다운받고 열었었다.

이번 역시 가상환경에 들어가서 streamlit 을 활용해볼 예정이라 가상환경에 들어가 주고, streamlit 을 열어준다.

 

2. 마크다운 문법 기초

마크다운 문법을 활용한 기초 테스트를 먼저 해보자

굵은 글자도 작성해보고 아래 구분선도 만들어 보고, 색깔도 입히고 수식도 넣는 등 다양하게 작성해보자

 

 

def main():
    st.title("Hello World!")

    st.text("Hello World2")

    title = st.text_input('Movie title', 'Life of Brian')
    st.write('The current movie title is', title)

    # 교재 챕터5
    # 마크다운
    st.markdown('이 텍스트는 :red[빨간 글자], 굵게 하기 **:blue[파란 글자]**')
    st.write('-' * 50)
    st.markdown("""
    # 파트 2
    - 피타고라스 정리 :blue[$\sqrt{x^2+y^2}=1$]
    """)
    st.write('-' * 50)
    st.markdown("## part 3. test \n"
                " - Streamlit **정말 좋네요!** \n"
                "   * 이 텍스트는 :red[빨간 글자], 굵게 하기 **:blue[파란 글자]**")

 

그러면 아래처럼 스트림릿에 잘 나오는 것을 확인할 수 있다.

 

 

3. HTML CSS 마크다운

 

먼저 활용한 예시이다.

 

아래 코드는 위에서 작성한 내용 바로 밑에 작성을 해야한다.

st.title("HTML CSS 마크다운 적용")
    html_css = """
    <style>
      th, td {
        border-bottom: 1px solid #ddd;
      }
    </style>

    <table>
      <thead>
        <tr>
          <th>이름</th>
          <th>나이</th>
          <th>직업</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Evan</td>
          <td>25</td>
          <td>데이터 분석가</td>
        </tr>
        <tr>
          <td>Sarah</td>
          <td>25</td>
          <td>프로덕트 오너</td>
        </tr>
      </tbody>
    </table>
    """
    st.markdown(html_css, unsafe_allow_html=True)

 

 

⭐참고⭐

streamlit을 꾸밀 때, 여러가지 기능을 추가하고 싶다면 다음 페이지를 활용하자

streamlit 공식 사이트에서 제공하는 것이라 바로 활용하면 된다.

원하는 부분을 누르면 github 주소로 연결되는데 여기서 바로 코드를 가져오면 된다.

https://streamlit.io/components

Components • Streamlit