|
2018-01-19 20:01
조회: 1,987
추천: 3
답변입니다.수정한 인장입니다.
<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. 및 <br>의 반복 사용에 대하여 공백 엔티티와 개행 태그를 반복하여 여백을 표현하는 건 좋지 않습니다. 로 표현된 왼쪽 여백은 margin-left로 변경하였으며, <br>로 표현된 상하 여백은 margin-top으로 변경하였습니다. 3. min-height:360px 인장 전체의 최소 높이를 360px로 설정하여, 내용이 비어있는 마지막 탭의 경우에도 인장의 높이가 적어도 360px만큼 표현되도록 하였습니다. |
Want 

