트위터를 돌아다니다가 발견한, 굉장한 포스타입!
쥬나님의 핸드아웃 템플릿을 활용한 코드를 만든다면? 이라는 생각이 들어 시작.
22.04.25 최초 작성 후 상시 추가 및 수정
디자인
이미지 출처
https://posty.pe/q60kdm, https://posty.pe/a93p7t
문제가 발생할 경우, 본 글 즉시 내릴 예정
구글 문서 이미지 저장하기
쥬나님의 채팅창 롤꾸용 이미지 배포를 보면, 핸드아웃 글자가 모두 빠졌다…
그래서 기존 글에서 이미지를 얻을 필요가 있다.
이를 위해 쥬나님을 후원하고 원본 PNG 또는 PSD 파일을 받아도 되고,
구글 문서에 있는 배포용 파일을 저장해 사용해도 된다.
구글 문서의 이미지를 캡쳐하는 게 쉽고 단순한 방법이긴 하지만…
이미지를 빈틈없이 저장하고 싶다면 그리 좋은 선택은 아니다.
완벽하게 이미지를 추출하고 싶다면 아래처럼 하자.
① 구글 문서에서 [ 파일 > 다운로드 > 웹 페이지 ] 클릭
② 웹 페이지를 저장하며 나온 압축 파일을 열어보면, images 폴더가 있다.
③ 이 폴더 안에 문서에 포함된 이미지가 들어있음!
핸드아웃 롤꾸
줄바꿈은 내려쓰고 싶은 곳에 <br> 넣기
18자가 넘어갈 경우 자동으로 줄이 바뀌나,
그리 예쁘지 않으므로 14 글자 정도에 <br>를 넣어 줄바꿈 해주는 것을 추천
백업시 이미지 등이 깨질 경우, width: 250px 뒤에 " !important" 추가
1) ver.1 (A)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: white;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/nA7uAy6.png" style="][ ](style=")<tr style="][ ](style="padding: 5px)<td style="][ ](style=")<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style=" text-align: center; padding: 5px;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: inherit; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 0 5px 5px;)<img src=?{핸드아웃 이름 아래 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="text-align: center; padding: 5px 5px 15px;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: inherit; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/5aKvDQX.png" style="][ ](style=")
| 변경 가능 사항 배경색(background-color) : black, #1e3b69 글씨색(color) : white |
쥬나님이 제안한 포인트 색상코드 : #bba37d
2) ver.1 (B)
| 변경 가능 사항 배경색(background-color) : white 글씨색(color) : black 이미지(<img) : src의 링크 부분을 변경 (https://posty.pe/q60kdm #4 참고) |
쥬나님이 제안한 포인트 색상코드 #f39bad, #61cdfd
① /desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: black;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px; text-align: center;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: white; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="text-align: center; padding: 5px;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: #999999; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style=" text-align: center; padding: 5px;)<img src="https://i.imgur.com/87Y4dSP.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/piTxg0F.png" style="][ ](style=")
② /desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: black;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px; text-align: center;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: white; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style=" text-align: center; padding: 5px;)<img src="https://i.imgur.com/87Y4dSP.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="text-align: center; padding: 5px;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: #999999; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/piTxg0F.png" style="][ ](style=")
3) ver.1 (C)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #fffafb;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px; margin: 0 auto;)<img src="https://i.imgur.com/wf3Y0fR.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px; text-align: center;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: black; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style=" text-align: center; padding: 5px;)<img src="https://i.imgur.com/oFujFky.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="text-align: center; padding: 5px;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: #d7be96; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/EhHcJ3F.png" style="][ ](style=")
| 변경 가능 사항 배경색(background-color) : #f898a9, #a2dde6 글씨색(color) : black, white |
쥬나님이 제안한 포인트 색상코드 #f86a7d, #d1c1ad
ver.1 (D)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #black;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px; margin: 0 auto;)<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px 5px 5px 40px; text-align: left;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: white; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style=" text-align: center; padding: 0 40px 5px;)<img src="https://i.imgur.com/oQViH6b.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="text-align: left; padding: 5px 5px 5px 40px;)[▶ ?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: #f65e5e; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/qgVB2of.png" style="][ ](style=")
| 변경 가능 사항 글씨색(color) : #03a5fe 이미지(<img) : src의 링크 부분을 변경 (https://posty.pe/q60kdm #6 참고) |
쥬나님이 제안한 포인트 색상코드 #e92525, #8f0202
ver.1 (E)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #d9d7d4;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px; margin: 0 auto;)<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px 5px 5px 40px; text-align: left;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: #b31302; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style=" text-align: center; padding: 5px;)[─────────────────](#" style="color: white;)<tr style="][ ](style=")<td style="][ ](style="text-align: left; padding: 5px 5px 5px 40px;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: #999999; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/rZ6LN6H.png" style="][ ](style=")
쥬나님이 제안한 포인트 색상코드 #b40c00
ver.1 (F)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #b31302;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px; margin: 0 auto;)<img src="https://i.imgur.com/GIeQLRQ.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px; margin: 0 auto;)<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px 40px; text-align: center;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: white; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style=" text-align: center; padding: 5px;)<img src="https://i.imgur.com/T6n61LF.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="text-align: center; padding: 5px;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: #f5d59e; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px;)<img src="https://i.imgur.com/hQeLwqH.png" style="][ ](style=")
쥬나님이 제안한 포인트 색상코드 #b51102, #bd8742
ver.3 (P)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #d0ccca;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px; margin: 0 auto;)<img src="?{핸드아웃 이름 위 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="padding: 5px 40px; text-align: center;)[?{핸드아웃 이름|}](#" style="text-decoration: none; color: black; font-weight: bold; font-size: 1.5em; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px 80px; margin: 0 auto;)<img src="https://i.imgur.com/mhsM1Go.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="text-align: center; padding: 5px;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; color: #756a64; font-style: normal;)<tr style="][ ](style=")<td style="][ ](style="padding: 5px; margin: 0 auto;)<img src="https://i.imgur.com/f3cMLsw.png" style="][ ](style=")
쥬나님이 제안한 포인트 색상코드 #6e635f
ver.3 (Q)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: black;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="?{위쪽 이미지|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px; text-align: center;)[?{핸드아웃 이름|}](#" style="text-decoration: none; font-size: 1.2em; font-weight: bold; font-style: normal; color: white;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; text-align: center;)[─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─](#" style="text-decoration: none; font-style: normal; color: #33b4ff;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px; text-align: center;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; font-style: normal; color: #33b4ff;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="?{아래쪽 이미지|}" style="][ ](style=")
| 변경 가능 사항 배경색(background-color) : white, #666666 글씨색(color) : #fff2cc, black |
ver.3 (R)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #fff9e7;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="https://i.imgur.com/6Utw5I7.png" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px 50px;)<img src="?{핸드아웃 이미지|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px; text-align: center;)[?{핸드아웃 이름|}](#" style="text-decoration: none; font-size: 1.2em; font-weight: bold; font-style: normal; color: black;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px; text-align: center;)[?{핸드아웃 부연설명|}](#" style="text-decoration: none; font-style: normal; color: #ff9900;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="https://i.imgur.com/1E1H4S9.png" style="][ ](style=")
| 변경 가능 사항 배경색(background-color) : #f8ffec, #221c26c 글씨색(color) : #ec9191, #9de5ee, #c76e8a, white 이미지(<img) : src의 링크 부분을 변경 (https://posty.pe/q60kdm #14, #15 참고) |
쥬나님의 추천 포인트 색상코드 #ffaf00
ver.7 (1)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #f5f5f4;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="?{위쪽 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)[?{핸드아웃 이름}](#" style="text-align: center; text-decoration: none; font-size: 1.2em; font-weight: bold; font-style: normal; color: black;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="?{가운데 이미지 링크}" style="][ ](style="width: 15px;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)[?{핸드아웃 부연설명|}](#" style="text-align: center; text-decoration: none; font-style: normal; color: #7c7c7c)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="?{아래쪽 이미지 링크|}" style="][ ](style=")
| 변경 가능 사항 배경색(background-color) : #ddd6ce, #eadac0 글씨색(colro) : #725d47, #b75b60 |
쥬나님의 추천 포인트 색상코드 #1e1e1e
ver.7 (2)
/desc <table style="][ ](style="width: 250px; margin: 0 auto; background-color: #111629;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="?{위쪽 이미지 링크|}" style="][ ](style=")<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)[?{핸드아웃 이름}](#" style="text-align: center; text-decoration: none; font-size: 1.2em; font-weight: bold; font-style: normal; color: #ebebaf;)<tr style="][ ](style=")<td style="][ ](style="text-align: center; margin: 0 auto; padding: 5px;)<img src="?{중간 이미지 링크|}" style="][ ](style="width: 15px;)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)[?{핸드아웃 부연설명|}](#" style="text-align: center; text-decoration: none; font-style: normal; color: white)<tr style="][ ](style=")<td style="][ ](style="margin: 0 auto; padding: 5px;)<img src="?{아래쪽 이미지 링크|}" style="][ ](style=")
| 변경 가능 사항 배경색(background-color) : #213b4b, #060401 글씨색(color) : #acdcff, #d2a3ff |
'ORPG > Roll20' 카테고리의 다른 글
| 티스토리 티알 로그백업 : 새 에디터에 롤20 채팅로그 반영하기 (0) | 2023.04.25 |
|---|---|
| Roll20 채팅로그 꾸미기 / 롤꾸하는데 도움되는 HTML·CSS 모음 (심화) (0) | 2022.04.28 |
| 롤20 꾸미기 : 롤꾸 모음 2 (0) | 2022.04.19 |
| Roll20 채팅로그 꾸미기 / 롤꾸하는데 도움되는 CSS 모음 (0) | 2022.04.06 |
| Roll20 채팅로그 꾸미기 / 롤꾸 모음 (0) | 2022.04.01 |
| Roll20 채팅로그 꾸미기 / 롤꾸 제작 방법 (0) | 2022.04.01 |
댓글