게시판에 글줄이기/전체보기 기능 만들기

초간단 설명

<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>

<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>


둘중에 아무거나 복사 붙혀넣기한다음애 내용부분에 원하는 글이나 이미링크 태그나 넣어주시면 됩니다.


-------------------------------------------------------------------
앞 게시물에 이어 태그설명을 들어가보자면

<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>

<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>

이렇게 2가지입니다.
내용은 내용 부분에 사용하시면 되구요
태그/줄바꿈 모두 적용됩니다.


2가지의 차이점을 설명하자면 (간단합니다.)


처음것은 [누르세요] 버튼에서 누르면 요약글이 펼쳐지고 [누르세요]는 ->[감추기] 로 변경되며 다시 접으면 [감추기]는 [누르세요]로 바뀌는겁니다. 
([]는 편의상 넣은겄입니다.)

두번째 것은 그냥 [클릭]을 누르면 열고 닫히고 변함 없습니다.


1번째 겄을 간단하게 응용하자면 [감추기]->[접기],  [누르세요]->[펼치기] 로 변경해준다면 네이버의 요약글 기능처럼 될겄이고

[감추기]->[less],  [누르세요]->[more]로 변경하면 티스토리의 more/less처럼 보이겠지요
2번째 소스의 [클릭]도 [눌러!]나 [눌러봐!] 로 바꿔보면 재밌겠지요?


그리고 이재 각종 색상입히는 법은 2개의 소스가 모두 공통으로 적용됩니다.
2개의 소스의 내용을 입력하는 부분의 소스는 동일하다는건 보면 아실테구요
2개다 공통으로 가진 <div style="border:1px solid #99CCFF; padding:9px;">내용</div>부분에서
내용전의 <div style="border:1px solid #99CCFF; padding:9px;">이분이 배경색상을 담당하는 곳십니다.

이부분을 
<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="border-color:green; padding:9px; border-width:1px; border-style:dotted; background-color:#E4FFDA;"> (녹색 점선 테두리에 연두색배경)

자 이제 여기서 조금 깊숙히 들어가보겠습니다.
사실 여기서 하나 빠진게있는데 color:black;이넘입니다. 글시색상을 정해주는 넘인데 기본 검은색으로 사용할려면 지워줘도 되는 아이지요

그리고 테두리를 점선으로 하고싶다! 하는분은
border-color:green; padding:9px; border-width:1px; border-style:dotted;
이렇게 사용해주세요 border-color:green; 부분에서 그린을 원하는 색상 부분으로 바뿨주시면 되겠죠?
그리고 배경은 background-color:#E4FFDA;이부분인데 위에있는 색상표를 참고해주세요 (#다음부분)

뭐 이렇게 적어 놨어도 본인은 귀찮음쟁이니
<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-color:green; padding:9px; border-width:1px; border-style:dotted; background-color:#E4FFDA;">내용</div></div>
이거하나만 사용할겁니다 하하하

쓰면서 제가 되려 공부했내요 읽어주신분들 감사합니다 __/꾸벅
------------------------------------------------------------------------------

출처 : 클리앙(http://clien.net) 호랑군님