[gabriel] Gabriel 스킨에서 사용하면 유용한 태그
2015. 10. 12. 19:59,
티스토리/gabriel,
※ 이 가이드는 gabriel 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다.
<h3></h3>
h3 태그를 사용하여 본문에 제목 효과를 줄 수 있습니다.
h3 태그 미리보기
<h3>제목</h3>
<h3 class="red">제목</h3>
<h3 class="blue">제목</h3>
<h3 class="green">제목</h3>
이렇게 사용하면 됩니다.
단 <p><h3>제목</h3></p>
가 아닌 그낭 <h3>제목</h3>
만 사용해야 합니다.
Fieldset
fieldset 태그를 사용할 수 있습니다.
Fieldset 태그 미리보기
<fieldset>
<legend>제목</legend>
<p>내용</p>
</fieldset>
이렇게 사용하면 됩니다.
이것 또한 <p></p>
로 감싸지지 않게 주의하세요.
PRE, CODE
코드를 강조하거나 소스 코드를 넣을 때 사용하시면 좋습니다.
PRE, CODE 코드 미리보기
<pre>img { max-width: 100%; border: 0; }
fieldset { padding: 2%; border: 1px solid #ddd; }
sup, sub { height: 0; font-size: 12px; line-height: 0; }
iframe, video, embed, object { max-width: 100%; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
cite, em { font-style: italic; }
blockquote { position: relative; margin: 0; padding: 10px 15px; color: #555; font-style: italic; border-left: 5px solid #f1f1f1; }
pre { margin: 10px 0; padding: 40px 50px 35px; font-family: 'Consolas','Monaco','Andale Mono','monospace'; color: #333; line-height: 160%; tab-size: 4; background-color: #f5f5f5; overflow-x: auto; overflow-y: hidden; }
hr { margin: 0; padding: 0; height: 0; border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #fafafa; overflow: hidden; }
code { padding: 2px 5px; font-family: inherit; color: #c7254e; background-color: #f9f2f4; border-radius: 3px; }
code.red { color: #BE0D0D; background-color: #FFF4F4; }
code.blue { color: #4570CD; background-color: #F4FCFF; }
code.green { color: #267C45; background-color: #F4FFF7; }</pre>
PRE는 이런 방식으로 사용 가능하고,
<code>코드</code>
<code class="red">코드</code>
<code class="blue">코드</code>
<code class="green">코드</code>
CODE
는 이렇게 사용할 수 있습니다.
PRE
는 전체 소스 코드를, CODE
는 단일 소스 코드를 강조하는데 사용하세요.