블로그들을 돌아다니다가 more/less 기능, 혹은 요약글 기능에 반했다. +_+
네이버가 쓰는 방식의 태그를 알아보니 다음과 같았다.
블로그가 아닌 다른 형태의 웹문서에서도 활용하기 좋을 것 같아서,
그리고 혹시 모르시는 분들이 계실까봐 포스팅을 해 본다.
'펼치기'라는 말 속에 접어서 넣고 싶은 내용이 있으면,
html 편집 모드에서 '펼치기'라는 말이 들어갈 곳을 찾아
아래 박스의 내용을 복사해서 넣는다.
그래고 요약글 내용 부분을 편집한다.
<!-- 펼치고접기 -->
<span id='btnheadid' style='display:;'><br>
<p style="text-align:left;">
<a href='javascript:moreOpenid();' class='con_link'><u style="color:#6d8432;">펼치기</u></a></p>
</span>
<span id='btntailid' style='display:none;'>
<p style="text-align:left;">
<a href='javascript:moreCloseid();' class='con_link'><u style="color:#6d8432;">접기</u></a></p>
</span>
<div id='moretailid' style='display:none;'>요약글 내용<br>
<!-- 요약글 내용 끝에 접기 -->
<p><a href='javascript:moreCloseid();' class='con_link'><u style="color:#6d8432;">접기</u></a></p>
<!-- //요약글 내용 끝에 접기 -->
</div>
<script>function moreOpenid(){document.getElementById('btnheadid').style.display='none';document.getElementById('btntailid').style.display='';document.getElementById('moretailid').innerHTML=document.getElementById('moretailid').innerHTML;document.getElementById('moretailid').style.display=''; }</script><script>function moreCloseid(){document.getElementById('btnheadid').style.display='';document.getElementById('btntailid').style.display='none';document.getElementById('moretailid').style.display='none'; }</script>
<!-- //펼치고접기 -->
<span id='btnheadid' style='display:;'><br>
<p style="text-align:left;">
<a href='javascript:moreOpenid();' class='con_link'><u style="color:#6d8432;">펼치기</u></a></p>
</span>
<span id='btntailid' style='display:none;'>
<p style="text-align:left;">
<a href='javascript:moreCloseid();' class='con_link'><u style="color:#6d8432;">접기</u></a></p>
</span>
<div id='moretailid' style='display:none;'>요약글 내용<br>
<!-- 요약글 내용 끝에 접기 -->
<p><a href='javascript:moreCloseid();' class='con_link'><u style="color:#6d8432;">접기</u></a></p>
<!-- //요약글 내용 끝에 접기 -->
</div>
<script>function moreOpenid(){document.getElementById('btnheadid').style.display='none';document.getElementById('btntailid').style.display='';document.getElementById('moretailid').innerHTML=document.getElementById('moretailid').innerHTML;document.getElementById('moretailid').style.display=''; }</script><script>function moreCloseid(){document.getElementById('btnheadid').style.display='';document.getElementById('btntailid').style.display='none';document.getElementById('moretailid').style.display='none'; }</script>
<!-- //펼치고접기 -->
그러면 '펼치기'를 누르면 '요약글 내용'이 보이고, '접기'를 누르면 다시 접히게 되겠다.
아래는 예시이자 주의사항!
1. 파란색 부분이 펼치라는 부분, 자주색/초록색 부분이 접으라는 부분, 밑에 검은색 부분은 부분은 script이다. '요약글 내용'만 편집하면 되겠다.
2. 요약글 내용이 짧으면 '접기'가 하나만 있어도 될 것이다. 그럴 때는 초록색 부분을 지우면 된다.
3. 펼치기, 접기 글씨 색은 (1up님의 스킨에 맞추느라) 풀색(#6d8432)으로 설정했다. 색을 바꾸고 싶으면 '6d8432'라는 숫자를 원하는 색의 코드로 바꾸어 주면 된다. (바꿀 곳은 총 세 군데)
4. (태터툴즈에서 해 보니) html모드에서 붙여넣기 하고 다시 일반 edit 모드로 오면 '펼치기, 접기, 요약글 내용, 접기' 모두가 다 나올 것이다. 그렇지만 이건 편집모드라 그렇다. '미리보기'로 보면 제대로 적용된 것을 알 수 있다. '요약글 내용' 부분만 편집하면 ok.
2. 요약글 내용이 짧으면 '접기'가 하나만 있어도 될 것이다. 그럴 때는 초록색 부분을 지우면 된다.
3. 펼치기, 접기 글씨 색은 (1up님의 스킨에 맞추느라) 풀색(#6d8432)으로 설정했다. 색을 바꾸고 싶으면 '6d8432'라는 숫자를 원하는 색의 코드로 바꾸어 주면 된다. (바꿀 곳은 총 세 군데)
4. (태터툴즈에서 해 보니) html모드에서 붙여넣기 하고 다시 일반 edit 모드로 오면 '펼치기, 접기, 요약글 내용, 접기' 모두가 다 나올 것이다. 그렇지만 이건 편집모드라 그렇다. '미리보기'로 보면 제대로 적용된 것을 알 수 있다. '요약글 내용' 부분만 편집하면 ok.
Tag // 네이버
댓글을 달아 주세요
태터툴즈의 more/less 이 기능인가요?
네~ 맞아요^^a
몰랐는데, 태터툴즈에도 있었군요.
그러면 그렇지..^^;
내용 수정했습니다~
다른 점이 있다면 태터의 more/less는 여러개라도 만들 수 있지만 네이버의 접기 기능은 한 포스트에 하나밖에 못 쓴다는 것이지요. 사용하기는 네이버가 더 편하긴 합니다만.
그렇네요.
네이버의 독점적 스타일.
'편하게, 그러나 제한적으로'..
저는 사용 주체에게 권리를 조금 더 주는 쪽이 좋을 것 같네요. 태터가 그런 면에서는 나은 듯.
잘 배웠습니다^^
바로 이것을 찾았습니다... 정말 고맙습니다..ㅠ ㅎㅎ
정말 이것을 찾고 있었습니다.
지금 바로 적용해 봤는데 정말 잘되네요!
정말 감사합니다ㅠ
와 결국 찾았네..
제가 워프를 사용하는데 이글루스에서 사용하는 글접기 스크립트가 안먹어서 님께서 올려주신 스크립트 적용해 봤는데 구현은 되나 형식이 약간 틀려집니다. 워프에서 함 테스트 해주시면 안될까요??
답글이 저엉말 늦었지만... 제가 답해드릴 만한 지식은 없는 것 같아욤.. 더 도움이 못 되어드려서 아쉽네요. 어떻게든 문제 풀게 되시길!
잘쓰겠습니다! 감사해요***
^^ 유용하게 사용하시기 바랍니당! (제가 짠 코드는 아니지만 헤헤)