a

전편 요약: 레이어는 피자 같은거, 인장 검열.

자 그럼 본격적으로 스크립트 설명에 들어갑니다.

스크립트는 크게 두 블록으로 나뉩니다. 레이어 블록과 버튼 블록이죠. 임의로 정한 이름이니 이번 설명에서만 통용됩니다.

<div style="width: 450px; height:450px;"><div data-inven-id="AAA" style="width:100%;height:100%;background:url(http:1) center / 100% no-repeat;"><div data-inven-id="BBB" style="width:100%;height:100%;"></div>

이게 레이어 블록이고

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAA':[{'background':'url(http:2) center / 100% no-repeat'},{'background':'none'},{'background':'url(http:1) center / 100% no-repeat'}]}"><span style="font-weight:bold;">버튼1</span></div><div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'BBB':[{'background':'url(http:3) center / 100% no-repeat'},{'background':'url(http:4) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">버튼2</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAA':{'background':'url(http:1) center / 100% no-repeat'},'BBB':{'background':'none'}}"><span style="font-weight:bold;">초기화</span></div>

이게 버튼 블록입니다.(제일 마지막 부분은 초기화 버튼입니다)

-------------------------------

먼저 레이어 블록 설명부터,

<div style="width: 450px; height:450px;"> 은 옷갈아입히기 게임의 크기, 그러니깐 표시될 그림의 크기를 정하는 스크립트입니다. 인장은 450px인 관계로 450으로 맞춥니다. 인장에 넣을때 계산기 두들겨서 그림의 비율을 맞춰줍시다.  width height 의 크기를 둘다 원본 사진의 비율과 같게 해주세요.

AAA는 해당 레이어의 아이디 입니다. 버튼이 이 아이디를 가진 레이어의 그림을 교체 혹은 비표시하기 위해서 필요합니다.

"width:100%;height:100% 랑 center / 100% no-repeat;" 이건 그냥 건들지 마세요. 앞서 말한 크기를 정하는 스크립트를 따라가겠금하는 스크립트 입니다.

background:url(http:) http 안에 자신이 처음부터, 그러니깐 버튼을 누르지 않아도 처음부터 표시할 그림의 주소를 넣어주시면 됩니다.

만약에 처음부터 표시하지 않을, 그러니깐 버튼을 눌러야 나타나게 할 그림의 경우,

<div data-inven-id="BBB" style="width:100%;height:100%;">

이것처럼 그냥 아이디만 먼저 정해주시면 됩니다.

또한 지금처럼 스크립트를 해 놓으면 AAA가 먼저 표시되고 그 위에 BBB가 표시됩니다.

-----------------------

다음은 버튼 블록 설명입니다.

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAA':[{'background':'url(HTTP:2) center / 100% no-repeat'},{'background':'none'},{'background':'url(HTTP:1) center / 100% no-repeat'}]}"><span style="font-weight:bold;">버튼1 </span></div>

자, 이 경우 AAA의 레이어를 조종할 수 있는 버튼 1이 나타납니다.

누를 경우 두번째 그림->비표시->첫번째 그림→(두번째 그림->비표시->첫번째 그림->...) 이렇게 반복됩니다.

왜 처음부터 두번째 그림이 나오게 했냐면 첫번째 그림은 이미 레이어 블록 단계에서 처음부터 나오게 했기 때문입니다. 첫번째 그림이 처음부터 있고, 버튼을 누르면 두번째 그림이 나오는게 자연스럽잖아요?

{'background':'url(HTTP:2) center / 100% no-repeat'} 는 http 부분에 자신이 표시하고 싶은 그림의 주소를 넣어주시면 됩니다.

{'background':'none'} 는 그림을 비표시 하는 스크립트 입니다.

버튼1 은 자신이 원하는 버튼의 이름을 넣어주세요

width: 60px; height:18px; margin:5px; float: left; background-color:yellow; 이 부분은 버튼의 이름이 짧다면 안건드셔도 됩니다. 만약 버튼의 이름이 길다면 width를 조정해주세요.

만약 버튼의 색깔을 바꿀려면 background-color:yellow 부분의 yellow를 자신이 원하는 색깔로 바꿔주시면 됩니다.

BBB의 경우 background 부분의 순서를 바꿔서 클릭하면 그림3->그림4->비표시->그림3… 이렇게 되도록 하면 됩니다.

---------------------------------

마지막으로 초기화 버튼입니다.

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAA':{'background':'url(http:1) center / 100% no-repeat'},'BBB':{'background':'none'}}"><span style="font-weight:bold;">초기화</span></div>

AAA혹은 BBB를 앞서 말한 레이어 블록의 설정과 동일하게 해주세요. 이 버튼은 실제로 초기화 시키는게 아닌 초기화 된거처럼 보이게 하는겁니다.

-----------------------------------

렛츠 실전!

이번에는 제가 직접 그린 인벤녀를 쓰겠습니다.

900X900이므로 450X450 으로 표시되게 하겠습니다.

몸

눈썹

입

표정

표정

표정

초기화

<div style="width: 450px; height:450px;"><div data-inven-id="body" style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15908101704.png) center / 100% no-repeat;"><div data-inven-id="face1" style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat;"><div data-inven-id="face2" style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat;"><div data-inven-id="bunwigi" style="width:100%;height:100%;"><div data-inven-id="suzungi" style="width:100%;height:100%;"><div data-inven-id="hat" style="width:100%;height:100%;"></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'body':[{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15956295155.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15908101704.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">몸</span></div><div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'face1':[{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15914721135.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">눈썹</span></div><div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'face2':[{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15928887123.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">입</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'bunwigi':[{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15912963868.png) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">표정</span></div><div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'suzungi':[{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15991610072.png) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">표정</span></div><div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'hat':[{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971244886.png) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">표정</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" data-inven-click-css="{'body':{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15908101704.png) center / 100% no-repeat'},'face1':{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat'},'face2':{'background':'url(https://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat'},'bunwigi':{'background':'none'}'suzungi':{'background':'none'}'hat':{'background':'none'}}"><span style="font-weight:bold;">초기화</span></div>