연갈피지: 롤20 로그 편집기

HTML 올리기

❓ 무엇을 넣어야 하나요?

<div class="textchatcontainer" id="textchat">
  <div class="content">
    <div class="message general other">
      <div class="spacer"></div>
      <div class="avatar" aria-hidden="true"><img
          src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/bP8Hb1/btsOdDI06AZ/dsejAW2UKPHjyBLAu4VzVK/img.png">
      </div>
      <span class="tstamp" aria-hidden="true">9:00PM</span><span class="by">GM:</span>폰트 라이선스 문제로 실제 롤20 화면과는
      ~특수문자~ 숫자12345! English? 등이 약간 다르게 표시됩니다.
    </div>
    <div class="message general you">
      <div class="spacer"></div>
      <div class="avatar" aria-hidden="true"></div><span class="tstamp" aria-hidden="true">9:00PM</span><span
        class="by">나:</span>본인 대사 메시지입니다. desc & em 기울임을 제거해도 <em>자체적으로 넣은 기울임</em>은 사라지지 않습니다.
    </div>
    <div class="message hidden-message other" style="font-style: italic; position: relative;">
      <div class="spacer"></div>
      <div class="avatar" aria-hidden="true"><img
          src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/VlMlV/btsOcFALRMz/kkrirRysDBdRn5MyzeKjRK/img.png">
      </div><span class="tstamp" aria-hidden="true">9:00PM</span><span class="by">하비:</span>This message has been
      hidden.
    </div>
    <div class="message general other">
      <div class="spacer"></div>
      <div class="avatar" aria-hidden="true"><img
          src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/xDTMa/btsOee23A3U/UnN5uh8x1jXA8FrmkahPOK/img.png">
      </div><span class="tstamp" aria-hidden="true">9:00PM</span><span class="by">연갈:</span><a href="#"
        onclick="event.preventDefault();" style="color: #23527c; text-decoration: underline;" class="no-edit">링크 마우스오버</a>
      미리보기입니다. 실제 로그에서는 마우스오버 시에만 색상이 표현됩니다.
    </div>
    <div class="message desc">
      <div class="spacer"></div> desc 메시지입니다.
    </div>
    <div class="message emote">
      <div class="avatar" aria-hidden="true"><img
          src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/euuUPi/btsOdg1AyZt/NwTmHlRA2t99VmMoCYggO1/img.png">
      </div>
      <div class="spacer"></div>미노리 의 em 메시지입니다.
    </div>
    <div class="message private whisper">
      <div class="spacer"></div>
      <div class="avatar" aria-hidden="true"><img
          src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/qn5sB/btsOeTxmzpY/9jfVxsIJxns9HeyQErDC8K/img.png">
      </div><span class="tstamp" aria-hidden="true">9:00PM</span><span class="by">(From 하지메):</span> 귓속말
      메시지입니다.
    </div>
    <div class="message general other">
      <div class="spacer"></div>
      <div class="avatar" aria-hidden="true"><img
          src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/xDTMa/btsOee23A3U/UnN5uh8x1jXA8FrmkahPOK/img.png">
      </div><span class="tstamp" aria-hidden="true">9:00PM</span><span class="by">연갈:</span>
      <span class="inlinerollresult showtip tipsy-n-right fullcrit"
        title="Rolling 1d3 = (<span class="basicdiceroll critsuccess ">3</span>)">3</span>
      <span class="inlinerollresult showtip tipsy-n-right normal"
        title="Rolling 1d3 = (<span class="basicdiceroll">2</span>)">2</span>
      <span class="inlinerollresult showtip tipsy-n-right fullfail"
        title="Rolling 1d3 = (<span class="basicdiceroll critfail ">1</span>)">1</span>
    </div>
    <div class="message rollresult other player--O3UyDDyUplt2uUoatsw  discord-production">
      <div class="formula" style="margin-bottom: 3px;">rolling 3d8</div>
      <div class="clear"></div>
      <div class="formula formattedformula">
        <div class="dicegrouping" data-groupindex="0">(<div data-origindex="0" class="diceroll d8 critsuccess ">
            <div class="dicon">
              <div class="didroll">8</div>
              <div class="backing"></div>
            </div>+
          </div>
          <div data-origindex="1" class="diceroll d8 nocrit">
            <div class="dicon">
              <div class="didroll">5</div>
              <div class="backing"></div>
            </div>+
          </div>
          <div data-origindex="2" class="diceroll d8 critfail ">
            <div class="dicon">
              <div class="didroll">1</div>
              <div class="backing"></div>
            </div>
          </div>)
        </div>
        <div class="clear"></div>
      </div>
      <div class="clear"></div><strong>=</strong>
      <div class="rolled">14</div>
    </div>
    <div class="message general other">
      <div class="sheet-rolltemplate-default">
        <table>
          <caption>
            Roll20 기본 템플릿
          </caption>

</tr>
            <tr>
              <td>2번 제목</td>
              <td>2번 내용</td>

</tr>
            <tr>
              <td>3번 제목</td>
              <td>3번 내용</td>

</tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

샘플 데이터입니다. 지우고 편집할 로그를 입력하세요!

저장된 HTML 파일 올리기

시트 템플릿 선택
커스텀 시트 CSS 올리기

업로드된 모든 파일 및 텍스트는 일절 수집되지 않습니다.

코딩에 많은 시간 할애할 수 없는 상황인데 롤20 저장소 변동으로 곡소리가 나고 있어서... 우선 최소한의 기능만 있는 편집기를 만들었습니다. 제가 쓴 코드와 GPT가 쓴 코드가 혼재되어 있습니다. 코드 정리와 기능 추가는 2026년... 2027년...? 여유가 날 때 천천히 합니다😭

요 방법으로 백업하시는 분들 전용이니 주의해 주세요!

마우스가 없는 기기에서는 일부 기능이 제대로 동작하지 않습니다. PC에서 사용해 주세요.