(새 문서: {{namucat|김찬/제작한 틀}} {{틀 도움}} <onlyinclude><includeonly><div style="display: inline-block; width: {{{크기|200px}}}; height: {{{크기|200px}}}; border-radius: 50%;...) |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/제작한 틀}} | {{namucat|김찬/제작한 틀}} | ||
{{틀 도움}} | {{틀 도움}} | ||
<onlyinclude><includeonly><div style="display: inline-block; width: {{{크기|200px}}}; height: {{{크기|200px}}}; border-radius: 50%; background: <!-- | <onlyinclude><includeonly><div style="{{#switch:{{{정렬|}}}|가운데 = text-align: center;|오른쪽 = text-align: right;|text-align: left;}}"><div style="display: inline-block; width: {{{크기|200px}}}; height: {{{크기|200px}}}; border-radius: 50%; background: <!-- | ||
-->{{#if:{{{3번 색|}}}||conic-gradient(<!-- | -->{{#if:{{{3번 색|}}}||conic-gradient(<!-- | ||
-->{{{1번 색|}}} 0% {{{1번 수치|}}}%, <!-- | -->{{{1번 색|}}} 0% {{{1번 수치|}}}%, <!-- | ||
-->{{{2번 색|}}} {{{1번 수치|}}}% | -->{{{2번 색|}}} {{{1번 수치|}}}% {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}}}%);}}<!-- | ||
-->{{#if:{{{3번 색|}}}|{{#if:{{{4번 색|}}}||conic-gradient(<!-- | -->{{#if:{{{3번 색|}}}|{{#if:{{{4번 색|}}}||conic-gradient(<!-- | ||
| 22번째 줄: | 22번째 줄: | ||
-->{{{3번 색|}}} {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}}}% {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}}}%, <!-- | -->{{{3번 색|}}} {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}}}% {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}}}%, <!-- | ||
-->{{{4번 색|}}} {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}}}% {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}+{{{4번 수치|}}}}}%, <!-- | -->{{{4번 색|}}} {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}}}% {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}+{{{4번 수치|}}}}}%, <!-- | ||
-->{{{5번 색|}}} {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}+{{{4번 수치|}}}}}% {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}+{{{4번 수치|}}}+{{{5번 수치|}}}}}%);}}|}}"></div></includeonly></onlyinclude> | -->{{{5번 색|}}} {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}+{{{4번 수치|}}}}}% {{#expr:{{{1번 수치|}}}+{{{2번 수치|}}}+{{{3번 수치|}}}+{{{4번 수치|}}}+{{{5번 수치|}}}}}%);}}|}}"></div></div></includeonly></onlyinclude> | ||
{{목차제거}} | |||
== 설명 == | == 설명 == | ||
HTML의 conic-gradient를 이용해 원형 그래프를 생성하는 틀입니다. | HTML의 conic-gradient를 이용해 원형 그래프를 생성하는 틀입니다. | ||
| 28번째 줄: | 29번째 줄: | ||
== 사용법 == | == 사용법 == | ||
<pre>{{원형 그래프 | <pre>{{원형 그래프 | ||
|정렬= | |||
|크기= | |크기= | ||
|1번 색= | |1번 색= | ||
| 39번째 줄: | 41번째 줄: | ||
* 모든 수치의 합은 반드시 100이 되어야 하며 단위 없이 숫자만 입력하면 됩니다. | * 모든 수치의 합은 반드시 100이 되어야 하며 단위 없이 숫자만 입력하면 됩니다. | ||
* 크기 변수는 선택이며 px 단위로 너비와 높이를 조정할 수 있습니다. 기본값은 200px입니다. %로도 입력할 수 있으나 권장하지 않습니다. | * 크기 변수는 선택이며 px 단위로 너비와 높이를 조정할 수 있습니다. 기본값은 200px입니다. %로도 입력할 수 있으나 권장하지 않습니다. | ||
* 정렬 변수는 선택이며, 가운데나 오른쪽을 입력하여 위치를 조정할 수 있습니다. 기본값은 왼쪽 정렬입니다. | |||
== 사용 예제 == | |||
{|class="wikitable" style="width: 100%; table-layout: fixed;" | |||
|- | |||
!문법||결과 | |||
|- | |||
|<pre>{{원형 그래프 | |||
|정렬=가운데 | |||
|크기=150px | |||
|1번 색=green | |||
|1번 수치=30 | |||
|2번 색=blue | |||
|2번 수치=70 | |||
}}</pre> | |||
|{{원형 그래프 | |||
|정렬=가운데 | |||
|크기=150px | |||
|1번 색=green | |||
|1번 수치=30 | |||
|2번 색=blue | |||
|2번 수치=70 | |||
}} | |||
|- | |||
|<pre>{{원형 그래프 | |||
|정렬=가운데 | |||
|크기=150px | |||
|1번 색=green | |||
|1번 수치=30 | |||
|2번 색=blue | |||
|2번 수치=45 | |||
|3번 색=orange | |||
|3번 수치=25 | |||
}}</pre> | |||
|{{원형 그래프 | |||
|정렬=가운데 | |||
|크기=150px | |||
|1번 색=green | |||
|1번 수치=30 | |||
|2번 색=blue | |||
|2번 수치=45 | |||
|3번 색=orange | |||
|3번 수치=25 | |||
}} | |||
|} | |||
== 둘러보기 == | == 둘러보기 == | ||
{{김찬 제작 틀}} | {{김찬 제작 틀}} | ||
2023년 4월 21일 (금) 17:48 판
| 틀:원형 그래프 | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
설명
HTML의 conic-gradient를 이용해 원형 그래프를 생성하는 틀입니다.
사용법
{{원형 그래프
|정렬=
|크기=
|1번 색=
|1번 수치=
|2번 색=
|2번 수치=
︙
}}
- 현재는 5개, 즉 5번 색과 수치까지만 입력할 수 있습니다.
- 모든 수치의 합은 반드시 100이 되어야 하며 단위 없이 숫자만 입력하면 됩니다.
- 크기 변수는 선택이며 px 단위로 너비와 높이를 조정할 수 있습니다. 기본값은 200px입니다. %로도 입력할 수 있으나 권장하지 않습니다.
- 정렬 변수는 선택이며, 가운데나 오른쪽을 입력하여 위치를 조정할 수 있습니다. 기본값은 왼쪽 정렬입니다.
사용 예제
| 문법 | 결과 |
|---|---|
{{원형 그래프
|정렬=가운데
|크기=150px
|1번 색=green
|1번 수치=30
|2번 색=blue
|2번 수치=70
}}
|
|
{{원형 그래프
|정렬=가운데
|크기=150px
|1번 색=green
|1번 수치=30
|2번 색=blue
|2번 수치=45
|3번 색=orange
|3번 수치=25
}}
|
