1. Leren
  2. /
  3. Cursussen
  4. /
  5. Dash와 Plotly로 대시보드 만들기

Connected

Opdracht

DRY 스타일로 Dash 컴포넌트 꾸미기

이전 대시보드는 재사용 가능한 컴포넌트 덕분에 더 좋아졌어요. 이제 한 단계 더 나아가 보죠. 도우미 함수를 사용해 줄바꿈을 삽입하고, 공통 스타일 함수를 통해 중복된 스타일링을 간소화하세요.

공통 스타일 요소는 다음과 같아요: 'display':'inline-block','margin':'0 auto','padding':'20px'

make_break() 함수는 줄 14에 정의되어 있으며, 생성할 HTML 줄바꿈 태그 수를 인자로 받아 리스트로 반환해요.

Instructies

100 XP
  • 줄 21 아래에 공통 스타일 요소('display':'inline-block','margin':'0 auto','padding':'20px')를 담은 layout_style 딕셔너리를 반환하는 style_c() 함수를 만드세요.
  • 줄 28, 31, 29 아래 주석에 표시된 개수만큼 줄바꿈을 삽입하기 위해 make_break() 함수를 사용하세요.
  • 줄 35 아래의 html.H2() 컴포넌트에 스타일을 추가하기 위해 style_c() 함수를 사용하세요.
  • 줄 47 아래의 DatePickerSingle() 컴포넌트에는 이미 있는 개별 스타일에 style_c() 함수로 스타일을 추가하세요.