틀:스타일

가운데 정렬

보기 · 편집

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
|}