[기타] '보라지붕'님이 문의하신 스크립트 입니다.

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

문의하신 내용에 대해 답변드립니다.


1. 이미지가 표시되지 않는 현상
이미지 주소 뒤에 띄어쓰기가 두번 들어가서 발생한 증상으로, 띄어쓰기만 수정해 주시면 정상적으로 표시됩니다.

+ 추가 : 중앙 정렬이 되지 않는 현상은 div 상자의 특징으로 해당 부분에는 style="display:inlin-block;"을 추가하여 중앙 정렬이 되도록 수정하였습니다.



1-2. 위 상자에 링크를 걸 때 스타일 조절 방법
링크의 경우는 자동으로 밑줄과 색상이 지정되는데, 이것은 <a></a>에 스타일을 추가하여 고쳐주실 수 있습니다.

<a href="링크 주소" target="_BLANK" style="text-decoration:none;color:color: rgba(255, 255, 255, 0);"> 버튼 </a>

위 소스에서 각각의 부분은 아래를 의미합니다.
target="_BLANK" - 새 창에 띄우는 명령어
text-decoration:none; - 밑줄 없음
color: rgba(255, 255, 255, 0); - 색상. 이 부분은 필요에 따라서 원하시는 색상을 입력해 주시면 됩니다.



2. "접기" 부분의 색상과 크기 조절
다양한 설정 방법은 아래의 링크를 참조하시면 됩니다.
http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&l=1165

간략하게 적어 드리면 감싸고 있는 상자에 스타일로 넣어주시면 적용하실 수 있습니다.
<div data-inven-toggle="sealing" style="font-weight:bold;color:red;font-size:15px;">접기</div>

위 소스에서 각각의 부분은 아래를 의미합니다.
font-weight:bold; - 글자를 두껍게
color:red; - 글자의 색상 조절
font-size:15px; - 글자의 크기



혹시 원하시던 형태와 다르거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.
감사합니다.



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

---

<!--전체 테두리, 0px로 해서 지울 수 있다.-->
<div style="width: 450px;border:1px solid black;font-size:15px;'">


<!--상단 이미지 상자-->
<div>
<img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i13057495727.jpg" width="100%">
</div>


<!--중앙 원형 그림 - 인장 펼치기-->
<div style="width: 0px; height: 0px; display: inline-block;">

<div style="width: 450px;">
<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i13506523429.jpg") no-repeat center / 100%; margin: 0px auto; border-radius: 80px; top: -90px; width: 146px; height: 146px; overflow: hidden; position: relative;'>
<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(255,255,0,1)'}}" data-inven-toggle="sealing">
<div style="padding: 1em; text-align: center; font-size: 15px;">
프로필
</div></div></div></div></div>


<div style="Background-color: rgba(215, 190, 135, 8);"><!-- 이미지 아래로 나오는 흰색 공간입니다. 배경색 또는 배경 이미지를 넣을 수 있습니다.-->
<div style="height: 60px;"></div>

<!--중앙 클릭시 펼쳐질 상자 (숨겨진 상자)-->
<div style="padding: 1em; text-align: center; display: none;transition:0.4s;" data-inven-id="sealing">

World Of Warcraft<br />
League Of Legend<br />

<!-- 링크 주소를 입력해 주세요. -->
<a target="_BLANK" href="링크 주소" style="text-decoration:none;color: rgba(255, 255, 255, 0);">
<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i12544965358.jpg") no-repeat center / 100%; width: 380px; height: 220px;display:inline-block;'>
<div style="transition:0.4s; width: 380px; height: 220px; 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(0,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'rgba(100,100,200,0.4)','color':'rgba(255,225,0,0.8)'}}" >
<div style="padding: 1em; text-align: center; font-size: 21px; font-family:'jeju Gothic';">
본:CARINE BLOODHOOF<br />
전정실 검색
</div></div></div></a>

<br /><br />

<!-- 링크 주소를 입력해 주세요. -->
<a target="_BLANK" href="링크 주소" style="text-decoration:none;color: rgba(255, 255, 255, 0);">
<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i12556607803.jpg") no-repeat center / 100%; width: 380px; height: 220px;display:inline-block;'>
<div style="transition:0.4s; width: 380px; height: 220px; 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(0,255,255,0)'}}" data-inven-over-css="{'_SELF_':{'background-color':'rgba(100,100,200,0.4)','color':'rgba(255,225,0,0.8)'}}" >
<div style="padding: 1em; text-align: center; font-size: 21px; font-family:'jeju Gothic';">
부:북한산곰돌이<br />
전정실 검색
</div></div></div></a>

Hearth Stone <br/>
<img src="https://upload2.inven.co.kr/upload/2016/09/19/bbs/i12505120190.png"><br/>
<a target="_BLANK" style="text-decoration:none;color:black;" href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=6545">5월 느조방밀 </a><br/>
<a target="_BLANK" style="text-decoration:none;color:black;" href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=12029">6월 느조사제 </a><br/>
<a target="_BLANK" style="text-decoration:none;color:black;" href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=14318">7월 켈투사제 </a><br/>
<a target="_BLANK" style="text-decoration:none;color:black;" href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=17106">8월 느조사제 </a><br/>
<a target="_BLANK" style="text-decoration:none;color:black;" href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=22318">9월 템포손님 </a><br/>
<br/>
<img src="https://upload2.inven.co.kr/upload/2016/09/19/bbs/i12583623055.png"><br/>
야찐입니당 <br/>
OverWatch<br/>
<br />

<!-- 접기 버튼의 폰트는 스타일을 수정해서 고쳐주세요. -->
<span data-inven-toggle="sealing" style="font-weight:bold;color:red;">접기</span>
</div>

<!-- 기본 내용 상자 -->
<div style="padding: 1em;text-align: center;">
<span style=" color: black; font-weight: bold;"> 노움 애호가~♡♡♡
</span> </div>



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


<!-- 가입일-->
<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i13607656547.jpg"); 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':'red','color':'rgba(255,255,255,1)'}}">
<div style="padding: 0.5em;font">가입일<br>
<span style="font-weight:bold;">D + </span><span data-inven-dday="2011-04-10" style="font-weight:bold;"></span>
<!-- dday 뒤에 "yyyy-mm-dd"의 형태로 가입일 입력-->
</div></div></div>


<!-- 마무리 일격 : 닉네임 입력-->
<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i10317886042.jpg"); 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':'blue','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/09/19/bbs/i12354563635.jpg"); 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':'green','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>


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