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

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

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


질문 1. 하단 버튼 이상 현상
메모장에서 소스를 작성하시고 저장을 누를 경우, 자동 줄 바꿈 된 부분의 소스에 엔터가 생기면서 깨지는 현상이 있습니다.
올려주신 소스가 전형적인 해당 증상을 보였습니다.

메모장에서 편집하신 경우에는 저장 후 일단 메모장을 종료하시고, 재시작하셔서 편집하시면 해당 증상이 없을 것입니다.
아래에 해당 증상에 의해 깨진 소스를 복구한 소스를 전달해 드립니다.



질문 2. 링크 클릭 시 새 창에 띄우는 방법
링크 태그를 알고 계신 것으로 생각되니, 새 창에 띄우는 추가 태그만 설명해 드리겠습니다.
<a href="링크 주소" target="_BLANK"> 버튼 </a>
주소 뒤에 target="_BLANK" 가 새 창에 띄우게 하는 명령어입니다.



질문 3. 이미지에 마우스 커서 올리면 글씨가 보이게
이건 조금 다양한 방법으로 구현할 수 있습니다만, 현재 카카오톡 인장에서 사용한 방법(중앙버튼)을 설명해 드리도록 하겠습니다.

우선 이미지는 "배경"으로 들어가게 됩니다. 그리고 그 위에 보이지 않는 레이어 하나를 숨겨놨다가 표시되도록 변경하는 것입니다.
이미지가 "배경"으로 들어가는 관계로, 상자의 크기(width,height)를 사용자가 수동으로 정해주어야 합니다.

<!-- 배경이 되는 이미지 영역. width, height 정해주기-->
<div style='background: url("https://upload2.inven.co.kr/upload/2016/09/18/bbs/i13506523429.jpg") no-repeat center / 100%; width: 146px; height: 146px;'>

<!-- 보이지 않는 투명한 상자. width, height 정해주기-->
<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)'}}">

<!-- 표시될 텍스트가 들어가는 영역 -->
<div style="padding: 1em; text-align: center; font-size: 15px;">프로필</div>

</div></div>

그리고 소스를 보시면 data-inven-over-css(마우스를 올렸을 때)과 data-inven-out-css(마우스가 떠났을 때)이 있는데,
이곳에서 각각 조건에서 배경 색상/투명도(background-color)과 폰트의 색상/투명도(color)를 설정해서 마우스가 떠난 상태에서는 마치 안 보이는 것처럼 만들 수 있습니다.

이 부분의 소스 편집은 조금 어려우실 수 있으므로, 필요한 예시를 들어주시면 맞춰서 샘플 소스를 작성해 드리도록 하겠습니다.



이외에도 궁금하신 점은 언제든지 글 남겨주세요.
감사합니다.




□ 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(55,55,55,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 href="http://www.op.gg/summoner/userName=Carine%20BloodHoof"><img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i12544965358.jpg"></a><br/>본케 <br/><a href="http://www.op.gg/summoner/userName=북한산곰돌이"><img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i12556607803.jpg"></a><br/>부케<br/> <br />Hearth Stone <br/><img src="https://upload2.inven.co.kr/upload/2016/09/18/bbs/i10547706117.jpg"><br/><a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=6545">5월 느조방밀 </a><br/><a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=12029">6월 느조사제 </a><br/><a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=14318">7월 켈투사제 </a><br/><a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=17106">8월 느조사제 </a><br/><a href="http://hs.inven.co.kr/dataninfo/deck/new/view.php?idx=22318">9월 템포손님 </a><br/>OverWatch<br/><br /></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("셋째 상자 이미지"); 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>