틀:예시: 두 판 사이의 차이
(낙서장에서 보기용 아이콘 임시 추가) |
(낙서장에서 보기용 아이콘 디자인 추가, 아직 공개x) |
||
41번째 줄: | 41번째 줄: | ||
right:8px; | right:8px; | ||
bottom:8px; | bottom:8px; | ||
color:# | color:#ffffff66; | ||
opacity: | opacity:1; | ||
cursor:pointer; | cursor:pointer; | ||
transition: | transition:all 0.2s ease-in-out; | ||
display:none; | display:none; | ||
} | } | ||
.frm-code-example-wrapper .frm-btn:hover{ | .frm-code-example-wrapper .frm-btn:hover{ | ||
opacity: | 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; | |||
} | } | ||
}}<!-- | }}<!-- | ||
57번째 줄: | 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-example">{{아이콘|code}}</div> | <div class="frm-btn frm-example"><div class="tooltip">{{아이콘|code}}<div class="message">낙서장에서 확인</div></div></div> | ||
</div> | </div> | ||
<div class="frm-result"> | <div class="frm-result"> |
2023년 9월 5일 (화) 15:53 판
틀 설명이나 도움말 문서에 사용할만한 예시틀입니다. 코드부분에는 적절한 nowiki 처리가 필요합니다.
예시
code_blocks 코드
{{USERNAME|너}}
code
description 결과
너
{{예시|<nowiki>{{USERNAME|너}}</nowiki>|{{USERNAME|너}}}}