틀:예시: 두 판 사이의 차이
(새 문서: <includeonly><onlyinclude>{{#ifeq:{{#var:templateExampleCSSEnabled}}|1||<!-- -->{{#CSS: @media screen and (max-width: 768px) { .frm-code-example-wrapper{ grid-template-columns:1fr!important; } } .frm-code-example-wrapper{ display:grid; grid-template-columns:1fr 1fr; width:100%; gap:1rem; } .frm-code-example-wrapper > *{ min-width:0px; background:#fff; border-radius:4px; box-shadow: 0 5px 5px -5px #ddd; } .frm-code-example-wrapper .f...) |
편집 요약 없음 |
||
| (사용자 2명의 중간 판 15개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
{{소도구|defaultTemplate}} | |||
<includeonly><onlyinclude>{{#ifeq:{{#var:templateExampleCSSEnabled}}|1||<!-- | <includeonly><onlyinclude>{{#ifeq:{{#var:templateExampleCSSEnabled}}|1||<!-- | ||
-->{{#CSS: | -->{{#CSS: | ||
| 5번째 줄: | 6번째 줄: | ||
} | } | ||
.frm-code-example-wrapper{ | .frm-code-example-wrapper{ | ||
display:grid; grid-template-columns:1fr 1fr; width:100%; gap:1rem; | display:grid; grid-template-columns:1fr 1fr; width:100%; gap:1rem; margin:8px 0; | ||
} | } | ||
.frm-code-example-wrapper > *{ | .frm-code-example-wrapper > *{ | ||
| 12번째 줄: | 13번째 줄: | ||
border-radius:4px; | border-radius:4px; | ||
box-shadow: 0 5px 5px -5px #ddd; | box-shadow: 0 5px 5px -5px #ddd; | ||
border:1px solid #ddd; | |||
} | } | ||
.frm-code-example-wrapper .frm-content{ | .frm-code-example-wrapper .frm-content{ | ||
padding:1rem; | padding:1rem; | ||
} | |||
.frm-code-example-wrapper > .frm-code{ | |||
background-color: #374151; | |||
position: relative; | |||
} | } | ||
| 21번째 줄: | 28번째 줄: | ||
font-family:Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; | font-family:Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; | ||
color: #fff!important; | color: #fff!important; | ||
white-space:break-spaces; | |||
} | } | ||
.frm-code-example-wrapper .frm-title{ | .frm-code-example-wrapper .frm-title{ | ||
font-weight:bold; | font-weight:bold; | ||
padding:0.5em; | |||
font-size: 1.5em; | font-size: 1.5em; | ||
background-color: #fff; | |||
} | |||
.frm-code-example-wrapper .frm-btn{ | |||
position:absolute; | |||
right:8px; | |||
bottom:8px; | |||
color:#ffffff66; | |||
opacity:1; | |||
cursor:pointer; | |||
transition:all 0.2s ease-in-out; | |||
} | |||
.frm-code-example-wrapper .frm-btn:hover{ | |||
opacity:#ffffff00; | |||
} | |||
.frm-code-example-wrapper .tooltip .message{ | |||
padding:4px 8px; | |||
color:#fff; | |||
background:#000; | |||
display:inline-block; | |||
position:absolute; | |||
top:100%; | |||
right:0%; | |||
font-size:0.8em; | |||
transition:all 0.2s ease-in-out; | |||
width:8em; | |||
visibility:hidden; | |||
opacity:0; | |||
} | |||
.frm-code-example-wrapper .tooltip:hover .message{ | |||
visibility:visible; | |||
opacity:0.8; | |||
} | } | ||
}}<!-- | }}<!-- | ||
-->{{#vardefine:templateExampleCSSEnabled|1}}<!-- | -->{{#vardefine:templateExampleCSSEnabled|1}}}}<!-- | ||
--><div class="frm-code-example-wrapper"> | --><div class="frm-code-example-wrapper"> | ||
<div class="frm-code"> | <div class="frm-code"> | ||
<div class="frm-title">코드</div> | <div class="frm-title">{{아이콘|code_blocks}} 코드</div> | ||
<div class="frm-content">{{{1|}}}</div> | <div class="frm-content">{{{1|}}}</div> | ||
<div class="frm-btn frm-code-execute"><div class="tooltip">{{아이콘|code}}<div class="message">낙서장에서 확인</div></div></div> | |||
</div> | </div> | ||
<div class="frm-result"> | <div class="frm-result"> | ||
<div class="frm-title">결과</div> | <div class="frm-title">{{아이콘|description}} 결과</div> | ||
<div class="frm-content">{{{2|}}}</div> | <div class="frm-content">{{{2|{{#invoke:IIFE|{{{1|}}}}}}}}</div> | ||
</div> | </div> | ||
</div> | </div></onlyinclude></includeonly> | ||
틀 설명이나 도움말 문서에 사용할만한 예시틀입니다. 코드부분에는 [[괴:적절|적절]]한 nowiki 처리가 필요합니다. | 틀 설명이나 도움말 문서에 사용할만한 예시틀입니다. 코드부분에는 [[괴:적절|적절]]한 nowiki 처리가 필요합니다. | ||
== 예시 == | == 예시 == | ||
=== 첫번째 파라미터만 사용하는 예시 === | |||
{{예시|<nowiki>{{USERNAME|너}}</nowiki>}} | |||
<pre>{{예시|<now<nowiki></nowiki>iki>{{USERNAME|너}}</now<nowiki></nowiki>iki>}}</pre> | |||
=== 두번째 파라미터를 사용하는 예시 === | |||
{{예시|<nowiki>{{USERNAME|너}}</nowiki>|{{USERNAME|너}}}} | {{예시|<nowiki>{{USERNAME|너}}</nowiki>|{{USERNAME|너}}}} | ||
<pre>{{예시|<now<nowiki></nowiki>iki>{{USERNAME|너}}</now<nowiki></nowiki>iki>|{{USERNAME|너}}}}</pre> | <pre>{{예시|<now<nowiki></nowiki>iki>{{USERNAME|너}}</now<nowiki></nowiki>iki>|{{USERNAME|너}}}}</pre> | ||
2023년 9월 7일 (목) 11:45 기준 최신판
틀 설명이나 도움말 문서에 사용할만한 예시틀입니다. 코드부분에는 적절한 nowiki 처리가 필요합니다.
예시[원본 편집]
첫번째 파라미터만 사용하는 예시[원본 편집]
code_blocks 코드
{{USERNAME|너}}
code
description 결과
너
{{예시|<nowiki>{{USERNAME|너}}</nowiki>}}
두번째 파라미터를 사용하는 예시[원본 편집]
code_blocks 코드
{{USERNAME|너}}
code
description 결과
너
{{예시|<nowiki>{{USERNAME|너}}</nowiki>|{{USERNAME|너}}}}