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

2025년 10월 4일 (토) 11:42 판

도움말

[ 펼치기 · 접기 ]

위키 문법
1장 「기초」	2장 「표」	3장 「HTML」
4장 「스타일링」	5장 「응용」
개별 기능
보일 제목	틀 제작	파일 삽입

개념

CSS 기초 2

여기서는 1장 서두의 HTML 태그와 CSS 기초 부분을 정독하고 오셨다고 가정하고 설명합니다.

이전에 CSS 3개를 알려 드렸는데, 표에서 사용할 수 있는 3개의 태그를 더 소개하고자 합니다.

속성	설명	예시	출력^[1]
`text-align`	좌우 정렬	`text-align: right;`	예시
`padding`	안쪽 여백	`padding: 0px;`	예시
`border`	테두리	`border: 2px blue solid;`	예시

행과 셀

행 나누기

행을 나누려면 |-을 사용합니다. 행마다 머리글이나 데이터를 넣을 수 있습니다.

머리글1	머리글2
데이터1-1	데이터1-2
데이터2-1	데이터2-2

셀 작성

- 머리글 셀: ! - 데이터 셀: | - 여러 개 셀 작성 시 한 행 안에서 |로 구분

머리글A	머리글B	머리글C
데이터A1	데이터B1	데이터C1
데이터A2	데이터B2	데이터C2

셀 병합

- **가로 병합**: colspan="숫자" - **세로 병합**: rowspan="숫자"

병합된 머리글
데이터1	데이터2
세로병합	데이터3
세로병합	데이터4

고급 기능

정렬

셀 내부 내용을 정렬하려면 style="text-align:left/right/center"을 사용합니다.

왼쪽	가운데	오른쪽
왼쪽 정렬	가운데 정렬	오른쪽 정렬

배경색

각 셀에 배경색을 주어 강조할 수 있습니다.

제목1	제목2
빨강 배경	초록 배경

↑ span에 적용했을 때

[1] span에 적용했을 때

[1]

@@ 1번째 줄: / 1번째 줄: @@
-{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법/2장 「표」}}
+{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법{{부제| 2장 「표」}}}}
 {{분류|도움말}}
 {{도움말}}{{위키 문법}}
@@ 5번째 줄: / 5번째 줄: @@
 == 개념 ==
-=== 표 ===
+=== CSS 기초 2 ===
-표는 정보를 정리하여 가독성을 높이기 위해 사용합니다. 위키에서는 표를 만들 때 주로 {|로 시작하고 |}로 끝나는 문법을 사용합니다.
+여기서는 [[도움말:위키 문법|1장]] 서두의 HTML 태그와 CSS 기초 부분을 정독하고 오셨다고 가정하고 설명합니다.
-표 안에서는 |-로 행(row)을 나누고, !로 머리글(th), |로 데이터(td)를 작성합니다.
-{| class="wikitable"
+이전에 CSS 3개를 알려 드렸는데, 표에서 사용할 수 있는 3개의 태그를 더 소개하고자 합니다.
-|-
-! 문법 !! 의미
-|-
-| <code>{|</code> || 표 시작
-|-
-| <code>|}</code> || 표 종료
-|-
-| <code>|-</code> || 행 구분
-|-
-| <code>!</code> || 머리글(th) 셀
-|-
-| <code>|</code> || 일반 데이터(td) 셀
-|}
-=== 표 속성 ===
-표에 속성을 주어 디자인을 바꿀 수 있습니다. 가장 흔한 속성은 <code>class="wikitable"</code>로, 기본 테두리와 배경을 제공합니다.
-기타 스타일을 적용할 때는 <code>style="..."</code> 속성을 활용할 수 있습니다.
 {| class="wikitable"
 |-
-! 속성 예시 !! 설명
+! 속성 !! 설명 !! 예시 !! 출력<ref><code>span</code>에 적용했을 때</ref>
-|-
-| <code>class="wikitable"</code> || 기본 위키 스타일 적용
 |-
-| <code>style="width:50%"</code> || 표 너비를 50%로 설정
+| <code>text-align</code> || 좌우 정렬 || <code>text-align: right;</code>
+| style="text-align: right;" | 예시
 |-
-| <code>style="text-align:center"</code> || 내용 가운데 정렬
+| <code>padding</code> || 안쪽 여백 || <code>padding: 0px;</code>
+| style="padding: 0px;" | 예시
 |-
-| <code>style="background:#f2f2f2"</code> || 배경색 지정
+| <code>border</code> || 테두리 || <code>border: 2px blue solid;</code>
+| style="border: 2px blue solid;" | 예시
 |}