틀:Div col/설명문서 문서 원본 보기

<!-- 'includeonly'에 있는 별 표(★)는 지워 주십시오. -->
<!-- PLEASE DELETE STAR MARK(★) THAT IS IN ‘INCLUDEONLY’. -->
{{설명문서 안내}}
<!-- 이 줄 아래부터 목표로 하는 틀에 대한 설명문서를 작성하십시오. -->
<!-- DOCUMENTATION HERE. -->

이 틀은 문장이나 목록를 컬럼(단)으로 만드는데 사용합니다. 표 태그를 이용하여 단을 구현하는 경우, {{틀|col-begin}}, {{틀|col-end}}를 이용하시기 바랍니다.

== 변수 ==
; small=yes
: 글꼴 크기 작게 (80 %)입니다. 기본값은 "no" 입니다.
; rules
: 단과 단 사이에 새로 줄을 표시합니다. 줄의 굵기는 변수 gap의 값에 의해 정해집니다.
; class
: CSS의 클래스 값
; colwidth
: 열의 너비를 지정합니다. px, em, % 등 단위를 지정합니다.
; gap
: 단과 단 사이의 간격을 정합니다. 이 값은 rules=yes에 의해 표시되는 줄의 굵기의 값이기도 합니다.
; style
: CSS의 style 값
; content
: 단으로 변환하여 보여줄 내용의 값입니다. content 변수 이름 없이 <nowiki>|</nowiki>이후로 입력된 내용은 content의 값에 해당합니다.

colwidth의 값에 따라 단을 나누기에 값이 없으면, 아무련 효과가 없습니다. 이 틀이 작동하려면 반드시 colwidth에 값을 넣으셔야 합니다.

== 예제 ==
=== colwidth ===
{{Div col|colwidth=48%}}
<pre>{{div col|colwidth=10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}</pre>

;표시:
{{div col|colwidth=10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
{{Div col end}}

=== small ===
{{Div col|colwidth=48%}}
<pre>{{Div col|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}</pre>

;표시:
{{Div col|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
{{Div col end}}

== 틀데이터 ==
<templatedata>
{
	"params": {
		"small": {
			"description": "내용의 크기를 80% 작게 표시해줍니다. CSS 변수값은 font-size:small 입니다.",
			"example": "small=yes",
			"type": "boolean",
			"default": "no"
		},
		"rules": {
			"description": "단과 단 사이에 새로 줄을 표시합니다. 줄의 굵기는 변수 gap의 값에 의해 정해집니다.",
			"example": "rules=yes",
			"type": "boolean",
			"default": "no",
			"autovalue": "no"
		},
		"class": {
			"description": "CSS의 클래스 값",
			"type": "content"
		},
		"colwidth": {
			"description": "열의 너비를 px, em, % 등의 단위로 지정합니다.",
			"example": "200px, 14rem 8em, 50%",
			"type": "number",
			"required": true
		},
		"gap": {
			"description": "단과 단 사이의 간격을 정합니다. 이 값은 rules=yes에 의해 표시되는 줄의 굵기의 값이기도 합니다.",
			"type": "number"
		},
		"style": {
			"description": "CSS의 style 값",
			"type": "content"
		},
		"content": {
			"description": "단으로 변환하여 보여줄 내용의 값입니다. 원본 편집에서 변수명 없이 내용을 넣었다면 이 변수에 값을 넣은 것으로 간주합니다.",
			"type": "content",
			"required": true
		}
	},
	"format": "inline",
	"description": "이 틀은 문장 혹은 목록 등의 다단으로 표시 처리할 내용을 div 태그에 CSS style 변수 column-..., break-...를 적용하여 출력합니다.",
	"paramOrder": [
		"colwidth",
		"small",
		"rules",
		"gap",
		"content",
		"class",
		"style"
	]
}
</templatedata>

==기술적 문제==
이 틀은 다음의 CSS 속성을 지원하는 브라우저에서 멀티 컬럼을 생성합니다:
* ''-moz-column-count'' ([[파이어폭스]]와 같은 [[모질라]]/[[게코 (레이아웃 엔진)|게코]] 기반의 브라우저들)
* ''-webkit-column-count'' ([[사파리 (웹 브라우저)|사파리]]와 같은 [[WebKit]] 기반의 브라우저)
* ''column-count'' ([[CSS|CSS3]] 호환 브라우저; [http://www.w3.org/TR/css3-multicol/ CSS3 module: Multi-column layout] 참조)

따라서, 이 틀은 [[인터넷 익스플로러 10]]미만이나 [[오페라 (웹 브라우저)|오페라 11.1]]미만의 버전에서는 작동하지 않습니다.

==같이 보기==
* {{tl|col-begin}}

<includeonly>
[[분류:스프레드시트 틀]]
</includeonly>