Nacx
2017-10-16 17:31
조회: 632
추천: 0
'Rene'님이 요청하신 샘플 소스 입니다.인벤 스크립트에 관심을 가져주셔서 감사합니다.
문의 주셨던 4-1, 4-2번 내용에 대한 샘플 소스를 전달 드립니다. 리스트 / 페이지 번호, 그리고 이미지 중앙 정렬 관련 처리를 한 소스 입니다. 이미지 중앙 정렬(background-position)과 반복 안함(background-repeat), 그리고 사이즈(background-size)는 5번, 6번 이미지를 참고해 주세요. 규격 참고를 위해 외곽선(border:2px)을 넣어 놨습니다. ■ 샘플 소스 - HTML을 누른 상태에서 붙여넣어 주세요. <div data-inven-list="list-item-1,list-item-2,list-item-3,list-item-4,list-item-5,list-item-6" data-list-id="list-item-1" style="width:404px;border:2px solid gray;"> <div data-inven-id="list-item-1" style="text-align:center;"> <img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i14698514060.jpg"><br> (1/6) </div> <div data-inven-id="list-item-2" style="text-align:center;display:none;"> <img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16069549831.jpg"><br> (2/6) </div> <div data-inven-id="list-item-3" style="text-align:center;display:none;"> <img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16001189225.jpg"><br> (3/6) </div> <div data-inven-id="list-item-4" style="text-align:center;display:none;"> <img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16035166207.jpg"><br> (4/6) </div> <!-- 5번 이미지--> <div data-inven-id="list-item-5" style="text-align:center;display:none;"> <div style="display:inline-block;width:400;height:400;background:url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16066398259.jpg)no-repeat center center/ 80%;"></div><br> (5/6) </div> <!-- 6번 이미지--> <div data-inven-id="list-item-6" style="text-align:center;display:none;"> <div style="display:inline-block;width:400;height:400;background:url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16094400043.jpg)no-repeat 50% 50%/ 60%;"></div><br> (6/6) </div> ■ 결과물 샘플 (1/6) |