<div style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Name').style.display=(document.getElementById('Name').style.display=='none')?'block':'none';">Thumdnail</div><div style="width: 100%; display: none;" id="Name">Image</div>


인장 접는 법에 대해서 어려워하시는 분들을 위해 Html을 이용하여 인장을 접는 법을 알려드리고자 접는 글입니다
인장을 접는 이유는 여러가지가 있겠지만, 우선 깔끔해 보이고 글 로딩시간을 줄여주는 효과를 가지고 있죠

우선 몇가지 주의 사항을 적자면
수정은 무조건 Html 로 하셔야 하며
수정하실땐 반드시 백업을 하시고 수정하시는게 좋습니다

1. Name 이라고 적은 부분은 박스의 이름입니다
이 부분은 반드시 세개를 똑같이 작성해 주셔야 합니다

2. Thumdnail 이라고 적은 부분은 대표 이미지입니다
즉 박스의 이미지로 해당 이미지를 누를 경우 박스가 눌리는 방식입니다

3. Image 부분은 인장을 넣으시면 되는 부분입니다 즉 박스의 내용물에 해당하죠

실제로 한번 하는걸 보여 드리고자 준비해 보았습니다

우선 대표 이미지로는 <img src="https://upload2.inven.co.kr/upload/2015/01/30/bbs/i0603470958.jpg" with="400" border="0"> 을 준비했습니다


이 이미지가 박스의 섬네일 즉 대표이미지로 쓸거고요
박스 안에 들어갈 이미지로는 아래 두개를 넣도록 하겠습니다

<img src="https://upload2.inven.co.kr/upload/2015/01/30/bbs/i0243343149.jpg" width="600" border="0">
<img src="https://upload2.inven.co.kr/upload/2015/01/30/bbs/i0449070719.png" width="600" border="0">



이럴 경우, 위의 Html 을 복사해서 붙여넣습니다
칼뜨물은 짱 귀여우니까 박스명은 Kawai 로 결정하고 예시를 작성한다면

<div style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('Kawai').style.display=(document.getElementById('Kawai').style.display=='none')?'block':'none';"><img src="https://upload2.inven.co.kr/upload/2015/01/30/bbs/i0603470958.jpg" with="400" border="0"></div><div style="width: 100%; display: none;" id="Kawai"><img src="https://upload2.inven.co.kr/upload/2015/01/30/bbs/i0243343149.jpg" width="600" border="0"><br><br><img src="https://upload2.inven.co.kr/upload/2015/01/30/bbs/i0449070719.png" width="600" border="0"></div>

이렇게 해서 완성한게 바로 아래 인장박스 입니다