[문의] 툴팁과 인장 접기/펼치기 질문있습니다

1. 툴팁

링크를 보고 어느정도는 기초는 이해했으나 잘 안되더라구요..

제 인장의 세로메뉴에 있는 버튼(♥,M,A,M,A,M,O,O)에 마우스를 올리면 툴팁이 뜨게 바꾸고싶습니다.

글자색 : FFFFFF

바탕색 : 633c5f

테두리 : 633c5f

<a href="#"

    data-inven-tooltip="#FFFFFF;#633c5f;#633c5f;M </a>

이렇게 했더니 기존에 있던 글자가 바뀌지않고 그 밑에 새로 글자가 생기더군요.

아래 부분은 제 인장 일부입니다.

<div style="float: left;">
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="0">♥</div>
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="1">M</div>
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="3">A</div>
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="4">M</div>
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="5">A</div>
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="6">M</div>
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="7">O</div>
<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: #633c5f;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-tab-for="8">O</div>
</div>

2. 인장 접기 / 펼치기

제 인장에 있는 이 이미지 밑부분(마우스오버 3x3)을 접기/펼치기로 바꾸고 싶습니다.

접고 펼치는것도 이미지만 붙일줄 밖에 몰라서 도움 요청드립니다.

어느부분에 어떤 내용을 삽입해야하는지 알려주세요.

아래 부분은 제 인장 일부입니다.

<img src="https://upload.inven.co.kr/upload/2013/08/21/bbs/i2386188896.gif">
<div style="display: block;" data-inven-id="main"><table cellpadding="0"><tbody><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t1':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16502656387.jpg"></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t2':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14769389670.jpg"></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t3':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14287622935.jpg"></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t4':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16543775874.jpg"></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t5':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15380952788.jpg"></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t6':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16556588711.jpg"></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t7':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13787416231.jpg"></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t8':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15307422476.jpg"></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-over-css="{'main':{'display':'none'},'t9':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16583275177.jpg"></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t1" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;" data-inven-out-css="{'t1':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16528253693.gif" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14769389670.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14287622935.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16543775874.jpg" style=""></div></td><td rowspan="2" colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 302px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14267266846.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13787416231.jpg" style=""></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t2" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16502656387.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;" data-inven-out-css="{'t2':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15535147621.gif" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14287622935.jpg" style=""></div></td></tr><tr><td rowspan="2" colspan="3"><div style="margin: 0px; padding: 0px; width: 454px; height: 302px; background-color: rgb(153, 153, 153);"><img width="454" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15598718521.jpg" style=""></div></td></tr><tr></tr></tbody></table></div><div style="display: none;" data-inven-id="t3" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16502656387.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14769389670.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;" data-inven-out-css="{'t3':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15730149159.gif" style=""></div></td></tr><tr><td rowspan="2" colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 302px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15653739106.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16556588711.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16583275177.jpg" style=""></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t4" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16502656387.jpg" style=""></div></td><td rowspan="3" colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 454px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15020149272.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;" data-inven-out-css="{'t4':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13912195313.gif" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13787416231.jpg" style=""></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t5" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 150px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13364772363.jpg" style=""></div></td><td rowspan="2"><div style="margin: 0px; padding: 0px; width: 150px; height: 302px; background-color: rgb(153, 153, 153);"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15048719066.jpg" style=""></div></td></tr><tr><td rowspan="2"><div style="margin: 0px; padding: 0px; width: 150px; height: 302px; background-color: rgb(153, 153, 153);"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13465583827.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;" data-inven-out-css="{'t5':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15285423608.gif" style=""></div></td></tr><tr><td colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 150px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16599879002.jpg" style=""></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t6" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td rowspan="3" colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 454px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14385449564.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14287622935.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;" data-inven-out-css="{'t6':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14637532413.gif" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16583275177.jpg" style=""></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t7" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16502656387.jpg" style=""></div></td><td rowspan="2" colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 302px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15531987859.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16543775874.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-out-css="{'t7':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13443883412.gif" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15307422476.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16583275177.jpg" style=""></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t8" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td rowspan="2" colspan="3"><div style="margin: 0px; padding: 0px; width: 454px; height: 302px; background-color: rgb(153, 153, 153);"><img width="454" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15530975279.jpg" style=""></div></td></tr><tr></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13787416231.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-out-css="{'t8':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16504922050.gif" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16583275177.jpg" style=""></div></td></tr></tbody></table></div><div style="display: none;" data-inven-id="t9" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}"><table cellpadding="0"><tbody><tr><td rowspan="2" colspan="2"><div style="margin: 0px; padding: 0px; width: 302px; height: 302px; background-color: rgb(153, 153, 153);"><img width="302" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14361949556.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i14287622935.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i16556588711.jpg" style=""></div></td></tr><tr><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i13787416231.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;"><img width="150" src="https://upload2.inven.co.kr/upload/2017/10/24/bbs/i15307422476.jpg" style=""></div></td><td><div style="margin: 0px; padding: 0px; width: 150px; height: 150px; display: inline-block;" data-inven-out-css="{'t9':{'display':'none'},'main':{'display':'block'}}"><img width="150" src="https://upload2.inven.co.kr/upload/2017/11/01/bbs/i16568122115.gif" style=""></div></td></tr></tbody></table></div>

3. 번외 질문

텍스트편집기를 따로 쓰는게 좋다하셔서 Noteppad++를 쓰고있는데, 

저번에 도움을 요청했는데 도와주신분꺼를 여기에 복붙하니 정리가 엄청 잘되있더라고요. 

줄바꾸기랑 <div></div> 끼리 연결(?)되있는듯한 걸로 본거같은데

혹시 그런기능이 따로있는건가요??

그렇게 보니까 눈에도 잘들어오고 좋더라고요. 

그리고 스크립트게시판 찾아보다가 검은 바탕에 하얀글씨,여러색깔 글씨 쓰는 텍스트편집기도 있던데

그건 이름이 뭔가요??

한꺼번에 게시물여러개 올리면 도배같아보일까봐 모아서 올립니다.

혹시 게시물 하나에 질문이 너무 많으면 따로올리도록 하겠습니다...