[기타] 마격기를 수정한 인장입니다.

SHIRO!

치킨바나나님 作

- Playing List -

Final Fantasy 14 Online : STORMBLOOD
League Of Legends

NieR: AutoMata

GIRLS' FRONTLINE

가입일
D +

 

<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 속성을 이용하여

가입일과 쪽지 블록 사이의 중앙 여백 부분에 위치를 정교히 이동한 형태입니다.