한 번도 안 해본 사람은 있어도, 한 번 해본 사람은 없다는 롤꾸…!
채팅로그 꾸미기, 흔히 롤꾸라 불리는 것들은 대개 글씨에 a 태그를 씌우고, 그것에 스타일을 입히는 겁니다.
즉. HTML과 CSS를 다룰 줄 안다면, 원하는 롤꾸를 얼마든지 만들 수 있습니다 😉
따라서 본 글은 이 두 가지 언어를 약간이라도 다룰 줄 아는 사람이 본다는 가정 하에 작성합니다.
↓ 혹시 html과 css에 대해 잘 모르지만 알고 싶다면 ↓
https://danharu0920.tistory.com/144, https://danharu0920.tistory.com/156
↓ 단순히 롤꾸 모음을 보고 싶은 분이라면 ↓
https://danharu0920.tistory.com/141, https://danharu0920.tistory.com/153, https://danharu0920.tistory.com/155
▣ 눈으로 보면서 CSS를 만들자(영어)
https://html-css-js.com/css/generator/
1. 개요
롤꾸를 만들 때 기초가 되는 매크로는 < [?{내용}](#" style="CSS 디자인) >입니다.
위 매크로는 아래 이미지와 같은 입력창을 띄우고,
빈 사각형 안에다 원하는 내용을 적으면 CSS 스타일이 적용된 상태로 채팅로그에 보여집니다.
예시
/desc [?{내용}](#" style="text-decoration: none; font-style:normal; border: 1px solid #000; padding: 5px)
2. 참고 사항
1) 매크로 앞에 [/desc], [/emas "이름"], [/as "이름"] 등을 적으면 롤꾸와 별개로 먹힙니다.
2) 몇몇 기호는 그대로 사용할 경우, 매크로를 망칠 수 있기 때문에 아래 표의 치환자를 사용하여야 합니다.
| 표현문자 | 숫자표현 | 설명 |
|---|---|---|
| space | | 빈 칸 |
| % | % | 백분율 기호 |
| } | } | 오른쪽 중괄호 |
| ) | ) | 오른쪽 괄호 |
| ? | ? | 물음표 |
| @ | @ | 골뱅이 |
| [ | [ | 왼쪽 대괄호 |
| ] | ] | 오른쪽 대괄호 |
| | | | | 수직선 |
| " | " | 따옴표 |
3. 두 개 이상의 매크로 나란히 놓기
두 가지 이상의 매크로를 함께 쓰고 싶으면 해당 매크로를 나란히 놓으면 됩니다.
단, 기초 매크로의 '내용' 부분에 서로 다른 값이 적혀있어야 별도의 입력창이 나오는 점을 잊지 마세요.
예시
/desc [?{내용}](#" style="text-decoration: none; font-style: normal;) [?{내용2}](#" style="text-decoration: none; font-style: normal; font-size: 1.5em; color: red;)
4. 두 개 이상의 매크로 선택지 만들기
기초 매크로는 간단하지만, 아쉽게도 매크로 하나가 하나의 선택지 외에는 갖지 못 합니다.
두 개 이상의 선택지가 있는 매크로는 기호 "|"를 이용해 만들 수 있습니다.
또, 각 선택지에 값을 지정하고 싶은 경우, 기호 ","를 이용합니다.
응용
/desc [?{내용}](#" style=" ?{폰트컬러|red,text-decoration: none; font-style: normal; color: red;|yellow,text-decoration: none; font-style: normal; color: yellow;|blue,text-decoration: none; font-style: normal; color: blue|})
5. 두 개 이상의 요소를 하나의 디자인으로 꾸미기
두 개 이상의 요소롤 포함하여 한 번에 디자인하려 할 때,
사용하는 매크로는 < [?{내용} ?{내용2}](#" style="CSS 디자인) >입니다.
예시
/desc [ ?{내용} ?{내용2}](#" style="text-decoration: none; color: inherit; font-style: normal; padding: 10px; border: 4px double darkgray;)
6. a 태그 이외의 태그로 매크로 만들기
참고: https://hdtrpg.postype.com/post/10569016
매크로 <태그명 style="][ ](style=")[?{내용}]를 이용하면 여러가지 태그로 html을 구성할 수 있습니다.
이때, 뒤에 있는 매크로는 앞에 있는 매크로의 자식노드로 들어갑니다.
형제 노드로 들어가지 않는 게 아쉽네요…
예시
다만, 첫 매크로로 inline 속성의 요소가 들어갈 경우, 아래와 같은 문제가 발생할 수 있습니다.
| 본래 | 첫 매크로로 <img src="링크" ][ ]( ) 사용 시 |
 |
 |
위와 같은 문제를 해결하고자 할 때는 요소에 vertical-align: text-top; 속성을 주면 됩니다.
혹은 display: black 속성을 주는 방법도 있습니다.
채팅 로그에서 보이는 차이점
※ style을 적용할 수 없는 태그는 사용할 수 없습니다…
source 태그를 사용하지 못해서 audio나 vedio 태그를 쓰지 못하는 게 유감이에요. 😥
7. 클래스값 추가하기
음… 사실 짐작하시겠지만, 클래스값을 준다고 채팅 로그에서 달라지는 것은 거의 없습니다.
다만 백업할 때에 클래스값이 있으면 편할 것 같다는 생각이 들어 남겨둡니다.
<태그 이름 class="클래스명" style="][ ]( )
roll20 채팅 로그의 HTML에서는 userscript-클래스명으로 클래스명이 정해집니다.
8. 표
Roll20은 &{template:default} {{name=표 이름}} {{표 내용 1=표 내용 구분 1}}라는 표 매크로를 제공하고 있습니다.
하지만 이 매크로는 수정이 거의 불가능하며, 따라서 아래의 대체표 사용을 추천합니다.
<table style="][ ](style="background-color: 표 배경색; width: 100%)<caption style="][ ](style="background-color: 표 제목 배경색; padding: 5px;)[?{표 이름}](#" style="border: 1px solid 표 제목 테두리색;color: 표 제목 글씨 색; font-size: 1.1em; text-decoration: none; font-weight: bold; text-align: 정렬; display: block;)<tr style="][ ](#" style="border: 1px solid 표 내용 테두리색;)<td style="][ ](style="min-width: 50px; padding: 5px;)[?{표 내용 1}](#" style="text-decoration: none; font-style: normal; font-weight: bold; color: 표 내용 1 글씨색; text-align: 정렬; display: block;)<td style="][ ](style="padding: 5px;)[?{표 내용 구분 1}](#" style="text-decoration: none; font-style: normal; color: 표 내용 구분 1 글씨색; text-align: 정렬; display: block;)
9. 선택지
<div style="][ ](style="border: 1px solid navy; padding: 4px; display: table; table-layout: fixed;)[버튼](#" style="text-decoration: none; font-style: normal; font-weight: bold; text-align: center; display: block; padding-bottom: 2px;)<div style="][ ](style=" text-align: center;)[버튼1](! 내용1" style="text-decoration: none; font-style: normal; text-align: center; display: table-cell;)[ ](#" style="width: 2px; display: table-cell;)[버튼2](! 내용2" style="text-decoration: none; font-style: normal; text-align: center; display: table-cell;)[ ](#" style="width: 2px; display: table-cell;)[버튼3](! 내용3" style="text-decoration: none; font-style: normal; text-align: center; display: table-cell;)
감사합니다 😘
'ORPG > Roll20' 카테고리의 다른 글
| 티스토리 티알 로그백업 : 새 에디터에 롤20 채팅로그 반영하기 (0) | 2023.04.25 |
|---|---|
| Roll20 채팅로그 꾸미기 / 롤꾸하는데 도움되는 HTML·CSS 모음 (심화) (0) | 2022.04.28 |
| Roll20 채팅로그 꾸미기 : 롤꾸 모음 3 (0) | 2022.04.26 |
| 롤20 꾸미기 : 롤꾸 모음 2 (0) | 2022.04.19 |
| Roll20 채팅로그 꾸미기 / 롤꾸하는데 도움되는 CSS 모음 (0) | 2022.04.06 |
| Roll20 채팅로그 꾸미기 / 롤꾸 모음 (0) | 2022.04.01 |
댓글