• 컴퓨터/IT > 홈페이지/웹디자인 > 홈페이지 만들기

출판사 리뷰

★ 이 책에서 만드는 포트폴리오 8가지! 1. 온라인 프로필 카드 웹 페이지 2. 기업형 기본 웹 페이지 3. 밤낮이 바뀌는 마을 애니메이션 페이지 4. 306도 회전하는 파노라마 회사 소개 페이지 5. FLEX 레이아웃 기반의 동영상 웹 페이지 6. 자동으로 음악이 나오는 뮤직 플레이어 7. 핀터레스트 스타일의 반응형 웹 갤러리 8. 웹 플러그인을 사용한 스와이프 갤러리(무료 전자책 제공) -------------------------- \"아무것도 모르는 비전공자도 웹 개발자가 될 수 있나요?\" \"물론이죠! 저도 그랬거든요.\" -------------------------- 비전공자였지만 프런트엔드 웹 개발자가 된 저자는 비전공자나 코딩 왕초보에게는 결과물부터 만들면서 이론을 배우는 것이 효과적이라고 말한다. 그래서 이 책은 비전공자 눈높이에 맞춰서 최소한의 문법만 활용하여 다양한 결과물을 계속해서 만들 수 있도록 구성했다. 또한 초보자가 헷갈릴 수 있는 CSS 선택자, 플렉스 레이아웃, 미디어 쿼리, 반응형 웹, 자바스크립트 함수 등의 내용도 쉽게 이해할 수 있도록 정리했다. 이 모든 과정을 마치면 HTML5, CSS3, ES6의 최신 웹 표준 기술을 완벽하게 익히고, 인터랙티브 웹 사이트 하나쯤은 거뜬히 만들 수 있는 웹 개발자가 될 수 있다. -------------------------- 현직 웹 디자이너의 진짜 포트폴리오를 클론 코딩하면서 내 것으로 만든다! -------------------------- 이 책에서 제공하는 8가지 포트폴리오는 사용자의 시선을 사로잡아 상호 작용할 수 있는 '인터랙티브 웹' 기술을 적용해 만들었다. 동영상, 음악 플레이어는 물론 사용자가 이미지를 스와이프하거나 3D 화면을 제어하는 등의 화려한 사이트를 만들 수 있어 취업이나 과제의 포트폴리오로 활용하기에 좋다. 또한 현업에서 사용하는 웹 문법과 최신 웹 기술까지 모두 다뤘으니 실무 능력을 키우면서 포트폴리오도 완성하는 일석이조의 효과를 얻어 보자. -------------------------- [필수 문법]과 [실전 예제] 중 골라서 공부하자! 현업 개발자라면 포트폴리오 사이트부터 시작! -------------------------- 이 책의 1~6장은 [필수 문법], 7~13장은 [실전 예제] 파트로 구성했다. 초보자라면 1장부터 차근차근 공부하면 된다. 그러나 웹 문법을 공부한 적이 있다면 7~13장부터 읽어도 좋다. 웹 사이트를 만드는 데 필요한 HTML, CSS, 자바스크립트는 필수 문법 파트에 모두 담겨 있다. 코딩을 하다가 기초 문법이 궁금해지면 이 책에서 안내하는 대로 필수 문법 파트로 돌아가 공부해 보자. 이렇게 문법과 실전 예제를 같이 공부하다 보면 어느새 탄탄한 기본기와 수준 높은 코딩 실력을 겸비할 수 있을 것이다. -------------------------- 마지막 포트폴리오 「스와이프 갤러리」 온라인 무료 전자책으로 공개! -------------------------- 독자에게 웹 사이트 제작 경험을 더욱 풍부하게 제공하기 위해 원래 7개였던 포트폴리오에 하나를 추가했다! 이 8번째 포트폴리오는 누구나 쉽게 체험해 볼 수 있도록 무료 전자책으로 제공한다. 총 30쪽 분량으로 간단하면서도 업계에서 필수로 사용하는 스와이프 모션과 플러그인 기능을 담아 웹 갤러리 페이지를 완성할 수 있게 만들었다. 책을 받기 전 미리 예습한다는 마음으로 읽어도 좋고, 완독 후에 복습하는 자세로 읽으면 학습 효과를 배로 얻을 수 있다. [전자책 파일 다운로드: 이지스퍼블리싱 홈페이지 → 자료실]에서 도서명 검색 후 내려받기

-----------------
[필수 문법]
HTML, CSS, 자바스크립트
한 번에 끝내기
-----------------
01장 웹 페이지 제작 준비하기
__01-1 웹 페이지를 만들기 전에
____인터랙티브 UI/UX
____UI/UX 작업 방식의 변화와 코딩의 중요성
____비전공자와 디자이너도 코딩을 할 수 있는 이유
____HTML, CSS, 자바스크립트의 역할
__01-2 웹 브라우저와 웹 에디터
____웹 브라우저 설치하기
____웹 에디터 설치하기
____비주얼 스튜디오 코드 설치하기
__01-3 제작 속도를 2배 높여 줄 작업 도구
____[Do it!] 비주얼 스튜디오 코드의 확장 기능 설치하기
__01-4 웹 페이지의 필수 재료
____[Do it!] 기본 폴더와 HTML 파일 만들기

02장 HTML 기본 문법 빠르게 끝내기
__02-1 HTML 파일 둘러보기
____태그란
____부모 태그와 자식 태그
____HTML의 기본 구조
____[Do it!] 에디터에서 HTML 파일 수정하기
__02-2 시맨틱 태그 - 웹 페이지 구조 나누기
__02-3 서식 태그 ― 텍스트를 넣어 웹 페이지 채우기
____

~

― 문서의 제목 지정하기
____

― 문단 지정하기
____

― 콘텐츠 그룹화하기
____, ― 특정 단어 강조하기
____ ― 웹 페이지에 링크 연결하기
____ ― 인라인 요소 태그 그룹화하기
____ ― 문서에 이미지 삽입하기
____
― 강제 줄 바꿈 구현하기
__02-4 목록 태그 ― 메뉴를 깔끔하게 정리하기
____

― 순서가 없는 목록 만들기
____
― 순서가 있는 목록 만들기
____

,

,

― 정의형 목록 만들기
____[Do it!] 중첩된 목록 작성하기
__02-5 폼 태그 ― 사용자 정보 입력받기
____ ― 다양한 정보 입력받기
____ ― 드롭다운 메뉴로 항목 선택하기
____ ― 텍스트를 여러 줄 입력받기<br/>____ ― 여러 입력 양식을 그룹화하고 전송하기<br/>__02-6 비디오·오디오 태그 ― 멀티미디어 콘텐츠 삽입하기<br/>____<audio> ― 오디오 파일 재생하기<br/>____<video> ― 동영상 파일 재생하기<br/><br/>03장 CSS 기본 문법 빠르게 끝내기<br/>__03-1 HTML에 CSS 연결하기<br/>____[Do it!] HTML 파일에 외부 CSS 파일 연결하기<br/>__03-2 CSS로 HTML 요소 다양하게 선택하기<br/>____전체 선택자 ― 모든 HTML 요소를 한꺼번에 선택하기<br/>____태그 선택자 ― 태그명을 이용하여 선택하기<br/>____자손 선택자 ― 자식과 하위 요소를 모두 선택하기<br/>____자식 선택자 ― 직계 자식 요소만 선택하기<br/>____그룹 선택자 ― 여러 개의 요소를 그룹으로 선택하기<br/>____순서 선택자 ― 형제 요소의 순서를 이용하여 선택하기<br/>____수열 선택자 ― 수식을 이용하여 선택하기<br/>____마지막 요소 선택자 ― 형제 요소 중 마지막 요소를 선택하기<br/>____홀수, 짝수 선택자 ― 홀수 또는 짝수 요소를 선택하기<br/>____속성 선택자 ― 속성값을 이용하여 선택하기<br/>____가상 선택자 ― 가상의 요소를 선택하기<br/>____클래스 선택자 ― 클래스명으로 요소를 선택하기<br/>____아이디 선택자 ― 아이디명으로 요소를 선택하기<br/>__03-3 폰트 스타일링하기<br/>____폰트 굵기 바꾸기<br/>____폰트 크기 바꾸기<br/>____폰트 모양 바꾸기<br/>____[Do it!] 구글 웹 폰트 사용하기<br/>____[Do it!] 웹 폰트 아이콘 적용하기<br/>____폰트 색상 바꾸기<br/>____텍스트 줄 간격 바꾸기<br/>____텍스트 정렬 방향 지정하기<br/>____텍스트 자간 지정하기<br/>__03-4 웹 페이지에서 영역별 크기 정하기<br/>____너비와 높이 지정하기<br/>____바깥쪽 여백 지정하기<br/>____안쪽 여백 지정하기<br/>____기존 박스 크기를 유지하면서 안쪽 여백 지정하기<br/>____테두리의 형태 지정하기<br/>____블록 요소와 인라인 요소 태그<br/>03-5 웹 페이지의 배경 꾸미기<br/>____배경색 지정하기<br/>____배경 이미지 삽입하기<br/>____배경 이미지 크기 조절하기<br/>____[Do it!] 두 배경 이미지를 웹 브라우저에 고정하기<br/>03-6 웹 페이지의 레이아웃 구성하기<br/>____CSS 초기화하기<br/>____float ― 블록 요소 좌우로 배치하기<br/>____position ― 요소를 자유롭게 배치하기<br/>____object-fit ― 콘텐츠를 특정 영역에 채우기<br/>____z-index ― 겹쳐 있는 요소의 z축 순서 지정하기<br/>____opacity ― 요소의 투명도 설정하기<br/>__03-7 다양한 그래픽 효과 적용하기<br/>____box-shadow, text-shadow ― 요소의 그림자 만들기<br/>____border-radius ― 모서리를 둥글게 만들기<br/>____linear-gradient, radial-gradient ― 그레이디언트 적용하기<br/>____filter ― 특수 효과 사용하기<br/><br/>04장 인터랙티브 웹을 위한 CSS 다루기<br/>__04-1 콘텐츠 모양을 자유롭게 변형하기<br/>__04-2 사용자 행동에 반응하는 전환 효과 만들기<br/>__04-3 자동으로 움직이는 애니메이션 효과 만들기<br/>__04-4 벡터 이미지 파일 제어하기<br/>____비트맵 이미지와 벡터 이미지의 차이<br/>____[Do it!] SVG 파일을 웹 브라우저에 출력하기<br/>____[Do it!] SVG의 path 스타일 변경하기<br/>____패스의 stroke-dasharray와 stroke-dashoffset 속성 이해하기<br/>____마우스 포인터를 올리면 선이 그려지는 모션 만들기<br/>__04-5 화면 너비에 따라 웹 페이지 디자인 변경하기<br/>____[Do it!] 미디어 쿼리를 사용하여 배경색 바꾸기<br/><br/>05장 flex 방식으로 레이아웃 만들기<br/>__05-1 부모 요소에 flex 적용하기<br/>____display ― 자식 요소의 배치 방법 지정하기<br/>____flex-direction ― 자식 요소의 정렬 방향 변경하기<br/>____flex-wrap ― 자식 요소에 줄 바꿈 적용하기<br/>____flex-flow ― flex-direction, flex-wrap 속성을 한꺼번에 적용하기<br/>05-2 자식 요소 정렬하기<br/>____justify-content ― 기본 축으로 정렬하기<br/>____align-content, align-items ― 반대 축으로 정렬하기<br/>05-3 자식 요소의 순서 지정하기<br/>05-4 요소의 여백 비율 지정하기<br/>____flex-grow ― 요소의 안쪽 여백 확대하기<br/>____flex-shirink ― 요소의 안쪽 여백 축소하기<br/>____flex ― 전체 너빗값의 비율 조절하기<br/><br/>06장 자바스크립트로 웹 페이지 제어하기<br/>__06-1 자바스크립트 시작하기<br/>____[Do it!] HTML과 자바스크립트 연결하기<br/>__06-2 자바스크립트로 HTML 요소 선택하기<br/>____document.querySelector( ) ― 요소 선택하기<br/>____document.querySelectorAll( ) ― 요소를 모두 선택하기<br/>____[Do it!] 부모, 자식, 형제 요소 선택하기<br/>__06-3 자바스크립트로 스타일 제어하기<br/>__06-4 자바스크립트로 이벤트 연결하기<br/>____클릭 이벤트 연결하기<br/>____호버 이벤트 연결하기<br/>____반복되는 요소에 이벤트 한꺼번에 연결하기<br/>____클릭 이벤트가 발생할 때 숫자를 증가, 감소하기<br/>____문자 안에 변수 삽입하기<br/>____[Do it!] 클릭하면 좌우로 회전하는 박스 만들기<br/>__06-5 자바스크립트로 클래스 제어하기<br/>__06-6 함수를 활용하여 코드 패키징하기<br/>____함수 정의 및 호출로 기능 재활용하기<br/>____[Do it!] 활성화 기능 함수 정의하고 사용하기<br/>__06-7 HTML 요소의 속성값 제어하기<br/>____속성값 알아내기<br/>____속성값 변경하기<br/>__06-8 자바스크립트로 사용자 브라우저 판단하기<br/><br/><br/>-----------------<br/>[실전 예제]<br/>실무에서 바로 쓰는<br/>포트폴리오 완성하기<br/>-----------------<br/>07장 온라인 프로필 카드 제작하기<br/><br/>08장 기업형 웹 페이지 제작하기<br/><br/>09장 마을 애니메이션 제작하기<br/><br/>10장 파노라마 회사 소개 페이지 제작하기<br/><br/>11장 flex 기반 동영상 웹 페이지 제작하기<br/><br/>12장 뮤직 플레이어 제작하기<br/><br/>13장 핀터레스트 스타일의 반응형 웹 갤러리 제작하기<br/><br/>[스페셜] 깃허브 페이지에 작업물 배포하기<br/><br/>찾아보기<br/><br/>[PDF 책] 스와이프 갤러리 제작하기 </p> </div> <div id="indexDescBtn" class="bookInfo_more alt"></div> <!-- //목차 --> <!-- 간단평 --> <a name="sub11"></a> <iframe id="simpleReview" src="" height="" class="iframe_review" style="margin-left:0" frameborder="0" scrolling="no"></iframe> <!-- //간단평 --> <!-- 태그 --> <a name="sub08"></a> <iframe id="iframe_tag" src="" width="730" frameborder="0" scrolling="no"></iframe> <!-- //태그 --> <!-- 고객이 테마북을 통해 같이 묶은 다른 상품 --> <div class="usNone"> <div id="DTL_THEMA" class="bookInfo_subCon" style="display:none;"></div> </div> <!-- 이 책이 속한 테마 --> <a name="sub09"></a> <iframe id="iframe_theme" src="" width="730" frameborder="0" scrolling="no"></iframe> <!-- //이 책이 속한 테마 --> <!-- 리뷰 <a name="sub10"></a> <div class="bookInfo_subCon"> iframe src="/global/iframe_review.html" height="370" class="iframe_review" frameborder="0" scrolling="no"></iframe <iframe id="blogReview" src="" height="370" class="iframe_review" frameborder="0" scrolling="no"></iframe> </div> //리뷰 --> <!-- 페이퍼 --> <iframe id="blogPaper" src="" height="370" class="iframe_review" frameborder="0" scrolling="no"></iframe> <!-- //페이퍼 --> <!-- 다음 view --> <a name="sub12"></a> <iframe id="daumReview" src="" height="" class="iframe_review" style="margin-left:0" frameborder="0" scrolling="no"></iframe> <!-- //다음 view--> <div class="lineGr mb15"></div> <!-- 책 정보 sub list --> <ul class="bookInfo_sublist"> <li class="alt"><a href="#sub01"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_01.gif" alt="분야"></a></li> <li><a href="#sub03"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_03.gif" alt="책소개"></a></li> <li><a href="#sub04"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_04.gif" alt="저자,역자소개"></a></li> <li><a href="#sub07"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_07.gif" alt="목차"></a></li> <li><a href="#sub08"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_08.gif" alt="태그"> <span class="t_11br3">[<strong>0</strong>]</span></a></li> <li><a href="#sub11"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_10.gif" alt="리뷰"> <span class="t_11br3">[<strong class="evalCntTab" data-prodid="4704223">0</strong>]</span></a></li> </ul> <!-- //책 정보 sub list --> </div> <script type="text/javascript"> /* ------------------------------------------------------------------ 서평/저자소개 본문에 딸려온 빈 <a> 태그 제거 (2026-07) 출판사에서 받은 원본에 <A>...</A> 가 섞여 들어오는 경우가 있다. href 가 없어 링크로 동작하지도 않으면서 사이트의 a 스타일만 먹어 본문 글자가 다르게 보인다. href 도 name 도 없는 <a> 만 껍데기를 벗기고 글은 그대로 둔다. ( name 만 있는 <a name="sub04"> 는 위쪽 바로가기 링크의 목적지라 건드리면 안 된다 ) ------------------------------------------------------------------ */ (function() { function unwrap(el) { var p = el.parentNode; if (!p) { return; } while (el.firstChild) { p.insertBefore(el.firstChild, el); } p.removeChild(el); } /* 본문 글자크기 통일 (2026-07) 출판사 원본에 첫 항목만 <FONT size=3> 이 붙어 혼자 커지는 경우가 많다. 크기 지정만 걷어내고 굵게(<b> <strong>)는 그대로 둬서 소제목 구분은 살린다. 사이트가 쓰는 <h3> <h4> 제목은 건드리지 않는다. */ function normalizeFontSize(root) { if (!root || !root.getElementsByTagName) { return; } var fonts = root.getElementsByTagName("font"); for (var i = fonts.length - 1; i >= 0; i--) { var f = fonts[i]; f.removeAttribute("size"); // 크기 말고 남은 것이 없으면 태그째 벗긴다 if (!f.getAttribute("color") && !f.getAttribute("face") && !f.getAttribute("style") && !f.getAttribute("class")) { unwrap(f); } } var bigs = root.getElementsByTagName("big"); for (var j = bigs.length - 1; j >= 0; j--) { unwrap(bigs[j]); } var all = root.getElementsByTagName("*"); for (var k = 0; k < all.length; k++) { var st = all[k].getAttribute("style"); if (!st || st.indexOf("font-size") < 0) { continue; } all[k].setAttribute("style", st.replace(/font-size\s*:[^;]*;?/gi, "")); } } function unwrapEmptyAnchors(root) { if (!root || !root.getElementsByTagName) { return; } var list = root.getElementsByTagName("a"); for (var i = list.length - 1; i >= 0; i--) { var a = list[i]; if (a.getAttribute("href") || a.getAttribute("name")) { continue; } unwrap(a); } } function run() { try { var ids = ["cutBookDesc", "cutIndexDesc"]; for (var i = 0; i < ids.length; i++) { var el = document.getElementById(ids[i]); unwrapEmptyAnchors(el); normalizeFontSize(el); } if (document.getElementsByClassName) { var au = document.getElementsByClassName("bookInfo_author"); for (var j = 0; j < au.length; j++) { unwrapEmptyAnchors(au[j]); normalizeFontSize(au[j]); } } } catch (e) { } } if (window.jQuery) { jQuery(document).ready(run); } else if (window.addEventListener) { window.addEventListener("load", run, false); } else if (window.attachEvent) { window.attachEvent("onload", run); } })(); </script> </div> </div> <!-- //left contents --> <div id="conSmall"> <iframe id="iframe_rightList" src="" width="210" frameborder="0" scrolling="no"></iframe> </div> </div> </div> </div> <!-- //body --> <script type="text/javascript"> function snsSend(type, prodName, prodId, tag) { var wp; var url = "http://www.bandibookus.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= "http://www.bandibookus.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 = "Do it! 인터랙티브 웹 페이지 만들기"; //상품명 </script> <!-- //로그 분석 변수 --> <!-- 키워드 광고 분석 변수 (footer 에서 사용) --> <script type="text/javascript"> var LOG_PC = "4704223"; var LOG_PT = "22"; var LOG_PS = "40.82"; </script> <!-- //키워드광고 변수 --> <script type="text/javascript"> // 상세페이지: 간단평 iframe·리뷰수를 onload 안 기다리고 즉시 로드 (function(){ // 1) 간단평 iframe 즉시 로드 var f = document.getElementById('simpleReview'); if(f && !f.getAttribute('src')){ f.src = '/front/product/iframeSimpleReview.do?prodId=4704223'; } // 2) 리뷰수 즉시 채움 var els = document.querySelectorAll('.evalCntTab'); if(els.length){ var xhr = new XMLHttpRequest(); xhr.open('GET','/front/product/iframeSimpleReview.do?prodId=4704223',true); if(xhr.overrideMimeType) xhr.overrideMimeType('text/html; charset=euc-kr'); xhr.onreadystatechange=function(){ if(xhr.readyState!=4 || xhr.status!=200) return; var mc=xhr.responseText.match(/\[<strong>([\d,]+)<\/strong>\]/); var n = mc?mc[1]:'0'; for(var i=0;i<els.length;i++){ els[i].innerHTML = n; } }; xhr.send(); } })(); </script> <div id="footer"> <div class="copyright"> <p class="logo"><img src="https://www.bandibookus.com/images/common/bandius_logo_2026.png"></p> <div class="copyC"> <ul class="bMenu"> <!-- <li><a href="/front/product/musicMain.do">음반</a> |</li> --> <!-- <li><a href="/front/product/dvdMain.do">DVD</a> |</li> --> <li><a href="/front/help/helpMain.do">고객센터</a> |</li> <li><a href="/front/aboutBandi/aboutBandiMain.do?key=130">이용약관</a> |</li> <li><a href="/front/aboutBandi/aboutBandiMain.do?key=140"><strong class="t_br1">개인정보 처리방침</strong></a> |</li> <li><a href="/pages/front/aboutBandi/usTerms.jsp">Terms and Condition</a></li> </ul> <div class="bCopy"> <div style="font:bolder 14px 돋움;">2777 W. Olympic Blvd Los Angeles CA 90006</div> <div class="mt5" style="font:bolder 14px 돋움;">Tel : 고객센터 888-880-8622(Toll Free)</div> <div style="font:normal 8px verdana;color:#888;margin-top:12px">COPYRIGHT 2015 BANDI&LUNI'S ALL RIGHT RESERVED</div> </div> </div> </div> </div> </div> <!-- floatArea --> <div id="message1"> <div class="toplayer"> <span id="wiseCartNewMemoInfo"></span> <div class="alt_btm"><img src="https://www.bandibookus.com/images/common/alt_toplayer.gif" alt=""></div> </div> </div> <div id="message2"> <div class="toplayer2"> <span id="wiseCartNewOrderInfo"></span> <div class="alt_btm"><img src="https://www.bandibookus.com/images/common/alt_toplayer.gif" alt=""></div> </div> </div> <div id="floatArea"><div id="floatArea_box" class="acHeight1"><iframe src="" frameborder="0" scrolling="no" width="960" height="292" name="iframeBox" id="iframeBox"></iframe></div></div> <div id="topBtn"><p><a href="#" onClick="topLink();"><img src="https://www.bandibookus.com/images/common/btn_top.gif" alt="top"></a></p></div> <script type="text/javascript" src="/common/js/inc_float.js"></script> <!-- //floatArea --> <script type="text/javascript" src="/js/dwr.js" charset="euc-kr"></script> <script type="text/javascript" src="/dwr/interface/OrderDwr.js"></script> <script type="text/javascript" src="/dwr/engine.js"></script> <script type="text/javascript" src="/dwr/util.js"></script> <script language="javascript" src="/js/konan/pagenav.js"></script> <img id="RECOMMEND_LOGGING" style="display:none;"> <script type="text/javascript"> (function () { var OE_MIN_W = 500; // ?? °¡·???±? ??????¸? ??¹? ?æºÐ??´?°? º¸°? °???¸®?? ¾?´?´? var OE_ONLY_BIG_BOX = false; // true ¸? ?­¸?¿¡ ??°? º¸??´? ??¹???(°¡·? 100px ????)¸¸ ¹?²?´? var OE_BOX_MIN = 100; // /upload/product/4793/4793096.jpg ¶?´? ..._s.jpg var RE = /(\/upload\/product\/\d+\/\d+)(_s|_b|_t)?\.(jpg|jpeg|png|gif)(\?[^\s]*)?$/i; function bigUrlOf(src) { var m = RE.exec(src); if (!m) { return null; } if (m[2] === "_b") { return null; } // ??¹? ?? °? return m[1] + "_b." + m[3] + (m[4] || ""); } function upgrade(img) { if (!img || img.getAttribute("data-oebig")) { return; } var src = img.getAttribute("src"); if (!src) { return; } var big = bigUrlOf(src); if (!big) { return; } var w = img.naturalWidth || 0; var h = img.naturalHeight || 0; if (w === 0 || h === 0) { return; } // ¾Æ?÷ ¾? º?·?¿?´?. load ¶§ ´?½? º?´?. if (w >= OE_MIN_W) { img.setAttribute("data-oebig", "skip"); return; } if (OE_ONLY_BIG_BOX) { var box = img.width || img.offsetWidth || 0; if (box > 0 && box < OE_BOX_MIN) { img.setAttribute("data-oebig", "skip"); return; } } img.setAttribute("data-oebig", "1"); var ratio = h / w; // ¸??? ¹Þ¾Æº¸°?, ´? ??°? º??²?? °°?? ¶§¸¸ ¹?²? ³?¿?´? var probe = new Image(); probe.onload = function () { var pw = probe.naturalWidth, ph = probe.naturalHeight; if (!pw || !ph) { return; } if (pw <= w) { return; } // ´? ???? ¾??¸¸? ±×´?·? if (Math.abs((ph / pw) - ratio) / ratio > 0.12) { return; } // º??²?? ´?¸?¸? ±×´?·? img.src = big; }; probe.onerror = function () { }; // ¾ø?¸¸? ±×´?·? probe.src = big; } function watch(img) { if (img.complete && img.naturalWidth) { upgrade(img); return; } if (img.getAttribute("data-oewatch")) { return; } img.setAttribute("data-oewatch", "1"); var fn = function () { upgrade(img); }; if (img.addEventListener) { img.addEventListener("load", fn, false); } else if (img.attachEvent) { img.attachEvent("onload", fn); } } function scan() { try { var a = document.getElementsByTagName("img"); for (var i = 0; i < a.length; i++) { watch(a[i]); } } catch (e) { } } function boot() { scan(); // ³ª?ß¿¡ ±×·???´? ¸?·?(´?º¸±?, ·?¸?¹?³? ??)?? ??´?´? setTimeout(scan, 600); setTimeout(scan, 2000); setTimeout(scan, 5000); try { if (window.MutationObserver) { new MutationObserver(function () { scan(); }) .observe(document.body, { childList: true, subtree: true }); } } catch (e) { } } if (window.jQuery) { jQuery(document).ready(boot); } else if (window.addEventListener) { window.addEventListener("load", boot, false); } else if (window.attachEvent) { window.attachEvent("onload", boot); } })(); </script> <script type="text/javascript"> (function () { // ¿?¸® ??¹???°¡ ¿?¶?°¡´? °÷. ¿?±? °??º ¹?½¼ ???? ??¾??? °¨?ß?? ¾?´?´?. var OURS = ["bandinlunis.com", "bandibookus.com", "minibandi.com", "bandibook.com", "booklink.com"]; function hostOf(src) { var m = /^(?:https?:)?\/\/([^\/?#]+)/i.exec(src); return m ? m[1].toLowerCase() : ""; // ??´?°æ·?¸? º? °ª = ¿?¸® °? } function isOurs(host) { if (!host) { return true; } for (var i = 0; i < OURS.length; i++) { if (host === OURS[i] || host.indexOf("." + OURS[i]) > -1) { return true; } } return false; } function hide(img) { if (img.getAttribute("data-oehide")) { return; } img.setAttribute("data-oehide", "1"); img.style.display = "none"; } function check(img) { if (!img || img.getAttribute("data-oebrk")) { return; } var src = img.getAttribute("src"); if (!src) { return; } if (isOurs(hostOf(src))) { return; } // ¿?¸® ¼­¹? ??¹???´? °???¸®?? ¾?´?´? img.setAttribute("data-oebrk", "1"); if (img.complete) { // ??¹? °?·Ð?? ³­ ??¹???. °¡·?°¡ 0??¸? ¸ø º?·?¿? °???´?. if (!img.naturalWidth) { hide(img); } return; } // ¾Æ?÷ ¹Þ´? ?ß??¸? °?°?¸? º¸°? Æ?´???´? var onErr = function () { hide(img); }; if (img.addEventListener) { img.addEventListener("error", onErr, false); } else if (img.attachEvent) { img.attachEvent("onerror", onErr); } } function scan() { try { var a = document.getElementsByTagName("img"); for (var i = 0; i < a.length; i++) { check(a[i]); } } catch (e) { } } function boot() { scan(); // ¼­Æ?¡¤??¼¼¼³¸??º ³ª?ß¿¡ ±×·???°?³ª 'Æ???º¸±?' ·? ??´?°? ³ª?¸³­´? setTimeout(scan, 500); setTimeout(scan, 1500); setTimeout(scan, 4000); try { if (window.MutationObserver) { new MutationObserver(function () { scan(); }) .observe(document.body, { childList: true, subtree: true }); } } catch (e) { } } if (window.jQuery) { jQuery(document).ready(boot); } else if (window.addEventListener) { window.addEventListener("load", boot, false); } else if (window.attachEvent) { window.attachEvent("onload", boot); } })(); </script> </body> </html>