katakana

  • 홈
  • 태그
  • 방명록

2025/12/07 1

코드로 만드는 UI: 'card-mod'와 CSS 인젝션으로 대시보드 디자인 한계 돌파하기

1. Lovelace의 한계와 CSS의 힘Home Assistant의 대시보드 시스템인 'Lovelace'는 쉽고 빠르지만, 정형화되어 있습니다. 카드의 배경색, 폰트, 아이콘 크기 등은 '테마(Theme)'에 의해 일괄적으로 결정되며, 개별 카드마다 세밀하게 조절하는 옵션은 제공하지 않습니다.하지만 웹 브라우저는 결국 HTML과 CSS로 작동합니다. 우리가 보고 있는 HA 대시보드도 마찬가지입니다. 즉, 우리가 CSS 코드만 적재적소에 찔러 넣어줄 수 있다면(Injection), 화면상의 모든 요소를 내 마음대로 바꿀 수 있다는 뜻입니다.이 '주사기' 역할을 하는 것이 바로 HACS의 전설적인 플러그인, **'card-mod'**입니다.2. [준비물] card-mod 설치이것은 백엔드(통합 구성요소)가..

Home Assistant 2025.12.07
이전
1
다음
더보기
프로필사진

katakana

katakana 블로그

  • 분류 전체보기 (64)
    • Home Assistant (62)

Tag

HA 설치, HA 데이터베이스, 스마트홈 코딩, Zigbee, YAML 설정, 하드웨어 해킹, 재실 감지, esp32, Alarmo, 홈어시스턴트 자동화, 스마트홈 DIY, HA 꿀팁, 스마트홈 관제탑, 스마트 커튼, HA 대시보드, lovelace, ESPHome, Frigate, HA 자동화, HA 디자인, HA 백업, Nabu Casa, HA 음성비서, HA 보안, HomeAssistant, Xiaomi Miot Auto, zigbee2mqtt, HA 연동, 스마트홈 절약, 스마트홈 보안,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

방문자수Total

  • Today :
  • Yesterday :
Privacy policy | Terms of use | Contact | About 101

Copyright © AXZ Corp. All rights reserved.

티스토리툴바