우선, 원래의 마격기 소스코드를 살펴보겠습니다.


<div style="padding: 0px; border-radius: 5px; border: 1px solid rgb(245, 169, 208); border-image: none; overflow: hidden; font-size: 11px; margin-top: 16px; margin-left: 6px; display: inline-block; -ms-zoom: 1; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png');" data-inven-nick-default="미스터사탄" data-inven-result-detail="" data-no-tooltip="" data-inven-action="last-attack-1,last-attack-5,last-attack-10,last-attack-20,last-attack-all,search-profile,send-note">

<span style="padding: 0px 4px; border: 0px currentColor; border-image: none; width: 88px; height: 21px; color: rgb(255, 0, 255); line-height: 21px; font-size: 12px; float: left;" data-inven-attr-for="input">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="button">
</span>

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

</div>


마격기의 data-inven-action 속성의 값으로 마격기에 추가할 기능들을 넣을 수 있습니다.

위 마격기의 경우 

last-attack-1
last-attack-5
last-attack-10
last-attack-20
last-attack-all
search-profile
send-note

이렇게 7가지 기능들이 포함되어 있습니다.


그리고 이렇게 추가된 기능들은 '버튼'의 형태로 마격기에 삽입되며

data-inven-attr-for="button" 속성을 갖는 span 태그로 스타일을 설정하여 꾸며줄 수 있습니다.


즉, data-inven-attr-for="button"을 포함한 span 태그를 통해

data-inven-action의 값으로 포함된 버튼 모두에 스타일을 '일괄 적용' 한다는 의미입니다.



반면에, 마격기에 스타일이 '개별 적용' 된 버튼을 추가하려면

마격기 div 태그 내에 span 태그를 새롭게 추가하여 

해당 태그에 data-inven-attr-for 속성을 삽입하고, 

그 값으로 해당되는 기능들(last-attack-1, ... 등등)을 지정해주면 됩니다.


 예시 )


<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="last-attack-1">
</span>



그리고 기존의 data-inven-action 내부의 값들은 중복되어 추가되므로, 모두 제거해야 합니다.

( data-inven-action=""  )  -> 이렇게 값들을 제거하여 비워두면 됩니다.




수정한 인장 소스 코드입니다.


<div style="text-align: left;"><br>
</div>

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

<!-- 마격기 시작 -->

<div style="padding: 0px; border-radius: 5px; border: 1px solid rgb(245, 169, 208); border-image: none; overflow: hidden; font-size: 11px; margin-top: 16px; margin-left: 6px; display: inline-block; -ms-zoom: 1; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png');" data-inven-nick-default="미스터사탄" data-inven-result-detail="" data-no-tooltip="" data-inven-action="">

<span style="padding: 0px 4px; border: 0px currentColor; border-image: none; width: 88px; height: 21px; color: rgb(255, 0, 255); line-height: 21px; font-size: 12px; float: left;" data-inven-attr-for="input">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="last-attack-1">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="last-attack-5">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="last-attack-10">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="last-attack-20">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: green; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="last-attack-all">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="search-profile">
</span>

<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(255, 191, 0);" data-inven-attr-for="send-note">
</span>

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

</div>

<!-- 마격기 끝 -->

</div>

<div style="text-align: left;"><br>
</div>

<div style="text-align: left;"><br>
</div>

<div style="text-align: left;">
<img width="438" src="https://upload2.inven.co.kr/upload/2017/09/11/bbs/i15272351142.gif" border="0">
<img width="438" src="https://upload2.inven.co.kr/upload/2017/10/06/bbs/i14753984776.gif" border="0">
<img width="438" src="https://upload2.inven.co.kr/upload/2017/09/11/bbs/i15027299382.gif" border="0"><br>
</div>

<p style="margin: 0px 0px 10px; text-align: justify; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "KoPub Dotum"; font-size: 14px; font-style: normal; font-weight: 300; word-spacing: 0px; white-space: normal; box-sizing: border-box; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<img width="438" src="https://upload2.inven.co.kr/upload/2017/10/07/bbs/i15539913886.gif" border="0">
<img width="438" src="https://upload2.inven.co.kr/upload/2017/12/22/bbs/i15602121133.gif" border="0">
<img width="438" src="https://upload2.inven.co.kr/upload/2017/09/11/bbs/i15264222383.gif" border="0">
<img width="438" src="https://upload2.inven.co.kr/upload/2017/09/14/bbs/i14304630255.gif" border="0">
<img src="https://upload2.inven.co.kr/upload/2017/10/20/bbs/i16510954377.png" border="0">
<img src="https://static.inven.co.kr/image_2011/board/emoticon/inven_00a.gif" border="0"><br></p>

<div style="text-align: center;">
<img src="https://upload2.inven.co.kr/upload/2017/10/08/bbs/i14119483129.jpg" border="0" data-inven-toggle="seal-img">
</div>

<div style="display: none;" data-inven-id="seal-img">

<div style="height: 550px; overflow: auto;">