다시 질문 드립니다..
<!--전체 테두리, 0px로 해서 지울 수 있다.-->
<div style="width: 450px;border:0px solidblack;font-size:15px;'">
<!--상단 이미지 상자-->
<div>
<img src="https://upload2.inven.co.kr/upload/2016/06/08/bbs/i12409637343.gif" width="100%">
</div>
<!--중앙 원형 그림 - 인장 펼치기--><divstyle="width: 0px; height: 0px; display: inline-block;">
<div style="width: 450px;">
<div style="background:url("https://upload2.inven.co.kr/upload/2016/06/08/bbs/i13599258500.gif")no-repeat center / 100%; margin: 0px auto; border-radius: 80px; top: 10px;width: 120px; height: 120px; overflow: hidden; position: relative;">
<div style="transition: 0.8s; width: 120px; height: 120px;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:17px;">
<font color="#00ffff" face="Verdana"><b>ABOUT</b></font>
</div></div></div></div></div>
<div style="background-color:2A2826;"><!-- 이미지 아래로 나오는 흰색 공간입니다. 배경색 또는 배경 이미지를 넣을 수 있습니다.-->
<div style="height: 135px;"></div>
<!--중앙 클릭시 펼쳐질 상자 (숨겨진 상자)-->
<div style="padding: 1em; text-align: center; display:none;transition:0.6s;" data-inven-id="sealing">
각종받은 인장 이미지들을 넣어 주세요.<br />
<img src="이미지 주소" width="95%">
</div>
<!-- 기본 내용 상자 -->
<div style="padding: 1em;text-align: center;">
<font color="#00ffff"face="Verdana"><strong>OSU</strong>@inven</font>
</div>
<!-- 하단의 3개버튼, 지울 수 있습니다.-->
<div style="padding:1em; text-align: center; ">
<!-- 마무리 일격: 닉네임 입력-->
<div style='background:url("https://upload2.inven.co.kr/upload/2016/06/09/bbs/i12440817518.png")0% 0% / 100%; 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-over-css="{'_SELF_':{'background-color':'2A2826','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}"data-inven-toggle="sealing2">
<div style="padding:0.5em;font">마격<br />인장검색
</div></div></div>
<!—인장.짤들-->
<div style='background:url("https://upload2.inven.co.kr/upload/2016/06/08/bbs/i11563935047.png")0% 0% / 100%; 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-over-css="{'_SELF_':{'background-color':'2A2826','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'rgba(255,255,255,0)','color':'rgba(255,255,255,0)'}}"data-inven-toggle="sealing3">
<div style="padding:0.5em;font">인장♥
</div></div></div>
<!-- 쪽지 보내기 : 닉네임입력-->
<div style='background:url("https://upload2.inven.co.kr/upload/2016/06/09/bbs/i13041601370.png")0% 0% / 100%; 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':'2A2826','color':'rgba(255,255,255,1)'}}">
<div data-inven-action data-inven-nick-default="OSU" 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>
<!-- 접혀 있는 인장 2 -->
<div style="padding:1em; text-align: center; display: none;transition:0.4s;" data-inven-id="sealing2">
각종 받은 인장 이미지들을 넣어 주세요.<br />
<img src="이미지 주소" width="95%">
</div>
<!-- 접혀 있는 내용종료 -->
<!-- 접혀 있는 인장 3 -->
<div style="padding:1em; text-align: center; display: none;transition:0.4s;" data-inven-id="sealing3">
각종 받은 인장 이미지들을 넣어 주세요.<br />
<img src="이미지 주소" width="95%">
</div>
<!-- 접혀 있는 내용종료 -->
</div></div></div>
지금 여기 까지 한 상태입니다.
1.
궁금한 점은 지금 이 상태에서는 인장1,인장2.인장3이 동시에 나올 수 있는 상태인데, 인장2와 인장3은 서로 연결되어 같이 표시되지 않게 하고 싶습니다. 그니까 인장2를 펼쳐놓은 상태에서 만약 인장3을 펼쳣을 때 인장2는 자동으로 접혀서 인장3만 나오도록 표시 하고 싶은거죠... 반대로도 마찬가지입니다..
2.
그리고 위에 코드를 그대로 복붙시키면 상단 이미지 상자에서 이미지를 표시할 수 없다고 뜨길래 보았더니
<img src="https://upload2.inven.co.kr/upload/2016/06/08/bbs/i12409637343.gif " width="100%">
이게
<img src="https://upload2.inven.co.kr/upload/2016/06/08/bbs/i12409637343.gif%20" width="100%">
이렇게 바껴서 오류가 뜨네요. 다시 지우고 저장하기 누르면 이미지가 표시됩니다만 이거 왜이러는거죠..?
3.
하단 3개의 버튼에 첨부한 그림이 너무 꽉차보여서 조금 그림을 줄이고 싶은데 어떻게 하나요?
추가)4.
실제 카카오톡 상태메세지 처럼 상단 이미지 상자 가운데에 글씨를 넣으려면 어떻게 하나요?
평소에 스크립트, html 관련해서 1도 모르다가 한번 해보려니 너무 어렵네요 ㅜㅜ 인벤만의 창의적인 인장 꾸미기 툴이 나오길 기대해 봅니다..:) 친절한 답변 감사합니다~
OSU
