(새 문서: {{namucat|김찬/제작한 틀}} {{틀 도움|hr=none}} <onlyinclude><includeonly><div style="margin: 12px 0; text-align: {{#switch:{{{정렬|}}}|가운데 = center|오른쪽 = right|...) |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/제작한 틀}} | {{namucat|김찬/제작한 틀}} | ||
{{틀 도움|hr=none}} | {{틀 도움|hr=none}} | ||
<onlyinclude><includeonly><div style="margin: 12px 0; text-align: {{#switch:{{{정렬|}}}|가운데 = center|오른쪽 = right|left}};"><div style="display: inline-block; text-align: center; width: {{{너비|200px}}}; min-height: {{{높이|3px}}};"><div title="{{{1|}}} {{{2|}}}%" style="display: inline-block; width: {{{너비|200px}}}; min-height: {{{높이|3px}}}; border: solid {{{테두리|1px #e1e8ed}}}; background: linear-gradient(to right, {{{1|}}} {{{2|}}}%, {{{배경색|#f5f5f5}}} 0);"></div>{{#if:{{{설명|}}}|<br>{{{설명|}}}|}}</div></div></includeonly></onlyinclude> | <onlyinclude><includeonly><div style="{{#ifeq:{{{margin|}}}|none||margin: 12px 0;}} text-align: {{#switch:{{{정렬|}}}|가운데 = center|오른쪽 = right|left}};"><div style="display: inline-block; text-align: center; width: {{{너비|200px}}}; min-height: {{{높이|3px}}};"><div title="{{{1|}}} {{{2|}}}%" style="display: inline-block; width: {{{너비|200px}}}; min-height: {{{높이|3px}}}; border: solid {{{테두리|1px #e1e8ed}}}; background: linear-gradient(to right, {{{1|}}} {{{2|}}}%, {{{배경색|#f5f5f5}}} 0);"></div>{{#if:{{{설명|}}}|<br>{{{설명|}}}|}}</div></div></includeonly></onlyinclude> | ||
{{목차제거}} | {{목차제거}} | ||
== 설명 == | == 설명 == | ||
2023년 7월 24일 (월) 15:25 기준 최신판
| 틀:막대 그래프 | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
설명
HTML의 linear-gradient를 이용해 막대 그래프를 생성하는 틀입니다.
사용법
기본적인 사용법
{{막대 그래프|색깔|수치}}
수치에는 %를 입력할 필요 없이 숫자만 입력하면 됩니다.
변수 설명
| 변수 | 설명 |
|---|---|
| 정렬 | 가운데나 오른쪽을 넣어 그래프를 정렬할 수 있습니다. |
| 너비 | 그래프의 너비를 조정합니다. 단위를 함께 입력해야 합니다. 기본값은 200px입니다. |
| 높이 | 그래프의 높이를 조정합니다. 단위를 함께 입력해야 합니다. 기본값은 3px입니다. |
| 테두리 | [두께] [색깔]로 입력합니다. 모양은 solid로 고정됩니다. 기본값은 1px #e1e8ed입니다. |
| 배경색 | 그래프가 차지하지 않은 나머지 부분의 배경색입니다. 기본값은 #f5f5f5입니다. |
| 설명 | 그래프의 하단에 짧은 설명을 덧붙입니다. |
사용 예제
| 문법 | 결과 |
|---|---|
red 30%의 그래프
{{막대 그래프|red|30|너비=100%}}
|
