안녕하세요.
인벤 스크립트에 관심을 가져주셔서 감사합니다.


스크립트를 더욱 활용해 멋지게 인장을 꾸미고 싶지만,
공부할 시간이나 스크립트를 작성할 시간이 여의치 않으신 분들을 위해 준비해 봤습니다.


이번 편에서는 "게임 운세!"입니다.
지난번과 마찬가지로 오직 코드를 복사에서, 인벤토리의 HTML을 눌러서 붙여넣기로 사용할 수 있습니다.

인벤 스크립트의 무작위 출력 기능을 사용하여,
무작위로 운세를 뽑아 주는 기능입니다. 완전 무작위이기 때문에 잘 맞지는 않습니다.
(의외로 잘 맞는다고 하시는 분도 계시는 듯)

코드는 생각보다 길이가 깁니다. '코드 예시'를 누르기 전에 스크롤 주의!
그래도 완전 똑같은 코드가 15줄이나 반복되고 있다 보니, 조금만 살펴보시면 어려울 것은 없습니다.


코드 예시 (스크롤 주의)
코드 보충 설명
실제 적용 예시
<div class="txc-textbox" style="padding: 10px; border: 1px solid rgb(200, 200, 250); text-align: left;width:428px;background:url(http://upload2.inven.co.kr/upload/2016/03/31/bbs/i13589471145.png) no-repeat right bottom rgb(238, 238, 238);">
<b>☆★☆★ 당신의 오늘 게임 운세는? (;ㅁ;)</b><br><br>

<div data-inven-id="luck_ec">
<a href="#" data-inven-hide="luck_ec" data-inven-show="luck_er" style="text-decoration:none;">
<img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i11038972062.png" border="0" style="vertical-align:middle;"><span style=" padding-left: 10px; font-weight:bold;">강화 운세 ☜ 클릭!</span></a></div>
<div data-inven-id="luck_er" style="display:none;">
<a href="#" data-inven-random="e_luck1,e_luck2,e_luck3,e_luck4,e_luck5"></a>
<div data-inven-id="e_luck1" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12233465029.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">강화 운세는 <b>최악</b>입니다, 하는 강화마다 파괴 될 거예요. 절대 하지 마세요!</span></div>
<div data-inven-id="e_luck2" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12761943944.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">강화 운세는 <b>좋지 않네요.</b> 낮은 강화까지는 괜찮지만, 무리한 도전은 실패하고 말 것입니다.</span></div>
<div data-inven-id="e_luck3" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i13139748772.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">강화 운세는 <b>보통</b>입니다. 적당히 성공하고 적당히 실패하겠군요. 그럭저럭입니다.</span></div>
<div data-inven-id="e_luck4" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i11046103947.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">강화 운세는 <b>살짝 좋습니다.</b> 그동안 미뤄왔던 도전이 있다면, 한 번 고고싱?</span></div>
<div data-inven-id="e_luck5" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12309489415.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">강화 운세는 <b>매우 좋습니다!</b> 어서 달려가서 지르세요!</span></div>
</div>
<hr>
<div data-inven-id="luck_dc">
<a href="#" data-inven-hide="luck_dc" data-inven-show="luck_dr" style="text-decoration:none;">
<img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12010154437.png" border="0" style="vertical-align:middle;"><span style=" padding-left: 10px; font-weight:bold;">득템 운세 ☜ 클릭!</span></a></div>
<div data-inven-id="luck_dr" style="display:none;">
<a href="#" data-inven-random="d_luck1,d_luck2,d_luck3,d_luck4,d_luck5"></a>
<div data-inven-id="d_luck1" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12233465029.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">득템 운세는 <b>최악입니다.</b> 득템이 불가능해요! 맘 편이 다른 거라도 하시는 게 어떨까요?</span></div>
<div data-inven-id="d_luck2" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12761943944.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">득템 운세는 <b>좋지 않네요.</b> 겨우 하나 건져도 쓸모 있는 건 없겠네요.</span></div>
<div data-inven-id="d_luck3" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i13139748772.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">득템 운세는 <b>보통</b>입니다. 한만큼 대가는 받겠죠. 하지만 로또 같은 기대는 접어두시는 게 정신 건강에 좋습니다.</span></div>
<div data-inven-id="d_luck4" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i11046103947.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">득템 운세는 <b>약간 좋습니다.</b> 크진 않지만 뭔가 득템을 할지도?</span></div>
<div data-inven-id="d_luck5" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12309489415.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">득템 운세는 두근두근! <b>매우 좋습니다!</b> 무언가 대단한 걸 건질 것 같은 기분이 당신 뒤에서 빛납니다!</span></div>
</div>
<hr>
<div data-inven-id="luck_rc">
<a href="#" data-inven-hide="luck_rc" data-inven-show="luck_rr" style="text-decoration:none;">
<img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i13547254365.png" border="0" style="vertical-align:middle;"><span style=" padding-left: 10px; font-weight:bold;">뽑기 운세 ☜ 클릭!</span></a></div>
<div data-inven-id="luck_rr" style="display:none;">
<a href="#" data-inven-random="r_luck1,r_luck2,r_luck3,r_luck4,r_luck5"></a>
<div data-inven-id="r_luck1" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12233465029.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">뽑기 운세는 <b>최악</b>입니다, 절대 뽑기를 하지 마세요! 본전은커녕 적자를 볼 거예요!</span></div>
<div data-inven-id="r_luck2" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12761943944.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">뽑기 운세는 <b>좋지 않네요.</b> 흔하게 나오는 것도 못 뽑을 상이에요.</span></div>
<div data-inven-id="r_luck3" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i13139748772.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">뽑기 운세는 <b>평범</b>하네요. 최소한 본전은 뽑을 듯 합니다. 큰 기대는 하지 마세요.</span></div>
<div data-inven-id="r_luck4" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i11046103947.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">뽑기 운세는…. 오! <b>좋습니다.</b> 약간의 뽑기 운이 따릅니다. 사나이라면 도전해 보는 것도 좋겠네요.</span></div>
<div data-inven-id="r_luck5" style="display:none;"><img width="60" src="http://upload2.inven.co.kr/upload/2016/03/25/bbs/i12309489415.png" border="0" style="vertical-align:middle; float: left; display: table-cell;"> <span style="height: 60px; padding-left: 10px; vertical-align: middle; display: table-cell; color: rgba(0, 99, 219, 1); ">뽑기 운세는 <b>매우 좋습니다!</b> 뽑기의 신이 당신과 함께합니다! 아주 그냥 골드플레티넘울트라레어 득템을 할 거예요!</span></div>
</div>
<hr><br>
<font color="red">※ 운세는 운세일 뿐! 재미로만 즐겨주세요.</font><br>
<div style="text-align:right;font-size:11;color:greenyellow;">(아이콘 출처 : 메이플스토리2)</div>
</div>
☆★☆★ 당신의 오늘 게임 운세는? (;ㅁ;)

강화 운세는 최악입니다, 하는 강화마다 파괴 될 거예요. 절대 하지 마세요!
강화 운세는 좋지 않네요. 낮은 강화까지는 괜찮지만, 무리한 도전은 실패하고 말 것입니다.
강화 운세는 보통입니다. 적당히 성공하고 적당히 실패하겠군요. 그럭저럭입니다.
강화 운세는 살짝 좋습니다. 그동안 미뤄왔던 도전이 있다면, 한 번 고고싱?
강화 운세는 매우 좋습니다! 어서 달려가서 지르세요!
득템 운세는 최악입니다. 득템이 불가능해요! 맘 편이 다른 거라도 하시는 게 어떨까요?
득템 운세는 좋지 않네요. 겨우 하나 건져도 쓸모 있는 건 없겠네요.
득템 운세는 보통입니다. 한만큼 대가는 받겠죠. 하지만 로또 같은 기대는 접어두시는 게 정신 건강에 좋습니다.
득템 운세는 약간 좋습니다. 크진 않지만 뭔가 득템을 할지도?
득템 운세는 두근두근! 매우 좋습니다! 무언가 대단한 걸 건질 것 같은 기분이 당신 뒤에서 빛납니다!
뽑기 운세는 최악입니다, 절대 뽑기를 하지 마세요! 본전은커녕 적자를 볼 거예요!
뽑기 운세는 좋지 않네요. 흔하게 나오는 것도 못 뽑을 상이에요.
뽑기 운세는 평범하네요. 최소한 본전은 뽑을 듯 합니다. 큰 기대는 하지 마세요.
뽑기 운세는…. 오! 좋습니다. 약간의 뽑기 운이 따릅니다. 사나이라면 도전해 보는 것도 좋겠네요.
뽑기 운세는 매우 좋습니다! 뽑기의 신이 당신과 함께합니다! 아주 그냥 골드플레티넘울트라레어 득템을 할 거예요!

※ 운세는 운세일 뿐! 재미로만 즐겨주세요.

(아이콘 출처 : 메이플스토리2)


< 알아두면 좋은 토막지식 - vertical-align:middle;>

CSS 스타일의 하나입니다.

웹페이지는 이미지 뒤에 오는 글씨가 이미지의 가장 아래에 맞춰지게 됩니다.

하지만 이미지의 중앙이나, 같은 높이에 글씨가 출력되기를 원한다면, 이미지(또는 div 상자)의 스타일 안에 style="vertical-align:middle;"을 넣어주시면, 뒤에 나오는 글자가 이미지의 세로를 기준으로 중앙에 정렬되는 것을 보실 수 있습니다.

여기에는 top(이미지 상단에 맞춰), bottom(이미지 하단에 맞춰)도 들어갈 수 있습니다.


'이런 식으로 만든 예시가 필요해요', '저런 형태로 만들 수 없나요?' 같은 궁금한 경우는 인벤 스크립트 게시판에 글을 남겨주시면, 도움이 되어 드릴 수 있도록 최선을 다하겠습니다.

감사합니다.


< 복붙 완성 시리즈 바로가기 >

[바로가기] 복붙 완성 시리즈 8 : 카카오톡 프로필 사진을 닮은 인장 틀
[바로가기] 복붙 완성 시리즈 7 : 블록 쌓듯 조립해서 인장 완성! 블록형 인장 틀
[바로가기] 복붙 완성 시리즈 6 : 이미지 속에도 인벤 스크립트를 넣어보자!
[바로가기] 복붙 완성 시리즈 5 : 마우스를 올리면 줌-인(Zoom-in)되는 이미지
[바로가기] 복붙 완성 시리즈 4 : 마우스 오버(클릭)로 이미지가 바뀌는 갤러리형 인장
[바로가기] 복붙 완성 시리즈 3 : 인벤 복권! 그리고 확률을 정하는 방법에 대해
[바로가기] 복붙 완성 시리즈 2 : 오늘의 게임 운세는 인장에서 확인해 보시겠어요?
[바로가기] 복붙 완성 시리즈 1 : 마무리 일격 버튼을 이미지로? 조금 색다른 마격