[문의] 세로 인장 도움 요청드려요

안녕하세요.

제가 초보라서 복붙정도만 할줄알고 용어 검색도 좀 해봤는데 막혀서 도움요청 드립니다.

'메우' 님꺼 세로 인장 만들고있는데 

버튼 누르면 상자 나오는게 아니라 이미지가 나오게 만들고싶습니다. ( 닉네임 '더블스코어'님처럼)

~~~메뉴 1 내용~~~ 이쪽에 써야하는지는 알겠는데 어떻게 해야하는지 잘 모르겠습니다.

내용만 어느정도 알려주시면 여백이나 사진크기는 제가 어느정도 수치 넣어봐서 조절하도록 하겠습니다.

밑에는 제 인장 궁금한 부분 복사해왔습니다.

아 그리고 ♥누를때랑 다른버튼 누를때랑 배경이 길어졌다 짧아졌다하는건 어디가 문제인가요??

<div data-inven-tabs style="padding-top: 16px;">

<div style="float: left;">

<div data-inven-tab-for="0" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">♥</div>

<div data-inven-tab-for="1" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">M</div>

<!--새 버튼 추가하는 곳-->

<div data-inven-tab-for="3" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">A</div>

<div data-inven-tab-for="4" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">M</div>

<div data-inven-tab-for="5" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">A</div>

<div data-inven-tab-for="6" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">M</div>

<div data-inven-tab-for="7" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">O</div>

<div data-inven-tab-for="8" data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'}}" style="width: 12px; margin: 6px 0; padding: 4px 2px; border-radius: 0 6px 6px 0; background-color: #633C5F; color: white; cursor: pointer;">O</div>

</div>

<div style="margin-left: 30px; margin-top: 6px; padding-bottom: 12px;">

<div data-inven-tab-id="0" style="min-height: 300px;"><!--메인 메뉴 내용-->

</div>

<div data-inven-tab-id="1" style="display: none;"><!--메뉴 1 내용-->

<div style="display: inline-block; padding: 4px 8px; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #633C5F;">

~~~메뉴 1 내용~~~

</div>

</div>

<!--새 내용 추가하는 곳-->

</div>

</div>

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

이미지 넣는건 이것저것 보면서 해결했습니다

 ♥누를때랑 다른버튼 누를때랑 배경이 길어졌다 짧아졌다하는건 어디가 문제인가요??

 

 이 문제는 아직 해결 못 했습니다.