Roll20 백업, 수정 팁

Rolling Mint에서 CSS 수정한 로그 긁어오기

아래의 사항들은 윈도우 메모장의 ‘바꾸기’ 기능을 사용하여 적용한다.

이미지 누락 방지
코드에서 amazo 검색 후 imgur에 같은 이미지 파일 업로드, 이미지 주소를 복사하여 링크 대체

판정 표 반응형으로 변경
<table style=“ 의 width를 다음과 같이 변경한다.

width: 100%;

반응형 이미지로 변경
이미지 링크 뒤 style에 폰트 설정을 지우고 아래의 코드를 추가하면 반응형 이미지로 바뀐다.

<img src=“image link” style=“max-width: 100%; height: auto; !important; …>

반응형 레이아웃이 깨질 시
해당 div.message.desc 자체를 edit as html 로 긁어온다.

도형이 밖으로 튀어나왔을 때
컬러 코드 뒤에 아래의 코드를 추가한다.

border-box;

컬러 박스가 프레임에 맞지 않을 때 1

올바른 코드(1줄)

</div><div class="message desc" style="padding-left: 15px; padding-right: 5px; padding-bottom: 6px; position: relative; line-height: 1.25em; font-style: italic; font-weight: 700; text-align: center; background-color: rgb(241, 241, 241); color: rgb(64, 64, 64); overflow: hidden;"><div class="spacer" style="margin: 0px -5px 8px -15px; height: 1px; background-color: transparent !important;"></div><span style="color: rgb(5, 102, 86); background-color: rgb(135, 189, 0); display: block; padding: 2px; box-shadow: rgb(135, 189, 0) 0px 8px 0px 15px; font-size: 12px; font-style: normal;">─────── 도입 ───────</span>

올바르지 않은 코드(2줄)
올바른 코드를 기반으로 네모박스 안에 다음과 같은 코드가 있는지, 코드의 형식이 맞는지 확인한다.
볼드체는 없었던 코드, 회색은 형식이 같음

</div><div class="message desc " data-messageid="-OA7UOjAp-Yr7Iv0XgFB" style="padding-left: 15px; padding-right: 5px; padding-bottom: 6px; position: relative; line-height: 2em; font-style: italic; font-weight: 700; text-align: center; background-color: rgb(241, 241, 241); color: rgb(64, 64, 64); font-size: 13px; overflow: hidden;"><div class="spacer" style="margin: 0px -5px 8px -15px; height: 1px; background-color: transparent !important;"></div><a style="color: rgb(0, 0, 0); background-color: rgb(255, 67, 67); display: block; padding: 2px; box-shadow: rgb(255, 67, 67) 0px 8px 0px 15px; font-size: 12px; font-style: normal; ">──── CHAPTER 1 ────</a><a style="color: rgb(0, 0, 0); background-color: rgb(255, 67, 67); display: block; padding: 2px; box-shadow: rgb(255, 67, 67) 0px 8px 0px 15px; font-style: normal;">인트로</a><div id="menu-OA7UOjAp-Yr7Iv0XgFB" class="flyout"></div>

오답노트 같은 거라 사실 그냥 이거 복사 붙여넣기 한 뒤 텍스트, 컬러만 바꾸면 된다.

컬러 박스가 프레임에 맞지 않을 때 2

overflow: hidden; 코드 누락, box-shadow 값이 지정되지 않을 경우 아래와 같은 문제가 발생한다.
다음과 같이 수정해준다.

</div><div class="message desc" data-messageid="-OA7aOkvx5KAcRisyr-e" style="padding-left: 15px; padding-right: 5px; padding-bottom: 6px; position: relative; line-height: 2em; font-style: italic; font-weight: 700; text-align: center; background-color: rgb(241, 241, 241); color: rgb(64, 64, 64); font-size: 13px; overflow: hidden;"><div class="spacer" style="margin: 0px -5px 8px -15px; height: 1px; background-color: transparent !important;"></div><a style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); display: block; line-height: 1.3; padding: 5px 25px; box-shadow: rgb(0, 0, 0) 0px 8px 0px 15px; ">멸망이,</a><div id="menu-OA7aOkvx5KAcRisyr-e" class="flyout"></div>

오답노트 같은 거라 사실 그냥 이거 복사 붙여넣기 한 뒤 텍스트, 컬러만 바꾸면 된다.

롤꾸한 박스가 채팅을 잡아먹었을 때
확인 후 아래와 같은 코드가 있으면 제거한다. 왜 생기는 거지?

margin: -26.8021px -89.3542px -17.8646px;

행간 수정
가독성을 위해 줄 간격을 늘린다. 기본 단위가 em으로 되어 있기에 맞춘다.

line-height: 1.25em ▶ line-height: 2em

그 외
html은 color: black; 을 인식 못 하는 것 같다. 이 경우 rgb(0, 0, 0); 으로 변경해 준다.
수정 시 코드 뒤에 ;를 빠뜨리지 않도록 주의하자. 바로 뒤 코드가 안 먹힌다.