도움말:위키 문법/표: 두 판 사이의 차이

< 도움말:위키 문법
편집토론역사
← 이전 편집
삼쩌모 (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
21,970 편집
시각위키텍스트
편집 요약 없음
 
(같은 사용자의 중간 판 45개는 보이지 않습니다)
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 태그와 스타일링 기초 부분을 정독하고 오셨다고 가정하고 설명합니다.
표 안에서는 |-로 행(row)을 나누고, !로 머리글(th), |로 데이터(td)를 작성합니다.


{| class="wikitable"
이전에 서식 3개를 알려 드렸는데, 표에서 사용할 수 있는 2개의 서식을 더 소개하고자 합니다.
 
{| 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> || 표 시작
| <code>bd</code> || 테두리 || <code><nowiki>{{스타일|bd-2px-sld-red}}</nowiki></code>  
| style="border: 2px blue solid;" | 예시
|-
|-
| <code>|}</code> || 표 종료
| <code>col</code>
| style="min-width: 50px;" | 열 병합 || <code><nowiki>{{스타일|col-4}}</nowiki></code>  
| -
|-
|-
| <code>|-</code> || 행 구분
| <code>row</code> || 행 병합 || <code><nowiki>{{스타일|row-3}}</nowiki></code>  
| -
|}
 
== 삽입 ==
=== 표 만들기 ===
편집기 상단에 표 버튼을 통해 표를 만들 수도 있지만, 여기서는 수동으로 만드는 방법을 소개하고자 합니다. 먼저 표는 <code><nowiki>{|</nowiki></code>로 열고 <code><nowiki>|}</nowiki></code>로 닫습니다. 열고 닫기만 하면 당연하게도 아무 내용도 표시되지 않습니다.
{| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; width: 100%;"
|- style="font-weight: 700; text-align: center;"
! style="min-width: 150px;" | 입력
! style="min-width: 150px;" | 출력
|-
|-
| <code>!</code> || 머리글(th) 셀
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
|-
{|
| <code>|</code> || 일반 데이터(td) 셀
|}
</pre>
|  
{|
|}
|}
|}


=== 표 속성 ===
=== 행·칸 만들기 ===
표에 속성을 주어 디자인을 바꿀 수 있습니다. 가장 흔한 속성은 <code>class="wikitable"</code>로, 기본 테두리와 배경을 제공합니다.
위키 문법에서 표는 행 아래에 칸이 있는 위계가 성립합니다. 그래서 행별로 편집하기는 보다 편리하고 열별로 편집하기는 보다 어렵다는 부분이 있습니다. 행을 바꿀 때는 <code><nowiki>|-</nowiki></code>를 입력합니다. <code><nowiki>|-</nowiki></code>가 행을 구분짓는 구분선인 셈입니다. 아직 행 안에 칸을 만들지 않아 내용이 표시되지는 않습니다.
기타 스타일을 적용할 때는 <code>style="..."</code> 속성을 활용할 수 있습니다.
{| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; width: 100%;"
 
|- font-weight: 700; text-align: center;"
{| class="wikitable"
! style="min-width: 150px;" | 입력
! style="min-width: 150px;" | 출력
|-
|-
! 속성 예시 !! 설명
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
{|
|-
|-
| <code>class="wikitable"</code> || 기본 위키 스타일 적용
|}
</pre>
|  
{|
|-
|-
| <code>style="width:50%"</code> || 표 너비를 50%로 설정
|}
|-
| <code>style="text-align:center"</code> || 내용 가운데 정렬
|-
| <code>style="background:#f2f2f2"</code> || 배경색 지정
|}
|}


== 행과 셀 ==
여기서부터 줄바꿈이 중요해집니다. 권장되는 문법으로는 만드는 각 칸마다 줄바꿈을 해야 합니다. 이때 각 칸마다 앞에 <code><nowiki>|</nowiki></code>를 입력하고 뒤에 내용을 입력합니다. 머리말 칸을 만들 때는 <code><nowiki>!</nowiki></code>를 대신 입력하면 됩니다.
=== 행 나누기 ===
행을 나누려면 <code>|-</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="min-width: 150px;" | 입력
! style="min-width: 150px;" | 출력
|-
|-
! 머리글1 !! 머리글2
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
{|
! A
|-
|-
| 데이터1-1 || 데이터1-2
| B
|}
</pre>
|  
{|
! A
|-
|-
| 데이터2-1 || 데이터2-2
| B
|}
|}
=== 셀 작성 ===
- 머리글 셀: <code>!</code> 
- 데이터 셀: <code>|</code> 
- 여러 개 셀 작성 시 한 행 안에서 |로 구분
{| class="wikitable"
|-
|-
! 머리글A !! 머리글B !! 머리글C
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
{|
! A
! B
|-
|-
| 데이터A1 || 데이터B1 || 데이터C1
| C
| D
|}
</pre>
|  
{|
! A
! B
|-
|-
| 데이터A2 || 데이터B2 || 데이터C2
| C
| D
|}
|}
|}


=== 셀 병합 ===
== 서식 ==
- **가로 병합**: <code>colspan="숫자"</code>
표에는 표 전체, 행별, 칸별 서식을 각각 지정할 수 있습니다. 단, 행별 서식은 자주 사용하진 않습니다. 모두 1장에서 앞서 설명한 HTML 태그 안에 들어가는 속성의 형태로 서식을 추가합니다.
- **세로 병합**: <code>rowspan="숫자"</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 테두리를 적용하기 때문입니다.


{| class="wikitable"
외에도 <code><nowiki>ta</nowiki></code>를 통해 표의 특성에 따라 좌우 정렬을 적용하기도 합니다.
 
{| class="wikitable"style="margin-left:auto; margin-right:auto;  white-space: nowrap; width: 100%;"
|- style="font-weight: 700; text-align: center;"
! 입력
! style="min-width: 150px;" | 출력
|-
|-
! colspan="2" | 병합된 머리글
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! A
! B
|-
|-
| 데이터1 || 데이터2
| C
| D
|}
</pre>
|
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! A
! B
|-
|-
| rowspan="2" | 세로병합 || 데이터3
| C
|-
| D
| 데이터4
|}
|}
|}


== 고급 기능 ==
=== 칸 서식 ===
=== 정렬 ===
행 서식은 잘 사용되지 않으니 여기서는 넘어갑니다. 칸별 서식을 넣는 방법 또한 간단합니다. <code><nowiki>| 서식 | 내용</nowiki></code>처럼 파이프(|)를 하나 더 넣고 그 사이에 서식을 넣습니다. 머리말 칸도 <code><nowiki>! 서식 | 내용</nowiki></code>처럼 쓰면 됩니다.
셀 내부 내용을 정렬하려면 <code>style="text-align:left/right/center"</code>을 사용합니다.


{| class="wikitable"
이번에는 먼저번의 표에 <code><nowiki>bg</nowiki></code>와 <code><nowiki>c</nowiki></code>를 적용해보겠습니다.
{| 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="min-width: 150px;" | 출력
|-
|-
! 왼쪽 !! 가운데 !! 오른쪽
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! {{스타일|c-white bg-red}} | A
! {{스타일|c-white bg-red}} | B
|-
|-
| style="text-align:left" | 왼쪽 정렬
| {{스타일|c-red}} | C
| style="text-align:center" | 가운데 정렬
| D
| style="text-align:right" | 오른쪽 정렬
|}
</pre>
|
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! {{스타일|c-white bg-red}} | A
! {{스타일|c-white bg-red}} | B
|-
| {{스타일|c-red}} | C
| D
|}
|}
|}


=== 배경색 ===
=== 병합 ===
각 셀에 배경색을 주어 강조할 수 있습니다.
칸을 병합하는 것도 스타일을 이용합니다. <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="min-width: 150px;" | 출력
|-
|-
! 제목1 !! 제목2
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! {{스타일|c-white bg-red col-2}} | 1
|-
|-
| style="background:#ffcccc" | 빨강 배경
| 가
| style="background:#ccffcc" | 초록 배경
| 나
|}
|}
 
</pre>
=== 표 안에 표 ===
|
표 안에 다른 표를 넣어 계층 구조를 표현할 수 있습니다. 중첩 표는 가독성을 위해 최소한으로 사용하는 것이 좋습니다.
{| class="wikitable" {{스타일|bd-2px-sld-red}}
 
! {{스타일|c-white bg-red col-2}} | 1
{| class="wikitable"
|-
| 가
| 나
|}
|-
| style="padding-bottom: 0; padding-top: 15px;" | <pre>
{| class="wikitable" {{스타일|bd-2px-sld-red}}"
! {{스타일|c-white bg-red row-2}} | 1
| 가
|-
|-
! 외부표 헤더
| 나
|}
</pre>
|
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! {{스타일|c-white bg-red row-2}} | 1
| 가
|-
|-
| {| class="wikitable"
| 나
  |-
|}
  ! 내부헤더1 !! 내부헤더2
  |-
  | 값1 || 값2
  |}
|}
|}
=== 참고 ===
표 문법은 HTML의 <code>table</code>, <code>tr</code>, <code>th</code>, <code>td</code>와 유사하며, 필요 시 CSS 스타일을 결합해 세밀하게 꾸밀 수 있습니다.

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 
{|
! A
! B
|-
| C
| D
|}
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
|}
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
|}
A B
C D

병합

칸을 병합하는 것도 스타일을 이용합니다. col과 row를 이용하는데, col은 column(열), row는 그대로 row(행)를 의미합니다. 즉, 각각 열과 행에서 몇 칸씩 병합할지를 묻는 속성입니다.

병합할 때는 가장 왼쪽 위에 있는 칸에 서식을 넣고, 나머지 칸들은 모두 없애야 합니다. 비워 두는 것이 아니라, 칸을 만들 때 건너뛰면 됩니다. 어떻게 사용되는지 예시를 보면 더 쉽습니다.

입력 출력 
{| class="wikitable" {{스타일|bd-2px-sld-red}}
! {{스타일|c-white bg-red col-2}} | 1
|-
| 가
| 나
|}
1
가 나 
{| class="wikitable" {{스타일|bd-2px-sld-red}}"
! {{스타일|c-white bg-red row-2}} | 1
| 가
|-
| 나
|}
1 가
나
  1. ↑ 칸에 적용했을 때
라이선스를 별도로 명시하지 않은 세계관이나 문서는
CC-BY-SA 4.0에 의해 이용하실 수 있습니다.
제작한 세계관이나 문서의 저작권은 각 기여자에게 주어집니다.
무단 전재 또는 복제는 명백한 저작권 침해이며 법적 책임을 물 수 있습니다.
상세한 내용은 쩌모위키:라이선스를 참고하십시오.
Powered by Mediawiki,
Designed by Vierthalb.