|
2016-05-26 03:16
조회: 523
추천: 0
인장꾸미기 도와주세요ㅠㅠ카톡프로필형 인장을 베이스로 만들어보려고 하는데요
일단 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> <!--중앙 원형 그림 - 인장 펼치기--> <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: 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:#24273D;"> <div style="height: 90px;"></div> <!--중앙 클릭시 펼쳐질 상자 (숨겨진 상자)--> <div style="padding: 1em; text-align: center; display: none;transition:0.4s;" data-inven-id="sealing"> 각종 받은 인장 이미지들을 넣어 주세요.<br /> <img src="이미지 주소" width="95%"> </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; "> <!-- 커미션 안내 --> <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':'red','color':'rgba(255,255,255,1)'}}"> <div style="padding: 0.5em;font">커미션<br> </div></div></div> <!-- 마무리 일격 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: #24273d; 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/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':'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> 이렇게 됩니다. 제가 부탁드릴 내용은요 1. 임의적으로 숫자를 몇개 수정했더니 가운데 버튼쪽에 클릭! 이라고 써진 글씨가 아래로 치우쳐져있더라고요, ![]() 위에 써둔것 처럼 글씨를 가운데쪽으로 움직이려면 어떻게 해야하나요? 2. 클릭! 버튼을 눌렀을때 http://www.inven.co.kr/board/powerbbs.php?come_idx=2092&my=post&l=138008 여기로 이동하게 하려면 어떻게 해야하나요? 3. 카톡프로필 인장 예시에서는 안그랬는데, 저 밑에 아이콘 세개 위에 마우스를 올리면 ![]() 이렇게 색깔이 뜨더라고요. 이걸 흰색이나, 배경색 #24273D 로 나오게 하려면 어떻게 해야하나요? 4. 저 세개 버튼 아래쪽 공간을 조금 늘려서 여유있어보이게 하려면 어떻게 해야하나요? 5. 2번 질문과 비슷한데, 해모양 아이콘(커미션)을 눌렀을때, http://www.inven.co.kr/board/powerbbs.php?come_idx=2092&my=post&l=140410 여기로 연결되게 하려면 어떻게 해야하나요? 답변 부탁드립니다ㅠㅠ |


시에른 
