틀:예시 문서 원본 보기

{{소도구|defaultTemplate}}
<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; margin:8px 0;
  }    
  .frm-code-example-wrapper > *{
    min-width:0px;
    background:#fff;
    border-radius:4px;
    box-shadow: 0 5px 5px -5px #ddd;
    border:1px solid #ddd;
  }

  .frm-code-example-wrapper .frm-content{
    padding:1rem;
  }

  .frm-code-example-wrapper > .frm-code{
    background-color: #374151;
    position: relative;
  }

  .frm-code-example-wrapper > .frm-code .frm-content{
    font-family:Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important;
    color: #fff!important;
    white-space:break-spaces;
  }

  .frm-code-example-wrapper .frm-title{
    font-weight:bold;
    padding:0.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}}}}<!--
--><div class="frm-code-example-wrapper">
<div class="frm-code">
    <div class="frm-title">{{아이콘|code_blocks}} 코드</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 class="frm-result">
    <div class="frm-title">{{아이콘|description}} 결과</div>
    <div class="frm-content">{{{2|{{#invoke:IIFE|{{{1|}}}}}}}}</div>
</div>
</div></onlyinclude></includeonly>
틀 설명이나 도움말 문서에 사용할만한 예시틀입니다. 코드부분에는 [[괴:적절|적절]]한 nowiki 처리가 필요합니다.

== 예시 ==
=== 첫번째 파라미터만 사용하는 예시 ===
{{예시|<nowiki>{{USERNAME|너}}</nowiki>}}
<pre>{{예시|<now<nowiki></nowiki>iki>{{USERNAME|너}}</now<nowiki></nowiki>iki>}}</pre>

=== 두번째 파라미터를 사용하는 예시 ===
{{예시|<nowiki>{{USERNAME|너}}</nowiki>|{{USERNAME|너}}}}
<pre>{{예시|<now<nowiki></nowiki>iki>{{USERNAME|너}}</now<nowiki></nowiki>iki>|{{USERNAME|너}}}}</pre>