[정보] 접기 태그 어렵지 않아요~

인장은 쌓여만 가고 너무 길어서 접고 싶은데

어렵다고 생각하시는 분들을 위해서 적어봅니다.

몇가지 중요 핵심만 알면 어렵지 않아요~

일단 예제로 제 인장에 있는 부분으로 설명을 하겠습니다.

↓

[ 일확천금 ]

Sword Master 수은향 - Lv.45

Asaasin 시하루 - Lv.45

Kung-Fu Master 봉절 - Lv.45

Force Master 얼음등불 - Lv.??

< Blade & Soul Close >

↑

인장의 한 부분입니다.

일단 메인으로 되는 부분을 누르고 열리면 접히는 형식입니다.

인장이 길어서 보시는 분을 배려하여 따로 닫기 부분까지 만들었습니다.

HTML 소스를 보자면

<div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><img border="0" alt="" src="https://upload.inven.co.kr/upload/2013/03/07/bbs/i2865497828.jpg" width="430"></p></div><div style="width: 100%; display: none;" id="Siharu_BnS"><div></div><div><p><span style="FONT-FAMILY: 'Times New Roman'"><font size="+0"></font></span></p><p style="TEXT-ALIGN: center; FONT-FAMILY: 'Times New Roman'"><b><font face="Verdana"></font></b></p><p style="TEXT-ALIGN: center; FONT-FAMILY: 'Times New Roman'"><b><font face="Verdana">[ 일확천금 ]</font></b></p><p style="TEXT-ALIGN: center"><font style="FONT-FAMILY: Verdana" color="#cc0000">Sword Master</font><span style="FONT-FAMILY: Verdana">&nbsp;수은향 - Lv.45</span></p><p style="TEXT-ALIGN: center"><font style="FONT-FAMILY: Verdana" color="#cc0000">Asaasin</font><span style="FONT-FAMILY: Verdana">&nbsp;시하루 - Lv.45</span> </p><p style="TEXT-ALIGN: center"><span style="FONT-FAMILY: Verdana; COLOR: rgb(204,0,0)">Kung-Fu</span><font style="FONT-FAMILY: Verdana" color="#cc0000">&nbsp;Master</font><span style="FONT-FAMILY: Verdana">&nbsp;봉절 - Lv.45</span></p><p style="TEXT-ALIGN: center"><span style="FONT-FAMILY: Verdana; COLOR: rgb(204,0,0)">Force&nbsp;</span><span style="FONT-FAMILY: Verdana; COLOR: rgb(204,0,0)">Master</span><span style="FONT-FAMILY: Verdana">&nbsp;얼음등불 - Lv.?</span><span style="FONT-FAMILY: Verdana">?</span></p><div style="TEXT-ALIGN: center"></div></div><div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><strong><font size="5" face="'Times New Roman'" font="">&lt; Blade &amp; Soul Close &gt;</font></strong></p></div></div>

되어있습니다.

보시면 정신없어 보이는데 그렇지 않습니다 ㅎ

기본적인 틀만 알면 나머진 응용이거든요ㅎ

<div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><img border="0" alt="" src="https://upload.inven.co.kr/upload/2013/03/07/bbs/i2865497828.jpg" width="430"></p></div>

<div style="width: 100%; display: block;" id="Siharu_BnS"><div></div>

<div style="text-align: center;">쓰고싶은 내용</div>

<div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><strong>&lt; Blade &amp; Soul Close &gt;</strong></p></div></div>

이 기본적인 틀에서 응용하시면 됩니다. 

이제 한부분씩 설명드리겠습니다.

--------------------------------------------------------------------------------------------------------

<div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><img border="0" alt="" src="https://upload.inven.co.kr/upload/2013/03/07/bbs/i2865497828.jpg" width="430"></p></div>

첫 부분입니다.

주소에 있는 사진(가로430 고정크기)를 누르면 태그가 접고 펼치게 만드는 부분입니다.

빨간 부분은 부분적인 폴더 부분으로 구역을 나눈다고 보시면 됩니다.

즉.. 폴더라고 생각하시면 편하죠.

물론 명칭은 마음대로 적어주시면됩니다. (한글은 안돼요)

파란색 부분은 어떤 사진을 쓴것인지에 대한 것입니다. (원하시는 사진 쓰시는거죠)

--------------------------------------------------------------------------------------------------------

<div style="width: 100%; display: block;" id="Siharu_BnS"><div></div>

두번째 부분입니다.

이거 설정 안해주시면 접고 열고 절대 안됩니다. 빼먹지 맙시다.

여기도 폴더 이름 똑같이 해주셔야 합니다.

--------------------------------------------------------------------------------------------------------

<div style="text-align: center;">쓰고싶은 내용</div>

새번째 부분입니다.

정말 별거 없습니다.

<div></div> 사이에 글을 적어주시면 됩니다.

HTML로 수정하시는거보다 틀만 짜놓고 웹에디터 부분에서 적고 수정하시면 되는 무난한 부분.

--------------------------------------------------------------------------------------------------------

<div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><strong>&lt; Blade &amp; Soul Close &gt;</strong></p></div></div>

마지막 네번째 부분입니다.

폴더 이름 똑같이 하시고

보라색 부분에 추가로 여기부분 눌렀을때도 닫힌다는 문구를 적어 놓을수 있는 부분입니다.

뭐.. 별거 아니죠? ㅋ

생각보다 접기 태그 쉬어요 ㅎ

임의의 폴더명을 잘 맞춰준다면 어느새 당신의 인장도 가벼워 집니다 !!

마지막으로 쉽게 인장 접기를 하시라고 수정해야 하는 부분만 강조하여 견본을 올려드릴께요.

------------------------------------------------------------------------------------------------------------

<div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><img border="0" alt="" src="https://upload.inven.co.kr/upload/2013/03/07/bbs/i2865497828.jpg" width="430"></p></div><div style="width: 100%; display: block;" id="Siharu_BnS"><div></div><div style="text-align: center;">쓰고싶은 내용</div><div style="MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Siharu_BnS').style.display=(document.getElementById('Siharu_BnS').style.display=='none')?'block':'none';"><p align="center"><strong>&lt; Blade &amp; Soul Close &gt;</strong></p></div></div>

------------------------------------------------------------------------------------------------------------

그 밖에 질문이 있으시거나 추가해야 할 부분이 있으면 

댓글이나 쪽지로 피드백 받아요.

PS.1 메모장이나 워드 이런곳에 백업은 하세요ㅋ