[기타] 랜덤을 적용한 인장입니다.

<!-- 전체 배경 시작 -->
<div style="background: url('https://upload2.inven.co.kr/upload/2016/10/17/bbs/i11918272162.jpg'); font-size: 11px; width:1000px; height:520px; overflow:hidden;">

<!-- 인장 시작 -->
<div style="display:inline-block; float:left; position:relative; width:450px; height:520px; z-index:2">

<div style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); padding: 4px 6px;">

<div style="background: url('http://www.randomurl.ze.am/e/jd.php?d=2010-08-27 07:19:03&amp;c=839DFA#.png'); height: 20px;">
</div>

</div>

<!-- 마격기 시작 -->
<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 16px; margin-left: 6px; color: #839DFA; border-radius: 6px; border: 1px solid #839DFA; overflow: hidden; font-size: 11px; padding: 0;" data-inven-action="last-attack-5,last-attack-10,last-attack-all,search-profile" data-inven-nick-default="네잎클로버" data-inven-align="center" data-no-tooltip="" data-inven-result-detail="">

<span data-inven-attr-for="input" style="float: left; margin: 2px 1px 0 4px; width: 130px; font-size: 11px; color: #839DFA; padding: 0 2px; height: 17px;">
</span>

<span data-inven-attr-for="button" style="float: left; margin: 0 0 0 1px; padding: 6px 4px 4px 4px; background-color: #839DFA; color: white; border: 0; font-size: 11px; line-height: 100%; height: auto;">
</span>

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

</div>
<!-- 마격기 끝 -->

<!-- 탭 영역 시작 -->
<div data-inven-tabs="" style="padding-top: 16px;">

<!-- 탭 버튼 시작 -->
<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: #839DFA; 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: #839DFA; 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: #839DFA; color: white; cursor: pointer;">꽃말
</div>

<div data-inven-tab-for="3" 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: #839DFA; color: white; cursor: pointer;">카드깡
</div>

<!--버튼 추가하는곳-->

</div>
<!-- 탭 버튼 끝 -->

<!-- 탭 내용 시작 -->
<div style="margin-left: 30px; margin-top: 6px; padding-bottom: 12px;">

<div data-inven-tab-id="0" style="min-height: 300px;">

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

<div style="border-bottom: 1px solid #839DFA; color: #839DFA;padding: 4px 8px; font-weight: bold;">♣ 네잎클로버 ♧
</div>

<div style="border-bottom: 1px solid #839DFA; color: #839DFA;padding: 4px 8px; font-weight: bold;">---------------
</div>

<div style="border-bottom: 1px solid #839DFA; color: #839DFA;padding: 4px 8px; font-weight: bold;">질문은 쪽지로
</div>

</div>

</div>

<div data-inven-tab-id="1" style="display: none;">

<div style="display: inline-block; padding: 4px 8px; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #839DFA;">
<img src="https://upload2.inven.co.kr/upload/2017/12/23/bbs/i13138535539.png" border="0" width="400">
</div>

</div>

<div data-inven-tab-id="2" style="display: none;">

<div style="display: inline-block; padding: 4px 8px; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #839DFA;">

<div style="text-align: center;"><font color="#13D965">* 3잎클로버- 행복(幸福): 복된 운수 (happy)&nbsp;</font>
</div>

<div style="text-align: center;"><font color="#13D965">* 4잎클로버- 행운(幸運): 좋은 운수 (luck)&nbsp;</font>
</div>

<div style="text-align: center;"><font color="#13D965">* 5잎클로버- 다복(多福): 많은 운수 (money)&nbsp;</font>
</div>

<div style="text-align: center;"><font color="#13D965">* 6잎클로버- 여운(餘運): 넘친 운수 (miracle)&nbsp;</font>
</div>

<div style="text-align: center;"><font color="#13D965">* 7잎클로버- 천운(天運): 하늘 운수 (chance) &nbsp;</font>
</div>

</div>

</div>

<div data-inven-tab-id="3" style="display: none;">

<div style="display: inline-block; padding: 4px 8px; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #839DFA;">카드깡 내용
</div>

</div>

<!--버튼추가후 내용추가-->

</div>
<!-- 탭 내용 끝 -->

</div>
<!-- 탭 영역 끝 -->

</div>
<!-- 인장 끝 -->


<!-- 캐릭터 랜덤 배경 시작 -->
<div style="display:inline-block; float:left; position:relative; width:450px; height:520px; z-index:1; left:-450px;" data-inven-random="back1, back2, back3, back4">

<div style="display: block; background: url('https://upload2.inven.co.kr/upload/2017/08/29/bbs/i16435482904.png') no-repeat 0px; background-position: right bottom; width:450px; height:520px;"
data-inven-id="back1">
</div>

<div style="display: block; background: url('https://upload2.inven.co.kr/upload/2017/08/29/bbs/i15152993110.png') no-repeat 0px; background-position: right bottom; width:450px; height:520px;"
data-inven-id="back2">
</div>

<div style="display: block; background: url('https://upload2.inven.co.kr/upload/2017/11/13/bbs/i13502941232.png') no-repeat 0px; background-position: right bottom; width:450px; height:520px;"
data-inven-id="back3">
</div>

<div style="display: block; background: url('https://upload2.inven.co.kr/upload/2017/11/13/bbs/i14630470082.png') no-repeat 0px; background-position: right bottom; width:450px; height:520px;"
data-inven-id="back4">
</div>

</div>
<!-- 캐릭터 랜덤 배경 끝 -->

</div>
<!-- 전체 배경 끝 -->
 

data-inven-random의 타겟이 될 해당 이미지가 포함된 태그를 살펴보니

인장의 내용을 하위 태그로 갖는 상위 div 태그였기에

부득이하게 위처럼 구조를 변경했습니다.

따라서 각각 탭에 따라 배경 높이가 달라지던 기존과는 다르게,

배경 높이를 고정하였습니다.

물론 기존의 인장에서 해당 태그에 random의 타겟이 될 id를 부여하고

랜덤을 적용할 수도 있지만,

그렇게 된다면 구조가 아마 이렇게 될겁니다.

<!-- 전체 배경 시작 -->
<div style="background: url('https://upload2.inven.co.kr/upload/2016/10/17/bbs/i11918272162.jpg'); font-size: 11px;">


<!-- 랜덤 코드 -->
<div data-inven-random="back1, back2, back3, back4">
</div>


<!-- 랜덤 배경 1 시작 -->
<div style="background: url('https://upload2.inven.co.kr/upload/2017/08/29/bbs/i16435482904.png') no-repeat 0px; background-position: right bottom; min-height: 400px;"
data-inven-id="back1">

<div>
<!-- 인장 내용 전체 -->
</div>

</div>
<!-- 랜덤 배경 1 끝 -->


<!-- 랜덤 배경 2 시작 -->
<div style="background: url('https://upload2.inven.co.kr/upload/2017/08/29/bbs/i15152993110.png') no-repeat 0px; background-position: right bottom; min-height: 400px;"
data-inven-id="back2">

<div>
<!-- 인장 내용 전체 -->
</div>

</div>
<!-- 랜덤 배경 2 끝 -->


<!-- 랜덤 배경 3 시작 -->
<div style="background: url('https://upload2.inven.co.kr/upload/2017/11/13/bbs/i13502941232.png') no-repeat 0px; background-position: right bottom; min-height: 400px;"
data-inven-id="back3">

<div>
<!-- 인장 내용 전체 -->
</div>

</div>
<!-- 랜덤 배경 3 끝 -->


<!-- 랜덤 배경 4 시작 -->
<div style="background: url('https://upload2.inven.co.kr/upload/2017/11/13/bbs/i14630470082.png') no-repeat 0px; background-position: right bottom; min-height: 400px;"
data-inven-id="back4">

<div>
<!-- 인장 내용 전체 -->
</div>

</div>
<!-- 랜덤 배경 4 끝 -->


</div>
<!-- 전체 배경 끝 --> 

즉, 인장 전체 내용이 4번이나 반복되므로 매우 비효율적인 코드가 되기에

이런 방식은 추천하지 않습니다.

맨 위의 인장 스크립트를 적용하시면 되고,

추가적인 문의사항은 댓글이나 새 글로 남겨주시길 바랍니다.