출처: URL
+ 2025.01.29 <E4. 핸드아웃이 깨져서 저장돼요> 추가
+ 2025.08.09 <E4. 핸드아웃이 깨져서 저장돼요> 수정, <Q1. 롤20 핸드아웃을 같이 백업하고 싶어요> 추가
+ 2025.08.18 <Q1. 롤20 핸드아웃을 같이 백업하고 싶어요> 내 html grid 코드 수정
이전 CSS 모음 게시글에 있던 내용을 옮겨왔습니다!
저는 언제나 백업 툴을 사용하지 않고 수제백업(data:text/html, <html contenteditable>에 긁어넣고 오타 수정 후 메모장에 가서 코드 고치기...)를 하기 때문에, 대부분의 오류 해결이 백업용 툴을 사용하는 것 대신 메모장으로 모든 걸 해결하는 방식 기준으로 되어있습니다... 이 점 참고해주세요!
여기 있는 것 이외 백업 관련 문제가 있으면 포스타입 메시지로 문의 주세요~~
목차
E1. 플록을 백업하면 밑줄이 생겨요.
E2. 다이스가 가로를 뚫어요 / 다이스가 쪼그라들었어요.
E3. 오래된 백업본의 주사위가 이상해졌어요.
E4. 채팅 핸드아웃이 깨져서 저장돼요.
Q1. 롤20 핸드아웃을 같이 백업하고 싶어요
E1. 플록을 백업하면 밑줄이 생겨요.
플록을 백업할때 나오는 밑줄은 a 태그가 원래 하이퍼링크를 걸어주는 태그여서 발생하는 문제라,
- 태그를 a 태그가 아닌 다른 태그로 수정한다.
- CSS에서 밑줄이 생기는 속성을 제거한다.
이렇게 두가지 해결 방법을 적용해볼 수 있습니다. 그런데 웹 사이트의 설정에 따라 평상시에는 밑줄이 보이지 않다가 마우스를 올리면(hover) 밑줄이 생기거나 하는 내용이 있으면 text-decoration:none;(밑줄을 보이지 않게 하는 CSS 속성)이 적용되어있는 롤꾸들에서도 밑줄이 나오기도 해서, 그런 부분을 원천 차단해버리기 위해 + 두번째 방법을 적용하려면 조금 어렵고 복잡해지기 때문에 조금 더 단순무식한 첫번째 방식을 사용해서 모든 태그를 고쳐줄 겁니다.
백업본의 전체 코드를 메모장같은 텍스트 편집기에 붙여넣고 a 태그를 span 태그로 전부 바꿔주는 건데요, 저는 메모장의 찾기/바꾸기 기능을 사용해서 아래와 같이 모든 코드를 수정해주었습니다!
- 찾기: <a 바꾸기: <span
- 찾기: </a> 바꾸기: </span>
BGM과 같이 외부 링크로 연결되는 내용은 백업 코드에서 href=로(*따옴표 빼고!!) 찾기를 실행한 뒤 그 부분의 span으로 바뀌어버린 태그를 a태그로 수정해주시면 됩니다!! ※닫는 태그까지 수정하셔야합니다※
+ 혹시 닫는 태그가 뭔지 모르실 분들을 위해...
닫는 태그는 백업을 위해 파일을 까보신 분들이라면 <어쩌구 style="어쩌구저쩌구" 뭔가="뭔소린지모르겠는내용"> </어쩌구> 이런 식으로 내용이 되어있는 걸 한번쯤 보셨을 텐데, 여기서 <어쩌구 뒤에="뭔가내용"> 이렇게 어쩌구 앞에 '/'와 같은 슬래시 기호가 붙어있지 않은 게 여는 태그, </어쩌구>처럼 어쩌구 앞에 슬래시 기호가 붙어있는 걸 닫는 태그라고 합니다!!
위 백업 과정의 밑줄을 지우기 위해 바꾸기를 하고나면 링크가 걸려있는 코드를 포함한 모든 코드가 <span> </span>으로 바뀌게 되는데, 링크를 되살리겠다고 href가 들어있는 여는 태그만 수정해서 <a> </span> 이렇게 되면... 다른 엉뚱한 <span> 태그가 닫힐 수도 있고 그러면 코드가 꼬이고 가정이 무너지고 사회가 무너지고 <가 될 수 있으므로... 꼭!!! <a> </a>로... 닫는 태그까지 수정해주세요... 중요합니다!!
E2. 다이스가 가로를 뚫어요 / 다이스가 쪼그라들었어요.
롤꾸와는 관계없이, 백업을 하다보면 롤20의 기본 다이스들이나 몇가지 요소들이 가로면을 뚫고나가거나 자신감을 잃고 쪼그라드는 경우가 종종 있습니다...
코드를 복사하는 과정에서 원래 100%로 설정되어있던 값들이 여러분이 보고 있는 창의 크기에 맞춰 특정한 픽셀 값으로 고정되기 때문인데, 저는 아직 이 문제를 미리 방지할 방법을 못 찾았네요...ㅠㅠ 해결법은 아래와 같습니다!
1) 채팅 기록을 복사한 창을 켜두고 주사위 부분의 코드 비슷한 걸 찾습니다.
+ 메모장이나 텍스트 편집기의 찾기 기능을 이용해서 table을 검색하면 좀 더 쉽게 찾을 수 있습니다! 롤20에서 다른 기능을 사용하지 않는 이상 table 태그는 보통 주사위거든요,,,
2) 해당하는 태그에 적용된 CSS(style=""의 따옴표 사이 속성들)에서 width: ~px;이라고 적힌 부분을 찾습니다.
+ 컴퓨터 모니터마다, 복사할 때 윈도우 크기를 어느정도로 해두었느냐에 따라 ~의 값이 달라질 수 있습니다!
3) 찾기 및 바꾸기 창을 열어, width: ~px; 부분을 찾기에 넣고 width: 100%;를 바꾸기에 넣고 모두 바꾸기를 클릭합니다.
이렇게 세 단계를 거친 코드를 다시 html 블록에 넣으면, 정상으로 돌아온 주사위를 확인할 수 있습니다!
E3. 오래된 백업본 주사위가 이상해졌어요.
추억회상을 하려고 제 옛날 백업본을 확인하다가 주사위들이 이렇게 고장난 부분들을 발견해버렸습니다. 분명 백업할 때는 이런 게 없었는데...8.8
원인은 명확하지 않지만, 백업한 지 오래된 일부 백업본에서 비슷한 문제가 발견되는 걸로 보아 뭔가 그시절 코드의 오류거나 제가 모르는 영역에서의 문제거나...한 것 같아요. 우선 일차적인 원인은 쌍따옴표(")의 위치가 잘못되어 발생하는 오류입니다.
고치려면 두 가지 과정을 거쳐야 하는데, 주사위를 굴린 결과값이 모두 다른 이슈로... 모두바꾸기를 사용하기가 어려운 면이 있습니다. 먼저 저런 문제가 발생한 부분의 HTML 코드를 살펴보면,
<td class="sheet-template_value" style="box-sizing: content-box; padding: 2px; border-bottom: 1px solid black; text-align: center;"><span class="inlinerollresult showtip tipsy-n-right" title="Rolling 1d100 = (<span class=" basicdiceroll"="">4</span>")" style="box-sizing: content-box; background: rgb(190, 190, 190); border: 2px solid black; padding: 0px 3px; font-weight: bold; cursor: help; font-size: 1.1em; display: inline-block; min-width: 1.5em;">4</td>이런............. 상태인데, 여기서 살려야 할 부분은 <span>부터 </span>까지의 값이고, 지워버려야 할 부분은 </span> 태그 다음부터 </td> 태그 이전까지의 부분입니다.
지워버려야 할 부분을 지워주고, <span> 태그 부분을 다음 내용으로 고쳐주세요. (아래 코드 복사/붙여넣기 해서 사용하시면 됩니다!)
<span class="inlinerollresult showtip tipsy-n-right" title="Rolling 1d100 = (<span class=basicdiceroll)" style="box-sizing: content-box; background: rgb(190, 190, 190); border: 2px solid black; padding: 0px 3px; font-weight: bold; cursor: help; font-size: 1.1em; display: inline-block; min-width: 1.5em;">전부 수정해주고 나면 위와 같이 정상적인 주사위가 출력됩니다. 와~~
+ 저는 보통 이런 작업을 할 땐 data:text/html, <html contenteditable> 에서 수정을 하지만, 메모장에서 찾기를 켜고 title="Rolling 1d100 = 으로 검색하면 오류가 나는 부분이 검색되니 조금 더 편하게 수정을 진행할 수 있습니다!
E4. 채팅 핸드아웃이 깨져서 저장돼요.
배포되고 있는 핸드아웃 중 채팅창에서 사용할 수 있는 핸드아웃은 대체로 두 가지 경우로 나뉩니다.
- table을 사용해서 만들어진 채팅 핸드아웃
- table을 사용하지 않고, 각각의 block으로 모양을 만든 (짭) 테이블 핸드아웃
아마도 전자의 경우에는 주사위가 채팅창을 뚫고 나가는 것처럼 핸드아웃에 깨짐이 발생할 테고, 후자의 경우에는 아래 이미지처럼 깨짐이 발생할 텝니다.
첫번째 경우는, E2. 주사위가 가로를 뚫어요를 참고하여 주사위의 좌우 너비를 수정할 때와 같이 해당 핸드아웃에서 픽셀값으로 되어있는 width 값을 찾기/바꾸기를 통해 퍼센트(비율) 값으로 변경해주면 일괄적으로 수정이 가능합니다!
+ 핸드아웃 각각이 다른 너비값을 가지고 있는 경우에는 찾기/바꾸기 기능으로 한번에 변경되지 않으니, 다른 값마다 각각 변경이 필요합니다!
하지만 두번째 경우는… 해결법이 어렵지는 않으나, 문제 특성상 일괄 작업이 어려워서 각각의 핸드아웃마다 따로 수정해야 하는 약간의 노가다를 필요로 합니다.
해당 문제의 원인은 아마 roll20에서 코드를 긁어서 data:text/html,<html contenteditable> 쪽으로 옮길 때, html 코드 자체가 복사되는 게 아니라 형태만 긁어서 복사되기 때문으로 보입니다. 주사위가 벽을 뚫고 나갈 때와 비슷한 원인이지만, 이 경우엔 짭 테이블 역할을 하던 각각의 네모박스가 각각 벽을 뚫고 나가 분리됐다고 생각하시면 될 것 같습니다,,,
먼저, 위의 형태로 박살난 부분의 핸드아웃을 원본 롤20 채팅 로그에서 찾아줍니다.
해당 페이지에서 수정할 핸드아웃을 찾아준 뒤, F12를 눌러 개발자 도구를 엽니다.
1번을 클릭해서 선택 모드를 켜고, 오른쪽 화면에서 선택하려는 핸드아웃의 배경 부분(아무것도 없는 회색 부분!)에 마우스를 올리면 저렇게 핸드아웃이 있는 칸 전체가 선택됩니다. 그 부분을 클릭하면 개발자 도구에서 어떤 부분이 아래처럼 초록색으로 변하는데,
초록색으로 변한 부분을 우클릭해서 HTML로 수정을 누르면, 그 부분의 텍스트를 수정할 수 있게 됩니다. 하지만 저희는 수정이 목적이 아니라 원본 코드를 가져가는 게 목적이므로! 수정할 수 있게 된 코드 중에서 <a style= 로 시작하는 부분부터 복사해서 <div>나 </div> 앞에 있는 </a>까지 복사해줍니다! (아래 코드의 <a style= 부터 </a>까지! 실제로는 길이가 훨씬 깁니다,,)
<div class="message desc" data-messageid="-OBuaU6qCElVN0dJ_9f2"><div class="spacer"></div> <a style="text-decoration: none ; text-align: center ; color: #333333 ; font-size: 14px ; display: inline-block ; border-bottom: 1px solid #333333 ; border-left: none ; border-right: none ; padding: 10px 16px ; padding-bottom: 3px ; text-align: center ; width: 35% ; background: #ffffff ; margin: auto">어쩌구 내용</a><div id="menu-OBuaU6qCElVN0dJ_9f2" class="flyout"></div></div>+ div도 어차피 원본 코드일텐데 왜 복사하지 않냐면 > 통째로 복사/붙여넣기해서 수정하는 경우 원본 코드에서의 일부 CSS가 제대로 적용되지 않아 핸드아웃의 배경 부분만 흰색으로 변할 때가 있어서... 해당 경우를 방지하기 위해 틀이 아닌 !내용만! 복사해서 옮겨주는 겁니다~~
내용을 다 복사했으면, 이제 백업할 코드를 편집하는 페이지(data:text/html,<html contenteditable> 기준)로 가서 망가진 코드 부분을 조금 전 복사할 때와 같은 방법으로 선택해준 뒤, 우클릭 > HTML로 수정을 눌러 복사할 때와 같이 <a style= 부분부터 마지막 </a> 까지의 부분을 지운 뒤 복사한 내용을 붙여넣기 해줍니다.
그러고 나면 위와 같이 정상적인 핸드아웃(내용은 모 시나리오 내용이라 지웠습니다!)으로 돌아옵니다. 원본 핸드아웃 코드의 CSS (폭 조정 등등...)가 그대로 적용되었으므로, 페이지의 폭이 변경되거나 해도 문제가 생기지 않습니다 ㅎ///ㅎ
Q1-1. 롤20 핸드아웃을 같이 백업하고 싶어요
최근 PC 개별 핸드아웃이 많은 시나리오/룰을 가다보니… 채팅창으로 표시할 수 없는 핸드아웃을 백업할 방법을 고민하게 되더라고요ㅠㅠ 빼자니 백업본을 볼 때 흐름이 잘 안 보이고, 넣자니 어떻게 해야할지 너무 복잡해지고…
제 방법이 최선이라고는 못하겠지만!! 제가 핸드아웃을 기존 백업본 사이에 끼워넣을 때 사용한 방법을 소개하고, 필요한 코드를 공유하겠습니다~~
HTML 지식이 없는 경우 난이도가 높아… 최대한 쉽고 자세하게 정리했지만, 자칫하면 기존 백업본이 꼬이는 불상사가 발생할 수 있기 때문에… 기존 코드를 보존해둔 상태에서 사본으로 진행하는 것을 추천드립니다!!
준비물: data:text/html, <html contenteditable> 창 3개(이하 편집창1,2,3) / 기존 백업본 코드 / 핸드아웃 편집 권한
1. 먼저 기존 백업본의 코드를 복사하고, 편집창 1에서 F12를 눌러 개발자 도구를 열어 body 태그 내에 붙여넣습니다. (방법 아래 참조)
2. 편집창 2의 body 태그 내에 아래 HTML 코드를 붙여넣어둡니다. 배경색 부분은 해당 핸드아웃의 배경색에 맞춰서 변경해주거나 아예 지워주세요!
<div style="background-color: rgb(12, 12, 12); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin: auto; white-space: normal;"></div>3. 롤20에서 넣으려는 핸드아웃을 편집 모드로 켜고, 내용 및 설명의 내용을 복사합니다. (DAY9님의 우주 핸드아웃 배포를 사용했습니다!)
4. 편집창3에 해당 핸드아웃을 붙여넣습니다. (개발자 도구X 그냥 붙여넣기O)
5. 편집창 3에서 개발자 도구를 켜고, 아래 빨간 박스로 표시된 부분을 지워줍니다. (해당 칸을 더블클릭하면 편집이 가능합니다!)
6. 편집창 3에서 table 부분 코드를 복사합니다.
7. 편집창 2로 돌아와 복사한 코드를 앞서 2단계에서 붙여넣기 해둔 div 안에 붙여넣습니다. (만약 한 줄에 넣어야 하는 핸드아웃이 2개 이상이라면, 각각의 핸드아웃에 대해 3~7을 반복해주세요!)
8. 편집창 2의 div 코드를 요소 복사로 복사하고, 편집창 1의 백업본에서 붙여넣고 싶은 위치를 아래와 같이 선택합니다.
9. 선택된 곳의 <div>에서 HTML로 수정을 클릭하고, 가장 앞부분에 편집창 2에서 복사한 코드를 붙여넣습니다.
위 단계를 전부 끝내면, 위 이미지와 같이 핸드아웃이 기존 플록 사이에 들어가게 됩니다!
이제 이 과정을 플록에 넣을 모든 핸드아웃에 대해 반복하면 백업이 완료됩니다…🥲
