이브위키:도움말/표 - 편집 역사

은혜누나: /* 자주 사용하는 style 속성 */

2023-11-15T06:53:01Z

자주 사용하는 style 속성

← 이전 판		2023년 11월 15일 (수) 15:53 판
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>~~front~~: (방향)</code> 표가 표시될 위치를 지정합니다.		*<code>float: (방향)</code> 표가 표시될 위치를 지정합니다.
	**<code>~~front~~: left</code> 표가 문서 좌측에 표시됩니다.		**<code>float: left</code> 표가 문서 좌측에 표시됩니다.
	**<code>~~front~~: right</code> 표가 문서 우측에 표시됩니다.		**<code>float: right</code> 표가 문서 우측에 표시됩니다.
	**단, 문서 중앙 표시는 <code>~~front~~: center</code>가 아닌 <code>margin-left: auto; margin-right: auto</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> 글씨 색상을 지정합니다.

	== 실전 적용 ==		== 실전 적용 ==

	== [[이브위키:도움말/표/고급\|표에 관한 기초 이론]] ==		== [[이브위키:도움말/표/고급\|표에 관한 기초 이론]] ==
	{{본문\|이브위키:도움말/표/고급}}		{{본문\|이브위키:도움말/표/고급}}

은혜누나: /* colspan과 rowspan이란? */

2023-11-15T06:19:25Z

colspan과 rowspan이란?

← 이전 판		2023년 11월 15일 (수) 15:19 판
56번째 줄:		56번째 줄:
	! style="width:50%; background:#3757C7; color:#fff" \| 출력된 내용		! style="width:50%; background:#3757C7; color:#fff" \| 출력된 내용
	\|-		\|-
	\| <nowiki>{\| class="wikitable"</nowiki><br><nowiki>\| colspan="2" \| 옆 칸 합치기</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|-</nowiki><br><nowiki>\| rowspan="2" \| 아래 칸 합치기</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|-</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|-</nowiki><br><nowiki>\|}</nowiki>		\| <nowiki>{\| class="wikitable"</nowiki><br><nowiki>\| colspan="2" \| 옆 칸 합치기</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|-</nowiki><br><nowiki>\| rowspan="2" \| 아래 칸 합치기</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|-</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|</nowiki><br><nowiki>\|-</nowiki><br><nowiki>\|}</nowiki>
	\|		\|
	{\| class="wikitable"		{\| class="wikitable"

은혜누나: /* colspan과 rowspan이란 */

2023-11-15T06:19:10Z

colspan과 rowspan이란

← 이전 판		2023년 11월 15일 (수) 15:19 판
48번째 줄:		48번째 줄:
	MediaWiki에서는 다양한 속성값을 통해 표를 꾸밀 수 있습니다. 이 문단에서는 편의상 이를 표 옵션으로 지칭하겠습니다.		MediaWiki에서는 다양한 속성값을 통해 표를 꾸밀 수 있습니다. 이 문단에서는 편의상 이를 표 옵션으로 지칭하겠습니다.
	* <code>class</code> 속성에 '''wikitable'''을 넣을 경우 MediaWiki에 가장 기초적인 표를 생성 할 수 있습니다. <small>ex) class="wikitable"</small>		* <code>class</code> 속성에 '''wikitable'''을 넣을 경우 MediaWiki에 가장 기초적인 표를 생성 할 수 있습니다. <small>ex) class="wikitable"</small>
	==== colspan과 rowspan이란 ====		==== colspan과 rowspan이란? ====
	*<code>colspan="(숫자)"</code> 옆에 있는 칸이 합쳐집니다.		*<code>colspan="(숫자)"</code> 옆에 있는 칸이 합쳐집니다.
	*<code>rowspan="(숫자)"</code> 아래에 있는 칸이 합쳐집니다.		*<code>rowspan="(숫자)"</code> 아래에 있는 칸이 합쳐집니다.

은혜누나: /* 칸 합치기 */

2023-11-15T06:19:02Z

칸 합치기

← 이전 판		2023년 11월 15일 (수) 15:19 판
48번째 줄:		48번째 줄:
	MediaWiki에서는 다양한 속성값을 통해 표를 꾸밀 수 있습니다. 이 문단에서는 편의상 이를 표 옵션으로 지칭하겠습니다.		MediaWiki에서는 다양한 속성값을 통해 표를 꾸밀 수 있습니다. 이 문단에서는 편의상 이를 표 옵션으로 지칭하겠습니다.
	* <code>class</code> 속성에 '''wikitable'''을 넣을 경우 MediaWiki에 가장 기초적인 표를 생성 할 수 있습니다. <small>ex) class="wikitable"</small>		* <code>class</code> 속성에 '''wikitable'''을 넣을 경우 MediaWiki에 가장 기초적인 표를 생성 할 수 있습니다. <small>ex) class="wikitable"</small>
	==== ~~칸 합치기~~ ====		==== colspan과 rowspan이란 ====
	*<code>colspan="(숫자)"</code> 옆에 있는 칸이 합쳐집니다.		*<code>colspan="(숫자)"</code> 옆에 있는 칸이 합쳐집니다.
	*<code>rowspan="(숫자)"</code> 아래에 있는 칸이 합쳐집니다.		*<code>rowspan="(숫자)"</code> 아래에 있는 칸이 합쳐집니다.

은혜누나: /* 표 옵션 해석하기 */

2023-11-15T06:18:21Z

표 옵션 해석하기

← 이전 판		2023년 11월 15일 (수) 15:18 판
98번째 줄:		98번째 줄:
	*<code>background: (색상코드)</code> 배경 색상을 지정합니다.		*<code>background: (색상코드)</code> 배경 색상을 지정합니다.
	*<code>color: (색상코드)</code> 글씨 색상을 지정합니다.		*<code>color: (색상코드)</code> 글씨 색상을 지정합니다.
	==~~== 표 옵션 해석하기~~ ====		== 실전 적용 ==

	== [[이브위키:도움말/표/고급\|표에 관한 기초 이론]] ==		== [[이브위키:도움말/표/고급\|표에 관한 기초 이론]] ==
	{{본문\|이브위키:도움말/표/고급}}		{{본문\|이브위키:도움말/표/고급}}

은혜누나: /* 표 옵션 */

2023-11-15T06:17:39Z

표 옵션

@@ 48번째 줄: / 48번째 줄: @@
 MediaWiki에서는 다양한 속성값을 통해 표를 꾸밀 수 있습니다. 이 문단에서는 편의상 이를 표 옵션으로 지칭하겠습니다.
 * <code>class</code> 속성에 '''wikitable'''을 넣을 경우 MediaWiki에 가장 기초적인 표를 생성 할 수 있습니다. <small>ex) class="wikitable"</small>
 ==== class란? ====
 '''class'''는 사전에 서버에서 지정해둔 <code>style</code>의 형태 입니다.
@@ 74번째 줄: / 98번째 줄: @@
 *<code>background: (색상코드)</code> 배경 색상을 지정합니다.
 *<code>color: (색상코드)</code> 글씨 색상을 지정합니다.
 == [[이브위키:도움말/표/고급|표에 관한 기초 이론]] ==
 {{본문|이브위키:도움말/표/고급}}

은혜누나: /* 자주 사용하는 style 속성 */

2023-11-14T14:28:32Z

자주 사용하는 style 속성

← 이전 판		2023년 11월 14일 (화) 23:28 판
61번째 줄:		61번째 줄:
	**<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>front: (방향)</code> 표가 표시될 위치를 ~~지정합니~~.		*<code>front: (방향)</code> 표가 표시될 위치를 지정합니다.
	**<code>front: left</code> 표가 문서 좌측에 표시됩니다.		**<code>front: left</code> 표가 문서 좌측에 표시됩니다.
	**<code>front: right</code> 표가 문서 우측에 표시됩니다.		**<code>front: right</code> 표가 문서 우측에 표시됩니다.
74번째 줄:		74번째 줄:
	*<code>background: (색상코드)</code> 배경 색상을 지정합니다.		*<code>background: (색상코드)</code> 배경 색상을 지정합니다.
	*<code>color: (색상코드)</code> 글씨 색상을 지정합니다.		*<code>color: (색상코드)</code> 글씨 색상을 지정합니다.

	== [[이브위키:도움말/표/고급\|표에 관한 기초 이론]] ==		== [[이브위키:도움말/표/고급\|표에 관한 기초 이론]] ==
	{{본문\|이브위키:도움말/표/고급}}		{{본문\|이브위키:도움말/표/고급}}

은혜누나: 새 문서: {| class ="wikitable" style="width: 100%; border: 2px solid #3757C7 ; text-align: center; font-size: 10pt" |- ! style="background: #fff; color: #3757C7; border: transparent" | 주의! 아직 작성중인 문서 입니다. |} {{목차}} == 개요 == 이브위키의 표 도움말 입니다. 여기서 말하는 표는 이브위키가 사용하는 '''MediaWiki의 문법을 사용한 표''' 입니다. 이 문서에서는 기초적인 수준의 표 문법을 정리했...

2023-11-14T14:24:38Z

새 문서: {| class ="wikitable" style="width: 100%; border: 2px solid #3757C7 ; text-align: center; font-size: 10pt" |- ! style="background: #fff; color: #3757C7; border: transparent" | <big>주의! 아직 작성중인 문서 입니다.</big> |} {{목차}} == 개요 == 이브위키의 표 도움말 입니다. 여기서 말하는 표는 이브위키가 사용하는 '''MediaWiki의 문법을 사용한 표''' 입니다. 이 문서에서는 기초적인 수준의 표 문법을 정리했...

새 문서

{| class ="wikitable" style="width: 100%; border: 2px solid #3757C7 ; text-align: center; font-size: 10pt"
|-
! style="background: #fff; color: #3757C7; border: transparent" | <big>주의! 아직 작성중인 문서 입니다.</big>
|}
{{목차}}
== 개요 ==
[[이브위키]]의 표 도움말 입니다. 여기서 말하는 표는 이브위키가 사용하는 '''MediaWiki의 문법을 사용한 표''' 입니다.

이 문서에서는 기초적인 수준의 표 문법을 정리했으며, [[이브위키:도움말/표/고급]]에서 고급 표 관련 문법을 확인 할 수 있습니다.

== 표에 관한 기초 이론 ==
=== 표의 큰 틀 ===
표는 <code>{|</code>, <code>|}</code>, <code>|</code>, <code>|-</code>의 네가지 기호를 통하여 만들어 집니다.

각 기호는 다음과 같은 기능을 합니다.
*<code>{|</code> : 표를 시작합니다.
*<code>|}</code> : 표를 끝냅니다. 즉 표는 <code>{|</code>와 <code>|}</code> 사이에 생성됩니다.
*<code>|</code> : 한 칸을 나타냅니다. 그 칸에 들어갈 내용은 <code>|</code> 오른쪽에 작성합니다.
*<code>|-</code> : 행과 행 사이를 나눕니다.
{| class ="wikitable" style="width: 100%; border: 2px solid #3757C7 ; text-align: left; font-size: 10pt"
|-
! style="width:50%; background:#3757C7; color:#fff" | 입력한 내용
! style="width:50%; background:#3757C7; color:#fff" | 출력된 내용
|-
|<nowiki>{| class="wikitable"</nowiki> <nowiki>| 가</nowiki> <nowiki>| 나</nowiki> <nowiki>| 다</nowiki> <nowiki>|-</nowiki> <nowiki>| 1</nowiki> <nowiki>| 2</nowiki> <nowiki>| 3</nowiki> <nowiki>|-</nowiki> <nowiki>| 天</nowiki> <nowiki>| 地</nowiki> <nowiki>| 玄</nowiki> <nowiki>|-</nowiki> <nowiki>| 하늘</nowiki> <nowiki>| 땅</nowiki> <nowiki>| 사람</nowiki> <nowiki>|}</nowiki>
|
{| class="wikitable"
| 가
| 나
| 다
|-
| 1
| 2
| 3
|-
| 天
| 地
| 玄
|-
| 하늘
| 땅
| 사람
|}
|-
|}

=== 표 옵션 ===
MediaWiki에서는 다양한 속성값을 통해 표를 꾸밀 수 있습니다. 이 문단에서는 편의상 이를 표 옵션으로 지칭하겠습니다.
* <code>class</code> 속성에 '''wikitable'''을 넣을 경우 MediaWiki에 가장 기초적인 표를 생성 할 수 있습니다. ex) class="wikitable"
==== class란? ====
'''class'''는 사전에 서버에서 지정해둔 <code>style</code>의 형태 입니다.
*<code>class</code>는 class="(사전에 지정해둔 속성의 이름)"을 통해 사용하실 수있습니다.
*띄어쓰기를 통하여 '''복수의 class 속성을 지정 할 수 있습니다.''' ex) class="(사전에 지정해둔 속성의 이름 1) (사전에 지정해둔 속성의 이름 2)"
*[[이브위키]]는 [https://tailwindcss.com/ tailwindcss]를 통하여 보다 다양한 class 값을 지정하실 수 있습니다.
==== style란? ====
표 옵션은 <code>style</code>에 의해 지정 됩니다.
*<code>style</code>은 style="(속성 값)"을 통하여 사용할 수 있습니다.
*<code>;</code>를 통하여 '''복수의 style 속성을 지정할 수 있습니다.''' ex) class="(속성 값1);(속성 값2)"
===== 자주 사용하는 style 속성 =====
*<code>width:</code> 폭, 칸의 너비를 정합니다. width: 100px; 또는 width: 50%;와 같이 입력합니다.
**<code>%:</code> 비율 조정
**<code>px:</code> 픽셀지정 단, 픽셀지정의 경우에는 모바일 최적화의 일환으로 예시와 같은 작성을 권장합니다. ex) max-width:(px값)px; width: 100%
*<code>front: (방향)</code> 표가 표시될 위치를 지정합니.
**<code>front: left</code> 표가 문서 좌측에 표시됩니다.
**<code>front: right</code> 표가 문서 우측에 표시됩니다.
**단, 문서 중앙 표시는 <code>front: center</code>가 아닌 <code>margin-left: auto; margin-right: auto</code>를 사용합니다.
*<code>text-align: (방향)</code> 글자의 정렬 방향을 지정 합니다.
**<code>text-align: center</code> 글자가 문서 중앙으로 정렬됩니다.
**<code>text-align: left</code> 글자가 문서 좌측으로 정렬됩니다.
**<code>text-align: right</code> 글자가 문서 우측으로 정렬됩니다.
*<code>border: (굵기)px</code> 표의 테두리를 지정합니다. 이때 테두리 색상은 기본색이 적용됩니다.
**<code>border: (굵기)px solid (색상코드)</code> 표의 테두리와 테두리 색상을 지정합니다.
*<code>font-size: (사이즈)pt</code> 글씨 크기를 지정합니다.
*<code>background: (색상코드)</code> 배경 색상을 지정합니다.
*<code>color: (색상코드)</code> 글씨 색상을 지정합니다.
== [[이브위키:도움말/표/고급|표에 관한 기초 이론]] ==
{{본문|이브위키:도움말/표/고급}}