POST 작성

Meta Tag - Description (150자 이내)

공개 비공개 지정을 하지 않으면, 비공개 처리됩니다.

<div class="tt_article_useless_p_margin contents_style">'TOC'는 'Table Of Contents'의 약자로 목록, 목차, 순서, 차례 등을 의미한다.
 
본 글은 '북클럽 스킨'을 기준으로 '페이지(글)의 본문' 내에 목차를 자동으로 생성하는 방법에 대한 내용이다.
1] 기본 작업 
 
먼저 목차 생성을 위한 기본 작업이다.
1-1] 파일 업로드 - jquery.toc.min.js 
목차를 자동으로 생성하려면 먼저 <a style="background-color: #666666; color: #ffffff;" title="github" href="https://ndabas.github.io/toc/assets/jquery.toc.zip" target="_blank" rel="noopener">'Github'</a>에서 제공하는 알집 파일을 다운로드해서, 알집 파일 안에 있는 2개의 파일 중 'jquery.toc.min.js'를 티스토리에 업로드해야 한다. (실제 파일도 첨부)
 <img src="https://blog.kakaocdn.net/dn/bnT4bs/btrpfgFacjE/0g1TPRy38ErARNXuKLkqBk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbnT4bs%2FbtrpfgFacjE%2F0g1TPRy38ErARNXuKLkqBk%2Fimg.jpg" alt="01-제이쿼리-toc-다운로드" data-filename="01-제이쿼리-toc-다운로드.jpg" data-origin-width="2004" data-origin-height="1074" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;">
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="02-제이쿼리-파일-업로드.jpg" data-origin-width="2004" data-origin-height="1021"><img src="https://blog.kakaocdn.net/dn/bu6EiE/btrpfe8rb8J/FpfkOIs5g49V9LeEPz7aTK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbu6EiE%2Fbtrpfe8rb8J%2FFpfkOIs5g49V9LeEPz7aTK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="02-제이쿼리-파일-업로드" data-filename="02-제이쿼리-파일-업로드.jpg" data-origin-width="2004" data-origin-height="1021"></figure>

 
 
<h3 data-ke-size="size23">1-2] HTML - Head 섹션</h3>
아래 코드를 HTML의 위에 삽입한다. 앞서 업로드한 'jquery.toc.min.js' 파일을 인식하는 코드다.
 
<pre id="code_1640856156396" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>

</code></pre>
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="03-제이쿼리-헤드-섹션.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/sgAZX/btrpjvIYlzb/7QDKopuhaaH4tKdh8k5BxK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsgAZX%2FbtrpjvIYlzb%2F7QDKopuhaaH4tKdh8k5BxK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="03-제이쿼리-헤드-섹션" data-filename="03-제이쿼리-헤드-섹션.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
<h3 data-ke-size="size23">1-3] HTML - Body 섹션</h3>
아래 코드를 HTML의 위에 삽입한다.
 
아래 코드에서 headings: "h2, h3, h4"는 '페이지(글)의 본문' 내에 있는 'h2', 'h3', 'h4'를 인식해서 목차화 시켜주는 부분이며 'h2'와 'h3'만 목차화 시키고자 한다면 'h4'를 삭제하면 된다.
 <pre id="code_1640856603188" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>
</code></pre>
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="04-제이쿼리-바디-섹션.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/en1WM3/btrpoxzfSNn/DjnNIxZIFw88stvrm5EZV1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fen1WM3%2FbtrpoxzfSNn%2FDjnNIxZIFw88stvrm5EZV1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="04-제이쿼리-바디-섹션" data-filename="04-제이쿼리-바디-섹션.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
[참고]
<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft" data-ke-style="style2">
<tbody>
<tr>
<td style="width: 14.2857%; text-align: center;">h1</td>
<td style="width: 14.2857%; text-align: center;">h2</td>
<td style="width: 14.2857%; text-align: center;">h3</td>
<td style="width: 14.2857%; text-align: center;">h4</td>
<td style="width: 14.2857%; text-align: center;">h5</td>
<td style="width: 14.2857%; text-align: center;">h6</td>
<td style="width: 14.2857%; text-align: center;">h7</td>
</tr>
<tr>
<td style="width: 14.2857%; text-align: center;">페이지 제목</td>
<td style="width: 14.2857%; text-align: center;">제목1</td>
<td style="width: 14.2857%; text-align: center;">제목2</td>
<td style="width: 14.2857%; text-align: center;">제목3</td>
<td style="width: 14.2857%; text-align: center;">본문1</td>
<td style="width: 14.2857%; text-align: center;">본문2</td>
<td style="width: 14.2857%; text-align: center;">본문3</td>
</tr>
</tbody>
</table>
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="05-페이지-h태그.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/WlCL2/btrpoxMOiQG/MGSqDs5TX0Ukg6XCbjijVk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWlCL2%2FbtrpoxMOiQG%2FMGSqDs5TX0Ukg6XCbjijVk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="05-페이지-h태그" data-filename="05-페이지-h태그.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
 
<h3 data-ke-size="size23">1-4] 서식</h3>
아래 코드는 목차를 생성할 위치에 넣는 코드로 HTML에 삽입하는 것이 아닌 '페이지(글)의 본문' 내에 직접 삽입해야 한다.
 
'페이지(글)의 본문'에 삽입할 때는 '기본 모드'가 아닌 'HTML 모드'에서 삽입해야 하는데, 편하게 삽입할 수 있도록 HTML 서식을 만들어 사용할 것을 추천한다.
 
아래 코드에서 'Contents'는 '페이지(글) 본문'에 실제 출력되는 부분으로 '목록', '목차', '순서', '차례' 등 기호에 따라 변경하면 된다.
 <pre id="code_1640857527928" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><div class="book-toc">Contents
 <span style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;"> </div></code></pre>
아래와 같이 HTML 서식을 만든다. (서식 생성 방법 생략)
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="06-서식-발행.jpg" data-origin-width="2004" data-origin-height="752"><img src="https://blog.kakaocdn.net/dn/SliYI/btrpgy7jw7s/E1NKS83R9w2ru9wXXD85C0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSliYI%2Fbtrpgy7jw7s%2FE1NKS83R9w2ru9wXXD85C0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="06-서식-발행" data-filename="06-서식-발행.jpg" data-origin-width="2004" data-origin-height="752"></figure>

 
 
목차를 생성할 위치에 마우스 커서를 올려 둔다.
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="07-목차-생성-위치.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/BuUGW/btrpkvosUla/zkKLT0KlEAy0DqvhwuozlK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBuUGW%2FbtrpkvosUla%2FzkKLT0KlEAy0DqvhwuozlK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="07-목차-생성-위치" data-filename="07-목차-생성-위치.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
'기본 모드' 상태에서 만들어 둔 HTML 서식을 삽입하면 작성 중인 화면에서는 아래와 같이 나타난다.
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="08-목차-생성-과정.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/ysToj/btrpffM3qbB/Qm2DBsJ8nF5AZIPxF4kas1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FysToj%2FbtrpffM3qbB%2FQm2DBsJ8nF5AZIPxF4kas1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="08-목차-생성-과정" data-filename="08-목차-생성-과정.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
 
'HTML 모드'에서 보면 코드가 정상적으로 삽입된 것을 확인할 수 있다. (잘 보면 코드 내용이 달라져 있는데, 자동으로 변경되는 부분이니 신경 쓰지 않아도 된다.)
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="09-목차-생성-과정-html.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/OxRnd/btrpmfFHA3l/ulkBedWFQ15gY1TiB0doAK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOxRnd%2FbtrpmfFHA3l%2FulkBedWFQ15gY1TiB0doAK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="09-목차-생성-과정-html" data-filename="09-목차-생성-과정-html.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
<span style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;">  
글을 발행하면 아래와 같이 목차가 정상적으로 생성되어 있다.
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="10-목차-적용-완료.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/bmVQVl/btrpmhDzqYb/dwbNV9Idl40r1vU6jKUpyk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmVQVl%2FbtrpmhDzqYb%2FdwbNV9Idl40r1vU6jKUpyk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="10-목차-적용-완료" data-filename="10-목차-적용-완료.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
<span style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem;">  
<h3 data-ke-size="size23">1-5] '카테고리의 다른 글' 제거</h3>
그런데 목차 제일 아래를 보면 '페이지(글) 본문'에는 작성하지 않았던 '카테고리의 다른 글'이 목차에 반영되어 있다.
 
이는 '카테고리의 다른 글'이 'h4'에 해당되기 때문인데, 아래 코드를 HTML의 위에 삽입하면 '카테고리의 다른 글'을 제거할 수 있다.
 
<pre id="code_1640863516668" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>
<script>
 // 목차 생성 부분
 $(document).ready(function () {
 var $toc = $("#toc");
 $toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2, h3, h4" });

// 카테고리의 다른글 삭제
 if ($(".another_category").length > 0) {
 $toc.find("li:last").remove();
 }
});
</script>

</code></pre>
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="11-카테고리-제거.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/bUvetA/btrpkwnrHdm/l5LChgtWtkX4FriSl3VNk1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbUvetA%2FbtrpkwnrHdm%2Fl5LChgtWtkX4FriSl3VNk1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="11-카테고리-제거" data-filename="11-카테고리-제거.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
 
 
코드를 삽입하고 발행한 글을 새로고침 해보면 아래와 같이 '카테고리의 다른 글'이 제거된 것을 확인할 수 있다.
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="12-카테고리-제거-완료.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/B0j5a/btrpjvWAaDt/bY9154qTkWktQWor2YVbpK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FB0j5a%2FbtrpjvWAaDt%2FbY9154qTkWktQWor2YVbpK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="12-카테고리-제거-완료" data-filename="12-카테고리-제거-완료.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 2] 스타일 작업
 
지금부터는 CSS에 코드를 삽입해서 스타일을 적용해 보겠다.
 
<h3 data-ke-size="size23">2-1] CSS - 목차</h3>
아래 코드를 CSS에 삽입한다.
 
<pre id="code_1640864142788" class="css" data-ke-language="css" data-ke-type="codeblock"><code>/* 자동 목차 스타일 */
.book-toc {
 position: relative;
 width: fit-content;
 border: 1px solid #b0d197;
 padding: 10px 20px 0px 20px;
 z-index: 1;
}
.book-toc:after {
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background-color: #b0d197;
 z-index: -1;
 opacity: 0.1;
}
.book-toc p {
 font-weight: bold;
 font-size: 1.2em !important;
 color: #396120;
}
#toc * {
 font-size: 18px;
 color: #000 !important;
}
#toc {
 padding: 0px 20px 0px 25px;
}
#toc a:hover {
 color: #000;
}
#toc ul {
 margin-top: 5px;
 margin-bottom: 0px;
}
#toc > li {
 padding-left: 0;
 text-indent: 0;
 list-style-type: disc;
 padding: 0px 20px 0px 0px;
	 margin-bottom: 10px;
 margin-top: 7px;
} 
#toc > li > a {
 text-decoration:none;
 font-weight: bold
}
#toc > li > ul {
 padding-left: 20px;
 margin-top: 0;
 margin-bottom: 0;
}
#toc > li > ul > li {
 font-size: 0.87em;
 padding-left: 0;
 text-indent: 0;
 list-style-type: disc;
 margin-bottom: 5px;
 margin-top: 5px;
}
#toc > li > ul > li > a {
 font-size: 1em;
 text-decoration:none;
}
#toc > li > ul > li > ul {
 padding-left: 20px;
 margin-top: 0;
 margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
 font-size: 0.87em;
 padding-left: 0;
 text-indent: 0;
 list-style-type: disc;
 margin-bottom: 0px;
 margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
 font-size: 0.875em;
 text-decoration:none;
}</code></pre>
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="13-css-스타일-코드.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/mynaK/btrpeICpP80/CwmEXh4Vlr3eW0eMoGDw2K/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmynaK%2FbtrpeICpP80%2FCwmEXh4Vlr3eW0eMoGDw2K%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="13-css-스타일-코드" data-filename="13-css-스타일-코드.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
 
 
코드를 삽입하고 발행한 글을 새로고침 해보면 아래와 같이 정렬되어 스타일이 적용된 것을 확인할 수 있다.
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="14-css-스타일-적용-완료.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/Y9ubA/btrpdpJbt0B/cFGXJseT6nPQhYJC52IKS1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FY9ubA%2FbtrpdpJbt0B%2FcFGXJseT6nPQhYJC52IKS1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="14-css-스타일-적용-완료" data-filename="14-css-스타일-적용-완료.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
 
 
 
 
<h3 data-ke-size="size23">2-2] CSS - 헤딩</h3>
이왕 하는 김에 'h2', 'h3', 'h4'에도 스타일을 적용해 보겠다. 아래 코드를 CSS에 삽입한다.
 
<pre id="code_1640864850567" class="css" data-ke-language="css" data-ke-type="codeblock"><code>/* h2, h3, h4 스타일 */
.tt_article_useless_p_margin h2 {
	text-align: left;
	background-color: black;
 border-left: gray 10px solid;
 border-bottom: 1px solid gray;
	padding: 3px 0 5px 10px;
	margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
	text-align: left;
	border-left: #548a25 8px solid;
	border-bottom: 1px solid #548a25;
	padding: 3px 0 5px 10px;
	margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
	text-align: left;
	border-left: #71b932 6px solid;
	border-bottom: 1px solid #71b932;
	padding: 3px 0 5px 10px;
	margin-bottom: 15px;
}</code></pre>
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="15-css-헤드-스타일.jpg" data-origin-width="2004" data-origin-height="988"><img src="https://blog.kakaocdn.net/dn/2X6Ps/btrpkwgGouc/oQNzeKQKlEl2nCZEjp6mq0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2X6Ps%2FbtrpkwgGouc%2FoQNzeKQKlEl2nCZEjp6mq0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="15-css-헤드-스타일" data-filename="15-css-헤드-스타일.jpg" data-origin-width="2004" data-origin-height="988"></figure>

 
 
 
코드를 삽입하고 발행한 글을 새로고침 해보면 아래와 같이 스타일이 적용된 것을 확인할 수 있다.
 
<figure class="imageblock widthContent" data-ke-mobilestyle="widthOrigin" data-filename="16-스타일-적용-완료.jpg" data-origin-width="2514" data-origin-height="2859"><img src="https://blog.kakaocdn.net/dn/bvuxVO/btrpitYASt7/DaBLqGSM9aGKBsRW4lI4M0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbvuxVO%2FbtrpitYASt7%2FDaBLqGSM9aGKBsRW4lI4M0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" alt="16-스타일-적용-완료" data-filename="16-스타일-적용-완료.jpg" data-origin-width="2514" data-origin-height="2859"></figure>

 
 
 
 
</div>

※ 첨부자료를 업로드 하세요 (PDF, HWP, XLS, PPT 만 업로드 가능)

새글작성