도움말:위키 문법/표: 두 판 사이의 차이
편집 요약 없음 |
|||
| (같은 사용자의 중간 판 36개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법{{부제| 2장 「표」}}}} | {{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법<span style="display: block">{{부제| 2장 「표」}}</span>}} | ||
{{분류|도움말}} | {{분류|도움말}} | ||
{{도움말}}{{위키 문법}} | {{도움말}}{{위키 문법}} | ||
| 5번째 줄: | 5번째 줄: | ||
== 개념 == | == 개념 == | ||
=== | === 스타일링 기초 2 === | ||
여기서는 [[도움말:위키 문법|1장]] 서두의 HTML 태그와 | 여기서는 [[도움말:위키 문법|1장]] 서두의 HTML 태그와 스타일링 기초 부분을 정독하고 오셨다고 가정하고 설명합니다. | ||
이전에 | 이전에 서식 3개를 알려 드렸는데, 표에서 사용할 수 있는 2개의 서식을 더 소개하고자 합니다. | ||
{| class="wikitable" | {| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%;" | ||
|- style=" font-weight: 700; text-align: center;" | |||
! 서식 | |||
! 설명 | |||
! 예시 | |||
! 출력<ref>칸에 적용했을 때</ref> | |||
|- | |- | ||
| <code>ta</code> | |||
| style="min-width: 50px;" | 좌우 정렬 || <code><nowiki>{{스타일|ta-right}}</nowiki></code> | |||
| style="min-width: 70px; text-align: right;" | 예시 | |||
|- | |- | ||
| <code> | | <code>bd</code> || 테두리 || <code><nowiki>{{스타일|bd-2px-sld-red}}</nowiki></code> | ||
| style=" | | style="border: 2px blue solid;" | 예시 | ||
|- | |- | ||
| <code> | | <code>col</code> | ||
| | | style="min-width: 50px;" | 열 병합 || <code><nowiki>{{스타일|col-4}}</nowiki></code> | ||
| - | |||
|- | |||
| <code>row</code> || 행 병합 || <code><nowiki>{{스타일|row-3}}</nowiki></code> | |||
| - | |||
|} | |} | ||
| 24번째 줄: | 35번째 줄: | ||
=== 표 만들기 === | === 표 만들기 === | ||
편집기 상단에 표 버튼을 통해 표를 만들 수도 있지만, 여기서는 수동으로 만드는 방법을 소개하고자 합니다. 먼저 표는 <code><nowiki>{|</nowiki></code>로 열고 <code><nowiki>|}</nowiki></code>로 닫습니다. 열고 닫기만 하면 당연하게도 아무 내용도 표시되지 않습니다. | 편집기 상단에 표 버튼을 통해 표를 만들 수도 있지만, 여기서는 수동으로 만드는 방법을 소개하고자 합니다. 먼저 표는 <code><nowiki>{|</nowiki></code>로 열고 <code><nowiki>|}</nowiki></code>로 닫습니다. 열고 닫기만 하면 당연하게도 아무 내용도 표시되지 않습니다. | ||
{| class="wikitable" | {| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%;" | ||
|- | |- style="font-weight: 700; text-align: center;" | ||
! style=" | ! style="min-width: 150px;" | 입력 | ||
! 출력 | ! style="min-width: 150px;" | 출력 | ||
|- | |- | ||
| style="padding-bottom: 0; padding-top: 15px;" | <pre> | | style="padding-bottom: 0; padding-top: 15px;" | <pre> | ||
| 37번째 줄: | 48번째 줄: | ||
|} | |} | ||
|} | |} | ||
=== 행·칸 만들기 === | === 행·칸 만들기 === | ||
위키 문법에서 표는 행 아래에 칸이 있는 위계가 성립합니다. 그래서 행별로 편집하기는 보다 편리하고 열별로 편집하기는 보다 어렵다는 부분이 있습니다. 행을 바꿀 때는 <code><nowiki>|-</nowiki></code>를 입력합니다. <code><nowiki>|-</nowiki></code>가 행을 구분짓는 구분선인 셈입니다. 아직 행 안에 칸을 만들지 않아 내용이 표시되지는 않습니다. | 위키 문법에서 표는 행 아래에 칸이 있는 위계가 성립합니다. 그래서 행별로 편집하기는 보다 편리하고 열별로 편집하기는 보다 어렵다는 부분이 있습니다. 행을 바꿀 때는 <code><nowiki>|-</nowiki></code>를 입력합니다. <code><nowiki>|-</nowiki></code>가 행을 구분짓는 구분선인 셈입니다. 아직 행 안에 칸을 만들지 않아 내용이 표시되지는 않습니다. | ||
{| class="wikitable" | {| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%;" | ||
|- | |- font-weight: 700; text-align: center;" | ||
! style=" | ! style="min-width: 150px;" | 입력 | ||
! 출력 | ! style="min-width: 150px;" | 출력 | ||
|- | |- | ||
| style="padding-bottom: 0; padding-top: 15px;" | <pre> | | style="padding-bottom: 0; padding-top: 15px;" | <pre> | ||
| 57번째 줄: | 69번째 줄: | ||
여기서부터 줄바꿈이 중요해집니다. 권장되는 문법으로는 만드는 각 칸마다 줄바꿈을 해야 합니다. 이때 각 칸마다 앞에 <code><nowiki>|</nowiki></code>를 입력하고 뒤에 내용을 입력합니다. 머리말 칸을 만들 때는 <code><nowiki>!</nowiki></code>를 대신 입력하면 됩니다. | 여기서부터 줄바꿈이 중요해집니다. 권장되는 문법으로는 만드는 각 칸마다 줄바꿈을 해야 합니다. 이때 각 칸마다 앞에 <code><nowiki>|</nowiki></code>를 입력하고 뒤에 내용을 입력합니다. 머리말 칸을 만들 때는 <code><nowiki>!</nowiki></code>를 대신 입력하면 됩니다. | ||
{| class="wikitable" | {| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%;" | ||
|- | |- style="font-weight: 700; text-align: center;" | ||
! style=" | ! style="min-width: 150px;" | 입력 | ||
! 출력 | ! style="min-width: 150px;" | 출력 | ||
|- | |- | ||
| style="padding-bottom: 0; padding-top: 15px;" | <pre> | | style="padding-bottom: 0; padding-top: 15px;" | <pre> | ||
| 99번째 줄: | 111번째 줄: | ||
=== 표 서식 === | === 표 서식 === | ||
표 전체에 서식을 부여할 때는 <code><nowiki>{|</nowiki></code> 뒤에 서식을 쓰면 되는데 이때 <code><nowiki>class="wikitable"</nowiki></code> | 표 전체에 서식을 부여할 때는 <code><nowiki>{|</nowiki></code> 뒤에 서식을 쓰면 되는데 이때 <code><nowiki>class="wikitable"</nowiki></code>를 먼저 붙이고 스타일링을 적용합니다. 기본적으로 제공되는 테이블 스타일링을 추가해주기 때문입니다. | ||
<code><nowiki>bd</nowiki></code>를 사용해보겠습니다. <code><nowiki>bd</nowiki></code>는 보통 <code>2px-sld-색상</code>를 사용하는데, <code><nowiki>sld</nowiki></code>는 일반적인 직선 테두리이기 때문이고, <code><nowiki>2px</nowiki></code>은 나무위키에서 기본적으로 표에 2px 테두리를 적용하기 때문입니다. | |||
외에도 <code><nowiki> | 외에도 <code><nowiki>ta</nowiki></code>를 통해 표의 특성에 따라 좌우 정렬을 적용하기도 합니다. | ||
{| class="wikitable" | {| class="wikitable"style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%;" | ||
|- | |- style="font-weight: 700; text-align: center;" | ||
! style=" | ! 입력 | ||
! style="min-width: 150px;" | 출력 | |||
|- | |- | ||
| style="padding-bottom: 0; padding-top: 15px;" | <pre> | | style="padding-bottom: 0; padding-top: 15px;" | <pre> | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}} | ||
! A | ! A | ||
! B | ! B | ||
| 120번째 줄: | 132번째 줄: | ||
</pre> | </pre> | ||
| | | | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}} | ||
! A | ! A | ||
! B | ! B | ||
| 132번째 줄: | 144번째 줄: | ||
행 서식은 잘 사용되지 않으니 여기서는 넘어갑니다. 칸별 서식을 넣는 방법 또한 간단합니다. <code><nowiki>| 서식 | 내용</nowiki></code>처럼 파이프(|)를 하나 더 넣고 그 사이에 서식을 넣습니다. 머리말 칸도 <code><nowiki>! 서식 | 내용</nowiki></code>처럼 쓰면 됩니다. | 행 서식은 잘 사용되지 않으니 여기서는 넘어갑니다. 칸별 서식을 넣는 방법 또한 간단합니다. <code><nowiki>| 서식 | 내용</nowiki></code>처럼 파이프(|)를 하나 더 넣고 그 사이에 서식을 넣습니다. 머리말 칸도 <code><nowiki>! 서식 | 내용</nowiki></code>처럼 쓰면 됩니다. | ||
이번에는 먼저번의 표에 <code><nowiki> | 이번에는 먼저번의 표에 <code><nowiki>bg</nowiki></code>와 <code><nowiki>c</nowiki></code>를 적용해보겠습니다. | ||
{| class="wikitable" | {| class="wikitable"style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;" | ||
|- | |- style="font-weight: 700; text-align: center;" | ||
! style=" | ! 입력 | ||
! style="min-width: 150px;" | 출력 | |||
|- | |- | ||
| style="padding-bottom: 0; padding-top: 15px;" | <pre> | | style="padding-bottom: 0; padding-top: 15px;" | <pre> | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}} | ||
! | ! {{스타일|c-white bg-red}} | A | ||
! | ! {{스타일|c-white bg-red}} | B | ||
|- | |- | ||
| | | {{스타일|c-red}} | C | ||
| D | | D | ||
|} | |} | ||
</pre> | </pre> | ||
| | | | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}} | ||
! | ! {{스타일|c-white bg-red}} | A | ||
! | ! {{스타일|c-white bg-red}} | B | ||
|- | |- | ||
| | | {{스타일|c-red}} | C | ||
| D | | D | ||
|} | |} | ||
| 158번째 줄: | 170번째 줄: | ||
=== 병합 === | === 병합 === | ||
칸을 병합하는 것도 | 칸을 병합하는 것도 스타일을 이용합니다. <code><nowiki>col</nowiki></code>과 <code><nowiki>row</nowiki></code>를 이용하는데, col은 column(열), row는 그대로 row(행)를 의미합니다. 즉, 각각 열과 행에서 몇 칸씩 병합할지를 묻는 속성입니다. | ||
병합할 때는 가장 왼쪽 | 병합할 때는 가장 '''왼쪽 위'''에 있는 칸에 서식을 넣고, 나머지 칸들은 모두 없애야 합니다. 비워 두는 것이 아니라, 칸을 만들 때 건너뛰면 됩니다. 어떻게 사용되는지 예시를 보면 더 쉽습니다. | ||
{| class="wikitable" | {| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;" | ||
|- | |- style="font-weight: 700; text-align: center;" | ||
! style=" | ! 입력 | ||
! style="min-width: 150px;" | 출력 | |||
|- | |- | ||
| style="padding-bottom: 0; padding-top: 15px;" | <pre> | | style="padding-bottom: 0; padding-top: 15px;" | <pre> | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}} | ||
! | ! {{스타일|c-white bg-red col-2}} | 1 | ||
|- | |- | ||
| 가 | | 가 | ||
| 176번째 줄: | 188번째 줄: | ||
</pre> | </pre> | ||
| | | | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}} | ||
! | ! {{스타일|c-white bg-red col-2}} | 1 | ||
|- | |- | ||
| 가 | | 가 | ||
| 184번째 줄: | 196번째 줄: | ||
|- | |- | ||
| style="padding-bottom: 0; padding-top: 15px;" | <pre> | | style="padding-bottom: 0; padding-top: 15px;" | <pre> | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}}" | ||
! | ! {{스타일|c-white bg-red row-2}} | 1 | ||
| | | 가 | ||
|- | |- | ||
| 나 | | 나 | ||
| 192번째 줄: | 204번째 줄: | ||
</pre> | </pre> | ||
| | | | ||
{| class="wikitable" | {| class="wikitable" {{스타일|bd-2px-sld-red}} | ||
! | ! {{스타일|c-white bg-red row-2}} | 1 | ||
| 가 | | 가 | ||
|- | |- | ||
2025년 12월 9일 (화) 02:27 기준 최신판
| 도움말 | ||||
|---|---|---|---|---|
[ 펼치기 · 접기 ]
|
| 위키 문법 | ||
|---|---|---|
| 1장 「기초」 | 2장 「표」 | 3장 「HTML」 |
| 4장 「스타일링」 | 5장 「응용」 | |
| 개별 기능 | ||
| 보일 제목 | 틀 제작 | 파일 삽입 |
개념
스타일링 기초 2
여기서는 1장 서두의 HTML 태그와 스타일링 기초 부분을 정독하고 오셨다고 가정하고 설명합니다.
이전에 서식 3개를 알려 드렸는데, 표에서 사용할 수 있는 2개의 서식을 더 소개하고자 합니다.
| 서식 | 설명 | 예시 | 출력[1] |
|---|---|---|---|
ta
|
좌우 정렬 | {{스타일|ta-right}}
|
예시 |
bd |
테두리 | {{스타일|bd-2px-sld-red}}
|
예시 |
col
|
열 병합 | {{스타일|col-4}}
|
- |
row |
행 병합 | {{스타일|row-3}}
|
- |
삽입
표 만들기
편집기 상단에 표 버튼을 통해 표를 만들 수도 있지만, 여기서는 수동으로 만드는 방법을 소개하고자 합니다. 먼저 표는 {|로 열고 |}로 닫습니다. 열고 닫기만 하면 당연하게도 아무 내용도 표시되지 않습니다.
| 입력 | 출력 | |
|---|---|---|
{|
|}
|
|
행·칸 만들기
위키 문법에서 표는 행 아래에 칸이 있는 위계가 성립합니다. 그래서 행별로 편집하기는 보다 편리하고 열별로 편집하기는 보다 어렵다는 부분이 있습니다. 행을 바꿀 때는 |-를 입력합니다. |-가 행을 구분짓는 구분선인 셈입니다. 아직 행 안에 칸을 만들지 않아 내용이 표시되지는 않습니다.
| 입력 | 출력 |
|---|---|
{|
|-
|}
|
|
여기서부터 줄바꿈이 중요해집니다. 권장되는 문법으로는 만드는 각 칸마다 줄바꿈을 해야 합니다. 이때 각 칸마다 앞에 |를 입력하고 뒤에 내용을 입력합니다. 머리말 칸을 만들 때는 !를 대신 입력하면 됩니다.
| 입력 | 출력 | ||||
|---|---|---|---|---|---|
{|
! A
|-
| B
|}
|
| ||||
{|
! A
! B
|-
| C
| D
|}
|
|
서식
표에는 표 전체, 행별, 칸별 서식을 각각 지정할 수 있습니다. 단, 행별 서식은 자주 사용하진 않습니다. 모두 1장에서 앞서 설명한 HTML 태그 안에 들어가는 속성의 형태로 서식을 추가합니다.
표 서식
표 전체에 서식을 부여할 때는 {| 뒤에 서식을 쓰면 되는데 이때 class="wikitable"를 먼저 붙이고 스타일링을 적용합니다. 기본적으로 제공되는 테이블 스타일링을 추가해주기 때문입니다.
bd를 사용해보겠습니다. bd는 보통 2px-sld-색상를 사용하는데, sld는 일반적인 직선 테두리이기 때문이고, 2px은 나무위키에서 기본적으로 표에 2px 테두리를 적용하기 때문입니다.
외에도 ta를 통해 표의 특성에 따라 좌우 정렬을 적용하기도 합니다.
| 입력 | 출력 | ||||
|---|---|---|---|---|---|
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! A
! B
|-
| C
| D
|}
|
|
칸 서식
행 서식은 잘 사용되지 않으니 여기서는 넘어갑니다. 칸별 서식을 넣는 방법 또한 간단합니다. | 서식 | 내용처럼 파이프(|)를 하나 더 넣고 그 사이에 서식을 넣습니다. 머리말 칸도 ! 서식 | 내용처럼 쓰면 됩니다.
이번에는 먼저번의 표에 bg와 c를 적용해보겠습니다.
| 입력 | 출력 | ||||
|---|---|---|---|---|---|
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! {{스타일|c-white bg-red}} | A
! {{스타일|c-white bg-red}} | B
|-
| {{스타일|c-red}} | C
| D
|}
|
|
병합
칸을 병합하는 것도 스타일을 이용합니다. col과 row를 이용하는데, col은 column(열), row는 그대로 row(행)를 의미합니다. 즉, 각각 열과 행에서 몇 칸씩 병합할지를 묻는 속성입니다.
병합할 때는 가장 왼쪽 위에 있는 칸에 서식을 넣고, 나머지 칸들은 모두 없애야 합니다. 비워 두는 것이 아니라, 칸을 만들 때 건너뛰면 됩니다. 어떻게 사용되는지 예시를 보면 더 쉽습니다.
| 입력 | 출력 | ||||
|---|---|---|---|---|---|
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! {{스타일|c-white bg-red col-2}} | 1
|-
| 가
| 나
|}
|
| ||||
{| class="wikitable" {{스타일|bd-2px-sld-red}}"
! {{스타일|c-white bg-red row-2}} | 1
| 가
|-
| 나
|}
|
| ||||
- ↑ 칸에 적용했을 때