나는 간지나는 롤20을 할거야 <Pro는 아니지만 말야

추가 2021.03.13 아침

백업할 겸 올리는거에요 대충.. 갈겼음.

포타..에서 즐찾편하게 하시라고!! 포타에도 옮겼어요 https://whadis-6ox.postype.com/post/11168963

 

 

기본은 이것입니다...

[쓰고 싶은 말](#" style="property1: value; property2: value; property3: value;)

https://app.roll20.net/forum/post/5899495/roll20-tips-and-tricks-innovative-solutions-to-common-problems/?pageforid=9119412#post-9119412

 

-html 컬러 코드 픽커: https://html-color-codes.info/Korean/

색상 코드 집는 곳 #여섯자로 나와주십니다. #코드 부분을 바꾸는 것으로 색상을 쉽게 변경할 수 있어요. 색상 바꾸는 것만 여러개 등록하고 싶으시다면 아래 코드를 넣으세요..

#?{색상|
색상이름,코드여섯자리|
색상이름,코드여섯자리}

 

매크로 하나로 여러 코드를 정리해 쓰고 싶다면..

[?{ 할말|}](#" style="?{효과|효과설명,코드})

이걸 하면 됩니다. )나 ,가 코드 안에 더 들어가는 경우에는 좀 손을 봐주셔야 돌아가요 (ㅠㅠ~~)

 

 

+매크로 안에는

[?{ 할말|}](#" style="?{효과|
효과설명,코드|
효과설명,코드|
효과설명,코드})

이렇게 넣어두면.. 보기도 정리하기도 쉽겠죠..

 

 

TIP::

letter-spacing: 숫자px; 넣으면 자간을 조절할 수 있다네요. 재밌어요.. 

 display:block; 이걸 넣으면 블록같은 거 두줄이 넘겼을 때 한 박스로 이쁘게 합쳐줍니다.

text-decoration:none; 이거 추가하면 마우스 댔을 때 줄 안생긴다고함....

 

그리고 대충 아래가 제가 넣으려고 긁은 매크로

 

---

숨기기

[?{할말|}](#" style="color:rgba(0,0,0,0&rpar;;text-shadow:5px 0px 10px black,-5px 0px 10px black;font-size:12px;line-height:12px;text-decoration:none;)

 

[?{할말|}](#" style="color:black;border:1px solid black;background-color:black;)

---

멋지게 뭔가 알려주기

[?{할말|}](#" style="border:1px solid black;background-color:?{배경색상|화이트,white|베이지,beige};margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;)

 

[?{할말|}](#" style="border-style:groove; border-color : #ffffff; padding:5px; background-color:#ffffff;font-size:15px; text-align:center; user-select:none; display:block;text-decoration:none;)

 

[?{할말|}](#" style="border-style:inset; border-color : #ffffff; padding:5px; background-color:#ffffff;font-size:15px; text-align:center; user-select:none; display:block;text-decoration:none;)

 

[?{할말|}](#" style="border-style:outset; border-color : #ffffff; padding:5px; background-color:#ffffff;font-size:15px; text-align:center; user-select:none; display:block;text-decoration:none;)

---

글자 꾸미고 강조하기

 

[?{ 할말|}](#" style="?{효과|
검은 그림자,color:white;font-size:20px;line-height:20px;text-shadow:3px 1px 6px #000000,-5px 1px 10px #000000;text-decoration:none;|
분홍 그림자,color:white;font-size:20px;line-height:20px;text-shadow:3px 0px 6px #FE2E64,-5px 0px 10px #F5BCA9;text-decoration:none;}

 

[?{ 할말|}](#" style="color:?{색상|
붉은 강조,brown|
검은 강조,black|
파란 강조,blue};font-size:25px;font-weight:bold;display:block;text-align:center;line-height:25px;text-decoration:none;)

 

[?{할말|}](#" style="color:white; text-shadow:1px 3px 2px #ff0000,2px 1px 2px #0100ff, 5px 1px 0px #40FF00;text-decoration:none;)

 

[?{할말|}](#" style="border-bottom: 1px solid ?{컬러|블루,#688FF4|레드,#cf0000}; padding: 0.1em;text-decoration:none;)

---

풍선

[●](#" style="color:white;font-size:10px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[●](#" style="color:white;font-size:15px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[●](#" style="color:white;font-size:20px;text-shadow:1px 1px 1px #000000;text-decoration:none;)[?{할말|}](#" style="order: 1px solid black; border-radius: 7px; padding: 5px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff;text-decoration:none;)

[ ](#" style="order: 1px solid black; border-radius: 1px; padding: 1px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;text-decoration:none;)[ ](#" style="order: 1px solid black; border-radius: 3px; padding: 3px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;text-decoration:none;)[?{할말|}](#" style="border: 1px solid black; border-radius: 5px; padding: 5px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;text-decoration:none;)

 

[●●● ](#" style="color:white;font-size:20px;text-shadow:1px 1px 1px #000000)[?{할말|}](#" style="border: 1px solid black; border-radius: 5px; padding: 5px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff;text-decoration:none;)

 

[　](#" style="order: 1px solid black;font-size:2px; border-radius: 10px; padding: 2px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff) [　](#" style="border: 1px solid black;font-size:2px; border-radius: 10px; padding: 2px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff)  [?{할말|}](#" style="order: 1px solid black; border-radius: 5px; padding: 5px; box-shadow: 1px 1px 1px 1px grey;line-height:30px;background-color:#ffffff;text-decoration:none;)

@dada__trpg님께서 보내주셨어요..

[ ](#" style="display: inline-block;vertical-align: bottom;border-radius: 2px;padding: 2px;box-shadow: 1px 1px 1px 1px;line-height: 0.5;font-size: 0.5em;position: absolute;bottom: 10px;left: 20px;)[ ](#" style="display: inline-block;vertical-align: bottom;border-radius: 4px;padding: 4px;box-shadow: 1px 1px 1px 1px;line-height: 0.9;font-size: 0.9em;position: absolute;bottom: 10px;left: 26px;)[?{할말|}](#" style="display: inline-block;vertical-align: bottom;border-radius: 5px;padding: 5px;box-shadow: 1px 1px 1px 1px;line-height: 1.4;margin-left: 20px;)

 

[?{할말|}](#" style="border-radius: 15px 15px 15px 0; border: 3px solid #FFAD5B; text-decoration:none; padding: 0.5em 0.6em; color: #FF8000;line-height:25px)

 

[?{할말|}](#" style="border-radius: 5em; padding: 0.6em 1em; text-decoration:none; background: #F9F9F9; line-height:30px; box-shadow: 1px 2px 10px rgba(0,0,0,0.2)

 

[?{할말|}](#" style="border-radius: 15px 15px 15px 0; padding: 0.6em 1em;text-decoration:none; background: #F9F9F9; line-height:30px; box-shadow: 1px 2px 10px rgba(0,0,0,0.2)

 

[?{할말|}](#" style="border-radius: 15px 15px 15px 0; border-bottom: 5px solid #B9C4C4; padding: 0.5em; background: #CEDADA; line-height:30px;text-decoration:none;)

 

[?{할말|}](#" style="position: relative; background: #ffffff; border-radius: .4em; padding:10px; user-select:none; display:block; line-height:20px; text-decoration:none;) [ ](#" style="content: ''; position: absolute; border: 12px solid transparent; border-right-color: #ffffff; border-left: 0; border-bottom: 0; margin-top: -25px; margin-left: -10px;text-decoration:none;)

 

---

테두리 및 칸

[?{ 할말|}](#" style="border: 1px solid black; border-radius: 5px; padding: 5px; box-shadow: 1px 1px 1px 1px grey;line-height:15px;display: inline-block;text-decoration:none;)

 

[?{ 할말|}](#" style="border: 1px solid black; padding: 2px;line-height:30px;text-decoration:none;)

점선으로 바꾸고 싶다면 solid → dashed

 

[?{할말|}](#" style="border: 3px double #000000; padding: 2px; line-height:30px;text-decoration:none;)

 

[?{ 할말|}](#" style="border-right: #ff0000 1px solid; border-left: #00ff00 1px solid; border-top: #ffff00 1px solid; border-bottom: #0000ff 1px solid;text-decoration:none;)

 

[?{할말|}](#" style="background: #F9F7F6; border-left: 0.5em solid #cf0000; padding: 0.5em;text-decoration:none;)

 

[?{할말|}](#" style="border-radius: 0 15px 15px 0; border-left: inset; padding: 0.6em; background: #EBEEF0; line-height:25px;text-decoration:none;)

 

[?{할말|}](#" style="color: #ffffff; font-size:15px; font-weight:bold; background-color:?{색상|레드,#cf0000|블랙,#000000}; margin:1px;text-align:center;user-select:none;display:block;padding:5px;text-decoration:none;)

혹시 글색도 바꾸고 싶으신가요..

[?{할말|}](#" style="color: ?{글자색|
흰색,#ffffff|
검은색,#00000}; font-size:15px; font-weight:bold; background-color:?{배경색|
레드,#cf0000|
블랙,#000000|
화이트,#ffffff}; margin:1px;text-align:center;user-select:none;display:block;padding:5px;text-decoration:none;)

 

[내용](#" style="color:#000; text-align: center; border-right: #000 1px solid; border-left: #000 1px solid; border-top: #000 1px solid; border-bottom: #fff 1px solid; border-radius: 10px 10px 0px 0px; padding: 5px; display: block;text-decoration:none; background-color:#fff;)
[내용](#" style="color:#000; text-align: center; border-right: #000 1px solid; border-left: #000 1px solid; border-top: #fff 1px solid; border-bottom: #fff 1px solid; padding: 5px; display: block;text-decoration:none; background-color:#fff;)
[내용](#" style="color:#000; text-align: center; border-right: #000 1px solid; border-left: #000 1px solid; border-top: #fff 1px solid; border-bottom: #000 1px solid; border-radius: 0px 0px 10px 10px; padding: 5px; display: block;text-decoration:none; background-color:#fff;)

엔터 없이 붙여쓰면 떨어지는 공백 없이 딱 붙어 나옵니다.

 

---

%게이지 or 체력바

주콰님이 도와주셨습니다.. 당신은 GOD...

?{퍼센트| 100%,[100%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color: #C9151E| 90%,[90%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 90%&#44; #D1EAFF 90%| 80%,[80%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 80%&#44; #D1EAFF 80%| 70%,[70%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 70%&#44; #D1EAFF 70%| 60%,[60%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 60%&#44; #D1EAFF 60%| 50%,[50%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 50%&#44; #D1EAFF 50%| 40%,[40%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 40%&#44; #D1EAFF 40%| 30%,[30%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 30%&#44; #D1EAFF 30%| 20%,[20%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 20%&#44; #D1EAFF 20%| 10%,[10%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;text-decoration:none;background-image: linear-gradient(45deg&#44; #C9151E 10%&#44; #D1EAFF 10%| 0%,[0%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color: #000000})

 

?{퍼센트| 100%,[100%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color: #C9151E&#41;| 90%,[90%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 90%&#44; #000000 90%&#41;| 80%,[80%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 80%&#44; #000000 80%&#41;| 70%,[70%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 70%&#44; #000000 70%&#41;| 60%,[60%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 60%&#44; #000000 60%&#41;| 50%,[50%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 50%&#44; #000000 50%&#41;| 40%,[40%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 40%&#44; #000000 40%&#41;| 30%,[30%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 30%&#44; #000000 30%&#41;| 20%,[20%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 20%&#44; #000000 20%&#41;| 10%,[10%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right&#44; #C9151E 10%&#44; #000000 10%&#41;| 0%,[0%](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-color: #000000&#41;}

 

---

그라데이션

[?{할말|}](#" style="border:1px solid; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(to right, #FFB9B9, #FFFDBB &#41;)

 

[?{할말|}](#" style="border:1px solid; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF &#41;)

 

[?{할말|}](#" style="border:1px solid; margin:1px;text-align:center;user-select:none;display:block;padding:2px;text-decoration:none;background-image: repeating-linear-gradient(45deg, #ffffff 6%, #ffffff 12%, #C9151E 12%, #C9151E 18%, #000000 18%, #000000 24% &#41;)

 

[?{할말|}](#" style="color:#ffffff; border:1px solid black; margin:1px;text-align:center;user-select:none;display:block;padding:20px;text-decoration:none;background-image: radial-gradient(circle at 50% 10%, #000 30%, transparent 30%&#41;, linear-gradient(to top, #000, #fff &#41;)

 

 

배경이미지 넣기.. 넣을 이미지가 없어서

background-image: url('주소'&#41;

대충 이거... 하면 어떻게.. 되는 것 같긴해요.. 넣을 게 없네 

 

 

 

---

타텍님의 은혜

타텍님이 알려주신 갓 사이트 html-css-js.com/css/generator/text-shadow/

 

[?{할말|}](#" style="color: #000000;font-size:25px;font-weight:bold;display:block;text-align:center;text-decoration:none;text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; line-height:25px)

 

[?{할말|}](#" style="color: #e0dfdc;background: #556677;text-align:center; border: 1px solid black; border-radius:5px; padding:10px;text-decoration:none; line-height:25px;letter-spacing: .1em;text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9)

 

재밌다 재밌어 

여기말고 옆집 피화님네에도 있어요 여기도 구경해보세요 phwatrpg1.postype.com/post/9405822