HTML Card

HTML Card 위젯은 데이터 소스 없이 대시보드에 정적 HTML 블록을 바로 렌더링합니다. 실시간 데이터에 의존하지 않는 고정 내용 패널(안내, 범례, 연락처, 공지, 장식용 레이아웃 요소)에 씁니다.

주요 기능

데이터 소스나 데이터 구독 부담 없이 대시보드 카드에 어떤 HTML 내용이든 렌더링합니다.
위젯 내용 범위로 한정된 사용자 지정 CSS로 꾸밉니다. 모양 탭의 CSS 필드에 바로 작성합니다.
HTML 요소 클릭 시로 특정 HTML 요소에 MX On Cloud 동작을 연결합니다. 카드 안의 클릭 영역마다 이동, 상태 업데이트, 사용자 지정 처리기를 실행할 수 있습니다.
HTML만 넣으면 다른 설정 없이 바로 동작합니다.

위젯 추가

대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
위젯 번들 선택 대화상자에서 Cards를 찾아 클릭합니다.
HTML Card 위젯을 선택합니다.
HTML 내용을 입력하고 추가를 클릭합니다.

구성

위젯은 네 탭에서 설정합니다: 모양, 위젯 카드, 액션, 레이아웃.

모양

HTML

HTML 필드에 카드 내용을 작성합니다. 글, 제목, 표, 이미지, 아이콘, SVG 등 올바른 HTML이면 무엇이든 됩니다. 이 필드는 필수입니다.

기본 템플릿은 flex 컨테이너 안에 가운데 정렬한 라벨을 둡니다:

<div class='card'>HTML code here</div>

CSS

CSS 필드에 CSS를 작성해 HTML 내용을 꾸밉니다. 스타일은 위젯 안에만 적용되어 대시보드의 다른 위젯에 영향을 주지 않습니다. HTML 템플릿에서 정의한 클래스 이름을 여기서 쓸 수 있습니다.

기본 CSS는 .card 요소를 가운데 정렬하고 꾸밉니다:

.card {
  font-weight: bold;
  font-size: 32px;
  color: #999;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

위젯 카드

Card 제목

설정	설명
제목 표시	위젯 제목 표시줄을 표시하거나 숨깁니다. 기본으로 꺼져 있어 HTML이 카드 영역 전체를 채웁니다.
제목	제목 표시줄을 켰을 때 헤더에 표시되는 위젯 제목. 기본값: `HTML Card`. 글꼴과 색상을 설정합니다.
제목 툴팁	제목에 마우스를 올리면 보이는 툴팁(선택 사항).
제목 아이콘 표시	제목 옆에 아이콘을 표시합니다. 아이콘 종류, 크기, 색상을 정합니다.
고급 제목 스타일	사용자 지정 제목 CSS를 담는 JSON 객체(글꼴 크기, 굵기, 패딩 등).

카드 스타일

설정	설명
글자 색	카드 전체의 기본 글자 색.
배경 색	카드 배경 채우기. CSS로 정한 배경이 보이게 하려면 `#FFFFFF00`(투명)으로 정합니다.
패딩	카드 가장자리와 내용 사이의 안쪽 간격. 기본값: `8px`. HTML 템플릿이 자체 패딩을 관리하면 `0`으로 정합니다.
여백	카드 바깥쪽 간격.
모서리 반경	모서리 둥글기(픽셀).
그림자	카드를 띄워 보이게 하는 그림자. 기본으로 켜져 있습니다.
고급 위젯 스타일	위젯 컨테이너 자체(HTML 내용 영역 밖)에 적용하는 사용자 지정 CSS를 담는 JSON 객체.
위젯 CSS	모양 탭의 내용 CSS와 별도로 위젯 범위에 넣는 추가 CSS.

카드 버튼

설정	설명
전체화면 사용	위젯 헤더에 전체화면 전환 버튼을 추가합니다. 기본으로 켜져 있습니다.

액션

HTML Card는 액션 소스 두 가지를 지원합니다:

소스	설명
HTML 요소 클릭 시	사용자가 카드 HTML 안의 특정 요소를 클릭하면 설정한 동작을 실행합니다. HTML에서 대상 요소에 CSS 클래스를 지정하고 동작 설정에서 그 클래스를 참조합니다. 이렇게 하면 카드 하나 안의 여러 요소가 각각 다른 동작을 실행할 수 있습니다.
위젯 헤더 버튼	위젯 헤더 표시줄에 사용자 지정 버튼을 추가해, 클릭하면 설정한 동작을 실행합니다.

레이아웃

크기 조절 옵션

설정	설명
크기 조절 가능	대시보드 격자에서 위젯 크기를 조절할 수 있게 합니다. 기본으로 켜져 있습니다.
종횡비 유지	크기를 조절할 때 너비와 높이의 비율을 유지합니다.

모바일

설정	설명
모바일 모드에서 위젯 숨기기	대시보드가 모바일 레이아웃으로 표시될 때 위젯을 숨깁니다.
데스크톱 모드에서 위젯 숨기기	대시보드가 데스크톱 레이아웃으로 표시될 때 위젯을 숨깁니다.
순서	모바일 레이아웃의 쌓임 순서에서의 위치.
높이	모바일 레이아웃에서의 고정 높이(행 수).

예시

운영 빠른 참고 패널

목표: 운영 대시보드에 교대 근무 연락처와 HMI 장치 상태 색상 범례를 보여 주는 고정 참고 패널을 추가해, 운영자가 탭을 바꾸지 않고도 정보를 늘 볼 수 있게 합니다.

1단계. 위젯 추가. 대시보드를 수정 모드로 열고 위젯 추가를 클릭하고 Cards를 선택한 다음 HTML Card를 고릅니다.

2단계. HTML 입력. 모양 탭에서 기본 내용을 다음으로 바꿉니다:

<div class="ref-panel">
  <section>
    <h4>Shift contacts</h4>
    <table>
      <tr><td>Control room</td><td>ext. 101</td></tr>
      <tr><td>Maintenance</td><td>ext. 204</td></tr>
      <tr><td>Safety officer</td><td>ext. 312</td></tr>
    </table>
  </section>
  <section>
    <h4>Device status legend</h4>
    <ul>
      <li><span class="dot green"></span> Online &amp; reporting</li>
      <li><span class="dot yellow"></span> Online, no data (last 15 min)</li>
      <li><span class="dot red"></span> Offline</li>
    </ul>
  </section>
</div>

3단계. CSS 추가. CSS 필드에 다음을 붙여 넣습니다:

.ref-panel { padding: 16px; font-size: 13px; color: #333; }
.ref-panel section { margin-bottom: 16px; }
.ref-panel h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #666; }
.ref-panel table { width: 100%; border-collapse: collapse; }
.ref-panel td { padding: 4px 8px 4px 0; }
.ref-panel td:last-child { font-weight: 600; }
.ref-panel ul { list-style: none; padding: 0; margin: 0; }
.ref-panel li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.green { background: #4caf50; }
.yellow { background: #ffc107; }
.red { background: #f44336; }

4단계. 위젯 카드 설정. 위젯 카드 탭에서 배경 색을 #FFFFFF00으로, 패딩을 0으로 정합니다.

5단계. 저장. 추가를 클릭하고 필요하면 크기와 위치를 조정한 다음 대시보드 툴바의 저장을 클릭합니다.

결과: 대시보드의 데이터 위젯 옆에 작은 참고 패널이 놓입니다. 데이터 연결 없이도 내용이 늘 보입니다.

문제 해결

HTML 내용이 표시되지 않음

원인	해결 방법
HTML 필드가 비어 있음	위젯 구성 → 모양을 열고 HTML 필드에 HTML을 입력합니다.
HTML 형식이 잘못됨	HTML을 검증합니다. 닫는 태그가 빠졌거나 속성이 닫히지 않으면 렌더링되지 않을 수 있습니다. 편집기의 Tidy 버튼으로 자동 정렬하고 눈에 띄는 문제를 찾습니다.

CSS 스타일이 적용되지 않음

원인	해결 방법
클래스 이름이 맞지 않음	CSS의 클래스 이름이 HTML 템플릿의 클래스 이름과 정확히 같은지 확인합니다.
위젯 기본 스타일이 스타일을 덮어씀	더 구체적인 CSS 선택자를 쓰거나, 최후의 수단으로 `!important`를 추가합니다.
CSS 필드를 잘못 고름	모양 탭의 CSS 필드는 HTML 내용을 꾸밉니다. 위젯 카드 → 고급 위젯 스타일 아래의 위젯 CSS 필드는 위젯 컨테이너에 적용됩니다. 알맞은 필드를 고쳤는지 확인합니다.

카드에 실시간 데이터 값이 필요함

원인	해결 방법
위젯을 잘못 고름	HTML Card는 정적 내용 전용입니다. HTML Value Card는 `${key}` 자리표시자를 넣을 때, Markdown/HTML Card는 Markdown과 JavaScript 기반 동적 내용에 씁니다.

”HTML 요소 클릭 시” 동작이 실행되지 않음

원인	해결 방법
요소에 CSS 클래스가 지정되지 않음	동작 설정에서 참조하는 CSS 클래스를 대상 HTML 요소에 추가합니다: `<button class="my-action-btn">Click</button>`.
동작이 설정되지 않음	위젯 구성 → 액션을 열고 소스가 HTML 요소 클릭 시인 동작을 추가해 올바른 요소 클래스를 참조합니다.