pre태그와 code태그를 이용하여 본문에 코드를 삽입하는 스크립트이다.
사용방법은 pre태그의 자식요소로 code태그가 들어가야하며, 이 때 code태그에는 language-[적용할코드]가 클레스가 필요하다.
HTML 예제
<pre>
<code class="language-html">
내용입력.
</code>
</pre>
CSS 예제
<pre>
<code class="language-css">
내용입력.
</code>
</pre>
JS 예제
<pre>
<code class="language-js">
내용입력.
</code>
</pre>
여기서 또 하나의 중요한 포인트!
HTML과 JS, PHP, ASP, JSP 등의 문서에서 코드가 <로 시작하는 태그들은 HTML모드로 글 작성시 모두 <로 변경해줘야만 한다.
위의 문서들은 괄호(<)로 시작되는 구문을 글자가 아닌 태그로 인식하기 때문에 위의 사항을 지키지 않을 경우 미리보기 코드가 아닌 실제 태그로 반영된다.
실제로 코드를 작성하는 방법은 다음과 같다.
HTML 예제
<pre>
<code class="language-html">
<div id="yourID" class="yourClass">
<p>글자입력</p>
</div>
</code>
</pre>
위의 내용을 미리보기로 본다면 아래와 같이 표현될 것이다.
HTML 예제
<div id="yourID" class="yourClass">
<p>글자입력</p>
</div>
좀 더 확실하게 이해를 돕기위해 이미지 확인.
위 이미지가 본문에 적용된 테스트 코드 중 HTML 부분이다.(아래 두번째 박스 HTML)
실제로 코드를 테스트 해 보았다.
/* ------------------------------------------------
## - 01. Reset Style.
------------------------------------------------ */
body,html {height: 100%; margin: 0; padding: 0;}
HTML
<!doctype html>
<html lang="ko">
<head>
</head>
<body>
<div id="wrap">
<header>
<h1><a href="#">LOGO</a></h1>
<nav>
<button type="button" class="toggleNav">SHOW<button>
<ul>
<li><a href="#">Navigation01</a></li>
<li><a href="#">Navigation02</a></li>
<li><a href="#">Navigation03</a></li>
<li><a href="#">Navigation04</a></li>
</ul>
</nav>
</header>
<div id="container" class="inner">
<article id="content">
<section id="list01">
<h3>Title</h3>
<div>Contents</div>
</section>
</article>
</div>
<footer>
<div class="copyright">
<!-- Mobile Hidden -->
© onfriday.design-hi.com
</div>
</footer>
</div>
</body>
</html>
JavaScript
$(document).ready(function(){
$('.toggleNav').click(function(){
$('header nav ul').stop().slideToggle(400); // 연속 클릭시 애니메이션 방지.
});
});
생각한 대로 잘 구현되었다 :)
Highlight_Code.7z'Web + 디자인 > Publishing + 코딩' 카테고리의 다른 글
| [JavaScript] 사이트 주소 URL 앞에 'www' 붙이기 (0) | 2016.06.08 |
|---|---|
| HTML 기초 #1 (0) | 2016.05.01 |
| Javascript를 이용한 주소(URL)변경. (0) | 2016.04.27 |
| Tistory '#2' 스킨 수정 및 기능추가 (0) | 2016.04.27 |
| jQuery length와 slideToggle 예제 (0) | 2016.03.25 |
