1. 원래 스크립트

<div>
<div data-inven-id="base" style="width:300px;height:289;background:url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13299189201.png);position:relative;">

<div data-inven-id="hat" style="width:100%;height:100%;">
<div data-inven-id="shoes" style="width:100%;height:100%;"></div>
</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/05/15/bbs/i13295367130.png)'},
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13210265376.png)'},
{'background':'none'}
     ]
      }">

<span style="font-weight:bold;">모자</span>

</div>


<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightgreen; border-radius: 5px;text-align:center;"
data-inven-click-css="{'shoes':[
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13243744414.png)'},
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13233769671.png)'},
{'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="{'hat':{'background':'none'},'shoes':{'background':'none'}}">

<span style="font-weight:bold;">초기화</span>

</div>



</div></div>

모자
신발
초기화
 








2. 검은 모자 미리 나오게 한 스크립트

<div>
<div data-inven-id="base" style="width:300px;height:289;background:url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13299189201.png);position:relative;">

<div data-inven-id="hat" style="width:100%;height:100%; background:url('https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13295367130.png');">
<div data-inven-id="shoes" style="width:100%;height:100%;"></div>
</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/05/15/bbs/i13210265376.png)'},
{'background':'none'},
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13295367130.png)'}
     ]
      }">

<span style="font-weight:bold;">모자</span>

</div>


<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightgreen; border-radius: 5px;text-align:center;"
data-inven-click-css="{'shoes':[
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13243744414.png)'},
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13233769671.png)'},
{'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="{'hat':{'background':'none'},'shoes':{'background':'none'}}">

<span style="font-weight:bold;">초기화</span>

</div>



</div></div>



모자
신발
초기화
 





3. 설명


style에서 background를 지정하지 않은 원래 코드의 경우

background의 상태는 'none' 입니다. 따라서,

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

이 두 코드는 같습니다.


수정한 코드에서 이 부분을 변경하여, 미리 모자를 씌우기 위해 hat 부분의 style 내부에

background:url('https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13295367130.png');

이렇게 background 이미지를 지정하여 처음부터 표시되게 하였습니다.





그리고 추가적으로, 클릭 시 나타나는 이미지의 순서를 변경하기 위해

{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13295367130.png)'},
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13210265376.png)'},
{'background':'none'}

이 부분을



{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13210265376.png)'},
{'background':'none'},
{'background':'url(https://upload2.inven.co.kr/upload/2017/05/15/bbs/i13295367130.png)'}


이렇게 순서를 바꿔줍니다.



이렇게 되면

기본(0) - 첫 클릭(1) - 두 번째 클릭(2) - 세 번째 클릭(3)

이런 순서라고 할 때



원래의 경우

0. 없음

클릭시 (1-2-3-반복)
1. 검은색 모자
2. 연두색 모자
3. 없음

이렇게 되던 것이


바꾼 소스의 경우

0. 검은 모자

클릭시 (1-2-3-반복)
1. 연두색 모자
2. 없음
3. 검은색 모자

이렇게 변합니다.

(첫 클릭 시 나오던 검은색 모자를 미리 나오게 하였으므로, 전체적인 순번을 하나씩 앞당겼습니다.)

========================================================================





========================================================================
이미지 크기 조정
========================================================================



예시로, <div>  </div> 태그 내에 있는 이미지를 예로 들겠습니다.



<div style="width: 200px; height:100px; border:2px solid red;">

<img src="https://upload2.inven.co.kr/upload/2017/11/13/bbs/i15399782220.jpg">

</div>


 







이미지의 크기가 영역보다 커서

영역을 벗어나버리는 이미지의 경우,





<div style="width: 200px; height:100px; border:2px solid red;">

<img src="https://upload2.inven.co.kr/upload/2017/11/13/bbs/i15399782220.jpg" style="width:100%; height:100%;">

</div>


 


해당 이미지의 style 속성으로 가로 길이, 세로 길이를 %로 맞추게 되면

상위 태그의 사이즈의 비율을 따라 간편하게 이미지 사이즈가 정해집니다.

가로 세로 모두 이처럼 100%로 정할 경우에 상위 태그 영역과 동일한 크기로 정할수 있습니다.





또 다른 예시) 가로 40%, 세로 80%로 맞춘 경우

<div style="width: 200px; height:100px; border:2px solid red;">

<img src="https://upload2.inven.co.kr/upload/2017/11/13/bbs/i15399782220.jpg" style="width:40%; height:80%;">

</div>


 


+ 가운데 정렬

<div style="width: 200px; height:100px; border:2px solid red;" align="center">

<img src="https://upload2.inven.co.kr/upload/2017/11/13/bbs/i15399782220.jpg" style="width:40%; height:80%;">

</div>


 

이렇게 이미지마다 크기를 조정해주시면 되고,

상위 태그의 상댓값인 % 단위를 쓰는 대신에

인장의 가로길이 최대 450px 한도 내에서

직접 크기를 지정해주셔도 됩니다.(px, em 등등 단위)