InspireMe - 명언 서비스

위젯의 외관과 동작을 data-* 속성(Script Tag) 또는 HTML 속성(Web Component)으로 커스터마이징할 수 있습니다.

설정 옵션

옵션	data 속성	값	기본값	설명
위젯 유형	`data-type`	`quote-of-the-day`, `random`	— (필수)	표시할 위젯 유형
언어	`data-lang`	`ko`, `en`	`ko`	명언 언어
테마	`data-theme`	`light`, `dark`	`light`	위젯 테마
너비	`data-width`	CSS 값	`100%`	위젯 너비
최대 너비	`data-max-width`	CSS 값	`500px`	위젯 최대 너비
저자 표시	`data-show-author`	`true`, `false`	`true`	저자 이름 표시 여부
토픽 표시	`data-show-topics`	`true`, `false`	`false`	토픽 태그 표시 여부
새로고침 버튼	`data-show-refresh`	`true`, `false`	`false`	새로고침 버튼 (random 전용)
브랜딩	`data-show-branding`	`true`, `false`	`true`	"Powered by InspireMe" 표시
모서리 둥글기	`data-border-radius`	CSS 값	`12px`	위젯 모서리 둥글기
강조 색상	`data-accent-color`	CSS 색상	테마 기본색	강조 색상

예시

기본 (오늘의 명언, 한국어, 라이트 테마)

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="quote-of-the-day"
></script>

다크 테마 + 영어

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="quote-of-the-day"
  data-lang="en"
  data-theme="dark"
></script>

랜덤 명언 + 새로고침 버튼

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="random"
  data-lang="ko"
  data-show-refresh="true"
></script>

커스텀 스타일

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="quote-of-the-day"
  data-theme="dark"
  data-max-width="600px"
  data-border-radius="0"
  data-accent-color="#ff6b6b"
  data-show-topics="true"
></script>

Web Component 방식

Web Component(<inspireme-quote>)에서는 동일한 옵션을 HTML 속성으로 전달합니다. 속성명은 kebab-case를 사용합니다.

<script src="https://inspireme.advenoh.pe.kr/widget/inspireme-quote.js"></script>

<!-- 다크 테마 + 영어 + 토픽 표시 -->
<inspireme-quote
  type="quote-of-the-day"
  lang="en"
  theme="dark"
  show-author="true"
  show-topics="true"
></inspireme-quote>

<!-- 슬라이더 + 커스텀 스타일 -->
<inspireme-quote
  type="slider"
  lang="ko"
  theme="auto"
  slide-count="5"
  slide-interval="8"
  accent-color="#ff6b6b"
></inspireme-quote>

Web Component 이벤트:

이벤트	설명
`quote-loaded`	명언 로드 완료 시 발행 (`event.detail`에 명언 데이터 포함)
`quote-error`	에러 발생 시 발행 (`event.detail`에 에러 정보 포함)

const widget = document.querySelector('inspireme-quote');
widget.addEventListener('quote-loaded', (e) => {
  console.log(e.detail); // { content: "...", author: "..." }
});

동적 속성 변경:

Web Component는 속성 변경 시 자동으로 위젯을 업데이트합니다.

const widget = document.querySelector('inspireme-quote');
widget.setAttribute('theme', 'dark');  // 즉시 다크 테마로 전환
widget.setAttribute('lang', 'en');     // 영어 명언으로 변경

테마 미리보기

Light 테마

밝은 배경(#ffffff)에 어두운 텍스트로 표시됩니다. 밝은 색상 배경의 사이트에 적합합니다.

Dark 테마

어두운 배경(#1a1a2e)에 밝은 텍스트로 표시됩니다. 다크 모드 사이트나 어두운 배경에 적합합니다.

위젯 커스터마이징