제가 인장용 카드를 올려드렸는데

인장에 접기/펴기 태그를 사용하고 싶어하시는 분들이 있어서

이렇게 써봅니다.....

그 분들 말고도 사용하시고 싶으신 분들이 있을 거 같아

이렇게 팁 게시판에 써보도록 하겠습니다.

 

-게임과 관련있는 팁은 아닙니다.-

이 사용법에서 사용한 이미지들은 다음 주소에서 사용하실 수 있습니다.

http://www.inven.co.kr/board/powerbbs.php?come_idx=2766&l=2435

http://www.inven.co.kr/board/powerbbs.php?come_idx=2766&l=1413

 

1. 인벤토리에 들어갑니다.

 

 

2. 다음과 같이 인벤토리에서 오른쪽 편에 HTML 이라는 버튼을 누릅니다.

 

 

※총 2가지 방법이 있는데 첫번째 방법부터 쓰도록 하겠습니다.

 

 

3. 아래 HTML 코드를 복사한 후 붙여넣기 해줍니다.

 

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>

<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in><P>내용들어갈부분</P></DIV>

 

여기서 연두색 배경은 이 접기태그의 코드를 나타내며 임의로 수정이 가능합니다.(단, 통일되어야 합니다.)

파란색 배경은 접기의 버튼이 되는 부분입니다.

빨간색 배경은 버튼을 눌렀을때 나오는 부분입니다.

 

4. 이제 빨간색 부분과 파란색 부분에 들어갈 내용을 알아보겠습니다.

 

<IMG src="이미지의 주소">

 

초록색 부분에 자신이 쓰려는 이미지의 주소를 붙여 넣어주면

"<"로 시작하는 부분부터 ">"로 끝나는 부분까지가 하나의 이미지가 됩니다.

여기서 이미지 주소를 가져오는 방법은 자기가 쓰려는 이미지를 우클릭 한 뒤 속성을 클릭합니다.

그 후 나오는 속성 창에서 주소:(URL)부분을 복사하시면 됩니다.

 

5. 버튼이 들어갈 부분과 내용이 들어갈 부분에 다음과 같은 IMG태그를 원하는 만큼 붙여줍시다.

 

<IMG src="https://upload.inven.co.kr/upload/2012/03/06/bbs/i1073633803.jpg">

<IMG src="https://upload.inven.co.kr/upload/2012/03/07/bbs/i0695996022.jpg">

<IMG src="https://upload.inven.co.kr/upload/2012/03/06/bbs/i0168785561.jpg">

 

이런식으로 세개 연달아 놓으면 이미지 HTML 버튼을 다시 클릭해보면 아래 그림처럼 보입니다.

 

6. 이렇게 하나의 접기 태그가 완성되었습니다.

 

7. 두번째 접기 태그를 쓰기 위해서는

---------------첫번째 접기태그 부분-------------------

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>

<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in><P>내용들어갈부분</P></DIV>

---------------첫번째 접기태그 부분-------------------

---------------두번째 접기태그 부분-------------------

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in2').style.display=(document.getElementById('limuzz_in2').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>

<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in2><P>내용들어갈부분</P></DIV>

---------------두번째 접기태그 부분-------------------

 

노란색 배경으로 된 부분처럼 첫번째 접기태그에는 limuzz_in 이라 쓰시고

두번째 접기태그에는 limuzz_in2라고 쓰시면 됩니다.

물론 이 부분에는 아무거나 넣으셔도 상관 없습니다. JJJJ_JJ뭐 이런식으로 넣으셔도 되고

그냥 2나 1을 넣으셔도 됩니다. 단 같은 부분 내의 3개의 노랑바탕은 통일을 해주셔야 합니다.

 

8.이렇게 하면 다중 접기 태그를 완성 시키실 수 있습니다.

 

 

 

※2번째 방법을 설명해 드리겠습니다.

 

3. 아래 HTML 코드를 복사한 후 붙여넣기 합니다.

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>

<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in><P>내용들어갈부분</P></DIV>

 

여기서 연두색 배경은 이 접기태그의 코드를 나타내며 임의로 수정이 가능합니다.

파란색 배경은 접기의 버튼이 되는 부분입니다.

빨간색 배경은 버튼을 눌렀을때 나오는 부분입니다.

 

4. HTML 버튼을 다시 클릭해봅니다.

다음과 같이 나올 겁니다.

 

5. 그럼 "버튼들어갈부분"을 살포시 클릭해줍니다.

이렇게 네모칸이 쳐지면서 저 박스 안을 편집 할 수 있게 됩니다.

 

6. 이 부분에 다음 그림처럼 오른쪽 클릭 후 복사를 하신 후 Ctrl+V를 해주시면 그림이 붙여넣어 집니다.

 

복사하는 그림

 

붙여넣은 후 그림

 

버튼 들어갈 부분이 완성되었습니다.

 

7. 같은 방법으로 내용 들어갈 부분도 완성시켜 줍니다.

 

 

8. 다중 접기태그를 원하는 경우 다음과 같이 여러쌍을 복사해 간 후 HTML을 다시 누르시면

여러쌍의 다중 접기 태그 부분이 나옵니다.

------------------첫번째 접기 태그------------------(이부분은 복사해 가시면 안됩니다.)

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>

<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in><P>내용들어갈부분</P></DIV>

 

------------------두번째 접기 태그------------------(이부분은 복사해 가시면 안됩니다.)

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in2').style.display=(document.getElementById('limuzz_in2').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>

<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in2><P>내용들어갈부분</P></DIV>

 

------------------세번째 접기 태그------------------(이부분은 복사해 가시면 안됩니다.)

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in3').style.display=(document.getElementById('limuzz_in3').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>

<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in3><P>내용들어갈부분</P></DIV>

 

단, 여기서 limuzz_in을 같은 부분 마다 2,3을 붙여서 다르게 해주셔야 합니다.

이렇게 다중 접기 태그가 완성되었습니다.

 

 

 

※ 이 외의 발생 가능한 문제점과 사용 방법을 알려드리겠습니다.

 

9. 발생 가능한 문제점- 처음부터 접혀있지 않을 때!!!

이 방법을 사용하고 나면 접기 태그가 처음부터 접혀있지 않을 수가 있습니다.

 

이럴 때는 Ctrl+F를 사용해서 display: block"를 찾아주시면 다음과 같이 한가지 부분을 찾아집니다.

 

 

이때 저 display: block"를 display: none"으로 바꿔주시면 접기 태그가 처음부터 접혀있게 됩니다.

 

10. 접기태그 위와 아래부분에 다른 이미지 붙여넣기 방법

 

다음과 같이 빨간 동그라미 부분을 잘 클릭하면 저 부분에 커서가 위치할 수 있게 됩니다.

저 부분에 복사+붙여넣기로 이미지를 붙여넣으시면 접기태그 위부분에 접기태그와 무관한 이미지를 넣으실 수 있습니다.

 

반대로 맨 아래 부분을 클릭하면 다음과 같이 커서가 오고 저 부분에 복사 붙여넣기를 하시면

접기태그 아래 부분에 접기태그와는 무관한 이미지를 넣으실 수 있습니다.

 

 

11. 태그가 꼬여서 엉망진창이다 할때는 그냥 다 지워버리시고

처음부터 다시 차근차근 따라해주세요. ㅎㅎ

 

 

 

모두들 인장 잘 사용하시고

너무 긴게 싫다고 생각하시는 분들은

접기태그를 100% 활용하여 인장의 길이를 줄여봅시다 ㅎㅎ

도움이 되셨다면 추천 부탁드립니다.