답변입니다. | 웹진 인벤

커뮤니티메뉴

로그인 전체서비스

인벤 스크립트 게시판

전체보기

글쓰기

모바일 검색

모바일 상단 메뉴

본문 페이지

[기타] 답변입니다.

Want

댓글: 1 개

2017-12-23 02:24:24

우선, 수정되지 않은 스크립트를 정리한 모습입니다.

<div data-inven-tabs="">

<span data-inven-tab-for="tab_1">
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11315632514.png">
</span>

<span data-inven-tab-for="tab_2">
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11339743120.png">
</span>

<span data-inven-tab-for="tab_3">
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11389756980.png">
</span>

<div data-inven-tab-id="tab_1"><br><center>
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i13202870198.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i14639640267.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15134329838.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15154665689.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15142894800.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i16494713102.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15157183978.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i16114633055.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i13599932767.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15166380474.gif">
<img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i14667351399.gif"></center>
</div>

<div data-inven-tab-id="tab_2">

<div style="text-align: center;" data-inven-tab-id="tab_2"><font face="궁서" size="4"><b>아키에이지</b></font>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <핏빛전설> 스게머니@에안나</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <핏빛전설> / <서풍> 후랄프@에안나</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <레드리본> 후랄프네@에안나</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <레드리본> 임형@누이</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">리셋 <서비스종료> 임형@누이</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">리셋 <서비스종료> 뻐끔@누이</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <유선이가 쏘아올린 원정대> 뻐끔@누이</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <새봄> 잘생겨서죄송합니다@누이</font></strike>
</div>

<div style="text-align: center;" data-inven-tab-id="tab_2"><font size="2"><strike>누이아연합 <불타는 서대륙> 임형@누이</strike></font><font size="2"><b><br></b></font>
</div>

</div>

</div>

<div data-inven-tabs="">

<div style="text-align: center;" data-inven-tab-id="tab_2"><font size="2"><strike><br></strike></font>
</div>

</div>

<font size="2">

<div><br>
</div>

</font>

<div style="text-align: center;" data-inven-tabs="" data-inven-tab-id="tab_2"><b><font face="궁서" size="4">메이플스토리</font></b>
</div>

<div style="text-align: center;" data-inven-tabs="" data-inven-tab-id="tab_2">

<span style="font-size: 9pt;"><font size="2"><strike>플레임위자드 <포동> 엔끕@엘리시움</strike></font>
</span>

</div>

<div style="text-align: center;" data-inven-tabs="" data-inven-tab-id="tab_2">

<span style="font-size: 9pt;"><font size="2"><strike><br></strike></font>
</span>

</div>

<div style="text-align: center" data-inven-tabs="" data-inven-tab-id="tab_2">

<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 16px; margin-left: 6px; border-radius: 6px; border: 1px solid #BE4BE5; overflow: hidden; font-size: 11px; padding: 0;" data-inven-nick-default="뻐끄미" data-inven-result-detail="" data-no-tooltip="" data-inven-action="last-attack-10,last-attack-20,last-attack-all,search-profile">

<span style="float: left; width: 130px; font-size: 11px; color: #BE4BE5; padding: 0 4px; height: 21px; line-height: 21px; border: 0;" data-inven-attr-for="input">
</span>

<span style="float: left; margin: 0 0 0 1px; padding: 6px 4px 4px 4px; background-color: #BE4BE5; color: white; border: 0; font-size: 11px; line-height: 100%; height: auto;" data-inven-attr-for="button">
</span>

<span style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 2px; margin-left: 6px; color: #BE4BE5; border-radius: 6px; border: 1px solid #BE4BE5; padding: 4px 6px; font-size: 11px; width: 300px;" data-inven-attr-for="action-result" data-position="out">
</span>

</div>

</div>

<div data-inven-tabs="" data-inven-tab-id="tab_2"><br>
</div>

<div data-inven-tabs="" data-inven-tab-id="tab_3"><br><center>
<img width="95%" src="https://upload2.inven.co.kr/upload/2016/09/20/bbs/i13297641438.png">
<img width="95%" src="https://upload2.inven.co.kr/upload/2016/08/27/bbs/i11523752713.png">
<img width="95%" src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i13161682349.jpg">
<img width="95%" src="https://upload2.inven.co.kr/upload/2016/08/03/bbs/i10332710657.jpg">
<img width="95%" src="https://upload2.inven.co.kr/upload/2016/06/22/bbs/i12298675049.jpg">
<img width="95%" src="https://upload2.inven.co.kr/upload/2016/06/30/bbs/i12782791626.jpg">
<img width="95%" src="https://upload2.inven.co.kr/upload/2016/02/10/bbs/i13102164769.gif"></center>
</div>

아주.. 큰 문제점이 있습니다.

인벤 스크립트의 '탭' 의 기본 구조는 보통 이렇습니다.

<div data-inven-tabs="">


<div data-inven-tab-for="1">
</div>


<div data-inven-tab-for="2">
</div>


<div data-inven-tab-for="3">
</div>


<div data-inven-tab-id="1">
</div>


<div data-inven-tab-id="2">
</div>


<div data-inven-tab-id="3">
</div>

</div>

1. data-inven-tabs 속성으로, 탭을 사용할 영역을 지정합니다.

2. data-inven-tab-for 속성으로, 탭의 버튼을 각각 지정합니다.

3. data-inven-tab-id 속성으로, 탭의 내용을 각각 지정합니다.

그런데 기존 스크립트를 보시면 탭 관련 속성 사용이 잘못되어 있습니다.

탭 영역을 지정하는 tabs 속성을 너무 자주 사용하였고

(딱 1번만 최상위 태그에서 사용하면 됩니다)

tabs 속성을 갖는 태그가 2번 탭에서 닫혀버렸으며,

2번 탭의 영역 구성이 잘못되어 있고

탭의 id를 불필요하게 탭 내용의 하위태그마다 중복 선언하였습니다.

(역시 탭 내용의 상위 태그에서 딱 1번 사용하면 됩니다)

올바르게 수정한 스크립트입니다.

<div data-inven-tabs="">

<span data-inven-tab-for="tab_1">
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11315632514.png">
</span>

<span data-inven-tab-for="tab_2">
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11339743120.png">
</span>

<span data-inven-tab-for="tab_3">
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11389756980.png">
</span>


<div data-inven-tab-id="tab_1"><br>

</center>
</div>



<div data-inven-tab-id="tab_2">

<div style="text-align: center;"><font face="궁서" size="4"><b>아키에이지</b></font>
</div>

<div style="text-align: center;"><strike><font size="2">누이아연합 <핏빛전설> 스게머니@에안나</font></strike>
</div>

<div style="text-align: center;"><strike><font size="2">누이아연합 <핏빛전설> / <서풍> 후랄프@에안나</font></strike>
</div>

<div style="text-align: center;"><strike><font size="2">누이아연합 <레드리본> 후랄프네@에안나</font></strike>
</div>

<div style="text-align: center;"><strike><font size="2">누이아연합 <레드리본> 임형@누이</font></strike>
</div>

<div style="text-align: center;"><strike><font size="2">리셋 <서비스종료> 임형@누이</font></strike>
</div>

<div style="text-align: center;"><strike><font size="2">리셋 <서비스종료> 뻐끔@누이</font></strike>
</div>

<div style="text-align: center;"><strike><font size="2">누이아연합 <유선이가 쏘아올린 원정대> 뻐끔@누이</font></strike>
</div>

<div style="text-align: center;"><strike><font size="2">누이아연합 <새봄> 잘생겨서죄송합니다@누이</font></strike>
</div>

<div style="text-align: center;"><font size="2"><strike>누이아연합 <불타는 서대륙> 임형@누이</strike></font><font size="2"><b><br></b></font>
</div>

<div style="text-align: center;"><font size="2"><strike><br></strike></font>
</div>

<font size="2">
<div><br>
</div>
</font>

<div style="text-align: center;"><b><font face="궁서" size="4">메이플스토리</font></b>
</div>

<div style="text-align: center;">

<span style="font-size: 9pt;"><font size="2"><strike>플레임위자드 <포동> 엔끕@엘리시움</strike></font>
</span>

</div>

<div style="text-align: center;">

<span style="font-size: 9pt;"><font size="2"><strike><br></strike></font>
</span>

</div>

<div style="text-align: center">

<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 16px; margin-left: 6px; border-radius: 6px; border: 1px solid #BE4BE5; overflow: hidden; font-size: 11px; padding: 0;" data-inven-nick-default="뻐끄미" data-inven-result-detail="" data-no-tooltip="" data-inven-action="last-attack-10,last-attack-20,last-attack-all,search-profile">

<span style="float: left; width: 130px; font-size: 11px; color: #BE4BE5; padding: 0 4px; height: 21px; line-height: 21px; border: 0;" data-inven-attr-for="input">
</span>

<span style="float: left; margin: 0 0 0 1px; padding: 6px 4px 4px 4px; background-color: #BE4BE5; color: white; border: 0; font-size: 11px; line-height: 100%; height: auto;" data-inven-attr-for="button">
</span>

<span style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 2px; margin-left: 6px; color: #BE4BE5; border-radius: 6px; border: 1px solid #BE4BE5; padding: 4px 6px; font-size: 11px; width: 300px;" data-inven-attr-for="action-result" data-position="out">
</span>

</div>

</div>

</div>



<div data-inven-tab-id="tab_3"><br>