리버티게임:HTML 문법

리버티게임에서는 HTML(Hyper-Text Markup Language)를 섞어 쓸 수 있습니다. HTML이 뭐냐고요? HTML은 여러분이 보시는 웹 페이지에서 무엇을 어떻게 볼 수 있는지 정해주는 문법입니다. 모든 웹페이지는 기본적으로 HTML로 표기되어야 하며, 위키 문법은 그 중 일부분을 조금 더 사람에게 친숙하게 변형한 것입니다.

리버티게임에서는 일부 HTML 태그를 문서에 직접 삽입할 수 있습니다. 여기서 태그란 <div></div> 같이 왼편에는 /가 없는 <와 >가, 오른편에는 /가 있는 <와 >로 된 한 쌍의 문법 요소를 말합니다. 쉽게 말해서 웹 페이지에 보이는 모든 요소는 왼편과 오른편에 각각 붙는 꺾쇠쌍 형태의 무언가가 있어야 한다는 뜻입니다. 그 무언가가 바로 HTML 태그(HTML Tag)입니다.

다음은 리버티게임이 사용하는 미디어위키 시스템에서 사용하는 HTML 문법 요소입니다. 아래 요소에 한해 리버티게임의 문서를 편집할 때 삽입하면 미디어위키에서 문서를 해석하는 Parsoid가 해당하는 태그를 바꿔줍니다. 그 이외의 HTML 태그는 직접 삽입이 불가능하며, 소도구나 자바스크립트 플러그인으로 집어넣어야 합니다.

div

div는 블록 영역을 생성하는 가장 기본적인 태그입니다. 블록 영역은 앞과 뒤의 내용과 구분되어 줄바꿈이 되며, CSS로 블록 영역을 이동, 색칠할 수 있습니다. div로 설정할 수 있는 내용은 무궁무진하게 많기 때문에, 자세한 내용은 MDN을 참조하세요.

예를 들자면, 만약 절반 정도의 너비를 차지하며, 'div-ex1' 식별자를 가진 검은색 실선 테두리를 가진 파란색 상자 안쪽 중앙에 '이것은 div 태그의 결과입니다'라는 내용을 흰색 글씨로 적고 싶다면 다음과 같은 형태를 가지게 됩니다.

<div id="div-ex1" style="background-color:blue;border:1px solid black;width:50%;text-align:center;color:white;">
이것은 div 태그의 결과입니다
</div>

편집 창에 적고 저장한 결과는 다음과 같습니다.

이것은 div 태그의 결과입니다

span

span은 텍스트를 묶는 가장 기본적인 인라인 태그입니다. 줄바꿈이 이루어지지 않고 CSS를 통해 위치를 이동시키기 어렵습니다. div 대신 span을 사용한다는 점만 알면 div 태그와 사용법이 같습니다.

표 관련 태그

table: 표 전체를 묶습니다. 다른 표 관련 태그는 table 태그 안에서만 사용됩니다.
tr: 표의 행(줄)을 나타내며, td와 th를 묶습니다.
td: 표의 각 셀을 나타냅니다.
th: 제목 역할을 하는 셀을 나타냅니다.

pre

미디어위키에서 가끔 아래와 같이 맨 처음에 띄어쓰기를 붙여서 특정한 문구를 인용할 수 있습니다.

...그래서 리버티게임에서는 줄 왼쪽에 띄어쓰기를 할 경우 그 줄의 내용을 이렇게 파란 박스로 감쌉니다.

그러나 여러 줄을 써서 미디어위키 문법을 설명하는 용도의 경우, pre 태그로 아래처럼 감싸면 됩니다.

<pre>감쌀 내용을 적을 수 있으며, pre 태그 안에서는 nowiki 태그가 없어도 {{CGI}} 같은 틀 인용이나 {{#time:}} 같은 파서 함수 및 미디어위키 문법이 적용되지 않습니다.</pre>

결과는 다음과 같이 나옵니다

감쌀 내용을 이렇게 적을 수 있으며,
pre 태그 안에서는 nowiki 태그가 없어도 {{CGI}} 같은 틀 인용이나 {{#time:}} 같은 파서 함수 및 미디어위키 문법이 적용되지 않습니다.

사용 불가능한 문법

script 태그: 자동 실행 문제로 인해 미디어위키에서는 자바스크립트 실행을 HTML 태그 삽입으로 지원하지 않습니다. 자바스크립트 사용이 필요한 경우 PluginX 틀을 활용하시기 바랍니다.
a 태그: 미디어위키의 링크 문법으로 대체합니다.
input, form 태그와 같은 GUI 요소: 확장 기능이 지원하는 경우를 제외하고 구현할 수 없습니다. 자바스크립트를 사용해 동적으로 해당 요소를 mw-parser-output id를 가지는 div 태그 아래에 추가해야 합니다. 리버티게임에서는 틀:입력 상자나 틀:폼과 CIForms 확장기능을 통해 이를 구현하고 있습니다.

같이 보기