Roll 20에서 배포 코드를 입맛대로 고쳐보자!

 

 

 

주의!
저도 css는 정식으로 배워본 적이 없어서 중구난방일 확률이 높아요. 
원래 css는 Cascading Style Sheets라고 HTML 계열 언어의 스타일을 꾸미기 위한 스타일 시트 언어인데, 롤 20에서는 좀 코드가 다르기도 하고 해서 롤 20 기준으로 설명해놨으니 참고용으로만 봐주세요!


롤 20에서 배포코드를 쓰려고 하는데 이 느낌이 아니야! 내 취향은 이게 아니라구! 라는 분들을 위해 만들었습니다. 고치지 말라는 코드가 아닌데 못 고치면 아쉬울테니까요.
첫 포스팅은 몇 개 없지만 추후에 조금씩 추가하도록 하겠습니다. (반응 좋으면 빨리 올라올지도..?)
가끔 css 아니고 명령어 쪽인 것도 있을 수 있어요.

주로 #"style=" 코드로 잡을 수 있는 걸 써보겠습니다.

 

 

빨리 추가해주시길 바라거나, 아니면 궁금한 점이 있으시다면 배포계의 DM으로 와주세요. 저도 많이 아는 건 없지만 같이 머리 싸매드릴 수는 있어요!(?)

 

수정 기록

2022. 01. 13 - 첫 업로드

2022. 02. 03 - 기본형태 코드 오류 수정, 수정 기록 추가

2022.06.13 - 카테고리 이동

 

 

 

목차

1) 기본형태

2.1) color

2.2) font-size

2.3) font-weight

2.4) font-style

2.5) background-color

2.6) font-family

3.1) text-decoration: none;

3.2) !important

3.3)   

---

1) 기본 형태

#"style=" 코드는 대괄호 [ ] 안의 것을 잡아줍니다.
그래서 기본적인 형태는 이렇습니다.

 

[꾸미고자 하는 내용](#"style="color: #333333;)
[꾸미고자 하는 내용](#"style="코드1: 세부내용; 코드2: 세부내용; 코드3: 세부내용;)

이런 식으로 #"style=" 뒤에 원하는 만큼 코드를 적어주시고, 코드 하나를 쓰고 나서는 꼭 세미콜론(;)을 붙여주세요. 세미콜론은 코드에서 이 코드를 끝냈어. 라는 의미이므로 제대로 찍어주지 않는다면 오류가 발생합니다.
같은 코드나 충돌하는 종류가 아니라면 원하는 만큼 추가할 수 있지만 같은 종류의 코드 여러개를 넣어놓는다면, 뒤쪽에 적힌 코드로 출력됩니다. 다른 종류의 코드라면 코드 순서는 크게 중요하지 않아요.
같은 종류의 코드에서 우선시하라는 코드(!important는 아래쪽에서 다룰께요.)

또한 css에서 띄어쓰기는 크게 중요하지 않으니까 신경은 덜 써도 됩니다.

 

2.1) color

많은 분이 사용하시는 color 코드!
요새는 api를 쓰지 않는 사담 매크로로도 많이 쓰이는 편이죠.
많이 쓰이는 사담 매크로를 먼저 볼까요?
(text-decoration은 밑에서 다룰께요. ?{입력내용}인 중괄호는 이 글에서 다루지 않습니다.)

 

[?{잡담내용}](#"style="color:Gainsboro; text-decoration:none;)

[?{잡담내용}](#"style="color:#aaaaaa; text-decoration:none;)

color 코드는 글자의 색상을 제어합니다.
- red, grey, blue 등 이미 정의된 색상
- #00f, #333333 같이 16진수로 된 색상 코드
롤 20에서는 이 2가지 종류를 쓸 수 있습니다.

첫번째처럼 색 이름를 쓰는 경우에는 css 색상 키워드를 검색해서 거기 나오는 목록에서 보고 사용하시면 되고, 두번째처럼 색상 코드를 쓰실 경우에는 포토샵 계열의 프로그램이나 네이버에 색상 코드를 검색해서 조절해서 삽입하시면 됩니다.
주의할 점은 첫번째처럼 색상 이름을 쓰실 경우에는 앞에 #은 붙이지 말아야 합니다. 만약 붙인다면 그 코드는 무시됩니다.

 

2.2) font-size

desc 명령어든 채팅창에서든 기본적으로는 14px입니다. 

이 코드로는 글씨 크기를 키우려고 하거나, 작게 하려고 할 때 사용할 수 있습니다. 

 

/desc [15px로 글씨 쓰기](#"style="font-size: 15px;)

 

다른 에디터나 프로그램을 보면 소수점도 지원을 하지만, 롤 20에서는 소수점을 넣어버리면 내림을 해서 출력해줍니다.

px말고 mm나 cm단위를 뒤에 붙여도 오류는 나지 않지만 mm, cm로 했을 때는 너무 크게 나오기 때문에 추천하지 않습니다.

아예 단위 자체를 뒤에 붙이지 않는다면 그 코드는 무시됩니다. 

 

 

 

 

2.3) font-weight

일반 채팅창은 굵게 하려면 *를 이용하면 되지만, /desc 에서는 기본적으로 굵게 되어있죠. 

여기에서 굵기를 일반 수준으로 하려면, 이 코드를 사용하면 됩니다.

 

/desc 기본 데스크

/desc [일반 굵기](#"style="font-weight: normal;)

 

일반적인 css는 light(er), bolder, 상수까지 가능하지만, 롤20에서는 normal, bold만 가능합니다. (아니라면 제보 부탁드려요.)

-normal 일반 굵기

-bold 굵게

 

 

 

 

 

 

2.4) font-style

일반 채팅창은 기울게 하려면 굵게와 마찬가지로 *를 이용하면 되지만, /desc 에서는 기본적으로 기울게 되어있죠.

여기에서 기울기를 없애려면, 이 코드를 사용하면 됩니다.

 

/desc [이렇게 하면 똑바로 서지요.](#"style="font-style: normal;)

 

-italic 기울임 꼴

-normal 보통

 

 

 

 

 

 

2.5) background-color

이건 배경을 바꿔주는 코드입니다. 

하지만 여기에서 배경은 해당 코드에 대괄호로 적용하겠다고 한 글씨 뿐입니다.

칸 전체를 원하는 배경색으로 바꾸고 싶으면 다른 코드도 함께 사용해야 하므로, 참고만 해주시거나 다음 글에서 다른 코드와 함께 써주세요.

 

/desc [배경 검은색, 글씨 흰색](#"style="background-color: black; color: white;)

 

여담이지만, 기울임꼴이 된 상태에서는 배경색이 살짝 모자랍니다.

그럴 때는 padding: 3px;을 더해보도록 해요. 

 

 

 

 

 

 

2.6) font-family

이 코드는 글꼴을 바꿔줍니다. 

롤 20에서 기본적으로 되어있는 글꼴은 Arial입니다만, 웬만한 영어 폰트의 한글은 Arial과 비슷하게 나타납니다. 

가능한 한글 폰트는 많지 안힌 하지만 css 중에서도 나눔 폰트라던가, 굴림 같은 건 가능한 경우가 있습니다. 

 

[돋움](#"style="font-family: dotum;)

[Arial, cursive](#"style="font-family: Arial, cursive;)

[cursive](#"style="font-family: cursive;)

 

여기에 산세리프(sans-serif), 세리프(serif), 모노스페이스(monospace), 흘림체(cursive), 판타지(fantasy) 같이 폰트 끝이나 같은 폰트지만 스타일을 다르게 하고 싶을 때도 이 코드를 사용합니다. 

원하는 만큼 적어서 사용할 수 있지만, 다른 코드와 다른 점은 한 코드 안에서 종류를 적는 거기 때문에 세미콜론(;) 전에 콤마(,)를 사용해서 원하는만큼 하고 나서 세미콜론을 이용해 코드를 끝내주세요.

 

 

 

 

 

 

3.1) text-decoration: none;

이거 코드에 꼭 넣으라는 분들이 많습니다. 

css는 기본적으로 코드를 따로 넣지 않으면 밑줄이 생깁니다. 가만히 있을 때는 없는 것처럼 보이지만 커서를 글자 위에 올리거나 다른 곳에 백업을 하게 되면 밑줄이 생겨버립니다. 

이럴 때를 위해서 텍스트에 밑줄은 없앨래. 하는 코드로 하나씩 넣어주는겁니다. 

다른 종류로 사용해보고 싶은 분들을 위한 설명은 다음 글에 넣어볼께요.

 

 

 

 

 

 

3.2) !important

이 코드는 같은 코드가 충돌할 때 뒤에 있는 코드 말고 이 코드를 우선시하라는 코드입니다. 

 

[이 코드를 우선시](#"style="color: #000000 !important; color: blue;)

 

이렇게 하면 !important를 붙인 코드를 우선시해서 표시합니다. 

이게 통하지 않는 경우는 스킨이라던가, 브라우저 속성이 달라서일 수도 있습니다. 

주의할 점은 세미콜론을 찍기 전에 써줘야해요.

 

 

 

 

 

 

3.3)  

롤20에서는 빈칸을 여러 번 띄어써도 늘 한 칸만 나옵니다. 

빈칸이 여러 개 필요할 때는 참 곤란합니다. 

 

그럴 때는 원하는 공백의 수만큼  를 넣어주면 됩니다. 

주의할 점은 스타일 코드는 아니라서 대괄호에 함께 넣어주거나 대괄호 없이 아예 앞에 넣어주셔야 합니다.

 

 

 

 

 

 

 

 

번외편) Roll 20 기본 명령어의 css를 뜯어볼까?

 

/desc 기본
/desc [css 적용한 거]((#"style="color:#333; text-weight: bold; font-sixe: 14px; font-style: italic; text-decoration:none;)

**기본 굵게**
[css로 굵게](#"style=" color: #333; font-size:14px; text-decoration: none; font-weight: bold;)

 

*기울임꼴*

[css로 기울임꼴](#"style=" color: #333; font-size:14px; text-decoration: none; font-style:italic;)

 

 

...desc나 일반채팅에서나
....기본 색상: #333, #333333
.....기본 사이즈: 14px
......tistory도 기본 색상은 #333

 

 

 

..참고한 포스팅

https://www.codingfactory.net/10553 

https://hianna.tistory.com/299 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=alyssa111&logNo=221494902227