커스텀시트 만들기⑪:무한히 만드는 fieldset

Repeating Section

이번에 만들어볼 내용은, 커스텀시트에서 +Add버튼을 눌러 몇 개라도 추가할 수 있는 반복 구간입니다. html에서 <fieldset>이라는 태그를 사용해서 열고 닫습니다. 그 안에 input을 하나 넣어두었다면, 커스텀시트에서 +Add버튼을 눌러 추가할 때마다 text 입력상자가 하나씩 추가되는 것처럼 보이겠지요. 그런 간단한 내용을 만들어 보겠습니다.

<div class="sheet-myrepeat"><fieldset class="repeating_myskill">
    <div class="sheet-skill">
        <span>스킬</span><span class="sheet-counter"></span>
        <div><input type="text" name="attr_skill" placeholder="스킬 이름"></div>
    </div>
    <textarea type="text" name="attr_effect">효과 설명</textarea>
</fieldset></div>

미리보기

스킬　

효과 설명

스킬　

효과 설명

스킬　

효과 설명

한번 버튼을 눌러 추가할 때마다 이것이 반복적으로 만들어지게 됩니다.

자동 번호 매기기

여기서 조금 더 나아가, 반복구간에서 생성된 갯수에 따라 스킬1, 스킬2, 스킬3… 으로 세어서 표시해주면 편리할 것 같습니다. CSS에서 content를 활용하여 이것을 구현해 봅시다. 위쪽의 코드를 보면, <span class="sheet-counter"></span>라는 부분이 있습니다. 그 안에는 내용이 없으니 언뜻 보기에는 아무런 기능도 하지 않고 있는 것 같지만, 이제부터 사용해주려고 합니다. CSS에서 그 counter를 이용해서 몇 번 반복되었는지 세어주는 코드를 적어봅시다.

input, textarea {width: calc(100% - 10px); font-family: Gowun Dodum; border: none; border-bottom: 1px dashed white; background-color: transparent; background-image: linear-gradient(to right, #243949 0%, #517fa4 100%); border-radius: 10px; color: gold;}
.sheet-skill {display: flex;}
.sheet-skill>div {flex: 1;}
  
.sheet-myrepeat {counter-reset: sheet-rep-items;}
.sheet-counter::before {
  counter-increment: sheet-rep-items;
  content: counter(sheet-rep-items) "";
}
    

중요한 것은 5번째 줄부터입니다. html코드의 가장 조상이 되는 div의 class가 myrepeat이라고 할 때, 그것의 안에 있는 sheet-rep-items의 갯수를 세겠다고 하는 것입니다. 이 sheet-rep-items은 우리가 코드를 작성하지 않아도, roll20에서 알아서 repeat section을 생성할 때 만들어주는 부분입니다. 8번째 줄의 counter(sheet-rep-items)가 그 숫자가 되고, 뒤에 있는 ""로 꾸밀 수 있습니다. 예를 들어 counter(sheet-rep-items)"번째 스킬" 이라고 적었을 때, 커스텀시트에서는 n번째 스킬이라는 글자가 보이게 되는 것입니다.

잠깐!

그런데, 이 fieldset 태그를 사용할 때에는 주의할 점이 몇 가지 있습니다. 가장 중요한 것이, 그 안의 항목들에는 ID를 사용해서는 안된다는 것입니다. 과거에는 모든 roll20의 캐릭터시트 항목에 id를 전혀 사용할 수 없었는데, 2021년 3월 CSE가 되면서 많은 것이 바뀌었습니다. 하지만 동일한 id는 전체 코드 흐름에서 한 번만 등장해야 하기 때문에, 반복 섹션으로 여러 번 만들어지면 의도한 것과 다르게 될 수 있으니 가급적 사용하지 않기를 바랍니다.
또한, 모든 fieldset 안의 값들은 시트의 Attributes & Abilities 탭을 눌렀을 때의 각 데이터 값이 저장된 것을 확인할 수 없습니다(저장은 되어 있습니다). 캐릭터시트에 있는 button들은 드래그해서 하단 매크로 바에 추가할 수 있는데, 반복 구간 안에 있는 button의 경우 name만 표시되는 게 아니라 무작위의 문자열로 생성된 해당 구간의 id가 함께 보여지게 됩니다. 그러므로 일반 데이터처럼 @{Attribute}나 %{Ability}로 채팅창에서 바로 호출할 수 없습니다. 대신 javascript를 사용해서 해당 구간에 붙여진 id를 받아오는 것이 가능하므로 이를 응용하면 편리한 기능을 구현할 수 있을 것입니다.