경고 : 최신판이 아닙니다. 이 문서의 오래된 판을 편집하고 있습니다. 이것을 저장하면, 이 판 이후로 바뀐 모든 편집이 사라집니다. 로그인하고 있지 않습니다. 편집하면 당신의 IP 주소가 공개적으로 기록됩니다. 계정을 만들고 로그인하면 편집 시 사용자 이름만 보이며, 위키 이용에 여러 가지 편의가 주어집니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== 개요 == {{ㅊ|노가다의 세계에 오신 {{위키러}}님을 환영합니다!}} <del>어 뭐야 왜 내 이름이 저기에 있어</del> [[위키 작성, 당신도 할 수 있다!]] 문서에도 나와 있듯이, 간단한 표는 [http://www.tablesgenerator.com/mediawiki_tables 표 생성기]에서 만들어 가져올 수 있습니다. 아니면 편집창 상단의 "고급"을 누르고 제일 오른쪽에 있는 [[File:Toolbar insert table.png]] 아이콘을 클릭해서 만들 수도 있어요. 하지만 위키작성을 하다보면 당연히 표를 좀 더 예쁘게 꾸미고 싶은 욕구가 들기 마련입니다. {{인용문|여기가 파란색으로 되어 있으면 더 보기 좋을 것 같아.<br/><br/>표 너비를 고정시키고 싶은데 어떻게 방법이 없을까?<br/><br/>이 항목을 따라서 오름차순으로 정렬할 수 있으면 진짜 완벽할텐데...}} 흰 바탕에 회색 테두리의 표는 더 이상 지겹습니다. 하지만 표를 꾸미는 방법을 검색해보니 이상한 말만 잔뜩 나와있습니다. 이해도 안 되고 복잡합니다. 영어 사이트는 들어가기도 전에 울렁증부터 납니다. 고민하는 여러분들을 위해 [[리브레 위키]]에 도움말이 준비되어 있습니다. 도움말을 차근차근 따라오면서 문법을 익혀봅시다. 어느새 도움말을 열어보지 않고도 척척 표를 만들어내는 {{ㅊ|훌륭한 위키니트}}달인이 되어 있을 것입니다. == 간단한 표부터 만들어 보자! == 이 문단에서는 표를 작성하는데 필요한 기본적인 문법을 알아봅니다. 설명할 내용을 크게 나누면 다음의 세 가지가 됩니다. * <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>, <code>|</code>, <code>|-</code>의 네 가지 기호로 만들 수 있습니다. * <code>{|</code> : 표의 시작을 나타냅니다. * <code>|}</code> : 표의 마침을 나타냅니다. 즉, <code>{|</code>와 <code>|}</code> 사이가 표의 내용이 됩니다. * <code>|</code> : 한 칸을 나타냅니다. 그 칸에 들어갈 내용은 <code>|</code> 오른쪽에 적습니다. * <code>|-</code> : 행과 행 사이를 구분하는 구분선 기호입니다. 이렇게만 설명하면 잘 와닿지 않으니, 바로 만들어 살펴보겠습니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" | ㄱ | ㄴ | ㄷ |- | A | B | C |- | 1 | 2 | 3 |- | 사과 | 오렌지 | 포도 |} </pre> | style="padding: 5px;" | {| class="wikitable" | ㄱ | ㄴ | ㄷ |- | A | B | C |- | 1 | 2 | 3 |- | 사과 | 오렌지 | 포도 |} |} {{ㅊ|히, 히익! 무서워! 여기서 나가야 겠어!}} 진정하고(...), 이게 어떻게 생겨먹었는지를 파악해봅시다. 생각보다 어렵지 않아요. 위에서부터 아래로 찬찬히 따라가보면 이렇습니다. # 우선 <code>{|</code>를 적어서 '''표가 시작'''한다는 걸 알립니다. #* <small>class 어쩌구하는 녀석은 나중에 설명합니다. 지금은 그냥 <code>{|</code>와 같이 써야되는 구절이라 생각하고 넘어가주세요.</small> # 다음 줄에 <code>|</code>를 적으면 '''1번째 행의 1번째 칸'''이 만들어집니다. 그 칸에 들어갈 내용은 <code>|</code>의 오른쪽에 적으면 됩니다. 예시에서는 'ㄱ'을 적었군요. # 그 다음 줄에 <code>|</code>를 적으면 이번에는 '''1번째 행의 2번째 칸'''이 만들어집니다. (아직 다음 행으로 넘어간게 아니에요!) 이번에도 <code>|</code>의 오른쪽에 그 칸에 들어갈 내용을 적습니다. 예시에서는 'ㄴ'을 적었습니다. # 또 그 다음 줄에 <code>|</code>를 적으면 이젠 '''1번째 행의 3번째 칸'''이 만들어집니다. 역시 이번에도 <code>|</code>의 오른쪽에 그 칸에 들어갈 내용을 적습니다. 예시에서는 'ㄷ'을 적었네요. #* 이런 방식으로 1번째 행의 4번째 칸, 5번째 칸, ... 을 만들어나가면 됩니다. 예시에서는 3번째 칸까지 만들었습니다. # 1번째 행에 들어갈 칸과 내용들을 모두 작성했다면, 이제 두 번째 행을 작성해봅시다. 바로 다음 줄에 <code>|-</code>를 적어 '''1번째 행과 2번째 행을 구분할 구분선'''을 만들어 줍니다. # 이제 그 다음 줄에 <code>|</code>를 적으면 이제 비로소 '''2번째 행의 1번째 칸'''이 만들어집니다. 그 칸에 들어갈 내용은 역시 위와 같은 방법으로 <code>|</code>의 오른쪽에 적으면 됩니다. 예시에서는 'A'을 적었군요. # 1번째 행을 만들때와 마찬가지로 그 다음 줄에 <code>|</code>를 적으면 '''2번째 행의 2번째 칸'''이 만들어집니다. 역시 같은 방법으로 <code>|</code>의 오른쪽에 그 칸에 들어갈 내용을 적으면 됩니다. 예시에서는 'B'을 적었습니다. #* 이런 방식으로, 1번째 행을 작성할 때 처럼 2번째 행의 3번째 칸, 4번째 칸, ... 을 만들어나가면 됩니다. 예시에서는 1번째 행을 칸 3개로 만들었으므로 2번째 행도 3번째 칸까지 만들었습니다. # 2번째 행에 들어갈 칸과 내용들을 모두 작성했다면, 이제 세 번째 행을 작성합니다. 바로 다음 줄에 <code>|-</code>를 적어 '''2번째 행과 3번째 행을 구분할 구분선'''을 만들어 줍니다. # 그 다음 줄에 <code>|</code>를 적으면 '''3번째 행의 1번째 칸'''이 만들어집니다. 그 칸에 들어갈 내용은 역시 위와 같은 방법으로 <code>|</code>의 오른쪽에 적으면 됩니다. 예시에서는 '1'을 적었군요. #* 역시 아까와 같은 방법으로 3번째 행에 들어갈 칸과 내용들을 작성합니다. # 3번째 행에 들어갈 칸과 내용들을 모두 작성했다면, 바로 다음 줄에 <code>|-</code>를 적어 '''3번째 행과 4번째 행을 구분할 구분선'''을 만들어 주고 네 번째 행을 작성합니다. #* 이런 방식으로 5번째 행, 6번째 행, ... 을 만들어 나가면 됩니다. 예시에서는 4번째 행까지 만들었습니다. # 표에 들어갈 칸과 내용을 전부 작성했다면, <code>|}</code>를 적어서 '''표를 마칩니다'''. {{ㅊ|헥헥}} 다른 모습의 예시들도 살펴봅시다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" | ㄱ | ㄴ | ㄷ | ㄹ | ㅁ |- | ㅏ | ㅑ | ㅓ | ㅕ | ㅗ |- | A | B | C | D | E |- | 1 | 2 | 3 | 4 | 5 |} </pre> | style="padding: 5px;" | {| class="wikitable" | ㄱ | ㄴ | ㄷ | ㄹ | ㅁ |- | ㅏ | ㅑ | ㅓ | ㅕ | ㅗ |- | A | B | C | D | E |- | 1 | 2 | 3 | 4 | 5 |} |- | style="padding: 5px;" | <pre> {| class="wikitable" | 강아지 | 고양이 |- | 토끼 | 햄스터 |} </pre> | style="padding: 5px;" | {| class="wikitable" | 강아지 | 고양이 |- | 토끼 | 햄스터 |} |} ==== 알면 좋은 참고 사항들 ==== 필요하다면 <code>{|</code> 바로 다음 줄과 <code>|}</code> 바로 전 줄에 <code>|-</code>를 추가로 넣어도 상관 없습니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | ㄱ | ㄴ | ㄷ |- | A | B | C |- | 1 | 2 | 3 |- |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | ㄱ | ㄴ | ㄷ |- | A | B | C |- | 1 | 2 | 3 |- |} |} 앞으로의 설명에서, 특별한 경우가 아니면 <code>{|</code> 바로 다음 줄의 <code>|-</code>는 표기하고, <code>|}</code> 바로 전 줄의 <code>|-</code>는 표기하지 않겠습니다. ---- 표 내용을 기입할 때, 띄어쓰기를 아무리 많이해도 실제 표의 표현에는 영향을 주지 않습니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | ㄱ | ㄴ | ㄷ |- | A | B | C |- | 1 | 2 | 3 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | ㄱ | ㄴ | ㄷ |- | A | B | C |- | 1 | 2 | 3 |} |} ---- 만약 칸에 들어갈 내용을 입력하지 않는다면, 그 칸은 빈 칸으로 남게 됩니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | ㄱ | | ㄷ |- | A | B | |- | | 2 | 3 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | ㄱ | | ㄷ |- | A | B | |- | | 2 | 3 |} |} ---- 당연하다면 당연한 얘기지만, 표에는 텍스트 뿐만이 아니라 그림이나 수식 등 다른 미디어도 들어갈 수 있습니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | [[파일:Libre_Wiki-Logo.png|150px]] |- | {{youtube|1a0WDHZuw4w|300px|200px}} |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | [[파일:Libre_Wiki-Logo.png|150px]] |- | {{youtube|1a0WDHZuw4w|300px|200px}} |} |} ---- 표 문법에서는 엔터 입력, 즉 줄바꿈까지 문법의 일부로 인식하기 때문에 표 안에서 줄 바꿈을 하고 싶을 때는 <br/>태그를 이용해야 합니다. 엔터 입력 만으로는 표 안에서의 줄바꿈이 제대로 되지 않습니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 줄 바꿈을 쌩으로 하면 이렇게 됩니다. |- | 훈민정음 나·랏:말ᄊᆞ·미 中듀ᇰ國·귁·에달·아 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 줄 바꿈을 쌩으로 하면 이렇게 됩니다. |- | 훈민정음 나·랏:말ᄊᆞ·미 中듀ᇰ國·귁·에달·아 |} |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 줄 바꿈을<br/>태그로 하면<br/>이렇게 됩니다. |- | 훈민정음<br/>나·랏:말ᄊᆞ·미<br/>中듀ᇰ國·귁·에달·아 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 줄 바꿈을<br/>태그로 하면<br/>이렇게 됩니다. |- | 훈민정음<br/>나·랏:말ᄊᆞ·미<br/>中듀ᇰ國·귁·에달·아 |} |} === 표에 제목 넣기 : <code>|+</code> === <code>|+</code>를 사용하면 표의 제목('캡션'이라고도 합니다)을 표 위에 추가할 수 있습니다. 아래 예시처럼 행이 본격적으로 시작하기 전(=<code>{|</code>와 첫 <code>|-</code> 사이)에 <code>|+</code>를 쓰고 원하는 내용을 작성하면 됩니다. 필수는 아니므로 꼭 쓰지는 않아도 됩니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |+ 한글과 숫자 |- | ㄱ | ㄴ | ㄷ | ㄹ | ㅁ |- | 1 | 2 | 3 | 4 | 5 |} </pre> | style="padding: 5px;" | {| class="wikitable" |+ 한글과 숫자 |- | ㄱ | ㄴ | ㄷ | ㄹ | ㅁ |- | 1 | 2 | 3 | 4 | 5 |} |} === 머릿말 칸 넣기 : <code>!</code> === 칸을 나타내는 기호인 <code>|</code>를 <code>!</code>로 바꾸면 그 행을 표의 머리말 칸으로 나타낼 수 있습니다. 쉽게 말해, 표의 메인 칸이 되는 거죠. 아래 예시처럼 맨 앞을 <code>|</code>대신 <code>!</code>로 작성하면 첫 번째 행의 1번째, 2번째, 3번째 칸이 머리말 칸이 되어 나타납니다. 이 기호도 필수는 아니므로 꼭 쓰지는 않아도 됩니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- ! 한글 ! 영어 ! 숫자 |- | ㄱ | A | 1 |- | ㄴ | B | 2 |- | ㄷ | C | 3 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- ! 한글 ! 영어 ! 숫자 |- | ㄱ | A | 1 |- | ㄴ | B | 2 |- | ㄷ | C | 3 |} |} ---- 꼭 첫 번째 행에 있는 칸만 강조할 수 있는 것은 아닙니다. 아래 예시처럼 작성하면 세 번째 행의 1번째, 2번째, 3번째 칸이 강조되어 나타납니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 한글 | 영어 | 숫자 |- | ㄱ | A | 1 |- | ㄴ | B | 2 |- ! ㄷ ! C ! 3 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 한글 | 영어 | 숫자 |- | ㄱ | A | 1 |- | ㄴ | B | 2 |- ! ㄷ ! C ! 3 |} |} ---- 자주 있는 상황은 아니지만, 행 전체가 아닌 특정 칸만 강조할 수도 있습니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- ! 한글 | 영어 ! 숫자 |- | ㄱ ! A | 1 |- | ㄴ | B | 2 |- | ㄷ | C ! 3 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- ! 한글 | 영어 ! 숫자 |- | ㄱ ! A | 1 |- | ㄴ | B | 2 |- | ㄷ | C ! 3 |} |} ==== 알아도 되고 몰라도 되는 참고 사항 ==== * '''속성'''이 뭔지에 대해서는 앞으로 설명할 것이므로 아래 말이 무슨 말인지 모르겠다면 일단 넘어가셔도 좋습니다. 머리말 칸이 어떤 방법으로 강조 되는 지는 그 표가 어떤 속성을 가지고 있느냐에 따라 달라집니다. 예를 들어, class 속성의 속성 값을 wikitable로 준 표에서는 머리말 행이 '<span style="background: #E6E6E6;">회색 배경</span>+'''볼드체'''+가운데 정렬' 되어 나타나고, 속성 값을 sortable로 준 표에서는 머리말 행에 오름차순/내림차순 정렬 스위치가 생성됩니다. 아래 예시에서는 class 속성 값을 wikitable과 sortable을 둘 다 주었으므로 아래처럼 '<span style="background: #E6E6E6;">회색 배경</span>+'''볼드체'''+가운데 정렬'에 '스위치 추가'로 나타납니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable sortable" |- ! 항목 ! 데이터1 ! 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} </pre> | style="padding: 5px;" | {| class="wikitable sortable" |- ! 항목 ! 데이터1 ! 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} |} === 모니위키'스럽게' 표 만들기 : <code>||</code>, <code>!!</code> === 그 동안 칸을 구분하기 위해 사용했던 '줄바꿈+<code>|</code>'를 <code>||</code>로, '줄바꿈+<code>!</code>'를 <code>!!</code>로 한 번에 나타낼 수 있습니다. 이를 이용하면 아래 예시와 같이 모니위키의 테이블 문법과 꽤 유사하게 표를 작성할 수 있습니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면.. ! style="width: 50%; text-align: center;" | 이렇게 나옵니다! |- | style="padding: 5px;" | <pre> {| class="wikitable" |- ! 한글 !! 영어 !! 숫자 |- | ㄱ || A || 1 |- | ㄴ || B || 2 |- | ㄷ || C || 3 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- ! 한글 !! 영어 !! 숫자 |- | ㄱ || A || 1 |- | ㄴ || B || 2 |- | ㄷ || C || 3 |} |} 방법은 간단합니다. 위의 예시처럼 모두 한 줄에 쓰되, 처음은 <code>|</code>로 시작하고 내용과 내용 사이를 <code>||</code>로 구분 시켜주면 됩니다. 이렇게 하면 한 행에 있는 칸을 텍스트에서도 한 줄에 한꺼번에 쓸 수 있습니다. 간단한 표의 경우, 이렇게 표시하는 것이 더 직관적입니다. 다만 모니위키의 문법과는 다소 차이가 있어 주의해야할 부분이 있습니다. # 줄 마지막에 <code>||</code>를 붙이는 것은 모니위키에서는 행이 끝남을 의미했지만, 미디어위키에서는 <code>|-</code> 기호로 행을 구분하기 때문에 줄 마지막에 <code>||</code>를 붙이면 새 칸이 하나 더 늘어날 뿐입니다. 행을 끝내고 새 행으로 넘기려면 줄 마지막에 <code>||</code>를 붙이지 마시고 바로 다음 줄로 줄바꿈해 <code>|-</code>를 입력해야 합니다. # 모니위키에서는 <code>||</code>와 <code>||</code> 사이를 비워두면 가로방향으로 칸이 합쳐졌지만, 미디어 위키에서는 [[그런 거 없다|그런 거 없고]] 그냥 빈 칸으로 남게 됩니다. 칸을 합치려면 따로 표에 뭔가를 더 써줘야 하지만, 이 부분은 나중에 설명합니다. 모니위키에서 넘어오신 분들은 이 점을 주의해주시면 되겠습니다. === 정리 === 위의 내용을 정리하면 다음과 같습니다. {| class="wikitable" |- | rowspan="4" style="text-align: center;" | 기본 기호 | <nowiki>{|</nowiki> | 표의 시작 |- | <nowiki>|}</nowiki> | 표의 마침 |- | <nowiki>|</nowiki> | 칸 |- | <nowiki>|-</nowiki> | 행 구분선 |- | rowspan="2" style="text-align: center;" | 선택적으로 사용가능 | <nowiki>|+</nowiki> | 표의 제목 |- | <nowiki>!</nowiki> | 머릿말 칸 |- | rowspan="2" style="text-align: center;" | 모니위키스럽게 작성할 때 | <nowiki>||</nowiki> | 칸 |- | <nowiki>!!</nowiki> | 머릿말 칸 |} == 표를 예쁘게 꾸며보자! == 위키 문법을 사용해서 표를 직접 작성하면 얻을 수 있는 장점이 바로 표를 기능적으로 만들 수 있다는 것입니다. 쉽게 말해 워드프로세서에서 표 만들때 칸에 색깔 넣고 가운데 정렬하고 병합하고 테두리 꾸미는 뭐 그런 것들을 할 수 있다는 거죠. 이러한 디자인들의 요소를 속성이라고 부르며 여러 가지가 존재합니다. 당장에 위에서 말했던 색깔, 텍스트 정렬부터 시작해서 병합, 테두리 꾸미기 외에도 너비/높이 지정, 오름/내림차순정렬, 합 구하기/평균 내기 등등... 그 종류가 정말 많습니다. 이제부터 속성의 종류와 적용하는 방법을 차차 알아가보도록 하겠습니다. 우선 속성을 적용하는 방법부터 설명하고, 속성의 종류는 예시를 통해 조금씩 보여드리겠습니다. 물론 뒤에서 제대로 속성 종류 정리도 따로 합니다. === 속성 적용 방법 === 표에 속성을 적용할 때 '''칸 하나'''에만, 또는 '''한 행'''에, 또는 '''표 전체'''에 속성을 적용할 수 있습니다. 일단 칸 하나에 적용하는 방법부터 알아보도록 하겠습니다. 칸 하나에 속성을 적용할 때는 <code>|</code>를 이용합니다. 내용 왼쪽에 <code>|</code>를 추가하고 그 왼쪽에 속성을 입력합니다. 즉, <code>| 속성 | 내용</code>이 되도록 입력합니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 강아지 | align="center" | 고양이 | align="right" | 토끼 |- | align="left" | 햄스터 | 앵무새 | align="center" | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 강아지 | align="center" | 고양이 | align="right" | 토끼 |- | align="left" | 햄스터 | 앵무새 | align="center" | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |} |} {{색|blue|align속성은 표준에서 사라져서 브라우저마다 동작이 다를 수 있습니다. align 속성은 추후 설명할 style속성의 text-align과 같은 역할을 하므로, 그 쪽을 이용하시면 됩니다. 다만 여기서는 속성 적용법에 대한 이해를 돕기 위해 임시적으로 사용하겠습니다.}} 이번 예시에서 이용한 속성은 align속성입니다. 이 속성을 이용하면 표 내부의 텍스트나 그림 등의 미디어를 왼쪽, 가운데, 오른쪽 정렬 할 수 있습니다. 예시에서는 고양이와 거북이에 가운데 정렬, 토끼에 오른쪽 정렬, {{ㅊ|별 차이는 없지만}} 햄스터에 왼쪽 정렬이 된 모습입니다. ---- 행에 속성을 적용할 때에는 <code>|-</code> 오른쪽에 속성을 입력하면 됩니다. 아래 예시처럼 입력하면 두 번째 줄에 속성이 적용됩니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 강아지 | 고양이 | 토끼 |- style="background: blue; color: white;" | 햄스터 | 앵무새 | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 강아지 | 고양이 | 토끼 |- style="background: blue; color: 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으로 지정해 주었습니다. 때문에 첫 번째 행의 글씨가 오른쪽으로 정렬되고 색깔이 초록색으로 나타납니다. 이와 같이 여러개의 속성을 함께 적용할 때는 그냥 한 번 띄우고 적어주면 됩니다. ---- 표에 속성을 적용할 때에는 표의 시작부분인 <code>{|</code> 오른쪽에 속성을 입력합니다. 아래 예시처럼 입력하면 전체 행에 속성이 적용됩니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 강아지 | 고양이 | 토끼 |- | 햄스터 | 앵무새 | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 강아지 | 고양이 | 토끼 |- | 햄스터 | 앵무새 | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |} |} '...??? 뭐지? 아무 것도 없는데?' 하고 생각이 드실 지도 모르겠습니다. 다시 한 번 더 작성 내용을 읽어 주세요. 눈치가 빠른 분이라면 알아채셨을지도 모르겠지만, 이번 예시에서 이용한 속성은 '''class속성입니다'''. 이 속성은 속성 값에 해당하는 코드를 불러와 적용하는 속성입니다. 이 경우에는 wikitable에 해당하는 코드(=경계를 회색선으로 나타내고 머리말 행에 회색배경+볼드체+가운데 정렬 속성을 적용)를 불려와서 표에 적용된 것입니다. 그래서, 실제로는 다음 모습이 진짜 표의 기본적인 형태라고 할 수 있으나, 이렇게 적으면 외관적으로 상당히 볼품 없어지므로(...) 대부분의 경우 일단 class="wikitable"를 기본으로 적용하고 들어갑니다.<ref><s>관리적인 측면에서도 모든 표에 class="wikitable"가 있는 것이 좋습니다. 표 외관을 수정하려면 wikitable 코드 하나면 건드려주면 되기 때문이죠. 속성 값에 다른 이름도 아닌 wiki가 들어가 있는 것도 그 만큼 중요하고 가장 메인이 되는 속성이기 때문입니다.</s> 독자적인 추론입니다. 만약 맞다면 이 내용을 다듬어서 올려주시고, 틀리다면 이 주석을 지우거나 정확한 정보로 수정해주시기 바랍니다.</ref> {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| |- | 강아지 || 고양이 || 토끼 |- | 햄스터 || 앵무새 || 거북이 |- | 기니피그 || 고슴도치 || 타마고치 |} </pre> | style="padding: 5px;" | {| |- | 강아지 || 고양이 || 토끼 |- | 햄스터 || 앵무새 || 거북이 |- | 기니피그 || 고슴도치 || 타마고치 |} |} === 속성의 종류 === 여기까지 보시면서 감이 오셨겠지만, 속성은 다음과 같이 <code>(속성이름)=" "</code> 로 표현됩니다. <code>" "</code> 안에는 속성 값들이 들어갑니다. {| class="wikitable" |- !속성 !설명 !속성 값 (" "에 들어갈 값) |- |colspan=" " |표를 가로방향으로 병합합니다. |숫자 |- |rowspan=" " |표를 세로방향으로 병합합니다. |숫자 |- |style=" " |표의 외관 또는 내부 텍스트의 모습 등 말 그대로 스타일을 나타냅니다. |color, background, text-align, vertical-align 등 |- |class=" " |속성 값에 해당하는 코드를 불러와 적용하는 속성입니다. |wikitable, sortable 등 |} 특히, style 속성에서는 속성 값들을 표현할 때는 ;로 구분하고 :로 구체적인 값을 나타냅니다. *예: <code>style="background: #FFDE80; color: #F39E00; text-align: right;"</code> *속성 값은 항상 끝에 ;를 붙여줘야 합니다. 맨 마지막을 "로 끝내는 것도 잊지 마시구요! 각 속성에 대한 내용을 하나하나 살펴보도록 하겠습니다. {{ㅊ|그 외에 border="1"나 scope="row"라는 기능도 있는 듯. 아시는 분은 추가해주시길.}} {{ㅊ|컴알못이라 속성/속성 값 이렇게 설명하는 게 맞는지 모르겠네요. 지나가는 컴덕 분들께서 수정해주시길}} ==== colspan, rowspan ==== <code>colspan=" "</code>또는 <code>rowspan=" "</code>로 표기합니다. <code>" "</code> 안에는 병합되는 칸 수가 들어갑니다. *모니위키에서 <-숫자>로 쓰던 가로줄 병합 기능이 colspan=" "로 대응됩니다. *모니위키에서 <|숫자>로 쓰던 세로줄 병합 기능이 rowspan=" "로 대응됩니다. *colspan 사용시 {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 1 | 2 | colspan="2" | 3, 4 |- | 5 | colspan="2" | 6, 7 | 8 |- | colspan="3" | 9, 10, 11 | 12 |- | colspan="4" | 13, 14, 15, 16 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 1 | 2 | colspan="2" | 3, 4 |- | 5 | colspan="2" | 6, 7 | 8 |- | colspan="3" | 9, 10, 11 | 12 |- | colspan="4" | 13, 14, 15, 16 |} |} *rowspan 사용시 {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | 1 | 2 | rowspan="3" | 3, 7, 11 | 4 |- | 5 | 6 | 8 |- | rowspan="3" | 9, 13, 17 | 10 | 12 |- | 14 | 15 | 16 |- | 18 | 19 | 20 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | 1 | 2 | rowspan="3" | 3, 7, 11 | 4 |- | 5 | 6 | 8 |- | rowspan="3" | 9, 13, 17 | 10 | 12 |- | 14 | 15 | 16 |- | 18 | 19 | 20 |} |} ==== style ==== <code>style=" "</code>로 표기합니다. " " 안에는 다음 속성 값들이 들어갑니다. *color: (색상코드); - 표의 텍스트 색깔을 (색상코드)의 색으로 만듦. *background: (색상코드); - 표의 배경색을 (색상코드)의 색으로 만듦. *border: (숫자)px solid (색상코드); - 표의 테두리의 색과 두께를 결정합니다.{{ref|가운데의 solid는 테두리를 한 줄로 설정한다는 의미입니다. double을 넣으면 두 줄, dotted로 설정하면 점선이 됩니다.}} 셀 하나만 설정하는 것도 가능합니다. **border-(top, bottom, left, right): (위와 동일); - 표의 테두리의 한 부분만 설정합니다. top은 윗부분, bottom은 아랫부분, left와 right는 왼쪽과 오른쪽 부분을 설정하는 것이고, border와 동일하게 하면 됩니다. *text-align: (방향); - 표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다. **left - 왼쪽 정렬 **center - 가운데 정렬 **right - 오른쪽 정렬 **justify - 양쪽 정렬 *vertical-align: (방향); - 표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다. **top - 위쪽 정렬 **middle - 가운데 정렬 **bottom - 아래쪽 정렬 *font-size: (숫자)pt; - 글자의 크기를 결정합니다. *width: 폭, 칸의 너비를 정합니다. width: 100px 또는 width: 50% 같이 입력합니다. ** % : 비율 조정 ** px : 픽셀 조정 *margin: auto - 표를 문서 가운데로 정렬합니다. 옆에 정보상자가 있을 경우 정보상자를 침범하지 않습니다. **margin-left: 0px - margin: auto와 같이 쓰는 것으로, 표를 왼쪽으로 정렬시킵니다. **margin-right: 0px - 역시 margin: auto와 같이 쓰는 것으로, 표를 오른쪽으로 정렬시킵니다. {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable" |- | style="color: yellow; background: black;" | 강아지 | 고양이 | 토끼 |- style="text-align: right;" | 햄스터 | 앵무새 | 거북이 |- style="background: #FFDE80; color: #F39E00;" | 기니피그 | 고슴도치 | 타마고치 |} </pre> | style="padding: 5px;" | {| class="wikitable" |- | style="color: yellow; background: black;" | 강아지 | 고양이 | 토끼 |- style="text-align: right;" | 햄스터 | 앵무새 | 거북이 |- style="background: #FFDE80; color: #F39E00;" | 기니피그 | 고슴도치 | 타마고치 |} |} ==== class ==== <code>class=" "</code>로 표기합니다. " " 안에는 다음 속성 값들이 들어갑니다. *wikitable : 표에 구분선 생성 및 머리말 행을 회색 배경, 볼드체, 가운데 정렬 시킴. *sortable : 머리말 행에 오름차순/내림차순 정렬 스위치를 생성. ※!를 사용한 행이 있어야 적용됩니다. *mw-collapsible : 열려 있는 여닫이 표. *mw-collapsible mw-collapsed : 닫혀 있는 여닫이 표. *sortable 사용시 {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable sortable" |- ! 항목 ! 데이터1 ! 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} </pre> | style="padding: 5px;" | {| class="wikitable sortable" |- ! 항목 ! 데이터1 ! 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} |} *mw-collapsible 사용시 {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable mw-collapsible" |- | 항목 | 데이터1 | 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} </pre> | style="padding: 5px;" | {| class="wikitable mw-collapsible" |- | 항목 | 데이터1 | 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} |} *mw-collapsible mw-collapsed 사용시 {| style="width: 100%" |- ! style="width: 50%; text-align: center;" | 이렇게 입력하면 ! style="width: 50%; text-align: center;" | 이렇게 나옵니다 |- | style="padding: 5px;" | <pre> {| class="wikitable mw-collapsible mw-collapsed" |- | 항목 | 데이터1 | 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} </pre> | style="padding: 5px;" | {| class="wikitable mw-collapsible mw-collapsed" |- | 항목 | 데이터1 | 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |} |} == 그래도 안되겠으면 ... == 모니위키식 표를 미디어위키식 표로 변경해주는 사이트도 있다. [http://api.dcmys.kr/뷁어번역기/ 뷁어번역기] 와 [http://wiki.hehehee.net/convert.php 여기].<ref>둘다 완벽한건 아니라 <s>짬뽕</s> 적절하게 혼합하면 거의 완벽해진다.</ref> 엑셀을 표로 변경해 주는 사이트는 [http://wang.wustl.edu/mediawiki/extensions/index.php 여기] {{각주}} {{리브레 위키 도움말}} [[분류:도움말]] 요약: 리브레 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포됩니다(자세한 내용에 대해서는 리브레 위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 글이 직접 작성되었거나 호환되는 라이선스인지 확인해주세요. 리그베다 위키, 나무위키, 오리위키, 구스위키, 디시위키 및 CCL 미적용 사이트 등에서 글을 가져오실 때는 본인이 문서의 유일한 기여자여야 하고, 만약 본인이 문서의 유일한 기여자라는 증거가 없다면 그 문서는 불시에 삭제될 수 있습니다. 취소 편집 도움말 (새 창에서 열림) | () [] [[]] {{}} {{{}}} · <!-- --> · [[분류:]] · [[파일:]] · [[미디어:]] · #넘겨주기 [[]] · {{ㅊ|}} · <onlyinclude></onlyinclude> · <includeonly></includeonly> · <noinclude></noinclude> · <br /> · <ref></ref> · {{각주}} · {|class="wikitable" · |- · rowspan=""| · colspan=""| · |} {{lang|}} · {{llang||}} · {{인용문|}} · {{인용문2|}} · {{유튜브|}} · {{다음팟|}} · {{니코|}} · {{토막글}} {{삭제|}} · {{특정판삭제|}}(이유를 적지 않을 경우 기각될 가능성이 높습니다. 반드시 이유를 적어주세요.) {{#expr:}} · {{#if:}} · {{#ifeq:}} · {{#iferror:}} · {{#ifexist:}} · {{#switch:}} · {{#time:}} · {{#timel:}} · {{#titleparts:}} __NOTOC__ · __FORCETOC__ · __TOC__ · {{PAGENAME}} · {{SITENAME}} · {{localurl:}} · {{fullurl:}} · {{ns:}} –(대시) ‘’(작은따옴표) “”(큰따옴표) ·(가운뎃점) …(말줄임표) ‽(물음느낌표) 〈〉(홑화살괄호) 《》(겹화살괄호) ± − × ÷ ≈ ≠ ∓ ≤ ≥ ∞ ¬ ¹ ² ³ ⁿ ¼ ½ ¾ § € £ ₩ ¥ ¢ † ‡ • ← → ↔ ‰ °C µ(마이크로) Å °(도) ′(분) ″(초) Α α Β β Γ γ Δ δ Ε ε Ζ ζ Η η Θ θ Ι ι Κ κ Λ λ Μ μ(뮤) Ν ν Ξ ξ Ο ο Π π Ρ ρ Σ σ ς Τ τ Υ υ Φ φ Χ χ Ψ ψ Ω ω · Ά ά Έ έ Ή ή Ί ί Ό ό Ύ ύ Ώ ώ · Ϊ ϊ Ϋ ϋ · ΐ ΰ Æ æ Đ(D with stroke) đ Ð(eth) ð ı Ł ł Ø ø Œ œ ß Þ þ · Á á Ć ć É é Í í Ĺ ĺ Ḿ ḿ Ń ń Ó ó Ŕ ŕ Ś ś Ú ú Ý ý Ź ź · À à È è Ì ì Ǹ ǹ Ò ò Ù ù · İ Ż ż ·  â Ĉ ĉ Ê ê Ĝ ĝ Ĥ ĥ Î î Ĵ ĵ Ô ô Ŝ ŝ Û û · Ä ä Ë ë Ï ï Ö ö Ü ü Ÿ ÿ · ǘ ǜ ǚ ǖ · caron/háček: Ǎ ǎ Č č Ď ď Ě ě Ǐ ǐ Ľ ľ Ň ň Ǒ ǒ Ř ř Š š Ť ť Ǔ ǔ Ž ž · breve: Ă ă Ğ ğ Ŏ ŏ Ŭ ŭ · Ā ā Ē ē Ī ī Ō ō Ū ū · à ã Ñ ñ Õ õ · Å å Ů ů · Ą ą Ę ę · Ç ç Ş ş Ţ ţ · Ő ő Ű ű · Ș ș Ț ț 이 문서에서 사용한 틀: 틀:- (원본 보기) (준보호됨)틀:Ref (원본 보기) (준보호됨)틀:Skin (원본 보기) (준보호됨)틀:YouTube (원본 보기) (준보호됨)틀:YouTube/styles.css (편집) 틀:Youtube (편집) 틀:각주 (원본 보기) (준보호됨)틀:고지 상자 (원본 보기) (보호됨)틀:둘러보기 상자 (원본 보기) (보호됨)틀:둘러보기 상자/핵심 (원본 보기) (보호됨)틀:리브레 위키 도움말 (편집) 틀:인용문 (원본 보기) (준보호됨)틀:틀 (원본 보기) (준보호됨)틀:틀바 (원본 보기) (준보호됨)이 문서는 다음의 숨은 분류 1개에 속해 있습니다: 분류:유튜브 영상이 포함된 문서