인벤 스크립트에 관심을 가져주셔서 감사합니다.
'시에른'님이 문의해 주신 내용을 수정하는 법과 글 맨 아래에 수정한 html테그를 함께 첨부해드립니다.
1.글자가 가운데로 오지 않던 문제.
중앙 원형 그림의 사이즈를 가로 세로 100px 사이즈로 조정해주셨는데요.
마우스 오버시, 표시되는 영역을 설정하는 아래 부분의 사이즈가 변경이 되지 않은 상태였습니다
width: 146px; height: 146px; 부분을 100px로 수정해주시면 됩니다.
<div style="transition:0.4s; width: 146px; height: 146px; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;"....
2. 클릭! 버튼을 누를 시 페이지 이동.
보여주신 소스는 중앙 그림을 마우스 오버하고 클릭시, 접고 펼치기로 이루어진 소스입니다.
그래서 링크 효과를 내고자 할때엔 불필요한 부분이 포함되어 있어 그부분을 먼저 지워야 합니다.
<div style="transition:0.4s; width: 146px; height: 146px; 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(255,255,255,0.4)','color':'rgba(55,55,55,1)'}}" data-inven-toggle="sealing">
부분에서 data-inven-toggle="sealing" 이부분과
<!--중앙 클릭시 펼쳐질 상자 (숨겨진 상자)-->
<div style="padding: 1em; text-align: center; display: none;transition:0.4s;" data-inven-id="sealing">
각종 받은 인장 이미지들을 넣어 주세요.<br />
<img src="이미지 주소" width="95%">
</div>
이 부분을 지워주시면 됩니다.
그 다음,
링크를 추가하기 위해선 아래와 같은 링크 테그로 영역을 감싸주시면 됩니다.
3. 인장을 올릴 시, 나타나는 색상 변경.
배치한 아래 3개의 버튼에 마우스 오버, 아웃시에 스타일을 설정하는 영역은 아래와 같습니다.
<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':'red','color':'rgba(255,255,255,1)'}}">
그중에서 마우스 오버시 나오는 영역의 스타일일을 결정하는 곳은 맨 뒤에 있는 아래 항목입니다.
data-inven-over-css="{'_SELF_':{'background-color':'red','color':'rgba(255,255,255,1)'}}"
이 항목 배경색을 설정하는 부분, 'background-color':'red' 을 'background-color':'#24273D'으로 수정해주시면 됩니다.
4. 아래쪽 공간에 여유 주기.
가장 간단한 방법은 다음과 같습니다.
소스 맨~아래에 보면 아래와 같이 모든 테그가 닫히며 마무리됩니다.
</div></div></div>
</div></div></div>
이 사이, 빈 줄에 <br /> 으로 원하는 만큼 간격을 주시면 됩니다.
5. 2번 처럼 커미션 버튼을 링크로 활용하기.
2번과 마찬가지로 영역을 아래의 링크 테그로 감싸주시면 됩니다.
<a href="http://www.inven.co.kr/board/powerbbs.php?come_idx=2092&l=140410" target="_blank" style="text-decoration:none"></a>
이외에도 궁금하신 내용이 있으시면 언제든지 글 남겨주세요.
감사합니다.
□ HTML을 누른 상태에서 붙여넣어 주세요.
<!--전체 테두리, 0px로 해서 지울 수 있다.-->
<div style="width: 450px;border:0px solid black;font-size:15px;'">
<!--상단 이미지 상자-->
<div>
<img src="https://upload2.inven.co.kr/upload/2016/05/26/bbs/i10436643632.gif" width="100%">
</div>
<!--중앙 원형 그림 - 인장 펼치기-->
<a href="http://www.inven.co.kr/board/powerbbs.php?come_idx=2092&l=138008" target="_blank" style="text-decoration:none">
<div style="width: 0px; height: 0px; display: inline-block;">
<div style="width: 450px;">
<div style='background: url("https://upload2.inven.co.kr/upload/2016/05/26/bbs/i10594381794.png") no-repeat center / 100%; margin: 0px auto; border-radius: 80px; top: 20px; width: 100px; height: 100px; overflow: hidden; position: relative;'>
<div style="transition:0.4s; width: 100px; height: 100px; 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(255,255,255,0.4)','color':'rgba(55,55,55,1)'}}" >
<div style="padding: 1em; text-align: center; font-size: 15px;">
<b>클릭!</b>
</div></div></div></div></div>
</a>
<!-- 이미지 아래로 나오는 흰색 공간입니다. 배경색 또는 배경 이미지를 넣을 수 있습니다.-->
<div style="background-color:#24273D;">
<div style="height: 90px;"></div>
<!-- 기본 내용 상자 -->
<div style="padding: 1em;text-align: center;">
<img src="https://upload2.inven.co.kr/upload/2016/05/26/bbs/i11345522008.png" width="65%">
</div>
<!-- 하단의 3개 버튼, 지울 수 있습니다.-->
<div style="padding: 1em; text-align: center; ">
<!-- 커미션 안내 -->
<a href="http://www.inven.co.kr/board/powerbbs.php?come_idx=2092&l=140410" target="_blank" style="text-decoration:none">
<div style='background: url("https://upload2.inven.co.kr/upload/2016/05/26/bbs/i12335357213.png"); 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-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'#24273D','color':'rgba(255,255,255,1)'}}">
<div style="padding: 0.5em;font">커미션
</div></div></div>
</a>
<!-- 마무리 일격 5회 : 닉네임 입력-->
<div style='background: url("https://upload2.inven.co.kr/upload/2016/05/26/bbs/i13654321631.png"); 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-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'#24273D','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-5" style="background-color:rgba(255,255,255,0); width: 92px; height: 92px; color: rgba(255, 255, 255, 0);border-radius:123px;padding:0;margin:0;transition:0.4s;border:0px;font-family: 'Jeju Gothic', sans-serif;font-size:15px;" 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='background: url("https://upload2.inven.co.kr/upload/2016/05/26/bbs/i11200746726.png"); 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-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'#24273D','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:123px;padding:0;margin:0;transition:0.4s;border:0px;font-family: 'Jeju Gothic', sans-serif;font-size:15px;" 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>
<br /><br /><br />
</div></div></div>
Watch
Watch
