포트폴리오 리밸런싱 계산기 위젯 — 사이트에 붙이는 브랜드 계산기

데모 — 브랜드 스킨을 눌러 보세요

설치 가이드

아래 코드를 원하는 페이지에 그대로 붙여넣습니다. CSS 변수 5개와 <h3> 의 이름만 바꾸면 브랜드가 적용됩니다. <link>·<script> 는 페이지당 한 번만 넣습니다.

<link rel="stylesheet" href="https://investiqs.net/widgets/rebalance/rebalance-widget.css">
&lt;!-- InvestIQs 리밸런싱 계산기 위젯 — 붙여넣기 조각. 브랜드 색은 style 의 CSS 변수, 이름은 h3 만 바꾸면 된다. --&gt;
&lt;div id=&#34;iq-rebalance&#34; class=&#34;iq-tool&#34;
     style=&#34;--primary:#2563eb;--border:#d1d5db;--entry:#fafafa;--theme:#fff;--code-bg:#f3f4f6&#34;
     data-currency=&#34;KRW&#34;
     data-copied-msg=&#34;링크를 복사했습니다&#34;
     data-lbl-add=&#34;행 추가&#34;
     data-lbl-remove=&#34;삭제&#34;
     data-lbl-label=&#34;종목&#34;
     data-lbl-current=&#34;현재 평가액 (원)&#34;
     data-lbl-target=&#34;목표 비중 %&#34;&gt;
  &lt;h3 id=&#34;iq-rb-brand&#34; style=&#34;margin:0 0 12px&#34;&gt;InvestIQs 포트폴리오 리밸런싱 계산기&lt;/h3&gt;

  &lt;div id=&#34;iq-rb-rows&#34;&gt;&lt;/div&gt;

  &lt;div class=&#34;iq-tool__actions&#34;&gt;
    &lt;button type=&#34;button&#34; id=&#34;iq-rb-add&#34; class=&#34;iq-btn iq-btn--ghost&#34;&gt;행 추가&lt;/button&gt;
    &lt;button type=&#34;button&#34; id=&#34;iq-rb-calc&#34; class=&#34;iq-btn&#34;&gt;계산하기&lt;/button&gt;
    &lt;button type=&#34;button&#34; id=&#34;iq-rb-reset&#34; class=&#34;iq-btn iq-btn--ghost&#34;&gt;초기화&lt;/button&gt;
    &lt;button type=&#34;button&#34; id=&#34;iq-rb-share&#34; class=&#34;iq-btn iq-btn--ghost&#34;&gt;결과 공유&lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- 통화 선택 UI 는 없지만 스크립트가 값을 읽으므로 숨긴 채 남긴다 --&gt;
  &lt;select id=&#34;iq-rb-currency&#34; hidden&gt;&lt;option value=&#34;KRW&#34; selected&gt;KRW&lt;/option&gt;&lt;/select&gt;

  &lt;div id=&#34;iq-rb-result&#34; class=&#34;iq-result&#34; aria-live=&#34;polite&#34; hidden&gt;
    &lt;div class=&#34;iq-result__title&#34;&gt;가정에 따른 예상 결과&lt;/div&gt;
    &lt;div class=&#34;iq-result__cards&#34;&gt;
      &lt;div class=&#34;iq-card&#34;&gt;
        &lt;div class=&#34;iq-card__label&#34;&gt;총 포트폴리오 가치&lt;/div&gt;
        &lt;div class=&#34;iq-card__value&#34; id=&#34;iq-rb-total&#34;&gt;–&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;p id=&#34;iq-rb-warn&#34; class=&#34;iq-note&#34; hidden&gt;&lt;/p&gt;
    &lt;div style=&#34;overflow-x:auto&#34;&gt;
      &lt;table class=&#34;iq-table&#34;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;종목&lt;/th&gt;&lt;th&gt;현재 평가액&lt;/th&gt;&lt;th&gt;현재 비중%&lt;/th&gt;&lt;th&gt;목표 비중%&lt;/th&gt;
            &lt;th&gt;목표 평가액&lt;/th&gt;&lt;th&gt;매매 (+매수 / −매도)&lt;/th&gt;&lt;th&gt;드리프트&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id=&#34;iq-rb-tbody&#34;&gt;&lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class=&#34;iq-disclaimer&#34;&gt;계산 결과는 입력한 가정에 따른 시산이며, 세금·수수료·환율 변동 등 실제 조건은 반영되지 않을 수 있습니다. 본 콘텐츠는 정보 제공 목적이며 투자 권유가 아닙니다.&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- 환율 데이터가 없으면 스크립트가 USD 로 강등한다. KRW=1 을 주어 원화 표기를 유지한다. --&gt;
&lt;script type=&#34;application/json&#34; id=&#34;iq-fx&#34;&gt;{&#34;rates&#34;:{&#34;USD&#34;:1,&#34;KRW&#34;:1}}&lt;/script&gt;

<script defer src="https://investiqs.net/widgets/rebalance/rebalance-widget.js"></script>

다운로드: rebalance-widget.js · rebalance-widget.css · snippet.html — 구매 후에는 세 파일을 귀사 서버에 올려 경로만 바꾸면 됩니다.