한창 때 유행이었다가 시들었던 접기 태그,
요즘 들어서 다시 여쭤보는 분들이 많으시네요.
그리하여 원래 게시하려다가 관두었던 접기 태그에 대한
설명을 좀 가공하여 게시합니다.

찬찬히 읽어보시면 접기 태그를 사용하는데 좀 도움이 되실겁니다.

1. 접기 태그란 무엇인가?

접기태그는 html의 style속성을 제어하여
특정 글이나 그림을 클릭 하였을때, 내용을 펼쳐서 보여주는 형식의 태그에 대한 통칭입니다. 
쉽게 말해서 버튼을 누르면 아래쪽에 글이 나타나는 것이지요.

예를 들어보자면, 이런 것이죠.



이것은 접기 태그입니다.눌러보세요.


접기태그는 버튼을 누르면, 보이지 않게 설정되었던 단락을 보이게 하는 기능을 합니다.
다시 접으시려면 아까 눌렀던 글을 다시 눌러주세요.



접기 태그의 기본 형태는 다음과 같습니다.

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';">제목입니다.</a><div style="DISPLAY: none">내용입니다.</div>

위에있는 접기태그의 예시는 다음과 같은 html코드를 이용하여 만들어졌습니다.

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';">이것은 접기 태그입니다.눌러보세요.</a><div style="display: none; ">
접기태그는 버튼을 누르면, 보이지 않게 설정되었던 단락을 보이게 하는 기능을 합니다.
다시 접으시려면 아까 눌렀던 글을 다시 눌러주세요.</div>

얼핏 보면, 꽤나 머리 아파보이는 글자들의 나열입니다. 하지만 하나하나 풀어보면 그렇게 어렵지 않습니다. 
그렇다면 하나 하나 풀어보도록 하지요.


2. 접기태그를 하나하나 알아보자.

이번에는 접기코드에 대해서 하나하나 내용을 알아보도록 하겠습니다. 
접기코드의 내용에서 각 부분이 어떤 역할을 하는지 알아보면서 접기 코드를 작성 할 때, 
주의할 점도 몇 가지 알아보도록 하겠습니다.  

코드의 앞에서부터 차근차근 설명해 드릴터이니, html과 담을 쌓고있다고 미리부터 겁먹지 않으셔도 됩니다..

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';">제목입니다.</a>


태그의 맨 처음을 보면 "<a" 라는 부분이 눈에 들어오네요.

html을 어느정도 만져보신 분들이라면, <a>태그는 쉽게 아실 수 있으실겁니다.
<a herf="경로주소"></a>의 형식으로 클릭을 하면 해당 주소로 페이지를 이동하는 명령태그죠.

<a>라는 태그를 한 마디로 말씀드리자면, 어떤 명령을 수행하는 "버튼"을 만들겠다는 말입니다.
버튼을 마우스로 클릭하게 되면, 써있는 명령을 수행하게 되는 것입니다.
내릴 수 있는 명령은 여러가지가 있을텐데, 그중에서 "<a herf=" 라고 쓰면 이동을 하라는 내용인것이죠.

그렇다면 접기태그에 쓰인 "<a onclick="이라는 것은 어떤 것이냐?
onclick, 말 그대로 해당 버튼을 누를때마다 그 아래의 내용을 실행하라는 뜻입니다.

"이동 명령은 그런거 안써도 누르면 알아서 한다. 그런데 구지 저런걸 왜쓰느냐?"라고 물어보신다면..
이런저런 긴 답변이 되야 하므로, 그냥 접기 태그와 같은 속성제어를 위해서 쓰였다.. 
정도까지만 이해하시면 됩니다.


그리고, 두번째 부분으로 따옴표 안에 길다랗고 무슨말인지도 모를 무언가가 잔득 나옵니다..

this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';

길기도하네요.... 사실 태그에서 따옴표 안에 나타나는 내용은 명령 수행의 내용을 나타내는 것입니다.
설명하자면 nextSibling(적당한 한글말이 생각나지 않네요...)의 속성을 이렇게 제어하라는 말입니다.

구지 깊히 이해하실 필요는 없습니다. 
아시는 분에게는 너무 간단한 내용이지만, 전혀 관심분야가 아닌 분에게는 그냥 머리 아픈 잡소리일 뿐이니까요.

간단히 말씀드리자면, 이부분이 실제 접히고 펼쳐지는 태그에서의 핵심 내용이라는 겁니다.
글자 하나 바뀌면 안되는 부분이기도 하지요..


세번째 부분은 제목입니다.</a> 입니다.

처음으로 한글이 등장했네요. 말그대로 제목을 입력하시면 되는 부분입니다.
설명을 위해서 한글로 적어놓긴 했지만, 이곳에는 수많은 객체들이 들어갈 수 있습니다.

저처럼 접기태그를 보기 편한 글을 작성하기위해서 쓰신다면 보통 글자가 들어가긴 하지만,
인장게시를 위해서 접기 태그를 사용하신다면 보통 그림이 들어가겠지요.

그럴때는 이미지 링크 태그인 <img src="이미지주소">를 "제목입니다"글자 대신에 넣어주시면 됩니다.

세번째 부분의 마지막</a>는 
맨 처음의 "<a onclick="">"의 닫기 태그로 "여기까지 쓰여진게 버튼이다."라는 의미입니다.



여기까지, 세 부분이 합쳐져서 접고 펼쳐질 때 클릭하여 사용할 버튼이 완성 되었습니다.
이하의 부분은 클릭을 했을 때, 펼쳐질 "내용"이 어떤 것이냐를 설명해주는 것입니다.



<div style="DISPLAY: none">내용입니다.</div>


"<div " <div>태그는 새로운 문단을 만든다는 의미를 가진 태그입니다.
다시 말해 내용이 될 글이나 그림을 새로운 문단으로 작성 한다는 말이지요.

그렇다면, 새로운 문단을 만드는데 그 문단이 어떻게 생겨먹은 문단이냐?
그것은 그 뒷 부분이 지정해 줍니다.
 
"style="display:none">" style는 말그대로 스타일입니다. 
새로 생길 문단의 형태등을 지정해 주는데 사용됩니다.
그렇다면 문단의 display가 none가 되겠네요. 네 말그대로 "표시"를 " 하지 않겠다"라는 말입니다.

여기까지 읽어보셨으면 어느정도 감을 잡으셨겠지만, 
접기 태그는 버튼 뒤에 써놓은 문단 스타일의 "display:none"속성을 바꿈으로써 
보이게 하거나 안보이게 하는 것입니다.

style속성은 그 외에도 여러가지가 있지만, 더 궁금하신 것은 
인터넷 검색이나 책을 통해서 공부하시면 되겠습니다. 

단, 여기서 주의하실 것은  </a><div style="DISPLAY: none">에서
절대로 "</a>"와 "<div"사이에 엔터나 띄어쓰기를 하셔서는 안된다는 점입니다.

간혹 html의 태그들을 보기 좋게 정렬 하시기 위해서 엔터를 치는 경우가 있으신데,
다른데는 모르지만 이곳을 띄우시게 되면, 접기태그 자체가 작동을 하지 않습니다..


내용입니다.</div>

이 부분은 아까 "제목입니다" 부분의 설명과 같습니다. 
글이던 그림이던 원하시는 것을 마음껏 넣어보시길 바랍니다. 

</div>는 </a>와 마찬가지로 문단이 여기서 끝난다는 의미로 사용 된 것입니다. 


3. 접기태그의 실제 적용

이번 장에서는 접기 태그를 통해서 실제 인장 목록을 만들어 보겠습니다. 
하나하나 차근차근 따라하시면 여러분도 다량의 인장을 접고 다니실수 있습니다..

깨끗하고 깔끔한 게시글 환경. 멀리있는 것이 아닙니다.

1. 인벤의 인벤토리를 눌러 인장게시 작업을 시작합니다.


2. 인벤토리 내용 작성 부분에서 "html"을 클릭하여 활성화 시킵니다.


3. 내용을 지우고, 접기 태그의 기본 형태를 작성합니다.(복붙도 괜찮습니다.)


4. 제목과 내용을 변경합니다. 


   그림의 경로는 인벤 "이미지 링크"게시판에 글을 작성 하시고
   마우스 우클릭으로 손쉽게 경로를 복사해 올 수 있습니다.


5. 이후는 취향에 따라 변경하시길 바랍니다.


마지막으로 드리는 간편한 복붙

마지막 태그는 그림 3장이 접히는 접기 태그의 예시입니다. 간편히 복붙하셔서
이미지 경로, 이미지 크기 정도만 바꾸시면 손쉽게 사용 가능합니다.

그림이 더 많아진다면 내용의 <img src>태그를 몇개 더 늘려서 사용하세요..



<a href ="" onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';"><img src="이미지 경로" align="center" width="이미지 넓이" height="이미지 높이"></a><div align="center" style="DISPLAY: none">
<img src="이미지 경로" width="이미지 넓이" height="이미지 높이">
<img src="이미지 경로" width="이미지 넓이" height="이미지 높이">
<img src="이미지 경로" width="이미지 넓이" height="이미지 높이">
</div>