커스텀시트 만들기⑥:CSS와 구조 배치

이번 글의 내용은 커스텀시트 만들기③:CSS에 연결해보기의 심화입니다. 잘 기억이 떠오르지 않는다면 반드시 복습한 뒤에 따라와 주세요~ 지금까지 display가 block인 요소와 inline인 요소는 꽤 사용해보았습니다.

기억이 나지 않는다구요?

오른쪽의 글자를 눌러보세요! 없음기본값inlineblock

바이올린을 연주하는 토끼

눈토끼

바로 이런 겁니다.

div나 p 태그는 기본값이 display: block;이고, img나 span같은 태그들은 display: inline;이기 때문에 자신의 크기만큼의 폭을 차지한 다음에 오는 요소의 배치를 아래쪽/오른쪽으로 두려고 한다는 것을 알 수 있습니다. 거기에 추가로 inline-block을 써서 5단 배치도 해보았었지요.

width: 18%;를 5개 놓은 모양

<link rel="stylesheet" href="nevercloud.css">
<div class="sheet-2colrow">
  <div class="sheet-col sheet-rw">
    <div><span>VIT</span><input type="text"></div>
    <div><span>MND</span><input type="text"></div>
    <div><span>STR</span><input type="text"></div>
    <div><span>IMA</span><input type="text"></div>
    <div><span>DEX</span><input type="text"></div>
  </div>
  <div class="sheet-col">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo libero vitae expedita blanditiis magnam reprehenderit animi officiis? Nesciunt ex nihil voluptatem, quibusdam, porro, impedit minima sunt fuga soluta doloribus amet?
  </div>
</div>

VIT

MND

STR

IMA

DEX

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo libero vitae expedita blanditiis magnam reprehenderit animi officiis? Nesciunt ex nihil voluptatem, quibusdam, porro, impedit minima sunt fuga soluta doloribus amet?

* {padding: 0;}
div.sheet-col:first-child {background-color: pink;}
div.sheet-col:last-child {background-color: skyblue;}
.sheet-rw div {
    display: inline-block;
    width: 18%;
    text-align: center;
}
.sheet-rw input {width: 100%;}

roll20에서는 2단 배치를 위한 <div class="sheet-2colrow">나 3colrow의 스타일을 지정해서 제공하고 있습니다. 하지만 4개 이상의 단을 나란히 놓고 싶을 때는 어떻게 할까요? 또, 그 각각의 단이 차지하는 가로비율이 다른 형태는 어떻게 만들까요?

<link rel="stylesheet" href="nevercloud.css">
<div class="sheet-2colrow">
	<div class="sheet-col sheet-rw">
		<div><span>VIT</span><input type="text"></div>
		<div><span>MND</span><input type="text"></div>
		<div><span>STR</span><input type="text"></div>
		<div><span>IMA</span><input type="text"></div>
		<div><span>DEX</span><input type="text"></div>
	</div>
	<div class="sheet-col sheet-xw">
		<div><span>최대HP</span><input type="text"></div>
		<div><span>HP</span><input type="text"></div>
		<div><span>공격력</span><input type="text"></div>
		<div><span>기량</span><input type="text"></div>
		<div><span>회피력</span><input type="text"></div>
		<div><span>이동력</span><input type="text"></div>
		<div><span>행동력</span><input type="text"></div>
	</div>
</div>

이 html코드를 바탕으로, RW능력치는 grid를 사용하고 XW능력치는 flex를 사용하겠습니다. 맨 첫번째 줄을 보시면 link 태그를 써서 CSS파일과 연결하여 스타일 시트로서 읽어들이고 있습니다. 제가 저장했던 css파일의 이름은 nevercloud였지만, 다른 이름으로 저장하셨다면 (파일명).css로 바꿔주세요.

input {width: 100%;}

그 다음 CSS에 이러한 한 줄을 써줍니다. 그렇게 하고 html 파일과 CSS 파일을 각각 저장한 뒤, html 파일을 크롬 또는 사파리 브라우저에서 실행하면 우리가 작성한 코드의 결과물이 어떻게 되는지 확인할 수 있습니다. input의 입력칸이, 창의 가로폭을 100%로 가득 채우게 되었나요? 그러면 이제 class가 sheet-rw인 부분을 만져봅시다.

.sheet-rw {display: grid; grid-template-columns: repeat(5, 1fr);}

보여지는 형태는 grid로 설정하고, 그 grid의 모양이 한 줄에 5칸을 반복하게 했습니다. fr은 fraction(비율)이라는 의미로, 1:1:1:1:1의 모양이 되는 것입니다. 만약 1fr 자리에 그 대신 200px을 넣으면, 가로폭이 200px인 칸 5개가 만들어집니다.

여기까지 해서 CSS파일을 저장하고, 브라우저를 새로고침해서 결과물을 확인해보세요.

<link rel="stylesheet" href="nevercloud.css">
<div class="sheet-2colrow">
  <div class="sheet-col sheet-rw">
    <div><span>VIT</span><input type="text"></div>
    <div><span>MND</span><input type="text"></div>
    <div><span>STR</span><input type="text"></div>
    <div><span>IMA</span><input type="text"></div>
    <div><span>DEX</span><input type="text"></div>
  </div>
  <div class="sheet-col sheet-xw">
    <div><span>최대HP</span><input type="text"></div>
    <div><span>HP</span><input type="text"></div>
    <div><span>공격력</span><input type="text"></div>
    <div><span>기량</span><input type="text"></div>
    <div><span>회피력</span><input type="text"></div>
    <div><span>이동력</span><input type="text"></div>
    <div><span>행동력</span><input type="text"></div>
  </div>
</div>

VIT

MND

STR

IMA

DEX

최대HP

HP

공격력

기량

회피력

이동력

행동력

input {
    width: 100%;
    max-width: 400px;
}
.sheet-rw {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
}

이번에는 class가 sheet-xw인 부분에 flex를 써보겠습니다. grid와는 달리, 창의 가로가 줄어들면 요소를 아래로 내려서 배치하게 할 수 있습니다. flex-wrap이 없으면, 기본적으로는 계속 오른쪽에 배치되고 스크롤바가 생깁니다.

.sheet-xw {display: flex; flex-wrap:wrap;}

grid와 flex는 똑같은 것처럼 보입니다. 하지만 flex의 칸은, 비율을 균등하게 나눠 가진 너비가 아니라 span이 가진 문자열의 길이에 따라 조금씩 차이가 있다는 것을 알 수 있습니다. 여기서 최대HP와 HP라는 칸만, 다른 칸의 절반 크기를 갖도록 줄여봅시다. 순서가 중요한데, sheet-xw의 모든 자식 div의 비율을 1로 할당한 뒤 다시 HP에 해당하는 div의 비율을 0.5로 할당해서 갱신합니다.

.sheet-xw div {flex: 1;}
.sheet-xw div:first-child, .sheet-xw div:nth-child(2) {flex: 0.5;}

최대 HP에 해당하는 div는, sheet-xw의 자식 요소인 div 중 첫번째에 있습니다. HP는 두번째니까, 각각 .sheet-xw>div:first-child와 .sheet-xw>div:nth-child(2)라는 선택자를 이용해서 지정합니다. flex를 1이라고만 쓰면, 이것은 사실 flex-grow: 1; flex-shrink: 1; flex-basis: 0;이라는 뜻입니다. 각각 늘어날 때의 비율, 줄어들 때의 비율, 기본(최소)크기 라고 생각해주세요.

이제 원하던 비율의 모양이 되었습니다.

<link rel="stylesheet" href="nevercloud.css">
<div class="sheet-2colrow">
  <div class="sheet-col sheet-rw">
    <div><span>VIT</span><input type="text"></div>
    <div><span>MND</span><input type="text"></div>
    <div><span>STR</span><input type="text"></div>
    <div><span>IMA</span><input type="text"></div>
    <div><span>DEX</span><input type="text"></div>
  </div>
  <div class="sheet-col sheet-xw">
    <div><span>최대HP</span><input type="text"></div>
    <div><span>HP</span><input type="text"></div>
    <div><span>공격력</span><input type="text"></div>
    <div><span>기량</span><input type="text"></div>
    <div><span>회피력</span><input type="text"></div>
    <div><span>이동력</span><input type="text"></div>
    <div><span>행동력</span><input type="text"></div>
  </div>
</div>

VIT

MND

STR

IMA

DEX

최대HP

HP

공격력

기량

회피력

이동력

행동력

input {width: 100%; max-width: 400px;}
.sheet-col>div {margin: 10px;}
.sheet-rw {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
}
.sheet-xw {display: flex; text-align: center;}
.sheet-xw div {flex: 1;}
.sheet-xw div:first-child, .sheet-xw div:nth-child(2) {flex: 0.5;}

여기서 글자들을 가운데 정렬하고, 여백도 넣어서 마무리합니다.

기본적인 내용은 여기까지이지만, roll20의 모바일 앱 등을 사용하는 경우 배치 구조를 2단에서 1단으로 보이게 하는 등의 반응형 레이아웃을 만들 수도 있습니다. flex의 wrap을 사용하거나, grid의 auto-fill, auto-fit를 사용하거나, 단순히 div의 display를 inline-block으로 준 뒤 width를 50vh 등으로 설정하는 방법을 사용합니다.