본문 바로가기

지식저장소/지식KIN

글펼침, 요약글, more/less, 글 감추기

네이버 블로그에 [요약글]이란 기능있죠?

하지만 요약글은 한 글에 한개의 요약글 밖엔 쓸 수 없는데 이 태그는 요약글을 한 포스트에 여러개의 요약글 을 쓸 수 있다는 장점이 있습니다.

(※ 단, 이 태그를 쓸땐 html로 체크한 상태에서만 사용하세요 또 html이라고 체크해서 태그 작성후에 다시 체크를 풀면 에러가 나요. 아무래도 자바스크립트 태그라서 그런듯...;;;)

*** 파란블로그에서는 사용이 불가능합니다. (흑흑)

※more/less 소스1

<a href='javascript:void(0)' onclick=this.innerHTML=(this.nextSibling.style.display=='none')?'감추기':'보기';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';>누르세요</a><DIV style='display:none'>
<div style="border:1px solid #99CCFF; padding:9px;">내용</DIV></DIV>


※more/less 소스2

<a href='javascript:void(0)' onclick=this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';>클릭</a><DIV style='display:none'>
<div style="border:1px solid #99CCFF; padding:9px;">내용</DIV></DIV>



아래는 박스들 색깔 지정. more/less 태그 없이 이것들만 사용해도 아래에 보이는대로 박스가 생긴다. (즉 위의 내용들 중에서 파란 색으로 쓴 부분만 뽑아서 사용하면 보기/감추기 클릭이 없는 단순박스가 생긴다는 얘기임)
내용을 쓴 뒤 맨 끝에 </div>로 막아주는 것을 잊지 말것.

<div style="border:1px solid #AECDFF; padding:9px; color:blue;background:#E7EFF7;">


<div style="border:1px solid silver; padding:9px; background:#EEE;">


<div style="border:1px solid TAN; padding:9px; background:IVORY;">


<div style="border:1px solid #FAC6C6; padding:9px; background:#FFF0F5;">


<div style="border:1px solid #4BAF4B; padding:9px; background:#E4FFDA;">


<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/01/2/bg_1.gif); border:1px solid SILVER; padding:9px;">


<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/01/2/bg_2.gif); border:1px solid LIGHTSKYBLUE; padding:9px;">


<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg1.gif); border:1px solid SILVER; padding:9px;">


<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg2.gif); border:1px solid TAN; padding:9px;">


<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg3.gif); border:1px solid #FAC6C6; padding:9px;">


<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg4.gif); border:1px solid #AECDFF; padding:9px;">


<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg5.gif); border:1px solid #4BAF4B; padding:9px;">

출처: http://gapdoli.egloos.com/