CSS 적용하기

문제

Inline CSS 를 이용해 아래와 같이 꾸며보자.

 

코드

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash()
# app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
# app = Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

app.layout = html.Div([
    html.H1('Country City Dashboard',
            style={'textAlign': 'center', 'fontFamily': 'fantasy', 'fontSize': 50, 'color': 'blue'}),
    html.P(['Naver: ', html.A('Naver', href='https://www.naver.com', target='_blank')], style={'border': 'solid'}),
    html.Label('Korea City: '),
    dcc.Dropdown(
        options=['Seoul', 'Pusan', 'Kwangju'],
        value='Seoul',
        style={'backgroundColor': 'lightblue'}
    )
], style={'padding': 100, 'border': 'solid'})

if __name__ == '__main__':
    app.run_server(debug=True)

 

설명

• https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/
• https://dash.plotly.com/external-resources

 

참고: https://www.udemy.com/course/python-interactive-dashboards-with-plotly-dash