85번째 줄: | 85번째 줄: | ||
**<code>%:</code> 비율 조정 | **<code>%:</code> 비율 조정 | ||
**<code>px:</code> 픽셀지정 단, 픽셀지정의 경우에는 모바일 최적화의 일환으로 예시와 같은 작성을 권장합니다. <small>ex) max-width:(px값)px; width: 100%</small> | **<code>px:</code> 픽셀지정 단, 픽셀지정의 경우에는 모바일 최적화의 일환으로 예시와 같은 작성을 권장합니다. <small>ex) max-width:(px값)px; width: 100%</small> | ||
*<code> | *<code>float: (방향)</code> 표가 표시될 위치를 지정합니다. | ||
**<code> | **<code>float: left</code> 표가 문서 좌측에 표시됩니다. | ||
**<code> | **<code>float: right</code> 표가 문서 우측에 표시됩니다. | ||
**단, 문서 중앙 표시는 <code> | **단, 문서 중앙 표시는 <code>float: center</code>가 아닌 <code>margin-left: auto; margin-right: auto</code>를 사용합니다. | ||
*<code>text-align: (방향)</code> 글자의 정렬 방향을 지정 합니다. | *<code>text-align: (방향)</code> 글자의 정렬 방향을 지정 합니다. | ||
**<code>text-align: center</code> 글자가 문서 중앙으로 정렬됩니다. | **<code>text-align: center</code> 글자가 문서 중앙으로 정렬됩니다. | ||
98번째 줄: | 98번째 줄: | ||
*<code>background: (색상코드)</code> 배경 색상을 지정합니다. | *<code>background: (색상코드)</code> 배경 색상을 지정합니다. | ||
*<code>color: (색상코드)</code> 글씨 색상을 지정합니다. | *<code>color: (색상코드)</code> 글씨 색상을 지정합니다. | ||
== 실전 적용 == | == 실전 적용 == | ||
== [[이브위키:도움말/표/고급|표에 관한 기초 이론]] == | == [[이브위키:도움말/표/고급|표에 관한 기초 이론]] == | ||
{{본문|이브위키:도움말/표/고급}} | {{본문|이브위키:도움말/표/고급}} |
2023년 11월 15일 (수) 15:53 기준 최신판
주의! 아직 작성중인 문서 입니다. |
---|
개요
이브위키의 표 도움말 입니다. 여기서 말하는 표는 이브위키가 사용하는 MediaWiki의 문법을 사용한 표 입니다.
이 문서에서는 기초적인 수준의 표 문법을 정리했으며, 이브위키:도움말/표/고급에서 고급 표 관련 문법을 확인 할 수 있습니다.
표에 관한 기초 이론
표의 큰 틀
표는 {|
, |}
, |
, |-
의 네가지 기호를 통하여 만들어 집니다.
각 기호는 다음과 같은 기능을 합니다.
{|
: 표를 시작합니다.|}
: 표를 끝냅니다. 즉 표는{|
와|}
사이에 생성됩니다.|
: 한 칸을 나타냅니다. 그 칸에 들어갈 내용은|
오른쪽에 작성합니다.|-
: 행과 행 사이를 나눕니다.
입력한 내용 | 출력된 내용 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" | 가 | 나 | 다 |- | 1 | 2 | 3 |- | 天 | 地 | 玄 |- | 하늘 | 땅 | 사람 |} |
|
표 옵션
MediaWiki에서는 다양한 속성값을 통해 표를 꾸밀 수 있습니다. 이 문단에서는 편의상 이를 표 옵션으로 지칭하겠습니다.
class
속성에 wikitable을 넣을 경우 MediaWiki에 가장 기초적인 표를 생성 할 수 있습니다. ex) class="wikitable"
colspan과 rowspan이란?
colspan="(숫자)"
옆에 있는 칸이 합쳐집니다.rowspan="(숫자)"
아래에 있는 칸이 합쳐집니다.
입력한 내용 | 출력된 내용 | ||||||||
---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" | colspan="2" | 옆 칸 합치기 | |- | rowspan="2" | 아래 칸 합치기 | | |- | | |- |} |
|
class란?
class는 사전에 서버에서 지정해둔 style
의 형태 입니다.
class
는 class="(사전에 지정해둔 속성의 이름)"을 통해 사용하실 수있습니다.- 띄어쓰기를 통하여 복수의 class 속성을 지정 할 수 있습니다. ex) class="(사전에 지정해둔 속성의 이름 1) (사전에 지정해둔 속성의 이름 2)"
- 이브위키는 tailwindcss를 통하여 보다 다양한 class 값을 지정하실 수 있습니다.
style란?
표 옵션은 style
에 의해 지정 됩니다.
style
은 style="(속성 값)"을 통하여 사용할 수 있습니다.;
를 통하여 복수의 style 속성을 지정할 수 있습니다. ex) class="(속성 값1);(속성 값2)"
자주 사용하는 style 속성
width:
폭, 칸의 너비를 정합니다. width: 100px; 또는 width: 50%;와 같이 입력합니다.%:
비율 조정px:
픽셀지정 단, 픽셀지정의 경우에는 모바일 최적화의 일환으로 예시와 같은 작성을 권장합니다. ex) max-width:(px값)px; width: 100%
float: (방향)
표가 표시될 위치를 지정합니다.float: left
표가 문서 좌측에 표시됩니다.float: right
표가 문서 우측에 표시됩니다.- 단, 문서 중앙 표시는
float: center
가 아닌margin-left: auto; margin-right: auto
를 사용합니다.
text-align: (방향)
글자의 정렬 방향을 지정 합니다.text-align: center
글자가 문서 중앙으로 정렬됩니다.text-align: left
글자가 문서 좌측으로 정렬됩니다.text-align: right
글자가 문서 우측으로 정렬됩니다.
border: (굵기)px
표의 테두리를 지정합니다. 이때 테두리 색상은 기본색이 적용됩니다.border: (굵기)px solid (색상코드)
표의 테두리와 테두리 색상을 지정합니다.
font-size: (사이즈)pt
글씨 크기를 지정합니다.background: (색상코드)
배경 색상을 지정합니다.color: (색상코드)
글씨 색상을 지정합니다.