Dash.html 와 Html 태그 차이점

Html 태그

<h1 style="text-align: center; color: #7FDBFF">Hello Dash</h1>

Dash.html 

html.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'})

or

html.H1(children = 'Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'})

 

1. Html 에서는 style 속성들이 세미콜론(;)으로 구분되지만, Dash 에서는 dictionary 형태이다. 

    style="text-align: center; color: #7FDBFF"  이 style={'textAlign': 'center', 'color': '#7FDBFF'}  로 표현됨

 

2. Dash 의 Dictionary 형태에서 key 는 camelCased 를 따른다. 예를 들어 html 의 text-align 이 textAlign 으로 표시된다. 

 

3.  children 은 항상 첫번째 인자이므로, 생략가능하다. 

html.H1(children='Hello Dash')   와 html.H1('Hello Dash') 동일함.

 

Dash 에서는 파이썬 코드 내에서, 사용가능한 모든 HTML 태그의 속성과 태그들을 사용할 수 있다. 

 

 

참고 : https://dash.plotly.com/layout