잔글 (→다른 사용예) |
잔글 (→한셀에 적용해기) |
||
(같은 사용자의 중간 판 12개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
표 스타일 지정을 쉽게 하도록 | span, div 등의 태그나 태이블(표)에서 스타일(style) 속성 지정을 쉽게 하도록 도와주는 틀이다. | ||
==사용용도== | ==사용용도== | ||
특히 모바일에서 스타일 지정시 오타등으로 오류를 줄일 수 있도록 만든 | 특히 모바일에서 스타일 지정시 오타등으로 오류를 줄일 수 있도록 만든 틀이다. | ||
[[틀:st]] 혹은 [[틀:스타일]] 로 사용하여도 동일하게 작동한다. | |||
==매개변수== | ==매개변수== | ||
;문법 | ;문법 | ||
<pre>{{ | <pre>{{st | 인자1 |w= |h= |b= |c= |s= |fw= |a= |v= |r= |rc= |i= }}</pre> | ||
* 1번째 인자1, 임의의 값이 있으면 padding=0; margin=-3px -5px; | * 1번째 인자1, 임의의 값이 있으면 padding=0; margin=-3px -5px;에 꽉찬 테이블로 설정된다. | ||
* |w= width로 표, 셀의 폭을 설정한다. 100%, 150px..등 사용할 수 있다. | * '''|w=''' width로 표, 셀의 폭을 설정한다. 100%, 150px..등 사용할 수 있다. | ||
* |h= height로 표, 셀의 높이를 설정한다. | * '''|h=''' height로 표, 셀의 높이를 설정한다. | ||
* | * '''|v=''' vertical-align로 세로 글자를 설정한다. top, middle, bottom (위, 중앙, 아래) 정렬을 사용한다. | ||
* '''|b=''' background-color로 배경색을 설정한다. red, gold..등 사용할 수 있다. | |||
* '''|c=''' color로 글자색을 설정한다. white, blue..등 사용할 수 있다. | |||
* '''|fw=''' font-weight로 글자 강조를 설정한다. 기본 normal, bold등 사용할 수 있다. | |||
* '''|s=''' font-size로 글자 크기를 설정한다. 기본 10pt, 9pt, 90%..등 사용할 수 있다. | |||
* '''|a=''' text-align로 글자 정렬을 설정한다. left, center, right (좌측, 가운데, 우측) 정렬을 한다. | |||
* '''|r=''' 셀 테두리를 정의한다. 1px solid yellow으로 입력하면 선굵기 1에 실선 yello로 표시된다. | |||
* '''|rc=''' 셀 테두리색을 정의한다. red입력하면, 1px solid red로 표시된다. | |||
* '''|i=''' line-height로 줄간격을 설정한다. 160%, 140%, 120%등 | |||
*참고로 <s>스타일 틀로 구현되지 않는 것은 rowspan=, colspan= 이다</s>. | |||
==사용예== | ==사용예== | ||
=== 1번인자 사용=== | |||
<nowiki>{{st|@ }}</nowiki>로 사용하면 가운데 정렬로 꽉찬 테이블로 나타난다. | |||
<pre>{| class="wikitable" | <pre> | ||
{{접기|펴기=11}} | |||
{| class="wikitable" {{st|@ }} | |||
|- | |||
! 제목 !! 제목 | |||
|- | |||
| 예시 || 예시 | |||
|- | |||
| 예시 || 예시 | |||
|} | |||
{{접기 끝}} | |||
</pre> | |||
{{접기|펴기=11}} | |||
{| class="wikitable" {{st|@ }} | |||
|- | |||
! 제목 !! 제목 | |||
|- | |||
| 예시 || 예시 | |||
|- | |||
| 예시 || 예시 | |||
|} | |||
{{접기 끝}} | |||
===옵션없이 사용한 예=== | |||
=== 한셀에 적용하기=== | |||
<nowiki>{{st}}</nowiki> 틀만 사용하면 가운데 정렬 text-align:center; 로 설정된다. | |||
<pre>{| class="wikitable" width="50%" | |||
|- | |||
! 표 제목 !! 표 제목 | |||
|- | |||
| 예시 || {{st}} | 가운데 | |||
|- | |||
| 예시 || 예시 | |||
|} | |||
</pre> | |||
{| class="wikitable" width="50%" | |||
|- | |- | ||
! 표 제목 !! 표 제목 | ! 표 제목 !! 표 제목 | ||
|-{{st}} | |- | ||
| 예시 || {{st}} | 가운데 | |||
|- | |||
| 예시 || 예시 | | 예시 || 예시 | ||
|} | |||
=== 한줄 전체에 적용하기=== | |||
한 줄 시작위치 <code>|-</code> 에 설정시 해당 줄 전체가 gold, yellow색 속성이 적용된다. | |||
<pre>{| class="wikitable" width="50%" | |||
|- | |||
! 표 제목 !! 표 제목 | |||
|- {{st|b=gold}} | |||
| 예시 || 예시 | |||
|- {{st|b=yellow}} | |||
| 예시 || 예시 | |||
|}</pre> | |}</pre> | ||
{| class="wikitable" | |||
{| class="wikitable" width="50%" | |||
|- | |- | ||
! 표 제목 !! 표 제목 | ! 표 제목 !! 표 제목 | ||
|-{{st}} | |- {{st|b=gold}} | ||
| 예시 || 예시 | | 예시 || 예시 | ||
|- {{st|b=yellow}} | |||
| 예시 || 예시 | |||
|} | |} | ||
=== 테이블 전체에 적용하기=== | |||
테이블을 시작하는 위치에 설정하면 테이블 전체가 gold색, 글자크기가 적용된다. | |||
<pre> | |||
{| class="wikitable" {{st |b=gold |s=9pt }} | |||
|- | |||
! 표 제목 !! 표 제목 !! 표 제목 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|}</pre> | |||
{| class="wikitable" {{st |b=gold |s=9pt }} | |||
|- | |||
! 표 제목 !! 표 제목 !! 표 제목 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|} | |||
== | ===테이블 제목 속성 설정하기=== | ||
<pre>①{{st |w=50px|s=13pt}} | 참고로 테이블 제목을 설정하려면 제목을 나타내는 {{코드|!}}를 {{코드|{{!}}}} 으로 바꾸고, 텍스트 강조 bold, 중앙정렬 center, 배경색등을 설정할 수 있다. | ||
<pre> | |||
{| class="wikitable" | |||
|-{{st |a=center |fw=bold |b=#ccf}} | |||
| 표 제목 || 표 제목 || 표 제목 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|} | |||
</pre> | |||
{| class="wikitable" | |||
|-{{st |a=center |fw=bold |b=#ccf }} | |||
| 표 제목 || 표 제목 || 표 제목 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|} | |||
==옵션 사용예== | |||
===w, b 옵션 사용예=== | |||
다음은 ①번 예는 w=50px 넓이와 s=글자크기 지정한 예와 ②번 예는 w=30%와 b= 배경색을 지정한 예이다. | |||
<pre> | |||
①{{st |w=50px|s=13pt}} | |||
→ 사용된 변수는 표 크기를 w=300px, 폰트 크기를 s=8pt로 설정한다. | → 사용된 변수는 표 크기를 w=300px, 폰트 크기를 s=8pt로 설정한다. | ||
48번째 줄: | 149번째 줄: | ||
→ 열의 크기를 전체 표에서 30%로 하고, 배경색을 b=#aff로 지정한다.</pre> | → 열의 크기를 전체 표에서 30%로 하고, 배경색을 b=#aff로 지정한다.</pre> | ||
<pre> | |||
{| class="wikitable" | |||
|- | |||
! {{st |w=50px|s=13pt}}| ① 제목 !! 표 제목 | |||
|- | |||
| 예시 || {{st |w=30%|b=gold}} | ② 예시 | |||
|- | |||
|} | |||
</pre> | |||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
56번째 줄: | 166번째 줄: | ||
|} | |} | ||
=== a, b 옵션 사용예=== | |||
다음은 ③번 예는 w=70% 넓이를 지정한 예와 ④번 예는 a=center 정렬과 b= 배경색을 지정한 예이다. | |||
<pre> | <pre> | ||
③{{st |w=70%}} | ③{{st |w=70%}} | ||
63번째 줄: | 175번째 줄: | ||
→ 글자를 a=center 가운데 정렬하고, 배경색을 b=pink로 지정한다. | → 글자를 a=center 가운데 정렬하고, 배경색을 b=pink로 지정한다. | ||
</pre> | </pre> | ||
<pre> | |||
{| class="wikitable" {{st |w=70%}} | |||
|- | |||
! 제목 !! 표 제목 | |||
|- | |||
| 예시 || {{st |w=30%|b=pink}} | ④ 예시 | |||
|- | |||
|} | |||
</pre> | |||
{| class="wikitable" {{st |w=70%}} | {| class="wikitable" {{st |w=70%}} | ||
|- | |- | ||
72번째 줄: | 192번째 줄: | ||
|} | |} | ||
<pre>{| class="wikitable" ①{{스타일|w=300px|s=8pt}} | ===w, s, b 옵션 상용예=== | ||
다음은 ①번 예는 w= 넓이와 s=글자크기를 지정한 예이고, ②번 예는w=30넓이와 b=배경색을 지정한 예이다. ③은 w=넓이 지정을, ④예는 a=center 정렬과 b=배령색을, ⑤예는 a=left정렬한 예다. | |||
<pre> | |||
{| class="wikitable" ①{{스타일|w=300px|s=8pt}} | |||
|- | |- | ||
! ②{{st |w=30%|b=#aff}} | 번호 | ! ②{{st |w=30%|b=#aff}} | 번호 | ||
96번째 줄: | 220번째 줄: | ||
|} | |} | ||
==border 옵션== | ===border 옵션=== | ||
다음은 <code><nowiki> {{st|w=300px|b=#ddd |r=2px dotted | 다음은 ① <code><nowiki> {{st|w=300px|b=#ddd |r=2px dotted green}}</nowiki></code> 를 표전체에 사용한 경우와, | ||
다른 하나는 셀에서 <code><nowiki>{{st|r=2px solid yellow}}</nowiki></code> 사용한 경우이다. | 다른 하나는 셀에서 ② <code><nowiki>{{st|r=2px solid yellow}}</nowiki></code>와 ③ <code><nowiki>{{st|rc=red}}</nowiki></code> 사용한 경우이다. | ||
<pre> | |||
{| class="" {{st|w=300px|b=#ddd |r=2px dotted red}} | {| class="" {{st|w=300px|b=#ddd |r=2px dotted green}} | ||
|- | |||
! 표 제목 !! {{st|b=#9ff}} | ① 표 제목 !! 표 제목 | |||
|- | |||
| 예시 || 예시 || 예시 | |||
|- | |||
| 예시 || 예시 || {{st|r=2px solid yellow}} | ② 예시 | |||
|- | |||
| {{st|rc=red}} | ③ 예시 || 예시 || 예시 | |||
|} | |||
</pre> | |||
{| class="" {{st|w=300px|b=#ddd |r=2px dotted green}} | |||
|- | |- | ||
! 표 제목 !! {{st|b=#9ff}} | 표 제목 !! 표 제목 | ! 표 제목 !! {{st|b=#9ff}} | ① 표 제목 !! 표 제목 | ||
|- | |- | ||
| 예시 || 예시 || 예시 | | 예시 || 예시 || 예시 | ||
|- | |- | ||
| 예시 || 예시 || {{st|r=2px solid yellow}} | 예시 | | 예시 || 예시 || {{st|r=2px solid yellow}} | ② 예시 | ||
|- | |- | ||
| 예시 || 예시 || 예시 | | {{st|rc=red}} | ③ 예시 || 예시 || 예시 | ||
|} | |} | ||
==복잡한 표에서 사용예== | ===font weight 옵션=== | ||
<pre>{| class="wikitable" {{st|w=100%|b=lightcyan|c=darkred}} | 이 옵션 fw은 테두리색만 지정할 경우에 쓰는 매개변수이다. 두번째 줄에 fw 매개변수의 옵션을 bold로 설정한 예이다. | ||
{| class="wikitable" {{st|w=300px}} | |||
|- | |||
! 표 제목 !! 표 제목 | |||
|- | |||
| 예시 || 예시 | |||
|- {{st|fw=bold}} | |||
| 내용1 || 내용2 | |||
|- | |||
| 내용1 || 내용2 | |||
|} | |||
===복잡한 표에서 사용예=== | |||
다음 예는 v=세로 정열을 포함하여 여러 옵션들이 함께 사용되고 있다. | |||
<pre> | |||
{| class="wikitable" {{st|w=100%|b=lightcyan|c=darkred}} | |||
|- | |- | ||
! 표 제목 !! 표 제목 !! 표 제목 | ! 표 제목 !! 표 제목 !! 표 제목 | ||
|- | |- | ||
| rowspan=3 {{st|w=30%|v=bottom}}| 예시1 | | rowspan=3 {{st|w=30%|v=bottom}}| 예시1 | ||
|{{st|w=40|b=gold}}| 예시2 | |||
|{{st|c=blue|b=gold}}| 예시3 | |||
|- | |- | ||
| {{st|a=right|c=red}}| 예시4 | | {{st|a=right|c=red}}| 예시4 | ||
|{{st|a=center|c=green}}| 예시5 | |||
|- | |- | ||
| {{st|a=right|c=red}}| 예시6 | | {{st|a=right|c=red}}| 예시6 | ||
|}</pre> | |{{st|a=center|c=green}}| 예시7 | ||
|} | |||
</pre> | |||
{| class="wikitable" {{st|w=100%|b=lightcyan|c=darkred}} | {| class="wikitable" {{st|w=100%|b=lightcyan|c=darkred}} | ||
|- | |- | ||
! 표 제목 !! 표 제목 !! 표 제목 | ! 표 제목 !! 표 제목 !! 표 제목 | ||
|- | |- | ||
| rowspan=3 {{st|w=30%|v=bottom}}| 예시1 | | rowspan=3 {{st|w=30%|v=bottom}}| 예시1 | ||
|{{st|w=40|b=gold}}| 예시2 ||{{st|c=blue|b=gold}}| 예시3 | |||
|- | |- | ||
| {{st|a=right|c=red}}| 예시4 ||{{st|a=center|c=green}}| 예시5 | | {{st|a=right|c=red}}| 예시4 ||{{st|a=center|c=green}}| 예시5 | ||
133번째 줄: | 291번째 줄: | ||
| {{st|a=right|c=red}}| 예시6 ||{{st|a=center|c=green}}| 예시7 | | {{st|a=right|c=red}}| 예시6 ||{{st|a=center|c=green}}| 예시7 | ||
|} | |} | ||
==함께보기== | |||
*[[틀:코드]] | |||
*[[틀:st]] | |||
*[[틀:sp]] |
2024년 9월 10일 (화) 15:28 기준 최신판
span, div 등의 태그나 태이블(표)에서 스타일(style) 속성 지정을 쉽게 하도록 도와주는 틀이다.
사용용도
특히 모바일에서 스타일 지정시 오타등으로 오류를 줄일 수 있도록 만든 틀이다.
틀:st 혹은 틀:스타일 로 사용하여도 동일하게 작동한다.
매개변수
- 문법
{{st | 인자1 |w= |h= |b= |c= |s= |fw= |a= |v= |r= |rc= |i= }}
- 1번째 인자1, 임의의 값이 있으면 padding=0; margin=-3px -5px;에 꽉찬 테이블로 설정된다.
- |w= width로 표, 셀의 폭을 설정한다. 100%, 150px..등 사용할 수 있다.
- |h= height로 표, 셀의 높이를 설정한다.
- |v= vertical-align로 세로 글자를 설정한다. top, middle, bottom (위, 중앙, 아래) 정렬을 사용한다.
- |b= background-color로 배경색을 설정한다. red, gold..등 사용할 수 있다.
- |c= color로 글자색을 설정한다. white, blue..등 사용할 수 있다.
- |fw= font-weight로 글자 강조를 설정한다. 기본 normal, bold등 사용할 수 있다.
- |s= font-size로 글자 크기를 설정한다. 기본 10pt, 9pt, 90%..등 사용할 수 있다.
- |a= text-align로 글자 정렬을 설정한다. left, center, right (좌측, 가운데, 우측) 정렬을 한다.
- |r= 셀 테두리를 정의한다. 1px solid yellow으로 입력하면 선굵기 1에 실선 yello로 표시된다.
- |rc= 셀 테두리색을 정의한다. red입력하면, 1px solid red로 표시된다.
- |i= line-height로 줄간격을 설정한다. 160%, 140%, 120%등
- 참고로
스타일 틀로 구현되지 않는 것은 rowspan=, colspan= 이다.
사용예
1번인자 사용
{{st|@ }}로 사용하면 가운데 정렬로 꽉찬 테이블로 나타난다.
{{접기|펴기=11}} {| class="wikitable" {{st|@ }} |- ! 제목 !! 제목 |- | 예시 || 예시 |- | 예시 || 예시 |} {{접기 끝}}
접기·펼치기를 눌러 주세요. |
||||||
---|---|---|---|---|---|---|
|
옵션없이 사용한 예
한셀에 적용하기
{{st}} 틀만 사용하면 가운데 정렬 text-align:center; 로 설정된다.
{| class="wikitable" width="50%" |- ! 표 제목 !! 표 제목 |- | 예시 || {{st}} | 가운데 |- | 예시 || 예시 |}
표 제목 | 표 제목 |
---|---|
예시 | 가운데 |
예시 | 예시 |
한줄 전체에 적용하기
한 줄 시작위치 |-
에 설정시 해당 줄 전체가 gold, yellow색 속성이 적용된다.
{| class="wikitable" width="50%" |- ! 표 제목 !! 표 제목 |- {{st|b=gold}} | 예시 || 예시 |- {{st|b=yellow}} | 예시 || 예시 |}
표 제목 | 표 제목 |
---|---|
예시 | 예시 |
예시 | 예시 |
테이블 전체에 적용하기
테이블을 시작하는 위치에 설정하면 테이블 전체가 gold색, 글자크기가 적용된다.
{| class="wikitable" {{st |b=gold |s=9pt }} |- ! 표 제목 !! 표 제목 !! 표 제목 |- | 예시 || 예시 || 예시 |- | 예시 || 예시 || 예시 |}
표 제목 | 표 제목 | 표 제목 |
---|---|---|
예시 | 예시 | 예시 |
예시 | 예시 | 예시 |
테이블 제목 속성 설정하기
참고로 테이블 제목을 설정하려면 제목을 나타내는 ! 를 | 으로 바꾸고, 텍스트 강조 bold, 중앙정렬 center, 배경색등을 설정할 수 있다.
{| class="wikitable" |-{{st |a=center |fw=bold |b=#ccf}} | 표 제목 || 표 제목 || 표 제목 |- | 예시 || 예시 || 예시 |- | 예시 || 예시 || 예시 |}
표 제목 | 표 제목 | 표 제목 |
예시 | 예시 | 예시 |
예시 | 예시 | 예시 |
옵션 사용예
w, b 옵션 사용예
다음은 ①번 예는 w=50px 넓이와 s=글자크기 지정한 예와 ②번 예는 w=30%와 b= 배경색을 지정한 예이다.
①{{st |w=50px|s=13pt}} → 사용된 변수는 표 크기를 w=300px, 폰트 크기를 s=8pt로 설정한다. ②{{st |w=30%|b=gold}} → 열의 크기를 전체 표에서 30%로 하고, 배경색을 b=#aff로 지정한다.
{| class="wikitable" |- ! {{st |w=50px|s=13pt}}| ① 제목 !! 표 제목 |- | 예시 || {{st |w=30%|b=gold}} | ② 예시 |- |}
① 제목 | 표 제목 |
---|---|
예시 | ② 예시 |
a, b 옵션 사용예
다음은 ③번 예는 w=70% 넓이를 지정한 예와 ④번 예는 a=center 정렬과 b= 배경색을 지정한 예이다.
③{{st |w=70%}} → 표의 크기를 전체 영역의 70%로 지정한다. ④{{st |a=center|b=pink}} → 글자를 a=center 가운데 정렬하고, 배경색을 b=pink로 지정한다.
{| class="wikitable" {{st |w=70%}} |- ! 제목 !! 표 제목 |- | 예시 || {{st |w=30%|b=pink}} | ④ 예시 |- |}
제목 | 표 제목 |
---|---|
예시 | ④ 예시 |
w, s, b 옵션 상용예
다음은 ①번 예는 w= 넓이와 s=글자크기를 지정한 예이고, ②번 예는w=30넓이와 b=배경색을 지정한 예이다. ③은 w=넓이 지정을, ④예는 a=center 정렬과 b=배령색을, ⑤예는 a=left정렬한 예다.
{| class="wikitable" ①{{스타일|w=300px|s=8pt}} |- ! ②{{st |w=30%|b=#aff}} | 번호 ! ③{{st |w=70%}} | 나라 |- | ④{{st |a=center|b=#aff}} | 1 | ⑤{{st |a=left|}} | 가나, 가봉, 그리스 |- | {{st |a=center||b=#aff}} | 2 | {{스타일|a=left|}} | 싱가포르, 일본, 필리핀 |}
② 번호 | ③ 나라 |
---|---|
④ 1 | ⑤ 가나, 가봉, 그리스 |
2 | 싱가포르, 일본, 필리핀 |
border 옵션
다음은 ① {{st|w=300px|b=#ddd |r=2px dotted green}}
를 표전체에 사용한 경우와,
다른 하나는 셀에서 ② {{st|r=2px solid yellow}}
와 ③ {{st|rc=red}}
사용한 경우이다.
{| class="" {{st|w=300px|b=#ddd |r=2px dotted green}} |- ! 표 제목 !! {{st|b=#9ff}} | ① 표 제목 !! 표 제목 |- | 예시 || 예시 || 예시 |- | 예시 || 예시 || {{st|r=2px solid yellow}} | ② 예시 |- | {{st|rc=red}} | ③ 예시 || 예시 || 예시 |}
표 제목 | ① 표 제목 | 표 제목 |
---|---|---|
예시 | 예시 | 예시 |
예시 | 예시 | ② 예시 |
③ 예시 | 예시 | 예시 |
font weight 옵션
이 옵션 fw은 테두리색만 지정할 경우에 쓰는 매개변수이다. 두번째 줄에 fw 매개변수의 옵션을 bold로 설정한 예이다.
표 제목 | 표 제목 |
---|---|
예시 | 예시 |
내용1 | 내용2 |
내용1 | 내용2 |
복잡한 표에서 사용예
다음 예는 v=세로 정열을 포함하여 여러 옵션들이 함께 사용되고 있다.
{| class="wikitable" {{st|w=100%|b=lightcyan|c=darkred}} |- ! 표 제목 !! 표 제목 !! 표 제목 |- | rowspan=3 {{st|w=30%|v=bottom}}| 예시1 |{{st|w=40|b=gold}}| 예시2 |{{st|c=blue|b=gold}}| 예시3 |- | {{st|a=right|c=red}}| 예시4 |{{st|a=center|c=green}}| 예시5 |- | {{st|a=right|c=red}}| 예시6 |{{st|a=center|c=green}}| 예시7 |}
표 제목 | 표 제목 | 표 제목 |
---|---|---|
예시1 | 예시2 | 예시3 |
예시4 | 예시5 | |
예시6 | 예시7 |