커스텀시트 만들기③:CSS에 연결해보기

이 글에서는 기초적인 CSS의 문법과 display 속성에 대해서 설명합니다. 먼저 roll20의 커스텀시트를 사용하는 방을 하나 만들어보겠습니다.

게임 설정으로 들어가면, 코드를 입력할 수 있는 검은 창이 있어요. 

이 HTML 창에 간단한 코드를 입력해보겠습니다. 이번에 사용할 태그는 division을 의미하는 div입니다. 먼저 하나의 div를 만들고, 그 안에 다시 2개의 div를 만들고, 각각의 안에 lorem ipsum으로 무의미한 텍스트를 생성합니다.

lorem을 쓰고 키보드에서 tab을 눌러보세요

그리고 이것을 2단으로 정렬해보도록 CSS를 작성하겠습니다. 바로 이런 모양으로 보이도록 말이죠.

roll20에서는 이런 2단 배열, 3단 배열에 대해 기본적인 레이아웃을 제공하고 있습니다. 가장 상위에 있는, 부모 div의 class를 sheet-2colrow라고 적어 주세요. 그리고 안쪽에 있는 자식 div의 class를 각각 sheet-col라고 적습니다. 마지막으로, CSS에서 다음과 같이 작성합니다.

div.sheet-col:first-child {
	background-color: pink;
}
div.sheet-col:last-child {
	background-color: skyblue;
}

그리고 나서 priview를 누르거나 세션방 안에서 캐릭터시트를 켜 보면 원하는 형태가 된 것을 확인할 수 있습니다. 3단으로 배열하고 싶다면, HTML 코드에 있는 부모 div의 class를 sheet-3colrow으로 하고 그 안에 3개의 자식 div를 넣어서 각각의 class를 sheet-col로 하면 됩니다.

<div class="sheet-3colrow">
	<div class="sheet-col">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus accusantium eius voluptatum non soluta dolore dolorum, fugit! Quidem voluptatibus, vel possimus, velit nobis sit voluptatem aut dolorum ad hic, sequi.</div>
	<div class="sheet-col">Excepturi, facilis blanditiis nam laborum. Natus possimus, voluptates optio ea tempore laudantium mollitia esse illum eum est atque fugit a illo itaque aperiam. Cumque nesciunt sit enim, ipsum tempora consequuntur!</div>
	<div class="sheet-col">Nulla, vero totam commodi nihil molestias ipsum obcaecati ipsam impedit quod quis qui quisquam necessitatibus a laborum optio ratione natus tenetur incidunt laudantium soluta ex facilis quidem inventore! Repudiandae, repellat.</div>
</div>

그렇다고 해서, 부모 요소를 sheet-4colrow나 sheet-5colrow로 하고 그 아래에 자식 요소를 여러 개 넣어도 그것들이 나란히 줄 지어 서있지는 않습니다. 더 많은 요소들을 균등한 너비로 위치시키기 위해서는 flex를 많이 사용하지만, 지금은 이 글을 보고 계시는 분이 코딩에 대해 지식이 거의 없다고 가정하고 조금 더 단순한 방법을 사용해 보겠습니다.

(div>span+input)*5라고 적고, 키보드의 tab키를 눌러서 자동완성

여기서 emmet의 자동완성을 이용하기 위해서 >같은 선택자를 사용하고 있는데, 이것은 CSS의 선택자 규칙입니다. div라는 부모 요소의 하위에 span이라는 자식 요소가 있고, +를 써서 input이 그것과 형제 요소(바로 옆에, 동일한 수준)에 있다고 설명한 뒤 이것을 통째로 묶어서 5번 반복시킨 거에요. 그 다음 각각의 span 요소 안에 이것이 어떤 항목을 의미하는지를 적어주었습니다. html에서 class에 띄어쓰기를 하면, 이 요소는 띄어쓰기로 구분된 각각의 클래스명을 갖게 됩니다. 무슨 말이냐면, 우리가 '신사임당의 아들'이라고 말해도, '천원권에 나오는 사람'이라고 말해도, 결국 '율곡 이이'로 알아듣는 것과 같아요. 이제 CSS 파일을 만들어 보죠.

html파일을 만들었을 때와 마찬가지로, 새 파일(ctrl+N)을 만들어서 확장자가 css로 끝나도록 저장(ctrl+S)하세요. 이 때의 이름은 html 파일과 달라도 상관 없습니다. CSS문법은 선택자 { 선언부 }의 형태로 이루어져 있습니다. 홍길동의 머리에 하얀 두건을 매어 주세요 라고 요청하려면, 홍길동 { 두건: 하얀색; } 이라고 적는 겁니다.

앞에 온점으로 시작해서 sheet-rw라고 쓴 class선택자에는, 기본적으로 div가 생략되어 있습니다. 그래서 class명이 sheet-rw인 div를 가리킵니다. 만약 <span class="sheet-text"><span>을 선택하고 싶다면 span.sheet-text라고 적으면 되는 거죠.

하지만 우리 코드는 sheet-rw에서 띄어쓰기를 한번 하고 div라고 적었는데, 이것은 sheet-rw의 하위에 있는 요소 중 모든 div들을 가리킵니다. html코드를 자동완성 할 때 >라는 기호를 썼더니 부모 요소 안에 자식 요소를 넣어서 생성했던 것을 기억하시나요? 그 자식 요소 안에 또 자식 요소가 있는 경우까지 포함해서, 띄어쓰기는 모든 하위 태그를 선택합니다. >는 직계 자식만을 선택해요. 즉, sheet-rw>div라고 적는다면 sheet-rw의 한 단계 아래의 수준에 해당하는 div들만을 선택하고, 다시 그 div의 하위에 있는 자식 요소들은 선택하지 않는다는 차이가 있습니다.

여기까지 작성한 다음, 이번에는 커스텀시트 샌드박스를 사용해보겠습니다. roll20의 내 게임에서, 오른쪽에 있는 보라색 버튼의 커스텀 시트 샌드박스로 들어가 새로운 샌드박스를 만들어주세요. 게임 이름은 어떤 것이라도 상관없습니다. 그렇게 확인을 누르면 평범한 세션방과 비슷해보이는 게임이 만들어지는데, 아래쪽에 조금 다른 것이 있습니다. 신경쓰지 말고 게임 시작을 눌러주세요.

그리고 아까 만들었던 html파일과 css파일을 잘 저장해준 뒤, 이 방 안에 있는 sheet sandbox tools에 있는 버튼을 눌러서 html과 css파일을 각각 첨부해줍니다. 그리고 캐릭터 저널에서 새 캐릭터를 만들어서 그 결과를 확인해보세요.

이 5개의 div는 이 캐릭터시트 창의 전체 너비에 대해서 19%에 해당하는 width를 나누어 가지게 했습니다. 그런데 만약 display: inline-block; 이라는 코드를 없애면...

display: inline-block;를 드래그해서 선택하고, ctrl+/로 주석 처리

나란히 챡챡챡 정돈되지 않고, 공간을 차지하고 있어요. 이것이 div의 기본 display값인 block 상태입니다. div는 기본적으로 html에서 적은 순서대로, 수직으로 배열합니다. 반면 span같은 텍스트는 옆으로 계속 항목을 나열하죠. 그러다가 내용이 너무 많아지면? 하단에 좌우로 움직이는 스크롤바가 생깁니다. 이런 inline 상태는 수평으로 배열합니다. 그리고 우리가 사용한 inline-block은 그 요소들이, 각자 옆으로 계속 나열하다가 차지할 공간이 부족하면 아래로 내려서 계속 배치합니다. 그 공간을 나누어 가질 항목들의 width를 잘 계산해주면 간단하죠? 이 배치구조를 결정하는 것이 display입니다.

그리고 input은 기본적으로 170.68px정도의 너비라고 정해져 있기 때문에, 부모 요소가 가지는 크기에 딱 맞도록 100%로 설정해주면 끝입니다.

그런데 이런 html과 css를 만들어서 각각 저장하고, 크롬으로 html 파일을 열어본다면 아까 그 모습이 되지 않습니다. 일단은 html과 CSS파일이 서로 연결되지도 않았기 때문에, html의 코드에 다음과 같은 한 줄을 추가해줍시다.

<link rel="stylesheet" href="파일명.css">

저는 CSS파일을 nevercloud.css로 저장했기 때문에, html에 <link rel="stylesheet" href="nevercloud.css">라고 적어주었습니다. 하지만 그래도 roll20에 넣은 결과와 똑같이 보이지는 않는데, 이유는 당연히 class들 중 sheet-2colow나 sheet-col에 대한 서식 지정이 roll20에만 있고 우리 CSS에는 없는 것이기 때문입니다. 그 외에도 type이 number인 input의 너비는 3.5em으로 고정되는 등 roll20에서는 몇 가지 CSS스타일을 강제하고 있어서 가급적 html파일을 크롬으로 미리보기 하는 것보다, 그때그때 저장해서 커스텀시트 샌드박스에 업로드하여 확인하는 것을 권장하겠습니다. 

 

이전 글에서 아주 간단한 table을 써서 html의 기초 구조를 살펴보고, 이 글에서는 width를 배분해서 display: inline-block으로 배치하는 법과 CSS의 기본 문법만을 설명했습니다. 이 방식은 사실 거의 쓰이지 않습니다. 웹 표준은 grid나 flex를 사용하는 추세가 되고 있기 때문에, width를 계산해서 지정하지 않아도 비율이나 일정 영역을 차지하고 남은 나머지에 대한 자동 너비를 갖게 하여 넓은 모니터에서부터 모바일 기기에 이르기까지 다양한 크기에 대해 탄력있는 반응형 웹을 만들 수 있습니다. 어쩌면 그 편이 더 쉽고 간편하게 느껴지기는 경우도 있어요. 하지만 CSS를 처음 접한다면 display 구조 중 block과 inline에 대해서는 알고 넘어갈 필요가 있어서 설명해보았습니다. 더 멋진 배치는 커스텀시트 만들기⑥:CSS와 구조 배치에서 같이 해봅시다!