편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
| 최신판 | 당신의 편집 | ||
| 1번째 줄: | 1번째 줄: | ||
== 개요 == | |||
{{ㅊ|노가다의 세계에 오신 {{위키러}}님을 환영합니다!}} <del>어뭐야 왜내이름이 저깄지</del> | |||
{{인용문|여기가 파란색으로 되어 있으면 더 보기 좋을 것 같아.<br /><br />표 너비를 고정시키고 싶은데 어떻게 방법이 없을까?<br /><br />이 항목을 따라서 오름차순으로 정렬할 수 있으면 진짜 완벽할텐데...}} | [[위키 작성, 당신도 할 수 있다!]] 문서에도 나와 있듯이, 간단한 표는 [http://www.tablesgenerator.com/mediawiki_tables 표 생성기]에서 만들어 가져올 수 있습니다. 아니면 편집창 상단의 "고급"을 누르고 제일 오른쪽에 있는 [[File:Toolbar insert table.png]] 아이콘을 클릭해서 만들 수도 있어요. 하지만 위키작성을 하다보면 당연히 표를 좀 더 예쁘게 꾸미고 싶은 욕구가 들기 마련입니다. | ||
{{인용문|여기가 파란색으로 되어 있으면 더 보기 좋을 것 같아.<br/><br/>표 너비를 고정시키고 싶은데 어떻게 방법이 없을까?<br/><br/>이 항목을 따라서 오름차순으로 정렬할 수 있으면 진짜 완벽할텐데...}} | |||
흰 바탕에 회색 테두리의 표는 더 이상 지겹습니다. 하지만 표를 꾸미는 방법을 검색해보니 이상한 말만 잔뜩 나와있습니다. 이해도 안 되고 복잡합니다. 영어 사이트는 들어가기도 전에 울렁증부터 납니다. | 흰 바탕에 회색 테두리의 표는 더 이상 지겹습니다. 하지만 표를 꾸미는 방법을 검색해보니 이상한 말만 잔뜩 나와있습니다. 이해도 안 되고 복잡합니다. 영어 사이트는 들어가기도 전에 울렁증부터 납니다. | ||
고민하는 여러분들을 위해 [[리브레 위키]]에 도움말이 준비되어 있습니다. 도움말을 차근차근 따라오면서 문법을 익혀봅시다 | 고민하는 여러분들을 위해 [[리브레 위키]]에 도움말이 준비되어 있습니다. 도움말을 차근차근 따라오면서 문법을 익혀봅시다. 어느새 도움말을 열어보지 않고도 척척 표를 만들어내는 {{ㅊ|훌륭한 위키니트}}달인이 되어 있을 것입니다. | ||
== 간단한 표부터 만들어 보자! == | == 간단한 표부터 만들어 보자! == | ||
| 71번째 줄: | 73번째 줄: | ||
|} | |} | ||
이게 어떻게 생겨먹었는지를 파악해봅시다. 생각보다 어렵지 않아요. 위에서부터 아래로 찬찬히 따라가보면 이렇습니다. | {{ㅊ|히, 히익! 무서워! 여기서 나가야 겠어!}} | ||
진정하고(...), 이게 어떻게 생겨먹었는지를 파악해봅시다. 생각보다 어렵지 않아요. 위에서부터 아래로 찬찬히 따라가보면 이렇습니다. | |||
# 우선 <code>{|</code>를 적어서 '''표가 시작'''한다는 걸 알립니다. | # 우선 <code>{|</code>를 적어서 '''표가 시작'''한다는 걸 알립니다. | ||
| 89번째 줄: | 94번째 줄: | ||
#* 이런 방식으로 5번째 행, 6번째 행, ... 을 만들어 나가면 됩니다. 예시에서는 4번째 행까지 만들었습니다. | #* 이런 방식으로 5번째 행, 6번째 행, ... 을 만들어 나가면 됩니다. 예시에서는 4번째 행까지 만들었습니다. | ||
# 표에 들어갈 칸과 내용을 전부 작성했다면, <code>|}</code>를 적어서 '''표를 마칩니다'''. | # 표에 들어갈 칸과 내용을 전부 작성했다면, <code>|}</code>를 적어서 '''표를 마칩니다'''. | ||
{{ㅊ|헥헥}} | |||
다른 모습의 예시들도 살펴봅시다. | 다른 모습의 예시들도 살펴봅시다. | ||
| 314번째 줄: | 322번째 줄: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| [[파일: | | [[파일:Libre_Wiki-Logo.png|150px]] | ||
|- | |- | ||
| {{youtube|1a0WDHZuw4w|300px|200px}} | | {{youtube|1a0WDHZuw4w|300px|200px}} | ||
| 322번째 줄: | 330번째 줄: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| [[파일: | | [[파일:Libre_Wiki-Logo.png|150px]] | ||
|- | |- | ||
| {{youtube|1a0WDHZuw4w|300px|200px}} | | {{youtube|1a0WDHZuw4w|300px|200px}} | ||
| 329번째 줄: | 337번째 줄: | ||
---- | ---- | ||
표 문법에서는 엔터 입력, 즉 줄바꿈까지 문법의 일부로 인식하기 때문에 표 안에서 줄 바꿈을 하고 싶을 때는 <br />태그를 이용해야 합니다. 엔터 입력 만으로는 표 안에서의 줄바꿈이 제대로 되지 않습니다. | 표 문법에서는 엔터 입력, 즉 줄바꿈까지 문법의 일부로 인식하기 때문에 표 안에서 줄 바꿈을 하고 싶을 때는 <br/>태그를 이용해야 합니다. 엔터 입력 만으로는 표 안에서의 줄바꿈이 제대로 되지 않습니다. | ||
{| style="width: 100%" | {| style="width: 100%" | ||
| 365번째 줄: | 373번째 줄: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| 줄 바꿈을<br | | 줄 바꿈을</br>태그로 하면</br>이렇게 됩니다. | ||
|- | |- | ||
| 훈민정음<br | | 훈민정음</br>나·랏:말ᄊᆞ·미</br>中듀ᇰ國·귁·에달·아 | ||
|} | |} | ||
</pre> | </pre> | ||
| 373번째 줄: | 381번째 줄: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| 줄 바꿈을<br | | 줄 바꿈을</br>태그로 하면</br>이렇게 됩니다. | ||
|- | |- | ||
| 훈민정음<br | | 훈민정음</br>나·랏:말ᄊᆞ·미</br>中듀ᇰ國·귁·에달·아 | ||
|} | |} | ||
|} | |} | ||
| 423번째 줄: | 431번째 줄: | ||
|} | |} | ||
=== | === 머릿말 칸 넣기 : <code>!</code> === | ||
칸을 나타내는 기호인 <code>|</code>를 <code>!</code>로 바꾸면 그 행을 표의 머리말 칸으로 나타낼 수 있습니다. 쉽게 말해, 표의 메인 칸이 되는 거죠. 아래 예시처럼 맨 앞을 <code>|</code>대신 <code>!</code>로 작성하면 첫 번째 행의 1번째, 2번째, 3번째 칸이 머리말 칸이 되어 나타납니다. | 칸을 나타내는 기호인 <code>|</code>를 <code>!</code>로 바꾸면 그 행을 표의 머리말 칸으로 나타낼 수 있습니다. 쉽게 말해, 표의 메인 칸이 되는 거죠. 아래 예시처럼 맨 앞을 <code>|</code>대신 <code>!</code>로 작성하면 첫 번째 행의 1번째, 2번째, 3번째 칸이 머리말 칸이 되어 나타납니다. 이 기호도 필수는 아니므로 꼭 쓰지는 않아도 됩니다. | ||
{| style="width: 100%" | {| style="width: 100%" | ||
| 470번째 줄: | 478번째 줄: | ||
| C | | C | ||
| 3 | | 3 | ||
|} | |} | ||
|} | |} | ||
---- | ---- | ||
아래 예시처럼 작성하면 세 번째 행의 1번째, 2번째, 3번째 칸이 강조되어 나타납니다. | 꼭 첫 번째 행에 있는 칸만 강조할 수 있는 것은 아닙니다. 아래 예시처럼 작성하면 세 번째 행의 1번째, 2번째, 3번째 칸이 강조되어 나타납니다. | ||
{| style="width: 100%" | {| style="width: 100%" | ||
| 693번째 줄: | 645번째 줄: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! 한글 | ! 한글 !! 영어 !! 숫자 | ||
|- | |- | ||
| ㄱ || A || 1 | | ㄱ || A || 1 | ||
| 705번째 줄: | 657번째 줄: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! 한글 | ! 한글 !! 영어 !! 숫자 | ||
|- | |- | ||
| ㄱ || A || 1 | | ㄱ || A || 1 | ||
| 720번째 줄: | 672번째 줄: | ||
다만 모니위키의 문법과는 다소 차이가 있어 주의해야할 부분이 있습니다. | 다만 모니위키의 문법과는 다소 차이가 있어 주의해야할 부분이 있습니다. | ||
# 줄 마지막에 <code>||</code>를 붙이는 것은 모니위키에서는 행이 끝남을 의미했지만, 미디어위키에서는 <code>|-</code> 기호로 행을 구분하기 때문에 줄 마지막에 <code>||</code>를 붙이면 새 칸이 하나 더 늘어날 뿐입니다. 행을 끝내고 새 행으로 넘기려면 줄 마지막에 <code>||</code>를 붙이지 마시고 바로 다음 줄로 줄바꿈해 <code>|-</code>를 입력해야 합니다. | # 줄 마지막에 <code>||</code>를 붙이는 것은 모니위키에서는 행이 끝남을 의미했지만, 미디어위키에서는 <code>|-</code> 기호로 행을 구분하기 때문에 줄 마지막에 <code>||</code>를 붙이면 새 칸이 하나 더 늘어날 뿐입니다. 행을 끝내고 새 행으로 넘기려면 줄 마지막에 <code>||</code>를 붙이지 마시고 바로 다음 줄로 줄바꿈해 <code>|-</code>를 입력해야 합니다. | ||
# 모니위키에서는 <code>||</code>와 <code>||</code> 사이를 비워두면 가로방향으로 칸이 합쳐졌지만, 미디어 위키에서는 [[그런 거 없다|그런 거 없고]] 그냥 빈 칸으로 남게 됩니다. 칸을 합치려면 따로 표에 뭔가를 더 써줘야 하지만, 이 부분은 나중에 설명합니다. | # 모니위키에서는 <code>||</code>와 <code>||</code> 사이를 비워두면 가로방향으로 칸이 합쳐졌지만, 미디어 위키에서는 [[그런 거 없다|그런 거 없고]] 그냥 빈 칸으로 남게 됩니다. 칸을 합치려면 따로 표에 뭔가를 더 써줘야 하지만, 이 부분은 나중에 설명합니다. | ||
| 748번째 줄: | 699번째 줄: | ||
|- | |- | ||
| <nowiki>!</nowiki> | | <nowiki>!</nowiki> | ||
| | | 머릿말 칸 | ||
|- | |- | ||
| rowspan="2" style="text-align: center;" | 모니위키스럽게 작성할 때 | | rowspan="2" style="text-align: center;" | 모니위키스럽게 작성할 때 | ||
| 755번째 줄: | 706번째 줄: | ||
|- | |- | ||
| <nowiki>!!</nowiki> | | <nowiki>!!</nowiki> | ||
| | | 머릿말 칸 | ||
|} | |} | ||
| 763번째 줄: | 714번째 줄: | ||
이러한 디자인들의 요소를 속성이라고 부르며 여러 가지가 존재합니다. 당장에 위에서 말했던 색깔, 텍스트 정렬부터 시작해서 병합, 테두리 꾸미기 외에도 너비/높이 지정, 오름/내림차순정렬, 합 구하기/평균 내기 등등... 그 종류가 정말 많습니다. 이제부터 속성의 종류와 적용하는 방법을 차차 알아가보도록 하겠습니다. | 이러한 디자인들의 요소를 속성이라고 부르며 여러 가지가 존재합니다. 당장에 위에서 말했던 색깔, 텍스트 정렬부터 시작해서 병합, 테두리 꾸미기 외에도 너비/높이 지정, 오름/내림차순정렬, 합 구하기/평균 내기 등등... 그 종류가 정말 많습니다. 이제부터 속성의 종류와 적용하는 방법을 차차 알아가보도록 하겠습니다. | ||
우선 속성을 적용하는 방법부터 설명하고, 속성의 종류는 예시를 통해 조금씩 보여드리겠습니다. 물론 뒤에서 제대로 속성 종류 정리도 따로 합니다 | 우선 속성을 적용하는 방법부터 설명하고, 속성의 종류는 예시를 통해 조금씩 보여드리겠습니다. 물론 뒤에서 제대로 속성 종류 정리도 따로 합니다. | ||
=== 속성 적용 방법 === | === 속성 적용 방법 === | ||
| 780번째 줄: | 731번째 줄: | ||
|- | |- | ||
| 강아지 | | 강아지 | ||
| | | align="center" | 고양이 | ||
| | | align="right" | 토끼 | ||
|- | |- | ||
| | | align="left" | 햄스터 | ||
| 앵무새 | | 앵무새 | ||
| | | align="center" | 거북이 | ||
|- | |- | ||
| 기니피그 | | 기니피그 | ||
| 796번째 줄: | 747번째 줄: | ||
|- | |- | ||
| 강아지 | | 강아지 | ||
| | | align="center" | 고양이 | ||
| | | align="right" | 토끼 | ||
|- | |- | ||
| | | align="left" | 햄스터 | ||
| 앵무새 | | 앵무새 | ||
| | | align="center" | 거북이 | ||
|- | |- | ||
| 기니피그 | | 기니피그 | ||
| 809번째 줄: | 760번째 줄: | ||
|} | |} | ||
이번 예시에서 이용한 속성은 | {{색|blue|align속성은 표준에서 사라져서 브라우저마다 동작이 다를 수 있습니다. align 속성은 추후 설명할 style속성의 text-align과 같은 역할을 하므로, 그 쪽을 이용하시면 됩니다. 다만 여기서는 속성 적용법에 대한 이해를 돕기 위해 임시적으로 사용하겠습니다.}} | ||
이번 예시에서 이용한 속성은 align속성입니다. 이 속성을 이용하면 표 내부의 텍스트나 그림 등의 미디어를 왼쪽, 가운데, 오른쪽 정렬 할 수 있습니다. 예시에서는 고양이와 거북이에 가운데 정렬, 토끼에 오른쪽 정렬, {{ㅊ|별 차이는 없지만}} 햄스터에 왼쪽 정렬이 된 모습입니다. | |||
---- | ---- | ||
행에 속성을 적용할 때에는 <code>|-</code> 오른쪽에 속성을 입력하면 됩니다. 아래 예시처럼 입력하면 두 번째 줄에 속성이 적용됩니다 | 행에 속성을 적용할 때에는 <code>|-</code> 오른쪽에 속성을 입력하면 됩니다. 아래 예시처럼 입력하면 두 번째 줄에 속성이 적용됩니다. | ||
{| style="width: 100%" | {| style="width: 100%" | ||
| 854번째 줄: | 807번째 줄: | ||
|} | |} | ||
background와 color를 각각 blue, white로 지정해주었기 때문에 표의 배경색이 파랑색으로, 글씨 색깔이 흰색으로 나타납니다. | 이번 예시에서 이용한 속성은 style속성입니다. 이 속성을 이용하면 표의 외관 또는 내부 텍스트의 모습 등 말 그대로 표의 스타일을 정할 수 있습니다. 예시에서는 background와 color를 각각 blue, white로 지정해주었기 때문에 표의 배경색이 파랑색으로, 글씨 색깔이 흰색으로 나타납니다. | ||
만약, 첫째 행에 속성을 적용하고 싶다면 첫 줄의 <code>|-</code>에 속성을 입력하면 됩니다. | |||
{| style="width: 100%" | |||
|- | |||
! style="width: 50%; text-align: center;" | 이렇게 입력하면 | |||
! style="width: 50%; text-align: center;" | 이렇게 나옵니다 | |||
|- | |||
| style="padding: 5px;" | | |||
<pre> | |||
{| class="wikitable" | |||
|- align="right" style="color: green;" | |||
| 강아지 | |||
| 고양이 | |||
| 토끼 | |||
|- | |||
| 햄스터 | |||
| 앵무새 | |||
| 거북이 | |||
|- | |||
| 기니피그 | |||
| 고슴도치 | |||
| 타마고치 | |||
|} | |||
</pre> | |||
| style="padding: 5px;" | | |||
{| class="wikitable" | |||
|- align="right" style="color: green;" | |||
| 강아지 | |||
| 고양이 | |||
| 토끼 | |||
|- | |||
| 햄스터 | |||
| 앵무새 | |||
| 거북이 | |||
|- | |||
| 기니피그 | |||
| 고슴도치 | |||
| 타마고치 | |||
|} | |||
|} | |||
이번에는 align속성과 style속성을 함께 사용했습니다. align속성을 right로 지정하고, style속성에서 color의 값을 green으로 지정해 주었습니다. 때문에 첫 번째 행의 글씨가 오른쪽으로 정렬되고 색깔이 초록색으로 나타납니다. 이와 같이 여러개의 속성을 함께 적용할 때는 그냥 한 번 띄우고 적어주면 됩니다. | |||
---- | ---- | ||
| 897번째 줄: | 894번째 줄: | ||
|} | |} | ||
'...??? 뭐지? | '...??? 뭐지? 아무 것도 없는데?' 하고 생각이 드실 지도 모르겠습니다. 다시 한 번 더 작성 내용을 읽어 주세요. 눈치가 빠른 분이라면 알아채셨을지도 모르겠지만, 이번 예시에서 이용한 속성은 '''class속성입니다'''. 이 속성은 속성 값에 해당하는 코드를 불러와 적용하는 속성입니다. 이 경우에는 wikitable에 해당하는 코드(=경계를 회색선으로 나타내고 머리말 행에 회색배경+볼드체+가운데 정렬 속성을 적용)를 불려와서 표에 적용된 것입니다. | ||
그래서, 실제로는 다음 모습이 진짜 표의 기본적인 형태라고 할 수 있으나, 이렇게 적으면 외관적으로 상당히 볼품 없어지므로(...) 대부분의 경우 일단 class="wikitable"를 기본으로 적용하고 들어갑니다. | 그래서, 실제로는 다음 모습이 진짜 표의 기본적인 형태라고 할 수 있으나, 이렇게 적으면 외관적으로 상당히 볼품 없어지므로(...) 대부분의 경우 일단 class="wikitable"를 기본으로 적용하고 들어갑니다.<ref><s>관리적인 측면에서도 모든 표에 class="wikitable"가 있는 것이 좋습니다. 표 외관을 수정하려면 wikitable 코드 하나면 건드려주면 되기 때문이죠. 속성 값에 다른 이름도 아닌 wiki가 들어가 있는 것도 그 만큼 중요하고 가장 메인이 되는 속성이기 때문입니다.</s> 독자적인 추론입니다. 만약 맞다면 이 내용을 다듬어서 올려주시고, 틀리다면 이 주석을 지우거나 정확한 정보로 수정해주시기 바랍니다.</ref> | ||
{| style="width: 100%" | {| style="width: 100%" | ||
| 952번째 줄: | 949번째 줄: | ||
|속성 값에 해당하는 코드를 불러와 적용하는 속성입니다. | |속성 값에 해당하는 코드를 불러와 적용하는 속성입니다. | ||
|wikitable, sortable 등 | |wikitable, sortable 등 | ||
|} | |} | ||
특히, style 속성에서는 속성 값들을 표현할 때는 | 특히, style 속성에서는 속성 값들을 표현할 때는 ;로 구분하고 :로 구체적인 값을 나타냅니다. | ||
*예: <code>style="background: #FFDE80; color: #F39E00; text-align: right;"</code> | *예: <code>style="background: #FFDE80; color: #F39E00; text-align: right;"</code> | ||
*속성 값은 항상 끝에 | *속성 값은 항상 끝에 ;를 붙여줘야 합니다. 맨 마지막을 "로 끝내는 것도 잊지 마시구요! | ||
각 속성에 대한 내용을 하나하나 살펴보도록 하겠습니다. | 각 속성에 대한 내용을 하나하나 살펴보도록 하겠습니다. | ||
{{ㅊ|컴알못이라 속성/속성 값 이렇게 설명하는 게 맞는지 모르겠네요. 지나가는 컴덕 분들께서 수정해주시길}} | |||
==== colspan, rowspan ==== | ==== colspan, rowspan ==== | ||
| 1,071번째 줄: | 1,066번째 줄: | ||
==== style ==== | ==== style ==== | ||
<code>style=" "</code>로 | <code>style=" "</code>로 표기합니다. " " 안에는 다음 속성 값들이 들어갑니다. | ||
* | *color: (색상코드); - 표의 텍스트 색깔을 (색상코드)의 색으로 만듦. | ||
* | *background: (색상코드); - 표의 배경색을 (색상코드)의 색으로 만듦. | ||
* | *text-align: (방향); - 표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다. | ||
**left - 왼쪽 정렬 | |||
**center - 가운데 정렬 | |||
** | **right - 오른쪽 정렬 | ||
** | **justify - 양쪽 정렬 | ||
** | *vertical-align: (방향); - 표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다. | ||
** | **top - 위쪽 정렬 | ||
* | **middle - 가운데 정렬 | ||
** | **bottom - 아래쪽 정렬 | ||
** | |||
** | |||
{| style="width: 100% | {| style="width: 100%" | ||
|- | |- | ||
! style="width: 50%; text-align: center;" | 이렇게 입력하면 | ! style="width: 50%; text-align: center;" | 이렇게 입력하면 | ||
| 1,101번째 줄: | 1,086번째 줄: | ||
| style="padding: 5px;" | | | style="padding: 5px;" | | ||
<pre> | <pre> | ||
{| class="wikitable | {| class="wikitable" | ||
|- | |- | ||
| style="color: yellow; background: black;" | 강아지 | | style="color: yellow; background: black;" | 강아지 | ||
| 1,117번째 줄: | 1,102번째 줄: | ||
</pre> | </pre> | ||
| style="padding: 5px;" | | | style="padding: 5px;" | | ||
{| class="wikitable | {| class="wikitable" | ||
|- | |- | ||
| style="color: yellow; background: black;" | 강아지 | | style="color: yellow; background: black;" | 강아지 | ||
| 1,134번째 줄: | 1,119번째 줄: | ||
==== class ==== | ==== class ==== | ||
<code>class=" "</code>로 | <code>class=" "</code>로 표기합니다. " " 안에는 다음 속성 값들이 들어갑니다. | ||
* | *wikitable : 표에 구분선 생성 및 머리말 행을 회색 배경, 볼드체, 가운데 정렬 시킴. | ||
* | *sortable : 머리말 행에 오름차순/내림차순 정렬 스위치를 생성. ※!를 사용한 행이 있어야 적용됩니다. | ||
* | *mw-collapsible : 열려 있는 여닫이 표. | ||
* | *mw-collapsible mw-collapsed : 닫혀 있는 여닫이 표. | ||
| 1,288번째 줄: | 1,271번째 줄: | ||
|} | |} | ||
|} | |} | ||
== 그래도 안되겠으면 ... == | |||
모니위키식 틀을 미디어위키식 틀로 변경해주는 사이트도 있다. [http://api.dcmys.kr/뷁어번역기/ 뷁어번역기] 와 [http://wiki.hehehee.net/convert.php 여기]. | |||
둘다 완벽한건 아니라 <s>짬뽕</s> 적절하게 혼합하면 거의 완벽해진다. | |||
== 그래도 | |||
{{각주}} | {{각주}} | ||
[[분류:도움말]] | [[분류:도움말]] | ||