Dash의 CSS 기본

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

CSS란?

 

  • 'Cascading Style Sheets'의 약자
  • 웹 페이지 요소의 모양과 배치를 제어

$$

  • 제어 가능한 항목:
    • 텍스트 속성(글꼴 크기, 색, 스타일)
    • HTML 요소의 크기와 형태
    • 객체의 배치
Dash와 Plotly로 대시보드 만들기

웹의 CSS

대부분의 웹사이트에는 CSS 파일이 있습니다

  • 페이지 로드시 불러옵니다
  • 본 과정: 대신 style 속성 사용

Chrome 개발자 도구가 열린 Google 홈페이지 스크린샷으로, 스타일시트를 연결하는 태그가 보입니다. 코드에는 "<link type=\"text/css\" rel=Stylesheet href=" 이후 CSS 파일 경로가 표시됩니다.

Dash와 Plotly로 대시보드 만들기

HTML 요소의 CSS

 

CSS는 HTML 요소에도 사용할 수 있습니다

  • 태그의 style 속성 사용
  • 키-값 쌍으로 CSS 작성
    • 구문: "property:value; property:value;"

 

1장 수업의 HTML 스크린샷으로, 서로 다른 크기와 배경색의 여러 div를 생성했으며 style 속성 사용을 보여줍니다.

Dash와 Plotly로 대시보드 만들기

간단한 CSS 스타일링

 

<h1>Welcome to the website!</h1>
<h2 style="font-size:50px;color:red">
      Enjoy your stay!
</h2>

 

검은색 제목 "Welcome to the website!" 아래에 더 큰 빨간색 글씨로 "Enjoy your stay!"가 표시된 이미지

Dash와 Plotly로 대시보드 만들기

라이브 CSS 편집

라이브 웹사이트에서 일부 CSS를 편집할 수 있습니다

  • 요소를 우클릭 > ‘검사’ 선택 > CSS 값 편집
  • 참고: 로컬 변경만 적용됨(새로고침 시 사라짐)

Google 홈페이지에서 로고를 우클릭해 드롭다운에서 ‘검사’를 선택합니다. 하단에 Google 개발자 도구가 열리고, 이미지의 width 스타일을 100픽셀로 설정하면 이미지가 즉시 줄어듭니다.

Dash와 Plotly로 대시보드 만들기

Dash에서의 CSS

 

  • Dash 컴포넌트의 style 인자

    • 딕셔너리 형태의 CSS 허용

  • 이전 Dash 컴포넌트 코드:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]
Dash와 Plotly로 대시보드 만들기

색상용 CSS

 

CSS로 다음을 설정할 수 있습니다:

  • 객체의 배경색(background-color)
  • 텍스트 색(color)

 

두 속성 모두 문자열(예: 'red') 또는 RGB 코드(예: 'rgb(0,0,255)'는 파란색)를 받습니다

두 열로 된 표로, 왼쪽은 색으로 채워져 있고 오른쪽은 해당 RGB 코드가 표시됩니다. 보라색, 초록색, 짙은 분홍색, 짙은 파란색 셀이 있으며 인접 셀에 RGB 코드가 표시됩니다.

Dash와 Plotly로 대시보드 만들기

크기 설정 CSS

 

CSS는 width와 height 속성으로 크기를 설정할 수 있습니다

app.layout = [
  # 회사 로고 추가 및 크기 조정
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]
Dash와 Plotly로 대시보드 만들기

백분율 크기 지정

 

app.layout = [
  # 회사 로고 추가 및 크기 조정
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]
  • 부모 요소 크기의 50%
Dash와 Plotly로 대시보드 만들기

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기

Preparing Video For Download...