TRPG: 커스텀시트 만들기④:html의 태그와 속성

이전까지, html 코드를 작성하면서 사용한 태그로는 <table>, <tr>, <td>, <div>, <span>, <input>이 있었습니다. 기억하고 계신가요? 잘 떠오르지 않는다면 지난 내용을 다시 복습하고 시작해봅시다. 이번 글에서는 LCS(legacy sanitation이 체크된 상태)에서도 사용 가능한 태그 중 몇 가지를 소개하고, 자주 쓰이는 속성에 대해 설명합니다.

div와 class

먼저 직전 글에서 설명한 <div> 태그입니다. <div>와 </div>의 형태로 쓰고, 그 사이에 다른 내용을 집어넣을 수 있습니다. 영역을 구분하고 배치를 위해서 많이 사용합니다. css에서 .apple이라고 쓴다면 <div class="apple">과 </div>의 사이에 있는 전체를 가리킵니다. <div>의 안에 다른 요소들을 집어넣은, 폴더처럼 class이름을 붙여준다고 이해해도 좋습니다.

각각의 div에 과일 그림을 넣기 위해, 서로 다른 class이름을 붙이기

<div>
    <div class="apple">　</div>
    <div class="orange">　</div>
    <div class="melon">　</div>
    <div class="apple">　</div>
    <div class="strawberry">　</div>
</div>

.apple {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuHaCDNxwSQNCbUQZKpgPxSkWOQ1DMqPlTDPtHTbAzir5Ou54pH1ajs_4mRGAuQiog6C5FwVdikI6TYNvRXNVRGoTPBF6yovBz6tXh4OYJ4iZcEkFNxBqmPkJkgoeTfTpSLW06Ks-T1jY4/s400/fruit_apple.png);}
.orange {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjnQn3DKD7jGt4BRYzShZ7p3CCLwti1YieZacqIkvydsuSY-ylCJ6g8uZP6RNJeR2TujscXh0umrs8N9RyYL32iccvq3C4-TiuXfEfeIvOMFvSYc9HVABF6T5clcwMGKvJbhCXPH4Vbi4T/s150/furit_mark04_orange.png);}
.strawberry {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGprAv7qyQzQqoDx6GJmmEUW7fZ7onugWIcQZaDRUYaFH5mrvfNLvskApgGoieqNtsuFgMiPy5v2_V4uzAKkDuibJhxi8SFGnPIFcge_B45yOAA-3NJDjoJA6AIdE0dL48RMwAdWsDYgK/s150/furit_mark11_ichigo.png);}
.melon {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6i6vy12PNKCXUQu2iVuUuET3B9ickUT-RJWASDXt9RzBBSgYBEjIYfsO5I4OYpnO70-LfFZ8HO061ZmqoMOP1vASZlHRzcBD3BvEi3tslPYxvSu4rGWx88McV2MQ6IKQlgKBrR6UL2wrt/s150/furit_mark02_melon.png);}

br과 img

지금까지 사용했던 대부분의 태그는, <여는 태그>와 </닫는 태그>가 쌍으로 있고 그 안에 다른 요소를 넣어둘 수 있었습니다. 하지만 그렇지 않은 태그들도 몇 가지 있습니다. 안에 무언가를 포함하지 않는 태그들이 그렇습니다. 대표적으로 <br>인데요, 이것은 줄바꿈을 의미합니다. 예를 들어 네이버 폼의 설문지를 만들려고 했을 때, 상단의 설명을 계속 한 줄의 문장으로 적게 됩니다. 하지만 이 문장과 문장 사이에 <br>을 삽입하고 저장해 보면, 완성된 페이지에는 줄바꿈이 적용되어 있는 것을 볼 수 있습니다. <br>에게는 </br>이 따라붙지 않고, 그 자체로 기능하는 태그입니다. 그리고 <img> 태그도 그렇습니다. <img src="" alt="">의 형태로, </img>가 없습니다. src 속성을 이용해서, 놓고 싶은 이미지를 미리 다른 곳에 업로드하여 그 이미지 주소를 쌍따옴표 안에 적습니다. 그리고 그 이미지가 정상적으로 출력되지 않을 경우 또는 TTS기능에서 대체할 문구로서의 안내 메세지를 alt 속성의 쌍따옴표 안에 적습니다. 여기에 추가로, width나 height 속성으로 크기를 조정하는 것도 가능합니다.

input, textarea과 name

커스텀시트의 가장 중요한 기능은, 캐릭터 시트로서 무언가를 적을 칸이 있어야 한다는 것입니다. 이것을 입력할 칸을 <input>이라는 태그로 만듭니다. html 코드 화면에 input을 입력하고 tab키를 누르면, <input type="text">가 만들어집니다. 하지만 이 칸은 내용을 한 줄로만 기록합니다. 엔터를 쳐도 줄바꿈이 되지 않고, 다른 곳에서 줄바꿈이 된 여러 줄의 내용을 복사해서 붙여넣어도 그 줄바꿈을 스페이스로 변환해서 기록합니다. 그래서 여러 줄의 내용을 입력할 때는, <textarea>라는 태그의 입력칸을 만듭니다. 그렇게 입력받은 내용을 roll20의 세션방에서 서버에 저장하기 위해서, 반드시 name 속성을 사용할 때 attr_로 시작하는 이름을 지어주어야 합니다.

서로 다른 input이나 textarea의 name이 같으면 어떻게 될까?

<input type="text" name="attr_mytext">
<textarea name="attr_mytext" cols="30" rows="5"></textarea>
<input type="text" name="attr_mytext">
<textarea name="attr_mytext" cols="30" rows="5"></textarea>

이 4개는 전부 name="attr_mytext"로 만들어졌다. 하나의 칸에 무언가를 입력하면, roll20에서는 다른 칸에 그 내용이 똑같이 덮어쓰기 된다.

checkbox와 radio

시트를 쓰다 보면, 굳이 항목을 입력하기보다는 각각 작동하는 체크박스나 여러 항목 중 하나만 선택 가능한(주로 설문지 응답에서 만날 수 있습니다) 버튼을 넣고 싶을 때도 있습니다. 그 경우, <input>의 태그를 사용하되 속성의 type을 바꾸어서 적습니다. 만약 어떤 버튼을 클릭했을 때, hp가 3 남은 것으로 설정하고 싶다면 type="radio"에서 name="attr_hp"와 value="3"인 동그라미를 만들어두면 됩니다. 이것과 name이 동일하고 value 값만 다른 <input type="radio">를 여러 개 만들어 두면 체력 게이지 바로 활용할 수 있겠지요. <input type="checkbox">는 더 활용하기 간단하니까 직접 시도해보세요.

input[type="radio"][name="attr_me"][value="$"]*9+input[type="checkbox"][name="attr_me"][value="$"]*9

코드 편집기에 위와 같은 내용을 적고 tab키를 누르면, value의 값이 1~9에 해당하는 radio칸이 생기고, 그 다음 똑같은 값의 checkbox가 생긴다. 이 모든 값의 name은 attr_me로 동일하다. 그래서 radio로 만들어진 동그란 칸은 복수 선택이 안 되지만, checkbox로 만들어진 네모난 칸은 여러 값을 다중선택할 수 있다.

select와 option

그런 한편, 드롭다운 목록의 제한된 선택지 중에서 골라 넣게 하고 싶은 경우도 있습니다. 예를 들면 종족이 톨맨/드워프/엘프 등 몇 가지 안 되는 경우에 말이지요. 그럴 때 <select name="attr_tribe>로 하고, 이 종족이라는 값의 내용에 대해서는 <option value="tallman">톨맨〈/option>이라고 적은 뒤 종류별로 옵션을 더 넣고 </select>로 마칩니다. 이렇게 톨맨을 선택했을 때, 실제로 시트에 저장되는 값은 tallman입니다. 실제 값과 보여지는 값이 다르지 않을 경우에는 value를 생략해도 됩니다.

<select name="attr_blood">
    <option value="tallman">톨맨</option>
    <option value="dwarf">드워프</option>
    <option value="elf">엘프</option>
</select>

table과 border

이전에 사용했던 <table> 태그의 안에는 <tr> 태그가 있고 그 줄 안에 다시 <td>의 칸이 있었습니다. 각각의 태그는 모두 닫는 태그가 있었지요. 그리고 <table border="1">로 속성을 지정하면 테두리가 생겼었습니다. 2, 3, 4로 했을 경우의 스타일은 조금 달라지니까 코드로 만들어서 확인해봅시다. <td colspan="2">를 쓴다면 오른쪽으로 2칸 분량만큼 병합됩니다. rowspan 속성은 아래로 n칸 분량만큼 병합시켜줍니다. <table> 안에는 tr과 td 외에도 <th>, <thead>, <tbody>, <tfoot>, <caption>, <colgroup> 등의 태그를 사용해서 복잡한 기능을 넣을 수 있습니다.

button과 script

버튼이라면 당연히 눌렀을 때 무언가가 동작하고 굴러가는 것을 쉽게 생각해볼 수 있습니다. 그런데, 어떤 칸의 값을 입력했을 때 그 값을 바탕으로 다른 조건과 연산해서 또다른 칸에 새로운 값을 채워넣는(즉, 자동계산) 시트를 보신 적 있으신가요? javescript로 그것을 처리할 수 있습니다. 뿐만 아니라, 침식률이 증가했을 때 그것을 매번 자동으로 채팅창에 출력해주는 것도 API 없이 가능합니다. <script>태그의 안에는, 버튼이 눌렸을 때의 동작, 무언가 항목이 변경되었을 때, 시트가 닫히고 열렸을 때 등등 여러 상황에서 어떤 내용을 수행할지 구체적으로 지정할 수 있습니다. 이것은 상당히 복잡한 내용이 되기 때문에, 어떤 식으로 작동하는지에 대해서는 다른 글에서 설명하기로 하고 지금은 각각의 형태가 어떠한지만 살펴보겠습니다.

<button class="sheet-(종류)" type="roll" name="roll_(이름)" value="&{template:default}{{name=(이름)판정}} {{myroll=[[2d6]]}} {{target=[[@{목표치}]]}}">(이름)</button>

<script type="text/worker">(내용)</script>

span, p, label, strong

이 4가지 종류의 태그들은, 각각 여는 태그와 닫는 태그가 쌍으로 있고 그 안에 임의의 텍스트를 넣어서 사용합니다. 하지만 실제로 사용해보면 약간의 차이가 있습니다. roll20에서 일부 태그에 대해 강제적인 스타일 지정을 하는 것 때문이기도 하지만, 기본값의 스타일 자체부터 다릅니다. 앞서 소개했던 class라는 속성을 대부분의 다른 태그에 넣을 수 있듯이, title이라는 속성이 있습니다. 글자에 마우스를 올리면 이에 대한 부연설명을 보여주는 기능을 함께 쓰면 좋은데, roll20에서 이 tooltip 스타일을 지정해둔 것이 있으니 참고해서 써보세요.

tooltip을 이용해서, 세부사항을 안내할 수 있다. class에 tooltip와 tipsy를 써서 원하는 스타일을 지정한다.

rolltemplate

이 태그는 roll20에만 존재하는 태그입니다. 아까 위에서 <button>을 보면, 안에는 value라는 속성이 있습니다. 거기에 해당하는 내용이 채팅창에 출력되는 것인데, &{template:(이름)} {{내용}} {{내용}}의 구조를 가지고 있습니다. 이 때, 이 템플릿의 모양을 지정하는 것이 이 <rolltemplate>라는 태그입니다. 일반적인 코드를 짜듯이, <rolltemplate>와 </rolltemplate>의 사이에 적은 내용을 채팅창에 출력한다고 생각하면 어려운 것은 없습니다. 단, <rolltemplate class="sheet-rolltemplate-(이름)">의 형태로 적어야 하고, 속성을 쓸 때는 반드시 쌍따옴표로 감싸야 합니다.

fieldset

이 태그도 roll20에만 존재하는 태그입니다. 몇몇 시트를 쓰다 보면, +add와 mod라는 버튼을 눌러서 반복적으로 늘릴 수 있는 특정 구간을 추가하거나 삭제하는 기능을 보실 수 있습니다. 이 태그를 사용하면 그 버튼들이 생기고, <fieldset>과 </fieldset>의 안에 들어있는 내용이 반복적으로 생겨나고 재정렬하거나 삭제 가능한 구간으로 만들어지게 됩니다. 단, 이쪽은 class 속성에 대해 <fieldset class="repeating_(이름)">의 형태로 적어야 합니다.

TRPG

2022-10-17

커스텀시트 만들기④:html의 태그와 속성