[기타] 답변입니다.

수정한 인장입니다.

<div style="background-image:url('https://upload2.inven.co.kr/upload/2017/05/21/bbs/i15935859553.jpg'); background-size:410px 563.75px; background-repeat: no-repeat; padding-top:10px; padding-bottom:30px; min-height:360px;">

<!-- TABS Start -->

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

<!-- TAB Buttons Start -->

<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: #0404b4; 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: #0404b4; color: white; cursor: pointer;">랭킹

</div>

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

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: #0404b4; color: white; cursor: pointer;">히트작

</div>

</div>

<!-- TAB Buttons End -->

<!-- TAB Contents Start -->

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

<div data-inven-action="" data-inven-nick-default="미나스트리스" data-inven-result-detail="" style="margin-left:10px; border-color:skyblue;">

<span data-inven-attr-for="input" style="border-color: skyblue;">

</span>

<span data-inven-attr-for="last-attack-1" style="background-color: #A9E2F3; border-color:#A9E2F3; color: #fff; font-weight: bold;">

</span>

<span data-inven-attr-for="last-attack-5" style="background-color: #A9E2F3; border-color:#A9E2F3; color: #fff; font-weight: bold;">

</span>

<span data-inven-attr-for="last-attack-10" style="background-color: #A9E2F3; border-color:#A9E2F3; color: #fff; font-weight: bold;">

</span>

<span data-inven-attr-for="last-attack-all" style="background-color: #A9E2F3; border-color:#A9E2F3; color: #fff; font-weight: bold;">

</span>

</div>

<img src="https://upload2.inven.co.kr/upload/2018/01/19/bbs/i14328441307.gif" style="margin-top: 256px; margin-left:25px; margin-right:10px; display:block; border:2px solid skyblue; border-radius:7px">

</div>

 

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

<div style="color:#0b0b61; font-weight:bolder; text-align:center; margin-top: 0px; margin-right:40px; font-size:1.5em"><p>애니/라노벨/만화책 랭킹 기록용 블로그</p>

<p style="padding-left: 160px;">▶▶<a href="https://blog.naver.com/gzoro" target="_blank" style="text-decoration:none"><font size="2em" color="#obob61" font-weight:bolder="">클릭</font></a>

</p>

</div>

<img src="https://upload2.inven.co.kr/upload/2018/01/19/bbs/i15257430403.gif" style="margin-top: 240px; margin-left:25px; margin-right:10px; display:block; border:2px solid skyblue; border-radius:7px">

</div>

 

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

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

<div style="display: block; width: 360px; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #0404b4;">

<div style="border-bottom: 1px solid #0404b4; color: #0404b4;padding: 4px 8px; font-weight: bold;">히트작 탐방

</div>

<div style="padding: 4px 8px;">

<a href="http://www.inven.co.kr/board/webzine/2652/538878?iskin=webzine" target="_blank" style="text-decoration:none"><font size="1.5em" color="#0404b4">1. 1960년대 초중기</font>

</a>

</div>

</div>

</div>

</div>

<!-- TAB Contents End -->

</div>

<!-- TABS End -->

</div>

1. 다른 탭 버튼을 누를 때마다 세로탭이 이동한 이유

- 분홍색으로 표시 해놓은 margin-top 때문입니다.

탭 1에는 margin-top의 값으로 20px가 설정되어 탭이 20px만큼 내려갔고,

탭 2에는 margin-top의 값으로 6px가 설정되어 탭이 6px만큼 내려갔습니다.

모두 0px로 변경하였습니다.

2. &nbsp; 및 <br>의 반복 사용에 대하여

공백 엔티티와 개행 태그를 반복하여 여백을 표현하는 건 좋지 않습니다.

&nbsp;로 표현된 왼쪽 여백은 margin-left로 변경하였으며,

<br>로 표현된 상하 여백은 margin-top으로 변경하였습니다.

3. min-height:360px

인장 전체의 최소 높이를 360px로 설정하여, 내용이 비어있는 마지막 탭의 경우에도

인장의 높이가 적어도 360px만큼 표현되도록 하였습니다.