커스텀시트 만들기②:HTML의 이해

이전 글을 따라 취향에 맞는 에디터를 설치했다면, 본격적으로 코드를 작성해 봅시다. 무작정 치기 전에, 먼저 HTML과 CSS가 하는 역할에 대해 이해할 필요가 있습니다. 둘은 각각 뼈대와 살점같은 역할을 합니다. 표나 체크박스, 입력 칸이나 버튼 같은 것을 만드는 것은 HTML에서 하고, 이것들을 어떤 색으로 지정하거나 2단으로 배열하거나 테두리를 둥글게 해 주는 등은 CSS에서 합니다. 물론 스타일 서식을 HTML의 각 태그에서 지정할 수도 있긴 하지만 CSS에서 처리하는 쪽이 더 깔끔합니다. 오늘은 CSS를 쓰지 않고, HTML로만 설명해 보겠습니다.

 

먼저 아주 간단한... 표 만들기를 해 보려고 합니다.

2번째 줄과 4번째 줄의 칸에는, 입력상자를 만들어서 roll20의 시트에 그 값을 저장하게 됩니다. 세션방 안에서 입력상자에 글자를 쓰면, 실제로는 여기에 저장하고 있는 거에요.

이런 입력상자는 input이라는 태그를 쓰고, 기본 타입은 text로 되어 있습니다. 이 때, name을 attr_(항목명)이라고 적어야 저 값으로 시트에 저장을 해 줍니다. attr_를 빠뜨리면 저장하지 않아요. 만약 attr_belong이라고 쓴다면 세션방의 시트 Attributes에는 belong이라는 값이 생겨날 겁니다.

 

그러면 이제부터 코드 편집기를 켜고, 차근차근 따라해봅시다.

 

새 파일을 만들고, 저장을 합니다.

이 때, 파일명은 상관없지만 확장자를 html로 해 주세요.

그러고 나면, 달라진 건 별로 없는 것 같습니다. table이라고 쓴 뒤, 키보드에서 tab 키를 눌러봅시다.

그러면 <table>과 </table>이 자동완성되고, 그 사이에 커서가 위치하게 됩니다. 만약 이 과정이 안 된다면, 사용하시는 에디터에서 emmet 등의 필수적인 추가기능이 설치되지 않은 것이니 구글링을 통해 해결하신 뒤 다시 진행해주세요!

잠시 영상을 보시면, 이 표를 만들기 위해서는 5종류의 태그가 쓰일 거에요. 하나의 table이 있고, 그 안에 다시 4개의 tr이 있고, 각각의 tr에 3개 정도의 td가 있고, 다시 그 td안에 span이나 input이 들어가는 겁니다.

아까 적었던 <table>과 </table>사이에서 엔터를 쳐서 개행해주세요.

그 사이에 tr을 4개 넣고 다시 각 tr에 대해 td를 3개씩 넣어 봅시다.

emmet 자동완성 기능을 잘 쓰고 있다면, (tr>td*3)*4를 입력한 뒤 tab 키를 누르는 것으로 이 과정을 한번에 할 수 있습니다.

이렇게 했을 때의 실제 모양은... 가로 3칸이 있는 세로 4줄짜리 표가 될 거에요. 그런데 우리가 만들고 싶은 표는, 첫번째 줄과 두번째 줄에서 각각 첫번째 칸과 두번째 칸을 병합해주고 싶습니다.

그런 경우, 첫번째 줄과 두번째 줄에 똑같은 내용을 하기 때문에

첫번째 줄에서 그 칸들을 병합한 뒤 두번째 줄에 복사~붙여넣기 해도 괜찮지만요, ctrl을 누른 채 동일한 위치에 커서를 찍어서 동시에 편집할 수 있는 멀티커서 기능을 써 보기로 합시다.

칸은 2개가 되어버리기 때문에, 각각 하나씩의 td를 지워주고

맨 앞의 td의 여는 태그에 대해 colspan이라는 속성을 써서, 2칸 분량으로 늘려준 것입니다.

rowspan을 써서 위아래로 늘려주는 것도 가능합니다!

여기까지 했다면, 각 태그들은 <여는 태그></닫는 태그>의 꼴로 2개가 생긴다는 걸 이해하셨지요?

그런데 예외도 있습니다. 지금까지 사용한 태그들은 그 사이에 무언가를 배치시킬 수 있기 때문에 여는 태그와 닫는 태그가 쌍으로 있었지만, input이나 image같은 태그들은 그렇지 않아요. 하지만 이런 것들을 다 기억하지 않아도, 태그명을 적고 tab키를 눌러 자동완성을 하면 알아서 그 규칙대로 만들어주니까 외우지 못해도 괜찮습니다.

이름, 플레이어, 성별, 연령, 소속 등은 태그를 쓰지 않고 td사이에 그냥 입력해두어도 괜찮지만, 나중에 CSS에서 스타일을 일괄적으로 지정할 때 편리하기 때문에 가급적 p나 span 태그를 이용해서 감싸주는 것이 좋습니다. 이미 다 입력을 해버린 상태라면, 감싸고 싶은 내용을 드래그해서 선택한 뒤 shift+alt+W키를 누르세요. 그러면 p태그로 감싸집니다.

그 다음에는 ctrl+H를 눌러서, p>를 전부 span>으로 바꿔버립시다. 그냥 p를 span으로 바꾸면 input과 type에 포함된 p마저 바뀌기 때문에.

<table border="1">
	<tr><td colspan="2"><span>이름</span></td><td><span>플레이어</span></td></tr>
	<tr><td colspan="2"><input type="text"></td><td><input type="text"></td></tr>
	<tr><td><span>성별</span></td><td><span>연령</span></td><td><span>소속</span></td></tr>
	<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
</table>

그럼 여기까지 잘 되었나요? 저장을 해서, html파일을 크롬으로 열어 보세요. 저장 단축키는 ctrl+S에요.

뭔가 실수했다면 ctrl+Z로 되돌리고, 다시 ctrl+Y로 재실행할 수 있습니다.

그러면 바라는 것과는 조금 다른, 이런 결과가 되는데... 여기서 무엇을 해야 할 지 보이시나요?

글자를 가운데정렬 하고 싶고, 이름의 입력칸을 쭉 늘려주고 싶네요. 한번 해보죠!

table 태그에서 쓸 수 있는 속성인 border는, 1로 했을 때 제가 한 것처럼 테두리 선이 생깁니다. 다른 숫자도 넣어서 어떻게 되는지 확인해보세요.

style에서, text-align으로 글자의 위치 정렬을 할 수 있습니다. 기본값은 left이고, 부모 요소의 설정값을 따라가는 inherit로도 가능해요.

또 style에서는, width나 height를 통해 크기를 지정해주는 것도 가능합니다. px단위나 pt, em, rem등의 단위를 쓸 수 있습니다. 저는 %를 써서, 부모 요소인 td의 크기에 딱 맞게 만들었어요. min-width처럼, 가로나 세로의 최소/최대 길이를 지정하는 것도 가능합니다.

<table border="1" style="text-align: center;">
	<tr><td colspan="2"><span>이름</span></td><td><span>플레이어</span></td></tr>
	<tr><td colspan="2"><input type="text" style="width: 100%;"></td><td><input type="text"></td></tr>
	<tr><td><span>성별</span></td><td><span>연령</span></td><td><span>소속</span></td></tr>
	<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
</table>

여기까지 했다면, 기초적인 것은 잘 이해하신 셈입니다. 이제 맨 처음에 언급했던, roll20서버에서 attributes의 항목에 값을 저장하기 위한 약속을 따라 input에 name을 지정해줍시다.

어떤 것으로 지정하는지는 자유롭게 적어도 되지만, 반드시 그 항목이름 앞에는 attr_로 시작할 것! 그래야 name의 값을 roll20의 시트에 저장할 수 있습니다. 그리고 캐릭터 이름의 input을 attr_character_name으로 적게 되면, 서버에서 변수를 저장하는 name이 동일하게 처리되어서, 저널에서 시트이름을 곧바로 변경해줍니다. 

<table border="1" style="text-align: center;">
	<tr><td colspan="2"><span>이름</span></td><td><span>플레이어</span></td></tr>
	<tr><td colspan="2"><input type="text" style="width: 100%;" name="attr_character_name"></td><td><input type="text" name="attr_player"></td></tr>
	<tr><td><span>성별</span></td><td><span>연령</span></td><td><span>소속</span></td></tr>
	<tr><td><input type="text" name="attr_gender"></td><td><input type="text" name="age"></td><td><input type="text" name="attr_assign"></td></tr>
</table>

여기까지 똑같이 되었다면 html로 시트의 뼈대를 세우는것은 잘 하실 수 있을 겁니다. 나머지는 무수한 반복작업노가다로 이런 과정에 시간을 쏟는 것 뿐... 화이팅입니다! 다음 글에서는 이렇게 작성한 html을 보기 좋게 배치하고 꾸미는 방법에 대해 설명하겠습니다.