Dash의 고급 CSS

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

객체 간 간격을 위한 CSS

'박스 모델'은 각 HTML 요소를 여러 층의 상자로 봅니다:

객체 내용(height, width 속성)
패딩(내용 밖)
테두리(패딩과 마진 사이)
마진(테두리 밖, 요소 간 간격)

네 개의 직사각형이 안쪽에서 바깥쪽으로 겹쳐진 그림. 가장 안쪽은 content, 그다음은 padding, 그다음은 border, 가장 바깥은 margin.

테두리 추가

border CSS 인자는 세 부분을 가집니다:

'border':'A B C'
- A = 두께(px)
- B = 스타일(예: solid, dotted)
- C = 색상(예: red)

앱에 테두리 추가

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

"Top Sales Categories"라는 제목이 있고, 그 아래 붉은 점선 테두리 안에 가로 막대 그래프가 있으며, y축은 소규모 구매 카테고리, x축은 총 주문 수를 표시합니다. 테두리 밖 아래에는 상위 두 판매 카테고리가 나열되어 있습니다.

CSS 간격 설정

HTML 요소의 간격 설정:

각 속성(패딩, 마진)에 숫자 4개 지정
- 시계방향: 위, 오른쪽, 아래, 왼쪽
또는 숫자 1개(모든 면 동일)
또는 숫자 2개(위·아래 / 왼쪽·오른쪽)

예: 'padding':'10px 5px 5px 15px'

박스 모델 도형에서 패딩 층의 각 면에 숫자가 표시된 이미지. 각 면 중앙에 숫자가 있고, 위에서 시계방향으로 10, 5, 5, 10입니다.

Dash에서 패딩 추가

패딩 없음:

이전과 같은 테두리 개념을 보여주는 이미지. "Top Sales Categories"라는 제목이 있고, 그 아래 붉은 점선 테두리 안에 가로 막대 그래프가 있으며, y축은 소규모 구매 카테고리, x축은 총 주문 수를 표시합니다. 테두리 밖 아래에는 상위 두 판매 카테고리가 나열되어 있습니다.

'padding':'100px' 추가:

왼쪽과 같은 이미지지만, 테두리가 모든 방향으로 밀려났음을 표시하는 뒤쪽 화살표가 있습니다. 그래프와 제목 주변, 테두리 안쪽의 여백이 늘었고, 아래 텍스트도 멀어졌습니다.

Dash에서 마진 추가

마진 없음:

margin: 100px auto 추가:

이전 슬라이드 오른쪽 이미지와 유사하지만, 화살표는 여백이 테두리 바깥에 생겼음을 나타냅니다. 제목과 아래 텍스트는 멀어졌지만, 테두리와 그래프 사이의 간격은 동일합니다.

auto 마진으로 중앙 정렬

'margin':'100px' 사용:

이전의 테두리 개념과 같은 이미지지만, 확대가 줄었고 중앙 그래프가 왼쪽 정렬되어 제목 아래와 아래 텍스트 위에서 중앙에 있지 않습니다. "Top Sales Categories"라는 제목과, 붉은 점선 테두리 안의 가로 막대 그래프, 테두리 밖 아래의 상위 두 판매 카테고리 목록이 있습니다.

'margin':'100px auto' 사용:

이전의 테두리 개념과 같은 이미지. 그래프가 제목 아래, 아래 텍스트 위에 중앙 정렬되었습니다. "Top Sales Categories"라는 제목과, 붉은 점선 테두리 안의 가로 막대 그래프, 테두리 밖 아래의 상위 두 판매 카테고리 목록이 있습니다.

레이아웃을 위한 CSS

정렬이 안 맞나요? HTML 요소는 'inline' 또는 'block'입니다.

Inline: 같은 줄에 렌더링
- height/width(박스) 속성이 없음
- 예: <strong>, <a>, <img>
Block: 줄바꿈으로 위아래로 쌓임
- 나란히 둘 이상 배치 불가
- 예: <h1>, <div>
inline-block도 있음
- height/width/박스 속성 설정 가능
- 나란히 배치 가능

inline-block 요소

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

세 개의 작은 색상 상자가 L자 형태로 배치된 이미지. 파란 상자가 빨간 상자 위에 쌓여 있고, 빨간 상자 오른쪽에는 초록 상자가 있습니다.

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기