[기타] '흑서야'님이 문의하신 스크립트 입니다.

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

문의하신 내용과 샘플 소스를 전달해 드립니다.

1. 중앙 가운데 있던 동그란 인장보기 버튼에 링크 걸어서 왼쪽 위로 올리고 싶어요 !
원형 상자 소스를 수정하여, 링크 <a href="주소">와 위치를 조절할 수 있는 소스를 주석을 통해 메모로 남겨드렸습니다.

2. 클릭하면 숨은 공간이 나오지 않고 이미지 하나로 배경 만들고 싶어요 !
숨겨진 내용을 소스에서 제외하고, 이미지 하나로 배경이 되도록 주석에 남겨놨습니다.

+ 배경 이미지 위에 또 배경이 투명한 GIF 파일 같은거 올리던데 어떻게 하는지 궁금해요 !
<div> 상자 속에 <div>를 추가로 넣어 놓고, 해당 상자에 배경으로 스타일을 넣어 주시면 됩니다.
각각 "전체 배경"과 "투명 이미지" 상자로 구분하여 주석을 남겨드렸습니다.

+ 새로고침 하면 이미지가 랜덤으로 바뀌게 하는 방법이 궁금해요 !
해당 기능은 메우 유저 님이 제공하는 랜덤 이동 주소 생성기를 이용해 주세요.

아래의 주소를 통해 이용하실 수 있습니다.
http://www.randomurl.ze.am/


혹시 수정에 어려움이 있으시거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.
감사합니다.


■ HTML을 누른 상태에서 붙여넣어 주세요.

---

<!--전체 배경 상자 및 테두리. border를 0px로 해서 지울 수 있습니다.-->
<div style="width: 442px;border:4px double skyblue;font-size:15px;background:url(전체 배경 주소) 0% 0%/100%">
<!-- 투명 이미지를 띄우기 위한 상자 -->
<div style="width: 442px;border:4px double skyblue;font-size:15px;background:url(배경 위 투명 이미지 주소)no-repeat bottom center/100%">

<!--원형 링크의 세로 높이를 조절하기 위한 여백 상자 -->
<div style="height:170px;">
</div>

<!--원형 링크 상자-->
<div style="width: 0px; height: 0px; display: inline-block;">

<div style="width: 442px;">
<!-- 이미지 주소 입력, 원형 이미지의 좌우 위치는 margin-left:20px; 값을 수정-->
<div style='background: url("원형 이미지 주소") no-repeat center / 100%; margin: 0px auto; border-radius: 80px; top: -150px; width: 120px; height: 120px; overflow: hidden; position: relative;margin-left:20px;'>
<!-- 링크 주소 입력 -->
<a href="링크 주소" target="_blank" style="text-decoration:none;">
<!--over-css 뒤의 값을 변경하여 마우스 오버시 색상 변경 -->
<div style="transition:0.4s; width: 120px; height: 120px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'rgba(135,206,235,0.4)','color':'rgba(255,255,255,1)'}}">
<div style="padding: 1em; text-align: center; font-size: 15px;font-weight:bold;">
링크
</div>
</div></a></div></div></div>

<div><!-- 이미지 아래로 나오는 흰색 공간입니다. 배경색 또는 배경 이미지를 넣을 수 있습니다.-->

<!-- 원형 상자로부터 본문까지의 상단 여백 -->
<div style="height:100px;"></div>

<!-- 본문 상자 -->
<div style="padding: 1em;text-align: center;color:black;">
본문상자
</div>

<!-- 본문 상자로 부터 하단 3버튼까지의 여백 -->
<div style="height:100px;"></div>

<!-- 하단의 3개 버튼, 지울 수 있습니다.-->
<div style="padding: 1em; text-align: center; ">

<!-- 가입일-->
<div style='margin: 0px 15px; border-radius: 10px; border: 3px groove rgba(255,255,255,0.5); 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-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'skyblue','color':'rgba(255,255,255,1)'}}">
<div style="padding: 0.5em;font">인벤생활<br>
<!-- dday 뒤에 "yyyy-mm-dd"의 형태로 가입일 입력-->
<span style="font-weight:bold;">D+ </span><span data-inven-dday="2015-03-01" style="font-weight:bold;"></span>
</div></div></div>

<!-- 마무리 일격 : 닉네임 입력-->
<div style='margin: 0px 15px; border-radius: 10px; border: 3px groove rgba(255,255,255,0.5); 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-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'skyblue','color':'rgba(255,255,255,1)'}}">
<div data-inven-action data-inven-nick-default="흑서야" style="border:0px;padding:0;margin:0;">
<span data-inven-attr-for="input" style="display:none;"></span>
<span data-inven-attr-for="last-attack-all" style="background-color:rgba(255,255,255,0); width: 92px; height: 92px; color: rgba(255, 255, 255, 0);border-radius:15px;padding:0;margin:0;transition:0.4s;border:0px;font-family: 'Jeju Gothic', sans-serif;font-size:15px;font-weight:bold;" data-inven-text="마격"
data-inven-over-css="{'_SELF_':{'color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'color':'rgba(255,255,255,0)'}}"></span>
</div></div></div>

<!-- 쪽지 보내기 : 닉네임 입력-->
<div style='margin: 0px 15px; border-radius: 10px; border: 3px groove rgba(255,255,255,0.5); 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-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'skyblue','color':'rgba(255,255,255,1)'}}">
<div data-inven-action data-inven-nick-default="흑서야" style="border:0px;padding:0;margin:0;">
<span data-inven-attr-for="input" style="display:none;"></span>
<span data-inven-attr-for="send-note" style="background-color:rgba(255,255,255,0); width: 92px; height: 92px; color: rgba(255, 255, 255, 0);border-radius:15px;padding:0;margin:0;transition:0.4s;border:0px;font-family: 'Jeju Gothic', sans-serif;font-size:15px;font-weight:bold;" data-inven-text="쪽지"
data-inven-over-css="{'_SELF_':{'color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'color':'rgba(255,255,255,0)'}}"></span>
</div></div></div>

</div></div></div></div>