[Roll20] 채팅창에 HTML TAG 사용하기 (6) 응용을 뭘하면 좋을까

저번에 이런 화면을 만들었다. 물론 만드는 과정을 남기는게 우선이였지만 사실 이 기획에는 제일 처음 설명했던 a태그의 응용에 대해서 설명하려고 시작한것이나 다름없다.

처음 설명에서는 문구를 꾸밈으로써 해당 기능을 할 수 있다고 설명을 했는데, 이는 a태그를 사용하여 동작하도록 만들어졌다알 수  있다. 그리고 이제 각종 태그들을 꾸며서 화면을 만드는 방법을 알아보았다. 그러면 이제 나오는것이 무엇인가? 실질적으로 구문에 a태그를 넣어 실질적으로 동작하도록 만들어 보도록 한다.

<table style="][ ](style="border-collapse:collapse;background:#FFFFFF;font-size:14px;width:95%;border:1px solid #DDDDDD;margin:5px;padding:15px;border-radius:10px;box-shadow:0px 5px 20px 10px #BBBBBB;)
	<tr style="][ ](style=")
		<td colspan="2" style="][ ](style="font-weight:bold;padding:15px;)🚫 대충 타이틀
	<tr style="][ ](style=")
		<td colspan="2" style="][ ](style="padding-top:10px;padding:15px;padding-top:5px;)
			💬 대충 내용
			<br style="][ ](style=")&nbsp;
	<tr style="][ ](style=")
		<td style="][ ](style=")
		<td style="][ ](style="position:relative;height:10px;padding:15px;)
			<span style="][ ](style="position:absolute;top:0px;right:15px;background:#0078E0;border-radius:5px;color:#FFFFFF;padding:5px 20px 5px 20px;)확인

우선 저번에 작성하였던 화면을 응용하도록 한다. 이번에도 어려울것은 없다 화면은 완성되어있고, 단순히 a태그를 만들어 버튼에 연결해줄뿐이다. 그러면 무엇을 해야하는가? 확인버튼인 span구문을 변경해줄차례이다.

<table style="][ ](style="border-collapse:collapse;background:#FFFFFF;font-size:14px;width:95%;border:1px solid #DDDDDD;margin:5px;padding:15px;border-radius:10px;box-shadow:0px 5px 20px 10px #BBBBBB;)
	<tr style="][ ](style=")
		<td colspan="2" style="][ ](style="font-weight:bold;padding:15px;)🚫 대충 타이틀
	<tr style="][ ](style=")
		<td colspan="2" style="][ ](style="padding-top:10px;padding:15px;padding-top:5px;)
			💬 대충 내용
			<br style="][ ](style=")&nbsp;
	<tr style="][ ](style=")
		<td style="][ ](style=")
		<td style="][ ](style="position:relative;height:10px;padding:15px;)			
			<a href="!&#13;버튼눌림" style="][확인](style="position:absolute;top:0px;right:15px;background:#0078E0;border-radius:5px;color:#FFFFFF;padding:5px 20px 5px 20px;)

단순하다. span은 이미 꾸며져있으므로, span을 단순히 a태그로 바꿔주고, 저번에 설명했던 href속성에 "!
"을 넣어서 해당버튼이 눌렸을 경우 뒤의 동작을 하도록 만들어주면 끝...은 아니고 버튼안에 텍스트를 넣어주어야 하므로 확인을 해당텍스트구역안으로 옮겨주어([확인]) 내부에 글이 표시되도록 설정을 해주면 끝이다.

뭔가 엄청 단순하게 끝나버렸다. 자 여기서 좀더 나가보도록 한다. 

<table style="][ ](style="border-collapse:collapse;background:#FFFFFF;font-size:14px;width:95%;border:1px solid #DDDDDD;margin:5px;padding:15px;border-radius:10px;box-shadow:0px 5px 20px 10px #BBBBBB;)
	<tr style="][ ](style=")
		<td colspan="2" style="][ ](style="font-weight:bold;padding:15px;)🚫 미지와의 조우
	<tr style="][ ](style=")
		<td colspan="2" style="][ ](style="padding-top:10px;padding:15px;padding-top:5px;line-height:20px)
			💬 절체절명의 상황 당신은 한가지를 선택하여야만 한다.
			<br style="][ ](style=")&nbsp;
	<tr style="][ ](style=")
		<td style="][ ](style=")
		<td style="][ ](style="position:relative;height:10px;padding:15px;)
			<span style="][ ](style="position:absolute;top:0px;right:15px;)
			<a href="!&#13;/roll 3d12" style="][공격](style="background:#0078E0;border-radius:5px;color:#FFFFFF;padding:5px 20px 5px 20px;)			
			<a href="!&#13;도망을 시도한다.&#13;/roll 1d6" style="][도망](style="background:#DDDDDD;border-radius:5px;color:#FFFFFF;padding:5px 20px 5px 20px;)

버튼을 하나 더 추가해주고, span을 통하여 해당 버튼들을 absolute로 묶어주고 버튼에 기능들을 추가해준다.

<table style="][ ](style="border-collapse:collapse;background:#FFFFFF;font-size:14px;width:95%;border:1px solid #DDDDDD;margin:5px;padding:15px;border-radius:10px;box-shadow:0px 5px 20px 10px #BBBBBB;)	<tr style="][ ](style=")		<td colspan="2" style="][ ](style="font-weight:bold;padding:15px;)🚫 미지와의 조우	<tr style="][ ](style=")		<td colspan="2" style="][ ](style="padding-top:10px;padding:15px;padding-top:5px;line-height:20px)			💬 절체절명의 상황 당신은 한가지를 선택하여야만 한다.			<br style="][ ](style=")&nbsp;	<tr style="][ ](style=")		<td style="][ ](style=")		<td style="][ ](style="position:relative;height:10px;padding:15px;)			<span style="][ ](style="position:absolute;top:0px;right:15px;)			<a href="!&#13;/roll 3d12" style="][공격](style="background:#0078E0;border-radius:5px;color:#FFFFFF;padding:5px 20px 5px 20px;)						<a href="!&#13;도망을 시도한다.&#13;/roll 1d6" style="][도망](style="background:#DDDDDD;border-radius:5px;color:#FFFFFF;padding:5px 20px 5px 20px;)

해당 버튼들이 각각 잘 동작하는것을 확인할 수 있으며, 
을 추가함으로써 추가적으로 명령을 두가지 이상을 넣을 수 있다는것을 알 수 있다.

 

필자가 Roll20을 사용해본적은 없으나 요청받아 작업을 해보면서 여기서 Roll20의 기능들을 좀 더 이용하면 더 재미있는 구조들을 만들 수 있지 않을까 싶다.