<!--전체 테두리, 0px로 해서 지울 수 있다.-->
<div style="width: 450px;border:1px solid black;font-size:15px;'">
<!--상단 이미지 상자-->
<div>
<img src="https://upload2.inven.co.kr/upload/2017/05/22/bbs/i13894189198.png" 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/2017/05/22/bbs/i13446435507.png") no-repeat center / 170%; 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:red;"><!-- 이미지 아래로 나오는 흰색 공간입니다. 배경색 또는 배경 이미지를 넣을 수 있습니다.-->
<div style="height: 60px;"></div>
<!--중앙 클릭시 펼쳐질 상자 (숨겨진 상자)-->
<div style="padding: 1em; text-align: center; display: none;transition:0.4s;" data-inven-id="sealing">
맹구 <br />
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi14379310950.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi14128898376.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi13248222733.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi14376240867.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi16221500887.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi13527118296.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi15433828375.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi13608686696.jpg" width="95%">
<img src="http://www.inven.co.kr/common/image/viewer.php?loc=&file=http%3A%2F%2Fupload2.inven.co.kr%2Fupload%2F2017%2F05%2F22%2Fbbs%2Fi14335993742.jpg" width="95%">
<img src="https://upload2.inven.co.kr/upload/2017/05/22/bbs/i15335363481.jpg" width="95%">
<img src="https://upload2.inven.co.kr/upload/2017/05/22/bbs/i15727335885.jpg" width="95%">
</div>
<!-- 기본 내용 상자 -->
<div style="padding: 1em;text-align: center;">
Manchester United
</div>
<!-- 하단의 3개 버튼, 지울 수 있습니다.-->
<div style="padding: 1em; text-align: center; ">
<!-- 가입일-->
<div style='background: url("https://upload2.inven.co.kr/upload/2017/05/22/bbs/i14007780079.jpg") no-repeat center / 140%; 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="2015-10-11" style="font-weight:bold;"></span>
<!-- dday 뒤에 "yyyy-mm-dd"의 형태로 가입일 입력-->
</div></div></div>
<!-- 마무리 일격 : 닉네임 입력-->
<div style='background: url("https://upload2.inven.co.kr/upload/2017/05/22/bbs/i15559646269.jpg") no-repeat center / 170%; 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="Duedo" style="border:0px;padding:0;margin:0;">
<span data-inven-attr-for="input" style="display:none;"></span>
<span data-inven-attr-for="last-attack-all" 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/2017/05/22/bbs/i16168644498.jpg") no-repeat center / 230%; 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="Duedo" 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>
현재 요렇게 html주소를 사용하고 있는데,
인장 원형을 펼치면 엑박이 뜹니다.
왜 이런거죠?
그리고 인장 원형속 글자의 색상은 어떻게 바꾸나요?
배경 색상의 종류가 몇 가진가요?
Duedo
Duedo
