Skip to content

Instantly share code, notes, and snippets.

@hayarobys

hayarobys/inven_injang_frame-cube_coffie_tablet.html

Last active July 9, 2017 21:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hayarobys/05eb9486700a0559bf1bcb627cfbe401 to your computer and use it in GitHub Desktop.
Save hayarobys/05eb9486700a0559bf1bcb627cfbe401 to your computer and use it in GitHub Desktop.
Download ZIP
인벤 스크립트 기반의 인장틀(큐브커피태블릿 커스텀)
Raw
inven_injang_frame-cube_coffie_tablet.html
<!--
소개: 인벤(INVEN) 인장틀 스크립트 v3 - 큐브커피태블릿 커스텀
제작자: 수푸
작성일: 2017년 7월 9일
작동기반: IE/크롬 ,인벤 스크립트, 메우님 랜덤 이미지 생성기, / HTML5 / css3
도움받은 곳: 인벤 스크립트 게시판(http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&iskin=&mskin=)
메우님의 랜덤 이미지 주소 생성기(http://www.randomurl.ze.am/)
개별 큐브이미지 주소(
http://upload2.inven.co.kr/upload/2017/07/09/bbs/i15960357146.png
http://upload2.inven.co.kr/upload/2017/07/09/bbs/i15951661715.png
http://upload2.inven.co.kr/upload/2017/07/09/bbs/i15992637458.png
http://upload2.inven.co.kr/upload/2017/07/09/bbs/i15932983852.png
http://upload2.inven.co.kr/upload/2017/07/09/bbs/i15939129525.png
http://upload2.inven.co.kr/upload/2017/07/09/bbs/i15910577743.png
)
랜덤 큐브이미지 주소(
background: url(http://www.randomurl.ze.am/?id=uUtMLTJ2obe) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=TNXIYiybJcn) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=y3zdDkDfsFk) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=7qpUB3Vzhqn) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=thGxk8RmJcR) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=a8Gyfuwvf2h) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=fdbyRKRx9r6) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=9lbMFwD22ZJ) no-repeat center;
background: url(http://www.randomurl.ze.am/?id=JuIbYaSTsEk) no-repeat center;
)
-->
<!-- 인장 박스 -->
<div style="
background-color: gray;
width: 450px;
height: 342px;
"
>
<!-- 포장마차 배경이미지 박스 -->
<div style="
border: 1px solid black;
background: url(http://upload2.inven.co.kr/upload/2017/07/09/bbs/i13814429906.png) no-repeat center;
width: 449px;
height: 340px;
"
>
<!-- 탭 -->
<div data-inven-tabs
style="
width: 271px;
height: 275px;
margin: 56px 0 0 91px; /* 위부터 시계방향으로 적용 */
"
>
<!-- 탭 버튼 박스 -->
<div style="
width: 100px;
height: 96px;
float: left;
"
>
<ul style="
margin: 0;
padding: 0;
"
>
<!-- 탭 버튼 1 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab1"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=uUtMLTJ2obe) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
"
>큐브</div>
</li>
<!-- 탭 버튼 2 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab2"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=TNXIYiybJcn) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
"
>한 줄</div>
</li>
<!-- 탭 버튼 3 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab3"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=y3zdDkDfsFk) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
display: table;
"
>
<div style="
dislpay: table-cell;
vertical-align: middle;
"
>
여러줄
</div>
</div>
</li>
<!-- 탭 버튼 4 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab4"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=7qpUB3Vzhqn) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);;
"
>스타일</div>
</li>
<!-- 탭 버튼 5 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab5"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=thGxk8RmJcR) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
"
>사진1</div>
</li>
<!-- 탭 버튼 6 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab6"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=a8Gyfuwvf2h) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
"
>사진2</div>
</li>
<!-- 탭 버튼 7 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab7"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=fdbyRKRx9r6) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
"
>분 할</div>
</li>
<!-- 탭 버튼 8 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab8"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=9lbMFwD22ZJ) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
"
>큐 브</div>
</li>
<!-- 탭 버튼 9 -->
<li style="
list-style: none;
float: left;
"
>
<div data-inven-tab-for="tab9"
data-inven-selected-css="{
'_SELF_':{
'fontWeight':'bold'
}
}"
data-inven-unselected-css="{
'_SELF_':{
'fontWeight':'normal'
}
}"
style="
background: url(http://www.randomurl.ze.am/?id=JuIbYaSTsEk) no-repeat center;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 0.85em;
font-family: 바탕;
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.75);
"
>큐 브</div>
</li>
</ul>
</div> <!-- 탭 버튼 박스 끝 -->
<!-- 포장마차 주인 박스 -->
<!-- 원하는 이미지를 62*94 사이즈로 맞추고, background속성의 URL에 넣어주면 됨. 움짤 가능. -->
<!-- 혹은 background 자체를 지워버려서 영역만 남기고 빈공간으로 두는 방법도 존재. -->
<!-- 여기선 아예 background: url(http://upload2.inven.co.kr/upload/2017/07/09/bbs/i13441151046.gif) no-repeat center; 을 지워서, 영역만 차지하는
빈공간으로 놔두었음 -->
<div data-inven-tab-for="messagetab"
style="
width: 62px;
height: 94px;
margin: 5px 0 0 0;
float: left;
"
></div>
<!-- 우측 메시지 박스 -->
<div style="
width: 104px;
height: 94px;
float: left;
text-align: center;
color: #4E221D;
"
>
<div data-inven-tab-id="messagetab"
style="
width: 100%;
height: 100%;
line-height: 94px;
"
>-</div>
<div data-inven-tab-id="tab1"
style="
width: 100%;
height: 100%;
line-height: 94px;
"
>1번 메시지 패널</div>
<!-- [가운데 정렬하는 법]
한 줄일 경우 text-align: center; line-height: 94px; 로 해결되지만,
여러줄이라면 아래처럼 div안에 div를 넣고
부모 div는 text-align: center; display: table;을 주고,
자식div는 display: table-cell; vertical-align: midlle;을 줘야 합니다.
css가 이렇게 복잡합니다 허허. -->
<div data-inven-tab-id="tab2"
style="
width: 100%;
height: 100%;
text-align: center;
line-height: 94px;
"
>한 줄 가운데 정렬</div>
<div data-inven-tab-id="tab3"
style="
width: 100%;
height: 100%;
text-align: center;
display: table;
"
>
<div style="
display: table-cell;
vertical-align: middle;
"
>
3번 메시지 패널. 여러줄을 가운데 정렬하는 방법
</div>
</div>
<div data-inven-tab-id="tab4"
style="
width: 100%;
height: 100%;
line-height: 94px;
"
>4번 메시지 패널</div>
<div data-inven-tab-id="tab5"
style="
width: 100%;
height: 100%;
display: table;
"
>
<div style="
display: table-cell;
vertical-align: middle;
"
>
5번 메시지 패널<br>
이미지 넣는 법 1
</div>
</div>
<div data-inven-tab-id="tab6"
style="
width: 100%;
height: 100%;
display: table;
"
>
<div style="
display: table-cell;
vertical-align: middle;
"
>
6번 메시지 패널<br>
이미지 넣는 법 2
</div>
</div>
<div data-inven-tab-id="tab7"
style="
width: 100%;
height: 100%;
display: table;
"
>
<div style="
display: table-cell;
vertical-align: middle;
"
>
7번 메시지 패널<br>
화면 분할 하기
</div>
</div>
<div data-inven-tab-id="tab8"
style="
width: 100%;
height: 100%;
line-height: 94px;
"
>8번 메시지 패널</div>
<div data-inven-tab-id="tab9"
style="
width: 100%;
height: 100%;
line-height: 94px;
"
>9번 메시지 패널</div>
</div> <!-- 우측 메시지 박스 끝 -->
<div style="clear: both;"></div>
<!-- 탭 내용 박스 -->
<div style="
width: 270px;
height: 174px;
color: white;
padding-top: 3px;
"
>
<div data-inven-tab-id="tab1"
style="
width: 100%;
height: 100%;
text-align: center;
"
>1번 탭</div>
<div data-inven-tab-id="tab2"
style="
width: 100%;
height: 100%;
text-align: center;
line-height: 174px;
"
>2번 탭. 한 줄일 경우 수직 가운데 정렬 방법.</div>
<div data-inven-tab-id="tab3"
style="
width: 100%;
height: 100%;
display: table;
"
>
<div style="
display: table-cell;
vertical-align: middle;
"
>
3번 탭. 여러줄일 경우 수직 가운데 정렬을 하기위해선, div안에 div를 넣고 부모 div에 display:table;을 주고, 자식 div에 display:table-cell; vertical-align:middle; 을 주는 방법을 써야 합니다.
</div>
</div>
<div data-inven-tab-id="tab4"
style="
width: 100%;
height: 100%;
text-align: center;
"
> 4번 탭<br>
줄바꿈 태그나 <span style="color: yellow;">스타일</span> 속성을 이용해<br>
멋진 인장을 만들어 보세요.
</div>
<div data-inven-tab-id="tab5"
style="
width: 100%;
height: 100%;
text-align: center;
display: table;
"
>
<div style="
background: url(http://upload2.inven.co.kr/upload/2017/07/09/bbs/i13512830524.jpg) no-repeat center;
min-width: 100%;
min-height: 100%;
display: table-cell;
vertical-align: middle;
"
>
<span style="background-color: #000;">
5번 탭<br>
이미지를 중앙에서 오리기<br>
이미지 위에 글씨도 쓸 수 있습니다.
</span>
</div>
</div>
<div data-inven-tab-id="tab6"
style="
width: 100%;
height: 100%;
text-align: center;
display: table;
"
>
<div style="
background: url(http://upload2.inven.co.kr/upload/2017/07/09/bbs/i13512830524.jpg) no-repeat center;
display: table-cell;
vertical-align: middle;
background-size: contain;
"
>
<span style="background-color: #000;">
6번 탭<br>
이미지를 탭 크기에 맞추어 리사이징 하기.<br>
이미지 위에 글씨도 쓸 수 있습니다.
</span>
</div>
</div>
<div data-inven-tab-id="tab7"
style="
width: 100%;
height: 100%;
text-align: center;
display: table;
"
>
<div style="
background-color: #FFE8AA;
color: black;
display: table-cell;
vertical-align: middle;
width: 40%;
"
> 7번 탭<br>
div 내에서 또다시 영역 분할하기.<br>
</div>
<div style="
background: url(http://upload2.inven.co.kr/upload/2017/07/09/bbs/i13512830524.jpg) no-repeat center;
display: table-cell;
vertical-align: middle;
background-size: contain;
"
> 어때요, 참 쉽죠?
</div>
</div>
<div data-inven-tab-id="tab8"
style="
width: 100%;
height: 100%;
text-align: center;
"
> 8번 탭
</div>
<div data-inven-tab-id="tab9"
style="
width: 100%;
height: 100%;
text-align: center;
"
> 9번 탭<br>
이 안에 마격도 넣어보세요!
</div>
</div> <!-- 탭 내용 박스 끝 -->
</div> <!-- 탭 끝 -->
</div> <!-- 포장마차 배경이미지 박스 끝 -->
</div> <!-- 인장 박스 끝 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment