틀:예시: 두 판 사이의 차이
(틀 전체 세로 마진 처리) |
편집 요약 없음 |
||
| (사용자 2명의 중간 판 7개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
{{소도구|defaultTemplate}} | |||
<includeonly><onlyinclude>{{#ifeq:{{#var:templateExampleCSSEnabled}}|1||<!-- | <includeonly><onlyinclude>{{#ifeq:{{#var:templateExampleCSSEnabled}}|1||<!-- | ||
-->{{#CSS: | -->{{#CSS: | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.frm-code-example-wrapper{ grid-template-columns:1fr!important | .frm-code-example-wrapper{ grid-template-columns:1fr!important; } | ||
} | } | ||
.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 > *{ | ||
| 21번째 줄: | 22번째 줄: | ||
.frm-code-example-wrapper > .frm-code{ | .frm-code-example-wrapper > .frm-code{ | ||
background-color: #374151; | background-color: #374151; | ||
position: relative; | |||
} | } | ||
.frm-code-example-wrapper > .frm-code .frm-content{ | .frm-code-example-wrapper > .frm-code .frm-content{ | ||
font-family:Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; | font-family:Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; | ||
| 33번째 줄: | 36번째 줄: | ||
font-size: 1.5em; | font-size: 1.5em; | ||
background-color: #fff; | 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; | |||
} | } | ||
}}<!-- | }}<!-- | ||
| 40번째 줄: | 77번째 줄: | ||
<div class="frm-title">{{아이콘|code_blocks}} 코드</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">{{아이콘|description}} 결과</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></onlyinclude></includeonly> | </div></onlyinclude></includeonly> | ||
| 49번째 줄: | 87번째 줄: | ||
== 예시 == | == 예시 == | ||
=== 첫번째 파라미터만 사용하는 예시 === | |||
{{예시|<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|너}}}}