Want
2018-01-13 22:24
조회: 3,126
추천: 6
마격기를 수정한 인장입니다.- Playing List - Final Fantasy 14 Online : STORMBLOOD League Of Legends NieR: AutoMata GIRLS' FRONTLINE <span style="color: #000080; font-weight: bold;"><br> </span> <div> <img width="100%" src="https://upload2.inven.co.kr/upload/2016/08/30/bbs/i10844447424.jpg"> </div> <div style="width: 0px; height: 0px; display: inline-block;"> <div style="width: 450px;"> <div style="background: url('https://upload2.inven.co.kr/upload/2017/01/10/bbs/i13431226605.jpg') no-repeat center / 100%; margin: 0px auto; border-radius: 80px; top: -90px; width: 146px; height: 146px; overflow: hidden; position: relative;"> <div style="transition:0.4s; width: 146px; height: 146px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-toggle="sealing" data-inven-over-css="{'_SELF_':{'background-color':'rgba(255,255,255,0.4)','color':'rgba(55,55,55,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}"> <div style="padding: 1em; text-align: center; font-size: 30px; font-weight: 900;">SHIRO! </div> </div> </div> </div> </div> <div style="background-color: white;"> <div style="height: 60px;"> </div> <div style="padding: 1em; transition:0.4s; text-align: center; display: none;" data-inven-id="sealing"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/02/20/bbs/i13872681789.jpg"><br><br> <div style="color: red; font-family: '맑은 고딕'; font-size: 15px; font-weight: normal;"> 치킨바나나님 作 </div> </div> </div> <div style="padding: 1em; text-align: center;"> <div style="color: black; font-family: '맑은 고딕'; font-size: 15px; font-weight: normal;">- Playing List -<br> </div> <div style="color: black; font-family: '맑은 고딕'; font-size: 15px; font-weight: normal;">Final Fantasy 14 Online : STORMBLOOD<br>League Of Legends<br> </div> <div style="color: black; font-family: '맑은 고딕'; font-size: 15px; font-weight: normal;">NieR: AutoMata </div> <div style="color: black; font-family: '맑은 고딕'; font-size: 15px; font-weight: normal;">GIRLS' FRONTLINE </div> <div style="color: black; font-family: '맑은 고딕'; font-size: 15px; font-weight: normal;"><br> </div> </div> <div style="width:2000px;"> <div style="display: inline-block; float:left; width: 450px; padding: 1em; text-align: left"> <!-- 가입일 --> <div style="float:left; background: url('https://upload2.inven.co.kr/upload/2016/12/29/bbs/i13325244847.png'); margin: 0px 164px 0px 32px; border-radius: 10px; border: 3px solid white; border-image: none; width: 92px; height: 92px; overflow: hidden; display: inline-block; cursor:default; text-align:center;"> <div style="transition:0.4s; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-over-css="{'_SELF_':{'background-color':'red','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}"> <div style="padding: 0.5em; font-family: '맑은 고딕'; font-size: 15px;">가입일<br> <span style="font-size: 15px; font-weight: bold;">D + </span> <span style="font-weight: bold;" data-inven-dday="2012-07-29"> </span> </div> </div> </div> <!-- 쪽지 --> <div style="float:left; background: url('https://upload2.inven.co.kr/upload/2016/12/29/bbs/i13380229843.jpg'); margin: 0px; border-radius: 10px; border: 3px solid white; border-image: none; width: 92px; height: 92px; overflow: hidden; display: inline-block;"> <div style="transition:0.4s; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-over-css="{'_SELF_':{'background-color':'green','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}"> <div style="margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;" data-inven-nick-default="Phantasma" data-inven-action=""> <span style="display: none;" data-inven-attr-for="input"> </span> <span style="margin: 0px; padding: 0px; border-radius: 123px; border: 0px currentColor; transition:0.4s; border-image: none; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); font-family: '맑은 고딕', sans-serif; font-size: 20px; background-color: rgba(255, 255, 255, 0);" data-inven-over-css="{'_SELF_':{'color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'color':'rgba(255,255,255,0)'}}" data-inven-attr-for="send-note" data-inven-text="쪽지"> </span> </div> </div> </div> </div> <!-- 마격기 --> <div style="float:left; position:relative; left:-314px; top:12px; background: url('https://upload2.inven.co.kr/upload/2016/12/29/bbs/i13353313324.jpg'); margin: 0px 15px; border-radius: 10px; border: 3px solid white; border-image: none; width: 92px; height: 92px; overflow: hidden; display: inline-block;"> <div style="transition:0.4s; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-id="Attr"> </div> </div> <div style="float:left; position:relative; left:-428px; top:12px; margin: 0px; padding: 0px; width: 92px; height: 92px; border: 3px solid rgba(255, 255, 255, 0); border-radius:10px; background:rgba(0,0,0,0.0); overflow:hidden; display:inline-block;" data-inven-nick-default="Phantasma" data-inven-action=""> <span style="display: none;" data-inven-attr-for="input"> </span> <span style="margin: 0px; padding: 0px; border-radius: 123px; border: 0px currentColor; transition:0.4s; border-image: none; width: 92px; height: 92px; color: rgba(255, 255, 255, 0); font-family: '맑은 고딕', sans-serif; font-size: 20px; background-color: rgba(255, 255, 255, 0);" data-inven-over-css="{'_SELF_':{'color':'rgba(255,255,255,1)'}, 'Attr':{'background-color':'blue','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'color':'rgba(255,255,255,0)'}, 'Attr':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-attr-for="last-attack-all" data-inven-text="마격"> </span> <span data-inven-attr-for="action-result" data-position="out" style="background-color: rgba(255, 255, 255, 0.5); color: blue; margin-left:68px; border-radius: 6px; border: 1px solid blue; padding: 4px 6px; font-size: 11px; width: 300px;"></span> </div> </div> 수정 전의 인장과 외형으로만 비교 해본다면 마격기 결과창만 추가된 것 뿐이지만, 소스 코드에서는 구조가 많이 바뀌었습니다. 기존의 형태는 <상위 div> <가입일> <마격기> <쪽지> </상위 div> 이런 형태였지만 마격기 결과창을 생성하기 위해서는 마격기를 완전히 분리해야 했습니다. 따라서 <최상위 div> <상위 div> <가입일> <쪽지> </상위 div> <마격기> </최상위 div> 이런 형태로 변경하였습니다. 따로 분리된 마격기는 position:relative 속성을 이용하여 가입일과 쪽지 블록 사이의 중앙 여백 부분에 위치를 정교히 이동한 형태입니다. |