내가 인터 위주로 제작하는 쵸작자이지만, 메타로 텍스트 쵸아를 만든 적이 있기 때문에 노하우 비슷한 걸 알려주려 한다.
우선 만들다보면 구성에 따라 표를 쓸 수 있게 되는데, 먼저 예시로 내가 배포한 이걸 가져와봤다.
| |||||||||||||||||||||||||
칼리
어라, 네가 내 제자가 될 녀석인가 본데?
내 강함의 원천이 거기서 나오는 거라서 말야. 이걸 알게 되면 그 어떤 공포라도 맞서 싸울 수 있고, 내면과 외부의 유혹에도 마음이 절대로 흔들리지 않게 돼. 그러니까... 정신 공격에 면역이 된다는 소리야.  ...뭐? 너 야한 거라도 하고 싶어서 일부러 최면에 당하고 싶다고? 어이, 그럴 생각은 그만두라고! 그럴거면 왜 내 가르침을 받을 생각을 한거야? 이건 마음대로 끄고 킬 수가 없다고! 자연스레 네 몸에 베어들게 될텐데, 그 정신머리부터 똑바로 고치라고! 조금이라고 그럴 생각이 들게 되면 내가 네 몸에 고통을 줄거야. 정확히는 온몸이 반으로 찢겨나가는 고통을 말야. 네가 어떠한 방어구나 면역 능력을 가졌더라도, 무시하고 들어오게 되니까 조심하라고!  아무튼, 그 다음에는 여러 종류의 무기들을 잘 쓸 수 있도록 도와줄게. 그렇게 되면, 넌 대검을 한손으로 들어서 가볍게 휘두를 수 있게 될거야. 내가 자주 쓰는 무기가 그 종류였으니까.  여기에 더해서 다른 종류의 무기를 쓰지 않았더라도, 한몸이 된 것처럼 능숙하게 사용할 수 있게 되지. 내 기술까지 더해지면, 적이 반으로 썰려나가고 터지는 모습을 맘껏 볼 수 있을거야. 충분히 강해졌다고 생각되면... 나를 부르라고. 나와 대련하면서 내 기술들을 전수해줄게. 붉은 안개의 기술
만약에 내가 도움을 주는 상황이라면, 잠시나마 내 E.G.O.를 쓸 수도 있겠지. 그렇지만 네 E.G.O.는 아니니까, 거기서 오는 부담은 네가 져야 한다? 남의 E.G.O.를 쓰는 거나 마찬가지이니까. | |||||||||||||||||||||||||
이렇게 생겼는데, 만약에 테두리 색 입히고 싶다면 코드보기를 눌러서 코드를 뜯어봐야 한다.
대신 단점이 있는데, 한번에 드래그로 선택해서 배경 색상 변경이 불가능해진다는 점이다.
우선 코드보기로 열어보게 되면 뭔가 영어로 쏼라쏼라하는데, 코알못인 내가 찾아보니 html이라는 코딩 언어라고 한다.
일단 코드를 보다보면 이런 게 있는데...
'<table style="width:100%;">'와 '<td style="width:100%;background-color:rgb(31, 32, 35);text-align:center;">'가 있는데
이것들은 표를 구성하는 박스와도 같은 거라고 봐도 된다.
우선 이해를 위해 설명을 하자면, background-color:rgb(31, 32, 35)는 배경색을 지정하는 코드다.
그런데 나머지는 뭐냐 하면, 각각 화면에 보이는 표의 크기와 글 정렬을 담당하는 코드다.
그런데 일단 테두리 선의 색깔을 바꿔야 하니 한번 건드려보자면...
우선 <table style="width:100%;"> 안의 ; 부분 뒷쪽을 뛰어써서 'border-style : Solid'를 써넣어야 한다.
참고로 쉼표 역할은 ; 이거다.
저게 뭐냐면 태두리의 종류를 지정하는 코드 키워드로, solid 대신 none으로 쓴다면 태두리를 없앨 수 있다.
hidden은 테두리를 숨길 수 있고, double은 이중선, dashed는 파선 ,dotted는 점선이다.
나머지 ridge와 groove는 각각 입체적으로 튀어나온 선과 들어간 선을 줄 수 있다.
그래서 그걸 써 넣은 후 ;를 쓰고 다시 뛰어 쓰기를 해서 'border-color : (지정할 헥스 코드)'를 집어 넣으면 된다.
일단 거듭 강조하자면 border-style를 넣어야지 색상 변경이 가능하기 때문에, 넣지 않는다면 작동이 안될 가능성이 높다.
두번째로 굵기를 조절하고 싶다면 border-width를 넣어야 한다.
눈치 빠른 쵸붕이라면 알겠지만, 이건 테두리의 굵기를 정할 수 있는 기능을 담당한다.
대충 예시를 써보자면, <table style="width:100%; border-width : 5px;">로 하면 테두리의 굵기가 5 픽셀만큼 지정이 된다는 거다.
이걸 이용해 앞서 보인 예제를 바꿔보면...
| |||||||||||||||||||||||||
칼리
어라, 네가 내 제자가 될 녀석인가 본데? 내 강함의 원천이 거기서 나오는 거라서 말야. 이걸 알게 되면 그 어떤 공포라도 맞서 싸울 수 있고, 내면과 외부의 유혹에도 마음이 절대로 흔들리지 않게 돼. 그러니까... 정신 공격에 면역이 된다는 소리야. ...뭐? 너 야한 거라도 하고 싶어서 일부러 최면에 당하고 싶다고? 어이, 그럴 생각은 그만두라고! 그럴거면 왜 내 가르침을 받을 생각을 한거야? 이건 마음대로 끄고 킬 수가 없다고! 자연스레 네 몸에 베어들게 될텐데, 그 정신머리부터 똑바로 고치라고! 조금이라고 그럴 생각이 들게 되면 내가 네 몸에 고통을 줄거야. 정확히는 온몸이 반으로 찢겨나가는 고통을 말야. 네가 어떠한 방어구나 면역 능력을 가졌더라도, 무시하고 들어오게 되니까 조심하라고! 아무튼, 그 다음에는 여러 종류의 무기들을 잘 쓸 수 있도록 도와줄게. 그렇게 되면, 넌 대검을 한손으로 들어서 가볍게 휘두를 수 있게 될거야. 내가 자주 쓰는 무기가 그 종류였으니까. 여기에 더해서 다른 종류의 무기를 쓰지 않았더라도, 한몸이 된 것처럼 능숙하게 사용할 수 있게 되지. 내 기술까지 더해지면, 적이 반으로 썰려나가고 터지는 모습을 맘껏 볼 수 있을거야. 충분히 강해졌다고 생각되면... 나를 부르라고. 나와 대련하면서 내 기술들을 전수해줄게. 붉은 안개의 기술
만약에 내가 도움을 주는 상황이라면, 잠시나마 내 E.G.O.를 쓸 수도 있겠지. 그렇지만 네 E.G.O.는 아니니까, 거기서 오는 부담은 네가 져야 한다? 남의 E.G.O.를 쓰는 거나 마찬가지이니까. | |||||||||||||||||||||||||
이 정도이다.
이외로 테두리를 둥글게 만들 수 있는 border-radius 기능도 있다.
앞서 말한 굵기 지정과 똑같이 border-radius : 2px 이렇게 지정하면 2픽셀 만큼 둥글게 만들 수 있다.
단, 앞에 border-collapse: collapse; 를 적용해야 이 기능을 적용시킬 수 있다.
이걸 적용시키야 하는 이유는 단순한데, 테두리끼리 분리되어 보이지 않기 위함이다.
이렇게 하면 쵸작자들도 Cyoa를 만들며 표를 예쁘게 꾸밀 수 있다.
그럼, 이상이다!
CHECK
