HTML5와 CSS Level 3 표준을 따르는 최신 실전 코드를 배울 수 있도록 꼼꼼한 설명이 덧붙여진 예제 코드를 담고 있는 학습서입니다. 실무에서 구현해서 사용하는 실제 코드를 기초로 설명하기 때문에 학습한 내용에서 끝나는 것이 아니라 실제로 사용할 수 있는 코드를 작성할 수 있는 실력을 키울 수 있습니다. 실무에서 부딪히게 될 다양한 호환성 문제들도 꼼꼼하게 체크를 해 주기 때문에 실제로 써먹을 수 있는 코드를 완성하는 데도 많은 도움이 됩니다.

꼼꼼한 설명과 주석으로 보고 바로 이해할 수 있는 실전 코드들을 기초로 학습합니다. 실무에서 실제로 사용하는 최신 CSS 기법과 팁들을 알려드립니다. 실제로 활용할 수 있는 실전 예제들을 풍부하게 담고 있습니다. 포토갤러리와 쇼핑몰 레이아웃을 최신 기법으로 만드는 방법을 배울 수 있습니다. 완성된 예제 코드들을 다운로드 받아 활용할 수 있도록 소스를 제공합니다. 실전에서 부딪히게 되는 웹 브라우저 호환성 문제에 대한 충실한 안내를 담고 있습니다. 다양한 모바일 기기에 대응하는 반응형 레이아웃 제작 방법을 소개합니다.

책을 학습하기 전 꼭 알아야할 내용

1부 HTML 기초
\t1장. HTML의 역사
\t2장. 하이퍼텍스트 마크업 언어(Hypertext Markup Language)
\t3장. CSS의 역사
\t4장. 뷰어와 웹 브라우저
\t5장. 웹 에디터와 통합 개발 도구
\t6장. HTML 문서의 기본 구조 이해
\t7장. HTML 5.2의 개선 내용 알기
\t8장. 기본 HTML 문서 만들어 보기
\t9장. HTML 문서에 이미지() 연결하기
\t10장. 하이퍼링크()로 HTML 문서를 연결하기
\t11장. 웹에서 사용할 수 있는 이미지 포맷들
\t12장. 시멘틱 태그로 검색에 최적화된 HTML 문서 만들기
\t13장. 멀티미디어 컨텐츠를 HTML 문서에 연결하기
\t14장. 사라져가는 태그와 속성들
\t15장. 폼() 만들기 완전 기초 ？ 폼 정의하기
\t16장. 폼 만들기 완전 기초 ？ 폼() 태그에 속성 추가하기
\t17장. 폼 만들기 완전 기초 ？ 태그로 입력 받기
\t18장. 인터넷 익스플로러에서 지원되지 않는 타입
\t19장. 태그의 속성 요약해서 보기
\t20장. 사용빈도가 낮은 고급 “”？속성들
\t21장. 드롭다운 리스트() 기초
\t22장. 로그인 폼 만들어 보기
\t23장. 회원가입 폼 만들어 보기

2부 CSS 기초
\t1장. CSS의 기초 개념 이해하기
\t2장. CSS를 작성하는 순서 이해하기
\t3장. 클래스 이름을 정하는 규칙
\t4장. 클래스 선택자 기초 개념 이해
\t5장. 가상 요소 기초 개념 배우기
\t6장. HTML 요소(들)을 선택하는 CSS 선택자(Selector) 기초
\t7장. CSS 텍스트 속성 기초 익히기
\t8장. 텍스트 속성들 요약해서 보기
\t9장. 여백과 테두리？속성 배우기
\t10장. 요소의 너비와 높이 그리고 차지하는 영역의 크기를 이해하기
\t11장. 배경(background) 속성 기초 배우기
\t12장. 테이블() 만들기 기초
\t13장. HTML5에 새로 추가된 태그들 알아보기

3부 비주얼 스튜디오 코드와 개발자 도구 사용법
\t1장. 비주얼 스튜디오 코드 설치와 화면 구성
\t2장. 비주얼 스튜디오 코드 프로젝트 관리와 코드 작성 방법
\t3장. 비주얼 스튜디오 코드 필수 확장 프로그램 설치
\t4장. 비주얼 스튜디오 코드 열 선택 모드와 다중 커서 모드 활용
\t5장. 비주얼 스튜디오 코드 에밋과 약어의 사용
\t6장. 웹 브라우저 개발자 도구의 필요성
\t7장. 크롬 개발자 도구 화면 구성
\t8장. 크롬 개발자 도구 표시 위치 바꾸기
\t9장. 구글 크롬보다 더 나은 웹 브라우저 마이크로소프트 신형 엣지
\t10장. 크롬 개발자 도구 명령어 리스트 보기
\t11장. 크롬 개발자 도구 다크모드 사용하기
\t12장. 크롬 개발자 도구 디자인 모드로 웹페이지를 에디터처럼 수정하기
\t13장. 웹 디자이너를 위한 크롬 개발자 도구 Top 11 팁

4부 CSS 단위, 선택자, 여백의 기초
\t1장. 반응형 웹의 핵심인 em과 rem 단위의 이해
\t2장. CSS 유닛(Unit) 단위와 픽셀과의 관계
\t3장. CSS 선택자 고급 - 부분 선택자(Partial Selector)
\t4장. CSS 선택자 고급 - 가상 클래스 (Pseudo Class)의 이해
\t5장. CSS 선택자 고급 - 가상 클래스(Pseudo Class) 핵심 요약
\t6장. CSS 선택자 고급 - 가상 요소(Pseudo Element)로 사용하기
\t7장. CSS 선택자 고급 - “:nth-” 가상 클래스로 필터링 하기
\t8장. CSS 속성 선택자(Attribute Selector) 기초
\t9장. CSS 패딩(Padding), 마진(Margin), 테두리(Border)의 방향과 순서 이해하기
\t10장. 자식 요소의 % 패딩(% padding) 값이 정해지는 기준
\t11장. 중첩된 빈 블록 요소의 상단 마진(margin-top) 겹침 현상 이해하기

5부 CSS 애니메이션 기초
\t1장. CSS 애니메이션 기초
\t2장. CSS 애니메이션(animation) 속성 이해하기
\t3장. CSS 애니메이션 가속도 함수의 이해
\t4장. 애니메이션 채우기 모드의 이해
\t5장. 다중 애니메이션 적용하기
\t6장. “steps()” 애니메이션 함수의 이해
\t7장. 변수를 활용해 CSS 애니메이션 만들기
\t8장. SVG 벡터 경로(Path)를 따라 이동하는 CSS 애니메이션 만들기
\t9장. CSS 애니메이션과 자바스크립트 이벤트 처리 연동하기
\t10장. 개발자 도구로 CSS 애니메이션 디버깅 하기

6부 플렉스박스와 그리드로 만드는 CSS 레이아웃 기초
\t1장. CSS 플렉스박스(Flexbox) 기초 이해
\t2장. 플렉스박스 아이템 수직 정렬하기
\t3장. 플렉스박스 배치 속성의 이해
\t4장. 플렉스박스로 레이아웃 만들기 기초
\t5장. 줄 바꿈 아이템으로 플렉스박스 레이아웃 만들기
\t6장. 플렉스박스 고급 - “flex-grow”와 “flex-shrink” 속성의 완벽 이해
\t7장. 플렉스박스 레이아웃 속성 요약 정리
\t8장. 플렉스박스로 반응형 레이아웃 만들기
\t9장. 플렉스박스(flex)와 마진(margin) 속성으로 반응형 메뉴 만들기
\t10장. CSS 그리드(Grid) 기초 이해
\t11장. CSS 그리드 컨테이너 선언과 속성 기초
\t12장. 그리드 열 구획 속성(Attribute)과 메서드(Method) 활용
\t13장. 그리드 영역 구획하기\t406
\t14장. 그리드 인터넷 익스플로러 호환성 구현하기

7부 HTML 태그 고급 활용 기법
\t1장. CSS 가상 요소로 삼각형 화살표 디자인 제작하기
\t2장. CSS 테두리 선으로 삼각형 화살표 디자인 만들기
\t3장. 체크박스와 라디오버튼 변형 디자인
\t4장. 체크박스와 CSS로 만드는 FAQ 리스트
\t5장. 라디오버튼과 CSS로 만드는 탭(Tab) 박스 디자인 만들기
\t6장. 라디오버튼으로 만드는 다단 풀다운 메뉴
\t7장. 체크박스 로 만드는 접히는 사이드바 레이아웃
\t8장. 이미지로 만드는 체크박스
\t9장. 이미지 파일 없이 투명 GIF/PNG 이미지 사용하기
\t10장. 이미지 지연 로딩(Lazy loading)과 검색 최적화
\t11장. 과 태그의 활용
\t12장. <sup>태그(어깨문자 태그)를 CSS로 대체 구현하기
\t13장. 블록 태그 안의 이미지 밑에 여백이 남는 이유와 해결 방법
\t14장. 하이퍼링크 “download” 속성으로 파일 강제 다운로드 하기

8부 CSS 고급 활용 기법
\t1장. 버튼 애니메이션 만들기
\t2장. 수직/수평 가운데 정렬을 자유자재로 하기
\t3장. 반응형 레이아웃 대상을 구분하는 기준 이해하기
\t4장. CSS로 SVG 색상 제어하기
\t5장. 헤더가 고정된 스크롤 테이블 만들기
\t6장. CSS 변수(Variable) 사용 기초
\t7장. CSS 변수 오버라이딩(Overriding)을 활용한 디자인 테마 구현
\t8장. CSS 변수로 반응형 웹 구현하기
\t9장. “inline-block” 속성의 공백 버그를 회피하는 방법들
\t10장. CSS로 터치 스크린 장치 구분하기
\t11장. 벤더 프리픽스(Vendor Prefix) 자세히 알기
\t12장. CSS로 멀티 컬러 배경 만들기
\t13장. 플렉스박스(Flex)와 그리드(Grid) 요소의 가운데 정렬
\t14장. CSS 기능 쿼리(@support)로 속성 지원 여부 알기
\t15장. 이미지를 배치하는 “object-fit”, “object-position” 속성의 이해
\t16장. CSS 작성 초기화(Reset) 방법
\t17장. CSS 로 하이퍼링크 기본 스타일 초기화 하기
\t18장. CSS로 내용 표시 줄 수 제한하기
\t19장. 활성화 된 요소(Element)의 포커스 테두리 없애기
\t20장. CSS 텍스트영역() 크기 조절 차단하기<br/>\t21장. 플레이스홀더(placeholder) 속성 스타일 정의하기<br/>\t22장. CSS로 텍스트 영역 선택 차단하기<br/>\t23장. 배경 SVG 이미지가 크기 조절이 안되는 문제 해결하기<br/>\t24장. 모바일 웹 줌인아웃(Zoom In/Out) 차단하기7<br/>\t25장. 프린트용 미디어쿼리 설정하기<br/>\t26장. 괜찮은 CSS 배경 그림자 효과 4가지<br/><br/>9부 실전 레이아웃 디자인<br/>\t1장. 반투명 유리 배경 효과 만들기<br/>\t2장. 이미지 슬라이드 만들기1 - 투명 전환 효과<br/>\t3장. 이미지 슬라이드 만들기2 - 이동 효과<br/>\t4장. 이미지 슬라이드 만들기3 - 입체 3D 효과<br/>\t5장. 체크박스로 펼침 메뉴 만들기<br/>\t6장. 플렉스박스로 포토갤러리 만들기<br/>\t7장. 플렉스박스로 쇼핑몰 레이아웃 만들기<br/>\t8장. 그리드로 포토갤러리 만들기1<br/>\t9장. 그리드로 포토갤러리 만들기2<br/>\t10장. 그리드로 쇼핑몰 레이아웃 만들기 </div> </div> <div id="indexDescBtn" class="pr20"></div> </div> <!--// 목차 --> <!-- 상품고시정보 --> <div class="tap_zone mt40" id="sub02"> <ul> <li><a href="#sub01">상품 정보</a></li> <li class="on"><a href="#sub02">회원리뷰</a></li> <li><a href="#sub03">반품/교환</a></li> <li><a class="alt"></a></li> <!-- 마지막 기본틀 --> </ul> </div> <!-- <div class="row_item"><img src="http://image.bandinlunis.com/upload/design/bn/2017/01/bandipoint_info.jpg" usemap="#bandipoint_info"></div> --> <!-- <map name="bandipoint_info"> --> <!-- <area shape="rect" coords="772,121,948,159" href="/pages/front/service/serviceBandiPointInfo.jsp" target="_blank" alt="" /> --> <!-- </map> --> <!-- 리뷰 --> <!-- //리뷰 --> <!-- 간단평 --> <iframe id="simpleReview" src="" width="100%" class="iframe_review" style=" margin-left:0" frameborder="0" scrolling="no"></iframe> <!-- //간단평 --> <!-- 태그 --> <iframe id="iframe_tag" src="" width="100%" frameborder="0" scrolling="no" style="display: none;"></iframe> <!-- //태그 --> <!-- 페이퍼--> <div style="display:none"><iframe id="blogPaper" src="" height="370" class="iframe_review" frameborder="0" scrolling="no"></iframe></div> <!--//페이퍼 --> <!-- 고객이 테마북을 통해 같이 묶은 다른 상품 --> <div id="DTL_THEMA" class="bookInfo_subCon" style="display:none;"></div> <!-- 이 책이 속한 테마 --> <iframe style="display:none;" id="iframe_theme" src="" width="100%" frameborder="0" scrolling="no"></iframe> <!-- //이 책이 속한 테마 --> <!-- 묶음상품리스트 --> <iframe style="display:none;" src="/front/product/iframePackageList.do?prodId=4405112" id="iframePackageList" width="100%" class="iframe_package" frameborder="0" scrolling="no"></iframe> <!-- 연관상품 --> <iframe style="display:none;" src="/front/product/iframeConnectProd.do?prodId=4405112" id="iframeConnectList" width="100%" class="iframe_package" frameborder="0" scrolling="no"></iframe> <div class="tap_zone mt40" id="sub03"> <ul> <li><a href="#sub01">상품 정보</a></li> <li><a href="#sub02">회원리뷰</a></li> <li class="on"><a href="#sub03">반품/교환</a></li> <li><a class="alt"></a></li> <!-- 마지막 기본틀 --> </ul> </div> <!-- 반품/교환 --> <div class="row_item"> <div class="title_zone"> <h3 class="txt_title">배송 시 유의사항</h3> </div> <div class="box_contents"> <p>- 반디앤루니스에서 구매하신 도서는 물류 대행 위탁업체 웅진 북센을 통해 배송됩니다.<br>  (배송 포장에 "웅진 북센"으로 표기될 수 있습니다.)</p> <p>- 구매한 상품의 품질과 배송 관련 문의는 반디앤루니스로 문의 바랍니다. <!--(고객센터 : 1577-4030)--></p> <p>- 천재지변 및 택배사의 사정에 따라 배송이 지연될 수 있습니다.</p> <p>- 결제(입금) 완료 후 출판사 및 유통사의 사정으로 품절 또는 절판 되어 상품 구입이 어려울 수 있습니다. (별도 안내 예정)</p> <p>- 도서산간지역의 경우 추가 배송비가 발생될 수 있습니다.</p> </div> <div class="title_zone" style="margin-top:25px;"> <h3 class="txt_title">반품/교환</h3> </div> <div class="box_contents"> <p>상품 설명에 반품/ 교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다)</p> <dl class="information"> <dt><h4>반품/교환</h4></dt> <dd> <table cellspacing="0" border="0" summary="본 상품은 배송 없이 구매 후 바로 다운받아 보는 eBook으로 다운 후에는 취소/환불이 불가능합니다." class="table_return"> <caption>반품/교환</caption> <colgroup> <col width="18%"><col width="82%"> </colgroup> <tbody> <tr> <th>반품/교환 방법</th> <td>홈 > 고객센터 > 자주찾는질문 “반품/교환/환불” 안내 참고 또는 1:1상담게시판</td> </tr> <tr> <th>반품/교환 가능 기간</th> <td>반품,교환은 배송완료 후 7일 이내, 상품의 결함 및 계약내용과 다를 경우 문제발견 후 30일 이내에 신청가능</td> </tr> <tr> <th>반품/교환 비용</th> <td>변심 혹은 구매착오의 경우에만 반송료 고객 부담(별도 지정 택배사 없음)</td> </tr> <tr> <th>반품/교환 불가 사유</th> <td> <ul> <li>소비자의 책임 사유로 상품 등이 손실 또는 훼손된 경우</li> <li>소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우</li> <li>복제가 가능한 상품 등의 포장을 훼손한 경우 : 예)만화책, 잡지, 화보집 등</li> <li>시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우</li> <li>전자상거래등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우</li> <li>해외주문 상품(해외 원서)의 경우(파본/훼손/오발송 상품을 제외)</li> </ul> </td> </tr> <tr> <th>소비자 피해보상<br>환불지연에 따른 배상</th> <td> <ul> <li>상품의 불량에 의한 반품, 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은<br> 소비자 분쟁해결 기준(공정거래위원회고시)에 준하여 처리됨 </li> <li>대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의<br> 소비자 보호에 관한 법률에 따라 처리함 </li> </ul> </td> </tr> <tr> <th>반품/교환 주소</th> <td>경기도 파주시 문발로 77, 웅진북센(반디앤루니스)</td> </tr> </tbody> </table> </dd> </dl> </div> </div> <!--// 반품/교환 --> </div> <script type="text/javascript"> //리뷰 더보기 function moreHistory(){ if(reviewTotalCount <= currentCount){ alert("더 이상의 리뷰가 없습니다."); return; } //남은 리뷰 갯수 만큼 보이기(한번의 더보기에 최대 3줄) var restCount = reviewTotalCount - currentCount; if(restCount>3) restCount = 3; for (var i = 1; i <= restCount; i++) { $("#more_review_"+(i+currentCount)).show(); } currentCount+=restCount; } function moreReview(onReview){ if($("#more_review_"+onReview).hasClass("on")){ $("#more_review_"+onReview).removeClass("on"); }else{ $("#more_review_"+onReview).addClass("on"); } var bookHeight = $("#more_review_"+onReview).height(); var toggleCustom = $("#more_review_"+onReview); if($("#more_review_"+onReview).hasClass("on")){ $("#more_review_"+onReview).animate({height:bookHeight},"fast",function(){ $("#more_review_"+onReview).attr("style",""); }); }else{ toggleCustom.animate({height:"133px"},"fast"); var offset = $("#more_review_"+onReview).offset(); $('html, body').animate({scrollTop : offset.top}, 400); } } function onChangeText(obj,val,seq){ if(obj.value.length>5000){ alert("5000자 이상 입력하실 수 없습니다."); obj.value = obj.value.substring(0,5000); return; } // 길이체크 바이트 체크 안함 var len = obj.value.length; $("#reviewLength"+seq).html(len+"/5000"); } function goReviewWrite(){ if(!isLogin("")){ alert("로그인이 필요한 서비스입니다."); goLoginPage(); return; } } function validationReview(sReview){ //간단평 금칙어들 var noWords = ["개새끼","개세끼","씨발","지랄","좆","병신","등신"]; //간단평 금칙어 검사 for (var i = 0; i < noWords.length; i++) { if(sReview.indexOf(noWords[i]) != -1){ alert("금칙어가 포함되어 있어 입력이 불가능 합니다."); return false; } } // 간단평 자음, 모음 검사 for (var i = 0; i < sReview.length; i++){ var c = sReview.charCodeAt(i); if(0x3131 <= c && c <= 0x318E){ alert("간단평은 자음, 모음만 입력이 불가능 합니다."); return false; } } //간단평 길이 검사 if(sReview == null || sReview == ""){ alert("내용을 입력해주세요."); return false; }else if(sReview.length<15){ alert("상품과 관련된 내용을 15자 이상 작성해주셔야 합니다."); return false; } return true; } // function goReviewRegist(){ // if(!isLogin("")){ // alert("로그인이 필요한 서비스입니다."); // goLoginPage(); // return; // }else{ // var sReview = $("#review").val(); // if(!validationReview(sReview)){ // return; // } // $.ajax({ // url:"/front/ajax/reviewRegist.do", // type:"post", // data:{"review":sReview,"prodId":"4405112"}, // error:function(xhr){ // alert("데이터 처리 중 오류가 발생했습니다. 관리자에게 문의해주세요."); // }, // success:function(data){ // if(data != null && data.length > 0 && data == 'Y'){ // alert("등록되었습니다."); // location.reload(); // } else if(data == 'Y20'){ // alert("구매하신 상품에 간단평을 남겨주셔서 반딧불이 20개 지급되었습니다. 나의 쇼핑정보 반딧불 내역에서 확인해주세요."); // location.reload(); // } else if(data == 'Y100'){ // alert("구매하신 상품에 간단평을 남겨주셔서 반딧불이 100개 지급되었습니다. 나의 쇼핑정보 반딧불 내역에서 확인해주세요."); // location.reload(); // } else if(data == 'X'){ // alert("간단평은 한번만 작성가능합니다."); // } else if(data == 'Z'){ // alert("하루에 지급 가능한 횟수를 초과하여 반딧불이 지급되지 않습니다."); // } else{ // alert("작업을 정상적으로 마치지 못했습니다."); // } // } // }); // } // } // function goReviewDelete(seq){ // if(!isLogin("")){ // alert("로그인이 필요한 서비스입니다."); // goLoginPage(); // return; // }else{ // $.ajax({ // url:"/m/ajax/reviewDelete.do", // type:"post", // data:{"seq":seq}, // error:function(xhr){ // alert("데이터 처리 중 오류가 발생했습니다. 관리자에게 문의해주세요."); // }, // success:function(data){ // if(data != null && data.length > 0 && data == 'Y'){ // alert("삭제되었습니다."); // location.reload(); // }else{ // alert("작업을 정상적으로 마치지 못했습니다."); // } // } // }); // } // } // function goReviewUpdate(seq){ // if(!isLogin("")){ // alert("로그인이 필요한 서비스입니다."); // goLoginPage(); // return; // }else{ // var review = $("#updateReview_"+seq).val(); // if(!validationReview(review)){ // return; // } // $.ajax({ // url:"/m/ajax/reviewUpdate.do", // type:"post", // data:{"seq":seq, "review":review}, // error:function(xhr){ // alert("데이터 처리 중 오류가 발생했습니다. 관리자에게 문의해주세요."); // }, // success:function(data){ // if(data != null && data.length > 0 && data == 'Y'){ // alert("수정되었습니다."); // location.reload(); // }else{ // alert("작업을 정상적으로 마치지 못했습니다."); // } // } // }); // } // } function chooseLeaf(leaf){ $('select[name=usr_point]').val(leaf).prop("selected", true); $('.usr .leaf').removeClass('leaf0'); $('.usr .leaf').removeClass('leaf1'); $('.usr .leaf').removeClass('leaf2'); $('.usr .leaf').removeClass('leaf3'); $('.usr .leaf').removeClass('leaf4'); $('.usr .leaf').removeClass('leaf5'); $('.usr .leaf').removeClass('leaf6'); $('.usr .leaf').removeClass('leaf7'); $('.usr .leaf').removeClass('leaf8'); $('.usr .leaf').removeClass('leaf9'); $('.usr .leaf').removeClass('leaf10'); $('.usr .leaf').addClass('leaf'+leaf); } </script> </div> <script type="text/javascript" src="/js/partnerPopUp.js"></script> <script type="text/javascript"> $(document).ready(function(){ //도로명주소 $(".zip_tap > .tap_menu > li").click(function(){ $(".zip_tap > .tap_menu > li").removeClass('on'); $("#search_doro").css("display","none"); $("#search_jibun").css("display","none"); var target = "#search_"+this.id; $(this).addClass('on'); $(target).css("display","block"); var result = []; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<caption>검색 결과 : 주소가 없습니다.</caption>'); result.push('<tr>'); result.push('<td class="txt_blank">검색된 주소가 없습니다.</td>'); result.push('</tr>'); result.push('</table>'); $("#zipCodeList").html(result.join('')); $("#txt_count").html("0"); $("#search_result").css("display","none"); //win_resize(); }); //도로명주소 $("input[type=radio]").click(function(){ var searchType = $(this).val(); if(searchType == "doro"){ $("#doroArea").removeClass('hide'); $("#bldArea").addClass('hide'); $("#dongArea").addClass('hide'); }else if(searchType == "bldName"){ $("#doroArea").addClass('hide'); $("#bldArea").removeClass('hide'); $("#dongArea").addClass('hide'); }else if(searchType == "dong"){ $("#doroArea").addClass('hide'); $("#bldArea").addClass('hide'); $("#dongArea").removeClass('hide'); } }); // Input Clear var i_text = $('.item>.i_screen_hide').next('.i_text'); $('.item>.i_screen_hide').css('position','absolute'); i_text.focus(function(){ $(this).prev('.i_screen_hide').css('display','none'); }).blur(function(){ if($(this).val() == '') $(this).prev('.i_screen_hide').css('display','block'); else $(this).prev('.i_screen_hide').css('display','none'); }).change(function(){ if($(this).val() == '') $(this).prev('.i_screen_hide').css('display','block'); else $(this).prev('.i_screen_hide').css('display','none'); }).blur(); $('.item>.i_screen_hide').click(function(){ if($(this).next('.i_text').val() == ''){ $(this).css('display','none'); $(this).next('.i_text').focus(); } }); }); var gZipCode = 'null'; function getZipcode(obj){ var reObj=obj; if(obj.indexOf("-") == -1 && obj.length==6){ reObj = obj.substr(0,3)+"-"+obj.substr(3,6) } return reObj; } function checkValue(fo,obj,lo){ if(obj == null || obj == 0){ obj = ""; }else{ obj = fo+obj+lo; } return obj } function goSearchJibun() { if(jibunDong.value.trim() == "" ) { alert("검색어를 입력하세요"); $('#jibunDong').focus(); return; } $("#search_result").css("display","block"); var result = []; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<tr>'); result.push('<td class="txt_blank">조회중입니다.</td>'); result.push('</tr>'); result.push('</table>'); $("#zipCodeList").html(result.join('')); $.ajax({ url: "/ajax/getZipCodeOld.do", type: "post", data: {"dong":$('#jibunDong').val()}, dataType: "json", success: function(data){ $("#txt_count").html(data.zipList.length); if(data.zipList.length == 0){ var result = []; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<caption>검색 결과 : 주소가 없습니다.</caption>'); result.push('<tr>'); result.push('<td class="txt_blank">검색된 주소가 없습니다.</td>'); result.push('</tr>'); result.push('</table>'); $("#zipCodeList").html(result.join('')); }else{ var result = []; var targetNum=1; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<caption>검색 결과 : 주소를 클릭하시면 자동입력 됩니다.</caption>'); //result.push('<colgroup><col width="90"><col width="340"></colgroup>'); $.each(data.zipList, function(){ var array_zipcode=getZipcode(this.zip_code).split("-"); result.push('<input type="hidden" name="zip1_'+targetNum+'" value="'+array_zipcode[0]+'">'); result.push('<input type="hidden" name="zip2_'+targetNum+'" value="'+array_zipcode[1]+'">'); result.push('<input type="hidden" name="addr1_'+targetNum+'" value="' +checkValue("",this.sido,"")+checkValue(" ",this.gugun,"")+checkValue(" ",this.dong,"")+checkValue(" ",this.ri,"") +'">'); result.push('<input type="hidden" name="addr2_'+targetNum+'" value="'+checkValue("",this.bldg,"")+'">'); result.push('<tr>'); result.push('<th><a href="javascript: setAddr('+targetNum+')">'+getZipcode(this.zip_code)+'</a></th>'); result.push('<td><a href="javascript: setAddr('+targetNum+')">' +checkValue("",this.sido,"")+checkValue(" ",this.gugun,"")+checkValue(" ",this.dong,"")+checkValue(" ",this.ri,"") +checkValue(" ",this.bldg,"")+checkValue(" ",this.st_bunji,"")+checkValue("~",this.ed_bunji,"") +'</a></td>'); result.push('</tr>'); targetNum++; }); result.push('</table>'); $("#zipCodeList").html(result.join('')); } }, error: function(){ var result = []; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<tr><td> 네트워크가 불안정합니다. 잠시 후 다시 시도해주세요.</td></tr>'); result.push('</table>'); $("#zipCodeList").html(result.join('')); } }); } function goSearch() { var onSearchType="doro"; var onSearchKey="" var onSido=""; var onSigungu =""; var onJibun=""; var onBldNum=""; with($('#search_doro')){ if($("input[type=radio]:checked").val()=="doro"){ onSearchType="doro"; onSearchKey=searchDoro.value.trim(); onSido=$("select[name=sido]").val(); onSigungu=$("select[name=sigungu]").val(); onBldNum=$("input[name=bldNum]").val(); if(onSearchKey == "" && onBldNum == ""){ if(onSido == ""){ alert("'시/도'를 선택해주세요."); return; } if(onSigungu == ""){ alert("'시/군/구'를 선택해주세요."); return; } } if(onSearchKey == "" ) { alert("'도로명'을 입력해주세요."); searchDoro.focus(); return; } var sKey = onSearchKey.substring((onSearchKey.length-1), onSearchKey.length); if(sKey != "로" && sKey != "길"){ alert("도로명은 ~로, ~길로 입력해주세요."); return; } } if($("input[type=radio]:checked").val()=="bldName"){ onSearchType="bldName"; onSearchKey=searchBld.value.trim(); onSido=$("select[name=sido]").val(); onSigungu=$("select[name=sigungu]").val(); //onJibun=jibun.value; //onBldNum=bldNum.value; if(onSido == ""){ alert("'시/도'를 선택해주세요."); return; } if(onSigungu == ""){ alert("'시/군/구'를 선택해주세요."); return; } if(onSearchKey == "" ) { alert("'건물명'을 입력해주세요."); searchBld.focus(); return; } } if($("input[type=radio]:checked").val()=="dong"){ onSearchType="dong"; onSearchKey=searchDong.value.trim(); onSido=$("select[name=sido]").val(); onSigungu=$("select[name=sigungu]").val(); onJibun=searchKJibun.value; //onBldNum=bldNum.value; if(onSido == ""){ alert("'시/도'를 선택해주세요."); return; } if(onSearchKey == "" ) { alert("'동명'을 입력해주세요."); searchDong.focus(); return; } if(onJibun == ""){ alert("'지번'을 입력해주세요."); searchKJibun.focus(); return; } } $("#search_result").css("display","block"); var result = []; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<tr>'); result.push('<td class="txt_blank">조회중입니다.</td>'); result.push('</tr>'); result.push('</table>'); $("#zipCodeList").html(result.join('')); $.ajax({ url: "/ajax/getZipCode.do", type: "post", data: {"sido":onSido,"sigungu":onSigungu,"searchType":onSearchType,"searchKey":onSearchKey,"jibun":onJibun,"bldNum":onBldNum}, dataType: "json", success: function(data){ $("#txt_count").html(data.zipList.length); if(data.zipList.length == 0){ var result = []; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<caption>검색 결과 : 주소가 없습니다.</caption>'); result.push('<tr>'); result.push('<td class="txt_blank">검색된 주소가 없습니다.</td>'); result.push('</tr>'); result.push('</table>'); $("#zipCodeList").html(result.join('')); }else{ var result = []; var targetNum=1; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<caption>검색 결과 : 주소를 클릭하시면 자동입력 됩니다.</caption>'); //result.push('<colgroup><col width="90"><col width="340"></colgroup>'); $.each(data.zipList, function(){ var array_zipcode=getZipcode(this.zip_code); result.push('<input type="hidden" name="zip1_'+targetNum+'" value="'+array_zipcode+'">'); result.push('<input type="hidden" name="zip2_'+targetNum+'" value="">'); result.push('<input type="hidden" name="addr1_'+targetNum+'" value="'+checkValue("",this.sido,"")+checkValue(" ",this.sigugu,"")+checkValue(" ",this.doro,"")+'">'); result.push('<input type="hidden" name="addr2_'+targetNum+'" value="'+checkValue("",this.bld_name,"")+'">'); result.push('<tr>'); result.push('<th><a href="javascript: setAddr('+targetNum+')">'+getZipcode(this.zip_code)+'</a></th>'); result.push('<td><a href="javascript: setAddr('+targetNum+')">'+checkValue("",this.sido,"")+checkValue(" ",this.sigugu,"")+checkValue(" ",this.ubmyun,"") +checkValue(" ",this.doro,"")+checkValue(" ",this.bld_num,"")+checkValue("-",this.bld_num2,"")+checkValue(" ",this.bld_name,"") +'</a></td>'); result.push('<td>'+checkValue("",this.sido,"")+checkValue(" ",this.sigugu,"")+checkValue(" ",this.ubmyun,"") +checkValue(" ",this.dong,"")+checkValue(" ",this.ri,"")+checkValue(" ",this.jibun,"")+checkValue("-",this.jibun2,"")+checkValue(" ",this.bld_name,"") +'</td>'); result.push('</tr>'); targetNum++; }); result.push('</table>'); $("#zipCodeList").html(result.join('')); } }, error: function(){ var result = []; result.push('<table cellpadding="0" cellspacing="0">'); result.push('<tr><td class="txt_blank"> 네트워크가 불안정합니다. 잠시 후 다시 시도해주세요.</td></tr>'); result.push('</table>'); $("#zipCodeList").html(result.join('')); } }); } } function setAddr(idx){ var zip_no = document.getElementsByName("zip1_" + idx)[0].value; gZipCode = zip_no; var addr1 = "["+document.getElementsByName("addr1_" + idx)[0].value+"] 기준으로 "; var cnt = $("#prodCnt_4405112").val(); var today = "2025년 02월 06일"; var tomorrow = "2025년 02월 07일"; $.ajax({ url: "/ajax/getOrdDeliExpect.do", type: "post", data: {"prod_id":"4405112","zipCode":zip_no,"ord_cnt":cnt}, success: function(data){ if(data.indexOf("var data = '") != -1){ data = data.slice(data.indexOf("'")+1,data.length-2); // " var data = 'yyyy년 MM월 dd일(요일)';" 형식으로 온다. } if(data.indexOf(today) > -1) data = "오늘"; else if(data.indexOf(tomorrow) > -1) data = "내일"; $("#changeTerm").html("["+data+"]"); }, error: function(){ //alert("오류"); } }); $("#changeAddress").html(addr1); $("#search_result").css("display","none"); $("#zipCode").css("visibility","hidden"); } function getOrdDeli(){ var zip_no = gZipCode; var cnt = $("#prodCnt_4405112").val(); var today = "2025년 02월 06일"; var tomorrow = "2025년 02월 07일"; $.ajax({ url: "/ajax/getOrdDeliExpect.do", type: "post", data: {"prod_id":"4405112","zipCode":zip_no,"ord_cnt":cnt}, success: function(data){ if(data.indexOf("var data = '") != -1){ data = data.slice(data.indexOf("'")+1,data.length-2); // " var data = 'yyyy년 MM월 dd일(요일)';" 형식으로 온다. } if(data.indexOf(today) > -1) data = "오늘"; else if(data.indexOf(tomorrow) > -1) data = "내일"; $("#changeTerm").html("["+data+"]"); }, error: function(){ //alert("오류"); } }); } function changeDist(sido){ if(sido=="08"){ var result = "<option value=''>전체</option>"; $("select[name=sigungu]").html(result); }else{ if(sido != null && sido != ""){ $.ajax({ url: "/ajax/getDistrictInfos.do", type: "post", data: {"sido":sido}, dataType: "json", success: function(data){ if(data.length == 0){ alert("검색 결과가 없습니다."); } var result = "<option value=''>전체</option>"; var sigungu = ""; var selectYn = ""; $.each(data, function(){ if(sigungu != null && sigungu != "" && (this.sigungu_value == sigungu)){ selectYn = "selected"; }else{ selectYn = ""; } result += "<option value='"+this.sigungu_value+"' "+selectYn+">"+this.sigungu_name+"</option>"; }); $("select[name=sigungu]").html(result); }, error: function(){ alert("네트워크가 불안정합니다. 잠시 후 다시 시도해주세요."); } }); }else{ var result = "<option value=''>전체</option>"; $("select[name=sigungu]").html(result); } } } function preventSpace(e){ if(! window.event && !e) return; var keyNum=window.event ? window.event.keyCode : e.which; if (keyNum == 32) { alert("공백은 입력할 수 없습니다."); e.preventDefault(); } } function preventChar(e){ var keycode=window.event ? window.event.keyCode : e.which; if(!(keycode == 189 || keycode == 8 || (keycode >= 35 && keycode <= 40) || (keycode >= 45 && keycode <= 57) || (keycode >= 96 && keycode <= 105) || keycode == 110 || keycode == 190 || keycode == 109 || keycode == 13)) { alert("숫자와 '-'만 입력 가능합니다."); e.preventDefault(); } } function snsSend(type, prodName, prodId, tag) { var wp; var url = "https://www.bandinlunis.com/front/product/detailProduct.do?prodId="+prodId; if(type == 'tw') { wp = window.open("http://twitter.com/home?status=" + encodeURIComponent(prodName) + " " + encodeURIComponent(url), 'twitter', ''); } else if(type == 'fb') { url= "https://www.bandinlunis.com/front/product/faceBookView.do?prodId="+prodId; wp = window.open("http://www.facebook.com/sharer.php?u=" + url, 'facebook', ''); } else if(type == 'm2') { wp = window.open("http://me2day.net/posts/new?new_post[body]=" + encodeURIComponent(prodName) + " " + encodeURIComponent(url) + "&new_post[tags]=" + encodeURIComponent(tag), 'me2Day', ''); } else if(type == 'ym') { wp = window.open("http://yozm.daum.net/api/popup/prePost?link=" + encodeURIComponent(url) + "&prefix=" + encodeURIComponent(prodName) + "¶meter=" + encodeURIComponent(tag), 'yozmSend', 'width=466, height=356'); } else { return; } if ( wp ) { wp.focus(); } } </script> <!-- 로그 분석 변수 (footer 에서 사용) --> <script type="text/javascript"> _n_p1 = "컴퓨터/IT"; //대카테고리 _n_p2 = "프로그래밍"; //중카테고리 _n_p3 = "웹프로그래밍"; //소카테고리 _n_p4 = "HTML&CSS 마스터북"; //상품명 </script> <!-- //로그 분석 변수 --> <!-- 키워드 광고 분석 변수 (footer 에서 사용) --> <script type="text/javascript"> var LOG_PC = "4405112"; var LOG_PT = "22"; var LOG_PS = "22050"; </script> <!-- //키워드광고 변수 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css"> <script type="text/javascript" src="/js/jquery/jquery.rolling.js"></script> <div id="ssWrap" style="position: absolute; z-index:101; "> </div> <!-- 230616 추가 --> <div class="bottom_menu" style="display: none;"> <div class="arrow"> <img src="/images/reopen_main/arrow_down.png"> </div> <ul> <li class="lastest_book today_view"> <div class="lastest_book_btn_set"> <div class="lastest_book_btn" id="footer_book_menu_list" > <ul> <li><a href="javascript:select_lastest_book_list(0);" class="ov">쇼핑카트(<span id="footer_cart_list_cnt">0</span>)</a></li> <li><a href="javascript:select_lastest_book_list(1);">최근 본 상품(<span id="footer_veiw_list_cnt">0</span>)</a></li> <li><a href="javascript:select_lastest_book_list(2);">위시리스트(<span id="footer_wish_list_cnt">0</span>)</a></li> </ul> </div> <div class="lastest_book_del"> <ul> <li><button type="button" class="all_select" onclick="all_select_prod();">전체선택</li> <li><button type="button" class="select_del">선택삭제</li> </ul> </div> </div> <div class="lastest_book_list footer_shop_list swiper-container" id="footer_shop_list"> <ul id="shopProdArea" class="swiper-wrapper"> </ul> <div class="aw_type_ss"> <button class="aw_l" id="mSBnLtShop"><span>이전</span></button> <span class="aw_count"><span class="start_index">1</span>/<span class="end_index">0</span></span> <button class="aw_r" id="mSBnRtShop"><span>다음</span></button> </div> <div class="pagination"></div> </div> <div class="lastest_book_list footer_book_list swiper-container" id="footer_book_list" > <ul id="recentProdArea" class="swiper-wrapper"> </ul> <div class="aw_type_ss"> <button class="aw_l" id="mSBnLt"><span>이전</span></button> <span class="aw_count"><span class="start_index">1</span>/<span class="end_index">0</span></span> <button class="aw_r" id="mSBnRt"><span>다음</span></button> </div> <div class="pagination"></div> </div> <div class="lastest_book_list footer_wish_list swiper-container" id="footer_wish_list" > <ul id="wishProdArea" class="swiper-wrapper"> </ul> <div class="aw_type_ss"> <button class="aw_l" id="mSBnLtWish"><span>이전</span></button> <span class="aw_count"><span class="start_index">1</span>/<span class="end_index">0</span></span> <button class="aw_r" id="mSBnRtWish"><span>다음</span></button> </div> <div class="pagination"></div> </div> </li> <li class="bottom_buy"> <div class="text"> <ul> <li>주문상품수량</li> <li><span id="footer_order_prod_cnt"></span>개</li> <li>예상적립금</li> <li><spna id="footer_estimated_reserve"></spna>P</li> <li>상품할인금</li> <li><span id="footer_prod_discount"></span>원</li> <li>배송료</li> <li><span id="footer_ship_charge"></span>원</li> <li>주문합계</li> <li><span id="footer_price" class="price"></span> 원</li> </ul> </div> <div class="lastest_btn"> <ul> <li style="width: 100%"><a href="javascript:array_into_wishlist();" class="wishlist" >위시리스트</a></li> <li style="display: none;"><a href="javascript:addCart_foot();" class="buy" >쇼핑카트에 담기</a></li> <li style="display: none;"><a href="javascript:addCart_foot('order');" class="buy">주문하기</a></li> </ul> </div> </li> </ul> </div> <div id="onTop" class="ss_top"><a href="javascript:void(0);"><img src="/images/common/2014/btn_top.png"></a></div> <footer> <div class="footer_menu_line"> <div class="footer_menu"> <div class="footer_menu_text"> <ul> <li><a href="https://www.bandinlunis.com/front/aboutBandi/aboutBandiMain.do">회사소개</a></li> <li><a href="https://www.bandinlunis.com/front/aboutBandi/aboutBandiMain.do?key=130">이용약관</a></li> <li><a href="https://www.bandinlunis.com/front/aboutBandi/aboutBandiMain.do?key=140">개인정보 처리방침</a></li> <li><a href="/front/help/helpNotice.do?bid=1001,1010,1011,1015">공지사항</a></li> </ul> </div> <div class="m_notice"> <ul class="m_n_list"> <li> <div id="noticeArea"> </div> </li> </ul> <button onclick="javascript:location.href=/front/help/helpNotice.do" class="aw_more"><span class="hide">더보기</span></button> </div> <div class="insta_call"> <ul> <!-- <li class="insta"><a href="https://www.instagram.com/bandinlunis_official/" target="_blank"></a></li> --> <!-- <li class="call_ico"></li> --> <li class="counsel_center"> <a href="/front/help/helpContactUsForm.do">1:1 상담하기</a> </li> <li class="time">평일 10시~17시<br>(토, 일, 공휴일 휴무)</li> </ul> </div> </div> </div> <!-- 개인정보 보호책임자 수정 --> <div class="copy"> <div class="copy_logo"><img src="/images/reopen_main/footer_logo.png"></div> <div class="copy_info"> <ul> <li>회사명 : (주)서울문고</li> <li>대표이사 : 김홍구</li> <li>개인정보 보호책임자 : 김홍구</li> <li>E-mail : bandi_cs@bnl.co.kr</li> <li class="padding_zero">소재지 : (06168) 서울 강남구 삼성로 96길 6</li> <li>사업자 등록번호 : 120-81-02543</li> <li>통신판매업 신고번호 : 제2023-서울강남-03728호</li> <li class="padding_zero">물류센터 : (10881) 경기도 파주시 문발로 77 반디앤루니스</li> </ul> <div class="clear">copyright (c) 2016 BANDI&LUNI'S All Rights Reserved</div> </div> </div> </footer> </div> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T8W4QCTN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body> </html> <!-- 푸터메뉴 기능을 위해 필요함 --> <script type="text/javascript" src="/dwr/engine.js"></script> <script type="text/javascript" src="/dwr/util.js"></script> <script type="text/javascript" src="/dwr/interface/OrderDwr.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* onload */ // 최근 본 상품 getRecentProdList(); /* onload */ // 쇼핑카트 목록 latestBookCartInfo(); $("#onTop").click(function(){ $('html, body').animate({scrollTop:0}, 350); }); // 푸터박스 메뉴 체크박스 이벤트들 $(document).on('click', '.footer_shop_list_chk', function(e) { // ajax로 불러오기 때문에 동적 이벤트 바인딩 처리 calc_footer_shop(); }); $(".footer_veiw_list_chk").click(function(e){ calc_footer_view(); }); $(document).on('click', '.footer_wish_list_chk', function(e) { // ajax로 불러오기 때문에 동적 이벤트 바인딩 처리 calc_footer_wish(); }); // 푸터박스 메뉴 체크박스 이벤트들 끝 /* 나의쇼핑 */ getFooterMenuProdList(); /* 나의쇼핑 */ // 푸터메뉴 작동 // $(".bottom_menu .arrow").click(function(){ if($('.bottom_menu').hasClass('fixed')) { $(".bottom_menu").removeClass("fixed"); } else { $(".bottom_menu").addClass("fixed"); } }); select_lastest_book_list(0); //푸터박스메뉴 처음에 쇼핑카트 노출 $('.bottom_menu').show(); // 푸터메뉴 [쇼핑카트],[최근본상품],[위시리스트] 작동 // $(".bottom_menu .lastest_book_btn ul li").click(function(){ $(".bottom_menu").addClass("fixed"); }); $('.bottom_menu').show(); getFooterNotice(); }); function calc_footer_wish(){ var wish = $('[name=footer_wish_seqArr]:checked'); var total_sale_cost = 0; var total_market_sale = 0; var total_point = 0; var total_discount = 0; // 배송비 관련 변수 var retDeliCost = 0; // 전체 배송비 var retDeliCostY = 0; // 묶음배송 되는 전체 배송비 var retDeliCostN = 0; // 묶음배송 안되는 전체 배송비 var bundleDeliFreeFlag = false; // 묶음배송 무료 플래그 var ordCnt = 1; // 상품 주문수량 푸터박스메뉴에선 CNT는 무조건 하나로 처리 // 배송비 관련 변수 끝 wish.each( function(index, e){ var deli_cost = 1*$(this).siblings('[name=footer_wish_list_deli_cost_Arr]').val(); var sale_cost = 1*$(this).siblings('[name=footer_wish_list_sale_cost_Arr]').val(); var bundleDeliYn = $(this).siblings('[name=footer_wish_list_bundle_deli_yn_Arr]').val(); // 상품의 묶움 배송 가능여부 var deli_cost_condi = $(this).siblings('[name=footer_wish_list_deli_cost_condi_Arr]').val(); // 상품의 무료배송 조건 금액 total_sale_cost += sale_cost; total_market_sale += 1*$(this).siblings('[name=footer_wish_list_market_sale_Arr]').val(); total_point += 1*$(this).siblings('[name=footer_wish_list_point_Arr]').val(); // 배송비 계산 로직 시작 if ( bundleDeliYn === "N" ) { // 묶음배송 아닐때 if ( sale_cost*ordCnt < deli_cost_condi ) { retDeliCostN += deli_cost; } }else{ if ( total_sale_cost < deli_cost_condi ) { retDeliCostY += deli_cost; }else{ bundleDeliFreeFlag = true; } } }); // 묶음 배송 상품중 배송비 무료조건 달성시 0원처리 if (bundleDeliFreeFlag) { retDeliCostY = 0; } retDeliCost = retDeliCostY+retDeliCostN; total_discount = 1*total_market_sale-1*total_sale_cost; $('#footer_order_prod_cnt').text(wish.length); $('#footer_price').text(Add_MoneyComma(''+(total_sale_cost+retDeliCost) )); $('#footer_prod_discount').text(Add_MoneyComma(''+total_discount)); $('#footer_ship_charge').text(Add_MoneyComma(''+retDeliCost)); $('#footer_estimated_reserve').text(Add_MoneyComma(''+total_point)); } function calc_footer_shop(){ var shop = $('[name=footer_shop_seqArr]:checked'); var total_sale_cost = 0; var total_market_sale = 0; var total_point = 0; var total_discount = 0; // 배송비 관련 변수 var retDeliCost = 0; // 전체 배송비 var retDeliCostY = 0; // 묶음배송 되는 전체 배송비 var retDeliCostN = 0; // 묶음배송 안되는 전체 배송비 var bundleDeliFreeFlag = false; // 묶음배송 무료 플래그 var ordCnt = 1; // 상품 주문수량 푸터박스메뉴에선 CNT는 무조건 하나로 처리 // 배송비 관련 변수 끝 shop.each( function(index, e){ var deli_cost = 1*$(this).closest('.boook').find('[name=footer_shop_list_deli_cost_Arr]').val(); var sale_cost = 1*$(this).closest('.boook').find('[name=footer_shop_list_sale_cost_Arr]').val(); var bundleDeliYn = $(this).closest('.boook').find('[name=footer_shop_list_bundle_deli_yn_Arr]').val(); // 상품의 묶움 배송 가능여부 var deli_cost_condi = $(this).closest('.boook').find('[name=footer_shop_list_deli_cost_condi_Arr]').val(); // 상품의 무료배송 조건 금액 total_sale_cost += sale_cost; total_market_sale += 1*$(this).closest('.boook').find('[name=footer_shop_list_market_sale_Arr]').val(); total_point += 1*$(this).closest('.boook').find('[name=footer_shop_list_point_Arr]').val(); // 배송비 계산 로직 시작 if ( bundleDeliYn === "N" ) { // 묶음배송 아닐때 if ( sale_cost*ordCnt < deli_cost_condi ) { retDeliCostN += deli_cost; } }else{ if ( total_sale_cost < deli_cost_condi ) { retDeliCostY += deli_cost; }else{ bundleDeliFreeFlag = true; } } }); // 묶음 배송 상품중 배송비 무료조건 달성시 0원처리 if (bundleDeliFreeFlag) { retDeliCostY = 0; } retDeliCost = retDeliCostY+retDeliCostN; total_discount = 1*total_market_sale-1*total_sale_cost; $('#footer_order_prod_cnt').text(shop.length); $('#footer_price').text(Add_MoneyComma(''+(total_sale_cost+retDeliCost) )); $('#footer_prod_discount').text(Add_MoneyComma(''+total_discount)); $('#footer_ship_charge').text(Add_MoneyComma(''+retDeliCost)); $('#footer_estimated_reserve').text(Add_MoneyComma(''+total_point)); } function calc_footer_view(){ var view = $('[name=footer_view_seqArr]:checked'); var total_sale_cost = 0; var total_market_sale = 0; var total_point = 0; var total_discount = 0; // 배송비 관련 변수 var retDeliCost = 0; // 전체 배송비 var retDeliCostY = 0; // 묶음배송 되는 전체 배송비 var retDeliCostN = 0; // 묶음배송 안되는 전체 배송비 var bundleDeliFreeFlag = false; // 묶음배송 무료 플래그 var ordCnt = 1; // 상품 주문수량 푸터박스메뉴에선 CNT는 무조건 하나로 처리 // 배송비 관련 변수 끝 view.each( function(index, e){ var deli_cost = 1*$(this).closest('.boook').find('[name=footer_view_list_deli_cost_Arr]').val(); // 상품의 배송비 var sale_cost = 1*$(this).closest('.boook').find('[name=footer_view_list_sale_cost_Arr]').val(); var bundleDeliYn = $(this).closest('.boook').find('[name=footer_view_list_bundle_deli_yn_Arr]').val(); // 상품의 묶움 배송 가능여부 var deli_cost_condi = $(this).closest('.boook').find('[name=footer_view_list_deli_cost_condi_Arr]').val(); // 상품의 무료배송 조건 금액 total_sale_cost += sale_cost; total_market_sale += 1*$(this).closest('.boook').find('[name=footer_view_list_market_sale_Arr]').val(); total_point += 1*$(this).closest('.boook').find('[name=footer_view_list_point_Arr]').val(); // 배송비 계산 로직 시작 if ( bundleDeliYn === "N" ) { // 묶음배송 아닐때 if ( sale_cost*ordCnt < deli_cost_condi ) { retDeliCostN += deli_cost; } }else{ if ( total_sale_cost < deli_cost_condi ) { retDeliCostY += deli_cost; }else{ bundleDeliFreeFlag = true; } } }); // 묶음 배송 상품중 배송비 무료조건 달성시 0원처리 if (bundleDeliFreeFlag) { retDeliCostY = 0; } retDeliCost = retDeliCostY+retDeliCostN; total_discount = 1*total_market_sale-1*total_sale_cost; $('#footer_order_prod_cnt').text(view.length); $('#footer_price').text(Add_MoneyComma(''+(total_sale_cost+retDeliCost) )); $('#footer_prod_discount').text(Add_MoneyComma(''+total_discount)); $('#footer_ship_charge').text(Add_MoneyComma(''+retDeliCost)); $('#footer_estimated_reserve').text(Add_MoneyComma(''+total_point)); } function select_lastest_book_list(listnum){ if(listnum == '' || listnum == null || listnum == undefined){ listnum = 0; } $("#footer_book_menu_list li > a").removeClass('ov'); $("#footer_book_menu_list li > a").eq(listnum).addClass('ov'); $(".lastest_book_list").hide(); $(".lastest_book_list").eq(listnum).show(); if (listnum == 2) { // 위시리스트 일때만 쇼핑카트 등록 버튼 노출 $('.wishlist').eq(1).closest('li').show(); $('.wishlist').eq(0).closest('li').hide(); }else{ $('.wishlist').eq(0).closest('li').show(); $('.wishlist').eq(1).closest('li').hide(); } // 가격정보 계산 if ($(".lastest_book_list").eq(listnum).hasClass('footer_shop_list')) { calc_footer_shop(); }else if ($(".lastest_book_list").eq(listnum).hasClass('footer_book_list')) { calc_footer_view(); }else if ($(".lastest_book_list").eq(listnum).hasClass('footer_wish_list')) { calc_footer_wish(); } } // 푸터 최근본 상품 function getRecentProdList() { var prodId = getCookie('todayProdId'); var prodImg = getCookie('todayProdImg'); var prodName = getCookie('todayProdName'); var todayProdIds = ""; var todayProdImgs = ""; var todayProdNames = ""; if(prodId != null && prodId != "" && prodImg != null && prodImg != "" && prodName != null && prodName != ""){ todayProdIds = prodId.split("|")[1]; todayProdImgs = prodImg.split("|")[1]; todayProdNames = prodName.split("|")[1]; } var footerProdList = null; // 최근본 상품의 추가정보를 불러온다 $.ajax({ url: "/ajax/getFooterProdInfo.do", type: "post", async:false, data: {"prod_ids":todayProdIds}, dataType: "json", success: function(data) { footerProdList = data; } }); recentProdList(todayProdIds, todayProdImgs, todayProdNames, footerProdList); } // 최근본 상품 function recentProdList(todayProdIds, todayProdImgs, todayProdNames, footerProdList) { var HTML = ""; var errorImg = "this.src='/upload/images/common/noimg_type04.gif'"; // 쿠키가 없으면 최근본 상품 노출하지 않도록 if ( footerProdList == null ) { $("#recentProdArea").html('<li class="nodata">최근 본 상품이 없습니다.</li>'); $("#footer_book_list .aw_type_ss").hide(); }else{ if ((todayProdIds != "" && todayProdIds != null) && (todayProdImgs != "" && todayProdImgs != null) && (todayProdNames != "" && todayProdNames != null)) { todayProdIds = todayProdIds.split(","); todayProdImgs = todayProdImgs.split(","); todayProdNames = todayProdNames.split(","); $('#footer_veiw_list_cnt').text(todayProdIds.length); // console.log(footerProdList); for(i=0;i<todayProdIds.length;i++) { // console.log(footerProdList[todayProdIds[i]]); if(i == 0 || (i%6) == 0) { HTML += '<li class="swiper-slide"><ul>'; } HTML += '<li>'; HTML += ' <div class="boook"><div class="check">'; HTML += ' <input type="checkbox" name="footer_view_seqArr" class="footer_veiw_list_chk" prod_id="'+todayProdIds[i]+'" ></div><a href="https://www.bandinlunis.com/front/product/detailProduct.do?prodId='+todayProdIds[i]+'"><img src="/upload'+todayProdImgs[i]+'" onerror="this.src=\'/images/common/noimg_type01.gif\'"></a>'; if (footerProdList[todayProdIds[i]].prodName.length > 20) { HTML += ' <p class="boook_name">'+footerProdList[todayProdIds[i]].prodName.substr(0,17)+'...</p>'; }else{ HTML += ' <p class="boook_name">'+footerProdList[todayProdIds[i]].prodName+'</p>'; } HTML += ' <input type="hidden" name="footer_view_list_sale_cost_Arr" value="'+footerProdList[todayProdIds[i]].saleCost+'">'; HTML += ' <input type="hidden" name="footer_view_list_market_sale_Arr" value="'+footerProdList[todayProdIds[i]].marketSale+'">'; HTML += ' <input type="hidden" name="footer_view_list_deli_cost_Arr" value="'+footerProdList[todayProdIds[i]].deliCost+'">'; HTML += ' <input type="hidden" name="footer_view_list_deli_cost_condi_Arr" value="'+footerProdList[todayProdIds[i]].deliCostCondi+'">'; HTML += ' <input type="hidden" name="footer_view_list_deli_cost_std_Arr" value="'+footerProdList[todayProdIds[i]].deliCostStd+'">'; HTML += ' <input type="hidden" name="footer_view_list_point_Arr" value="'+footerProdList[todayProdIds[i]].point+'">'; HTML += ' <input type="hidden" name="footer_view_list_bundle_deli_yn_Arr" value="'+footerProdList[todayProdIds[i]].bundleDeliYn+'">'; HTML += ' <input type="hidden" name="footer_view_prodIdArr" value="'+todayProdIds[i]+'" >'; HTML += ' </div>'; HTML += '</li>'; if((i+1) == todayProdIds.length || ((i+1)%6) == 0) { HTML += '</ul></li>'; } } $("#recentProdArea").html(HTML); var mSbn = new Swiper('.today_view .footer_book_list',{ pagination: '.today_view .footer_book_list .pagination', simulateTouch: false, paginationClickable: true, calculateHeight: true, onSlideChangeEnd: function () { $(".today_view #footer_book_list .start_index").html(mSbn.activeLoopIndex + 1); } }); $(".today_view #footer_book_list .end_index").html(mSbn.paginationButtons.length); $('#mSBnLt').on('click', function(e){ e.preventDefault(); mSbn.swipePrev(); }); $('#mSBnRt').on('click', function(e){ e.preventDefault(); mSbn.swipeNext(); }); }else { $("#recentProdArea").html('<li class="nodata">최근 본 상품이 없습니다.</li>'); $("#footer_book_list .aw_type_ss").hide(); } } // foorProdList == null } // 위시리스트 function getFooterMenuProdList() { var rv = Array(); if(isLogin()) { $.ajax({ url : '/ajax/getMainFooterLists.do', type : 'POST', data: {"page":1,"listSize":200}, dataType : 'json', success : function(res){ // console.log(res.list); var result = res; var HTML = ""; var errorImg = "this.src='/upload/images/common/noimg_type04.gif'"; if (result.list != null && result.cnt > 0) { var wish_list = result.list; // if (result.cnt > 20) { // result.cnt = 20; // } $('#footer_wish_list_cnt').text(result.cnt); console.log(wish_list); for(i=0;i<result.cnt;i++) { if(i == 0 || (i%6) == 0) { HTML += '<li class="swiper-slide"><ul>'; } HTML += '<li>'; HTML += ' <div class="boook">'; HTML += ' <div class="check">'; HTML += ' <input type="checkbox" name="footer_wish_seqArr" class="footer_wish_list_chk" prod_id="'+wish_list[i].prod_id+'" value="'+wish_list[i].seq+'">'; HTML += ' <input type="hidden" name="footer_wish_list_sale_cost_Arr" value="'+wish_list[i].sale_cost+'">'; HTML += ' <input type="hidden" name="footer_wish_list_market_sale_Arr" value="'+wish_list[i].market_sale+'">'; HTML += ' <input type="hidden" name="footer_wish_list_deli_cost_Arr" value="'+wish_list[i].deli_cost+'">'; HTML += ' <input type="hidden" name="footer_wish_list_deli_cost_condi_Arr" value="'+wish_list[i].deli_cost_condi+'">'; HTML += ' <input type="hidden" name="footer_wish_list_deli_cost_std_Arr" value="'+wish_list[i].deli_cost_std+'">'; HTML += ' <input type="hidden" name="footer_wish_list_point_Arr" value="'+wish_list[i].point+'">'; HTML += ' <input type="hidden" name="footer_wish_list_bundle_deli_yn_Arr" value="'+wish_list[i].bundle_deli_yn+'">'; HTML += ' </div>'; HTML += ' <a href="https://www.bandinlunis.com/front/product/detailProduct.do?prodId='+wish_list[i].prod_id+'"><img src="/upload'+wish_list[i].prod_img+'" onerror="this.src=\'/images/common/noimg_type01.gif\'"></a>'; if (wish_list[i].prod_name.length > 20) { HTML += ' <p class="boook_name">'+wish_list[i].prod_name.substr(0,17)+'...</p>'; }else{ HTML += ' <p class="boook_name">'+wish_list[i].prod_name+'</p>'; } HTML += ' </div>'; HTML += '</li>'; if((i+1) == result.cnt || ((i+1)%6) == 0) { HTML += '</ul></li>'; } } $("#wishProdArea").html(HTML); var mSbn = new Swiper('.today_view .footer_wish_list ',{ pagination: '.today_view .footer_wish_list .pagination', simulateTouch: false, paginationClickable: true, calculateHeight: true, onSlideChangeEnd: function () { $(".today_view #footer_wish_list .start_index").html(mSbn.activeLoopIndex + 1); } }); $(".today_view #footer_wish_list .end_index").html(mSbn.paginationButtons.length); $('#mSBnLtWish').on('click', function(e){ e.preventDefault(); mSbn.swipePrev(); }); $('#mSBnRtWish').on('click', function(e){ e.preventDefault(); mSbn.swipeNext(); }); }else{ $("#wishProdArea").html('<li class="nodata">위시리스트 상품이 없습니다.</li>'); $("#footer_wish_list .aw_type_ss").hide(); } }, error : function(XMLHttpRequest, textStatus, errorThrown){ console.log("통신 실패."); } }); }else { $("#wishProdArea").html('<li class="nodata">위시리스트 상품이 없습니다.</li>'); $("#footer_wish_list .aw_type_ss").hide(); } } // 쇼핑카트 정보 function latestBookCartInfo(){ $.ajax({ url: "/ajax/latestBookCartLists.do", type: "post", data: {"page":1,"listSize":200}, dataType: "json", success: function(data) { if(data != null){ var HTML = ""; var errorImg = "this.src='/upload/images/common/noimg_type04.gif'"; var shop_list = data.latestBookCartList; // console.log(shop_list); if(shop_list != null && shop_list.length > 0){ for(var i=0;i<shop_list.length;i++){ if(i == 0 || (i%6) == 0) { HTML += '<li class="swiper-slide"><ul>'; } HTML += '<li>'; HTML += ' <div class="boook">'; HTML += ' <div class="check"><input type="checkbox" name="footer_shop_seqArr" class="footer_shop_list_chk" value="'+shop_list[i].seq+'"></div><a href="https://www.bandinlunis.com/front/product/detailProduct.do?prodId='+shop_list[i].prod_id+'"><img src="/upload'+shop_list[i].prod_img+'" onerror="this.src=\'/images/common/noimg_type01.gif\'"></a>'; if (shop_list[i].prod_name.length > 20) { HTML += ' <p class="boook_name">'+shop_list[i].prod_name.substr(0,17)+'...</p>'; }else{ HTML += ' <p class="boook_name">'+shop_list[i].prod_name+'</p>'; } HTML += ' <input type="hidden" name="footer_shop_list_sale_cost_Arr" value="'+shop_list[i].sale_cost+'">'; HTML += ' <input type="hidden" name="footer_shop_list_market_sale_Arr" value="'+shop_list[i].market_sale+'">'; HTML += ' <input type="hidden" name="footer_shop_list_deli_cost_Arr" value="'+shop_list[i].deli_cost+'">'; HTML += ' <input type="hidden" name="footer_shop_list_deli_cost_condi_Arr" value="'+shop_list[i].deli_cost_condi+'">'; HTML += ' <input type="hidden" name="footer_shop_list_deli_cost_std_Arr" value="'+shop_list[i].deli_cost_std+'">'; HTML += ' <input type="hidden" name="footer_shop_list_point_Arr" value="'+shop_list[i].point+'">'; HTML += ' <input type="hidden" name="footer_shop_list_bundle_deli_yn_Arr" value="'+shop_list[i].bundle_deli_yn+'">'; HTML += ' <input type="hidden" id="footer_shop_prodIdArr_'+shop_list[i].seq+'" name="footer_shop_prodIdArr" value="'+shop_list[i].prod_id+'">'; HTML += ' </div>'; HTML += '</li>'; if((i+1) == data.latestBookCartTotCnt || ((i+1)%6) == 0) { HTML += '</ul></li>'; } } $("#shopProdArea").html(HTML); $("#footer_cart_list_cnt").text(data.latestBookCartTotCnt); $(".cart_num").text(shop_list.length); var mSbn = new Swiper('.today_view .footer_shop_list ',{ pagination: '.today_view .footer_shop_list .pagination', simulateTouch: false, paginationClickable: true, calculateHeight: true, onSlideChangeEnd: function () { $(".today_view #footer_shop_list .start_index").html(mSbn.activeLoopIndex + 1); } }); $(".today_view #footer_shop_list .end_index").html(mSbn.paginationButtons.length); $('#mSBnLtShop').on('click', function(e){ e.preventDefault(); mSbn.swipePrev(); }); $('#mSBnRtShop').on('click', function(e){ e.preventDefault(); mSbn.swipeNext(); }); }else{ $("#shopProdArea").html('<li class="nodata">쇼핑카트에 상품이 없습니다.</li>'); $("#footer_shop_list .aw_type_ss").hide(); } } }, error: function(){ } }); } function all_select_prod(){ var visibleCheckBox = $('.lastest_book_list:not([style*="display: none"]) ul li ul li .check > input[type="checkbox"]'); if ($('.all_select').hasClass('all')) { $('.all_select').removeClass('all'); visibleCheckBox.prop("checked", false); }else{ $('.all_select').addClass('all'); visibleCheckBox.prop("checked", true); } // 가격정보 계산 if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_shop_list')) { calc_footer_shop(); }else if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_book_list')) { calc_footer_view(); }else if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_wish_list')) { calc_footer_wish(); } } function array_into_wishlist() { if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_shop_list')) { add_wish_array(document.getElementsByName("footer_shop_seqArr"),document.getElementsByName("footer_shop_prodIdArr")); location.reload(); }else if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_book_list')) { add_wish_array(document.getElementsByName("footer_view_seqArr"),document.getElementsByName("footer_view_prodIdArr")); location.reload(); } } //쇼핑카트 선택상품 삭제 $(".select_del").click(function(){ var visibleDiv = $('.lastest_book_list:not([style*="display: none"])'); // 쇼핑카트 삭제 처리 if(visibleDiv.attr('id') == 'footer_shop_list'){ var p_seqArr = ""; var cnt = 0; for(i=0;i<$("input[name=footer_shop_seqArr]:checked").size();i++) { if(cnt > 0) { p_seqArr += ","; } p_seqArr += $("input[name=footer_shop_seqArr]:checked").eq(i).val(); cnt++; } if(p_seqArr == "") { alert("상품을 1개 이상 선택해주세요."); return; } if(!confirm("삭제하시겠습니까?")) { return; } footer_deleteShopCartArray(p_seqArr); }else if(visibleDiv.attr('id') == 'footer_book_list'){ // 최근 본 상품 삭제 처리 불가 var r_seqArr = ""; var recent_cnt = 0; for(i=0;i<$("input[name=footer_view_seqArr]:checked").size();i++) { if(recent_cnt > 0) { r_seqArr += ","; } r_seqArr += $("input[name=footer_view_seqArr]:checked").eq(i).val(); recent_cnt++; } if(r_seqArr == "") { alert("상품을 1개 이상 선택해주세요."); return; } if(!confirm("삭제하시겠습니까?")) { return; } footer_remove_recent_prod(r_seqArr); alert('삭제되었습니다.'); location.reload(); }else if(visibleDiv.attr('id') == 'footer_wish_list'){ // 위시리스트 삭제 처리 footer_removeProd(); } }); /* 사용자가 선택한 상품을 상품카트에서 삭제한다. */ function footer_deleteShopCartArray(p_seqArr) { var param = {seqArr:p_seqArr}; OrderDwr.deleteShopCart(param, function (val) { if(val==0) { window.location.reload(); }else { alert("오류사항이 발견되었습니다, 관리자에게 문의해 주세요."); } } ); } /* 사용자가 선택한 상품을 위시리스트에서 삭제한다. */ function footer_removeProd(){ var seqs = jutil.form.getCheckboxValue("footer_wish_seqArr"); if(seqs.length == 0){ alert("삭제할 상품을 선택해 주십시오"); return; } if(confirm("선택하신 상품을 삭제하시겠습니까?")){ location.href = "/front/myshopping/myWishList.do?mode=remove&seqs=" + seqs.join(","); alert("삭제되었습니다."); location.reload(); } } /* 사용자가 선택한 상품을 최근본 상품에서 삭제한다. */ function footer_remove_recent_prod(r_seqArr){ var todayProdIds = jutil.bandi.getTodayProdId(); var todayProdImgs = jutil.bandi.getTodayProdImg(); var todayProdNames = jutil.bandi.getTodayProdName(); for(i=0;i<$("input[name=footer_view_seqArr]").size();i++) { if($("input[name=footer_view_seqArr]").eq(i).is(":checked") == true ){ // 특정 값 삭제 todayProdIds = jutil.array.removeAt(todayProdIds,i); todayProdImgs = jutil.array.removeAt(todayProdImgs,i); todayProdNames = jutil.array.removeAt(todayProdNames,i); } } // 쿠키 재설정 jutil.bandi.setCookieTodayProdName("todayProdName", todayProdNames.join(",")); jutil.bandi.setCookieTodayProdId("todayProdId", todayProdIds.join(",")); jutil.bandi.setCookieTodayProdImg("todayProdImg", todayProdImgs.join(",")); } function addCart_foot(order){ var seqs = ""; if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_book_list')) { // 최근 본 상품 seqs = document.getElementsByName("footer_view_seqArr"); }else if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_wish_list')) { // 위시리스트 seqs = document.getElementsByName("footer_wish_seqArr"); }else{ if (order=='order') { location.href='/front/order/shopCartList.do'; } } if (seqs == "") { alert('상품을 선택해주세요.'); return; } var prodId = ""; for(var i=0; i < seqs.length; i++){ if(seqs[i].checked){ prodId += seqs[i].getAttribute("prod_id") + ","; } } if(prodId == ""){ alert("상품을 선택해주세요."); return; } var tmpArr = prodId.split(","); var resultArr = Array(); var cntArr = Array(); for(var i=0 ; i < tmpArr.length ; i++){ resultArr.push(" "); cntArr.push(1); } add_basket_array_common(prodId, resultArr.join(","), cntArr.join(","), resultArr.join(","), true, addCartFootCallBack, true); if (order=='order') { location.href='/front/order/shopCartList.do'; } } function addCartFootCallBack( data ){ // console.log(data); // console.log(data.e_prod_id); var e_prod_id = data.e_prod_id.replace('[',''); e_prod_id = e_prod_id.replace(']',''); if ( data.result_code >= 0 ) { // 성공시 jutil.bandi.reloadWiseCart("cart"); location.reload(); }else{ // 실패 // 현재 열린 탭 구분 if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_shop_list')) { // 쇼핑카트 var seqs = document.getElementsByName("footer_shop_seqArr"); for(var i=0; i < seqs.length; i++){ if(seqs[i].checked){ if( seqs[i].getAttribute("prod_id") == e_prod_id ){ // 등록 실패한 상품 체크박스 체크 해제 $('input[name=footer_shop_seqArr][prod_id='+e_prod_id+']').prop("checked",false); } } } calc_footer_shop(); }else if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_book_list')) { // 최근본상품 var seqs = document.getElementsByName("footer_view_seqArr"); for(var i=0; i < seqs.length; i++){ if(seqs[i].checked){ if( seqs[i].getAttribute("prod_id") == e_prod_id ){ // 등록 실패한 상품 체크박스 체크 해제 $('input[name=footer_view_seqArr][prod_id='+e_prod_id+']').prop("checked",false); } } } calc_footer_view(); }else if ($('.lastest_book_list:not([style*="display: none"])').hasClass('footer_wish_list')) { // 위시리스트 var seqs = document.getElementsByName("footer_wish_seqArr"); for(var i=0; i < seqs.length; i++){ if(seqs[i].checked){ if( seqs[i].getAttribute("prod_id") == e_prod_id ){ // 등록 실패한 상품 체크박스 체크 해제 $('input[name=footer_wish_seqArr][prod_id='+e_prod_id+']').prop("checked",false); } } } calc_footer_wish(); } } } function footer_go_order(){ var visibleDiv = $('.lastest_book_list:not([style*="display: none"])'); // 쇼핑카트에서 눌렀다면 바로 쇼핑카트로 이동 if(visibleDiv.attr('id') == 'footer_shop_list'){ }else if(visibleDiv.attr('id') == 'footer_book_list'){ // 최근 본 상품 삭제 처리 불가 alert('최근 본 상품은 삭제가 불가능합니다.'); footer_remove_recent_prod(); }else if(visibleDiv.attr('id') == 'footer_wish_list'){ // 위시리스트 삭제 처리 footer_removeProd(); } } // 상품 id로 상품 재고 개수 가져오기 function getProdMaxOrdCnt(prodId){ var maxOrdCnt = 0; $.ajax({ url: "/ajax/getMaxOrdCnt.do", type: "post", async:false, data: {"prod_id":prodId}, dataType: "json", success: function(data) { maxOrdCnt = data.realQty; }, error: function(){ } }); return maxOrdCnt; } // 주문수량 function addProdCntChk(prodId, value) { var prodCnt = 1; var maxOrdCnt = getProdMaxOrdCnt(prodId); if(value != null && value != ""){ prodCnt = Number(prodCnt) + value; } if (Number(prodCnt) < 1) { prodCnt = 1; }else if(Number(prodCnt) > Number(maxOrdCnt)){ prodCnt = maxOrdCnt; alert("주문가능 최대 수량을 초과했습니다."); } return prodCnt; } function getFooterNotice(){ // 공지사항을 불러온다 $.ajax({ url: "/ajax/getNotice.do", type: "post", async:true, dataType: "json", success: function(data) { console.log(data[0]); var notice = data.noticeList; var html = ""; html += '<ul>'; for (var i = 0; i < 5; i++) { html += '<li>'; html += '<a href="/front/help/helpNoticeDetail.do?bbsIdx='+notice[i].bbsidx+'&bid='+notice[i].bbsidx+'">'+notice[i].subject+'</a>'; html += '</li>'; } html += '</ul>'; $('#noticeArea').html(html); setRollingList("noticeArea", "up"); } }); } // div > ul > li function setRollingList(divId, direction){ var arr = $("#"+divId+" li").toArray(); if(arr != "") { $("#"+divId).empty(); var rollingDiv = $("#"+divId); rollingDiv.rolling(direction, parseInt($(window).width())-170, 30, 1); rollingDiv.bind("mouseover", function() { $("#"+divId).stopRolling(); }); rollingDiv.bind("mouseout", function() { $("#"+divId).resumeRolling(); }); for(var i=0; i<arr.length; i++){ rollingDiv.addRollingItem("<li>" + arr[i].innerHTML + "</li>"); } rollingDiv.startRolling(50, 2000, 10); } } </script> <style> .m_notice{ display: inline-block; vertical-align: middle; margin: 23px 0 0px -40px; } .m_notice:after{ clear: both; display: block; content: ''; } .m_n_list{ display: flex; justify-content: space-between; position: relative; width: 380px; margin: 0 auto; overflow: hidden; font-size: 14px; vertical-align: middle; } .m_n_list li a{ width: 380px; display:block; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow:hidden; } </style> <!-- WISELOG ONLINE TRACKING SCRIPT CODE START --> <!-- <script src='/js/wiselog/wlo.js' type='text/javascript'></script> --> <script type="text/javascript"> _n_sid = "10081000153"; _n_uid_cookie = "MEM_ID"; _n_uid_val = ""; n_logging(); </script> <!-- WISELOG ONLINE TRACKING SCRIPT CODE END --> <!-- N2S 공통스크립트 start --> <script type="text/javascript"> var TRS_PROTOCOL = document.location.protocol; var orderUrl = document.location.pathname; var TRS2_URL = TRS_PROTOCOL + '//web.n2s.co.kr/js/' + ((orderUrl.indexOf("orderSuccess") > 0)?'_n2s_sp_order_bandibook.js':'_n2s_sp_log_bandibook.js'); if(TRS_PROTOCOL == "http:"){ document.writeln("<scr"+"ipt language='javascript' src='" + TRS2_URL + "'></scr"+"ipt>"); } </script> <!-- N2S 공통스크립트 end --> <!-- 네이버 공통유입 스크립트 start --> <script type="text/javascript"> // if(!wcs_add) var wcs_add = {}; // wcs_add["wa"] = "s_5a299784e479"; // wcs_do(); </script> <!-- 네이버 공통유입 스크립트 end --> <!-- NAVER SCRIPT START --> <script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script> <script type="text/javascript"> if(!wcs_add) var wcs_add = {}; wcs_add["wa"] = "s_5a299784e479"; if (!_nasa) var _nasa={}; if (window.wcs) { wcs.inflow("bandinlunis.com"); wcs_do(_nasa); } </script> <!-- 이지웰 아이프레임 리사이징 start --> <script type="text/javascript"> </script> <!-- 이지웰 아이프레임 리사이징 end --> <!-- 애드베이 start --> <iframe id="hfrADCheck" src="https://adcheck.about.co.kr/mad/prd/view?shopid=bandibook" scrolling="no" frameborder="0" width="0" height="0"></iframe> <!-- 애드베이 end --> <img id="RECOMMEND_LOGGING" style="display:none;"></sup>