메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

IT CookBook, 인터넷 프로그래밍 입문: HTML, CSS, JavaScript

IT CookBook, 인터넷 프로그래밍 입문: HTML, CSS, JavaScript

한빛아카데미

집필서

절판

  • 저자 : 주성례(저자) , 정선호(저자) , 한민형(저자) , 권원상
  • 출간 : 2008-12-02
  • 페이지 : 528 쪽
  • ISBN : 9788979146363
  • 물류코드 :1636
  • 본 도서는 대학 강의용 교재로 개발되었으므로 연습문제 해답은 제공하지 않습니다.
  • 초급 초중급 중급 중고급 고급
0점 (0명)
좋아요 : 0

웹사이트의 성능과 디자인은 수작업 코딩의 손끝에서 시작된다
100여 개의 실습 예제로 익히고, 실전 프로젝트로 정리한다

 

누구를 위한 책인가?

이 책은 처음으로 웹 프로그래밍, 웹 디자인을 배우려는 학부생과 IT 전문학원의 학생을 대상으로 집필했다. 그러나 특별한 선수 지식이 없는 일반인이라 할지라도 인터넷의 전반적인 이해에서 출발해 HTML, CSS, JavaScript까지 빠짐없이 단계별로 설명했고, 실전 프로젝트에서 직접 홈페이지를 구축해보기 때문에 이 책 한 권으로 웹 프로그래밍을 위한 확실한 기반을 다질 수 있을 것이다.

무엇을 다루는가?

이 책은 HTML, CSS, JavaScript의 기본 이론을 100여 개의 다양한 실습 예제를 통해 익히고, 실전 프로젝트로 홈페이지를 직접 만들어 보면서 전체 내용을 확실하게 정리할 수 있는 형태로 구성하였다. 1부 준비학습에서는 인터넷과 웹에 관한 전반적인 내용을 익히고, 2~4부 기본학습에서는 HTMl, CSS, JavaScript의 기본기를 실습 중심으로 마스터한다. 마지막으로 5부 실전 프로젝트에서는 앞에서 배운 내용을 활용해 홈페이지를 구축해 봄으로써 전체 내용을 총화할 수 있다.


[ 부/장별 내용 요약 ]

이 책은 HTML, CSS, 자바스크립트의 기본 지식과 응용 기술을 다양한 예제를 통해 익힌 뒤 프로젝트 형식으로 홈페이지를 직접 만들어 보면서 배운 내용을 확실히 정리할 수 있는 형태로 구성되어 있다.

1. 준비학습: 인터넷과 웹(1, 2장)
운동을 할 때 준비운동이 필요하듯이 본격적인 학습에 들어가기 전에 가볍게 인터넷과 웹 페이지 동작 원리, 실제 홈페이지를 구축할 때의 제작 목적과 과정 등을 이해하면서 몸을 푸는 부분이다.

2. 기본학습 1: HTML(3~10장)
홈페이지 제작의 기본 언어인 HTML의 기본 사용법과 기본적인 태그, 폼 양식 등을 다양한 예제를 통해서 익힌다.

3. 기본학습 2: CSS(11~14장)
HTML만으로 구현하기 힘든 여러 가지를 가능하게 하고, 문서를 통일감 있게 꾸밀 수 있는 CSS를 익힌다.

4. 기본학습 3: 자바스크립트(15~23장)
HTML과 CSS 등으로 제작한 정적인 홈페이지를 동적으로 변화시켜주는 자바스크립트의 기본 사용법과 회원가입 양식 같은 폼 문서를 관리하고 복잡한 소스를 그대로 가져다 쓰는 방법을 익힌다.

5. 실전 프로젝트: 홈페이지 구축(24장)
앞에서 배운 HTML, CSS, 자바스크립트 기술을 총동원하여 사이트 설계에서 제작, 업로드, 관리까지 전체적인 흐름에 따라 홈페이지를 구축해봄으로써 전체 내용을 정리해 본다.
주성례 저자

주성례

삼성, LG, 대우, 한국은행 등에서 홈페이지 제작 과정, 나모, 드림위버, 포토샵 , 플래시 등을 강의했고 온라인 교육 사이트 i-choongang에서 웹 디자인을 강의했다. 삼성항공 전산담당 강사로 근무했으며 현재 프리랜서 강사로 일하고 있다. 저서로 『OKOKOK 알찬 예제로 배우는 플래시 MX』(교학사), 『OKOKOK 알찬 예제로 배우는 포토샵7』(교학사)이 있다.
정선호 저자

정선호

전북대학교에서 데이터베이스, 이미지/비디오 정보검색을 전공하였고, 이학박사를 취득한 후 데이터베이스(오라클), 프로그램밍 언어(Visual C++, JAVA, VB), XML, 인터넷 등을 강의했다. ㈜케이테크의 연구원을 지냈으며, 현재는 평택대학교 교양학부 교수로 재직중이다.
한민형 저자

한민형

미국에서 퍼듀대학교와 뉴욕대학교 대학원을 거쳐 현재 연세대학교 영상대학원 박사 과정중이다. 또한 용인대학교 미디어예술학부 교수로 재직중이며, 가상현실, HCI, 프로젝트 관리 등에 관심이 많다.
권원상 저자

권원상

"남들보다 쉽게, 명쾌하게 IT 지식을 설명할 수 있는 사람"이라는 의미로 "IT 지식 소매상"으로 불리고 싶어 한다. 1977년부터 2001년까지 이포인트에서 여러 가지 일을 하다가, 2002년 새로 생긴 싱싱한 회사 위즈스톤에서 디지털 방송 관련 솔루션을 개발하고 있다. 이 책의 ASP.NET 부분을 집필하였다.

저자 머리말
필드 어드바이저 머리말
워밍업
강의 계획표
숲과 나무 이야기
부록 CD 구성 및 강의 보조 자료 


1부. 준비학습: 인터넷과 웹 

1장. 인터넷 이해하기
   01. 인터넷이란
   02. 도메인명과 URL
   03. 웹 페이지 동작 원리
   04. 웹 문서 제작 표준 언어의 변천 과정
   05. 웹 브라우저
        요약
        연습 문제/심화 연습 문제 

2장. 홈페이지를 만들기 전에
   01. 홈페이지 제작 목적과 제작 과정
   02. 홈페이지 제작 관련 기술
   03. 홈페이지 제작에 필요한 준비물
   04. 어떤 웹 에디터를 사용할 것인가
   05. 에디트플러스 설치와 환경설정
   [실습] 에디트플러스 설치하기
   [실습] 에디트플러스 환경설정하기
        요약
        연습 문제/심화 연습 문제 


2부. 기본학습 1: HTML 

3장. HTML 기본 구조와 태그
   01. HTML 기본 구조
   02. 에디트플러스에서 HTML 문서 제작해보기
   [실습] HTML 문서 제작하기
   03. HTML 태그 사용법
   [실습] 태그 구성해보기
        요약
        연습 문제 

4장. 문단, 컬러, 글꼴, 목록 태그 다루기
   01. 문단 관련 태그
   [실습] 문단 관련 태그 코딩해보기
   02. 위지윅과 특수문자
   [실습] , <UL>태그, <, >,   코딩해보기
   03. <BODY>태그로 컬러 문서 만들기
   [실습] 문서 전체에 색 입히기
   04. 글꼴 관련 태그
   [실습] 글꼴 꾸밈 태그 코딩해보기
   05. 목록 관련 태그
   [실습] 목록 관련 태그 코딩해보기
        요약
        연습 문제/심화 연습 문제 

[현장의 목소리] 전체를 볼 수 있는 안목을 키워라 

5장. <IMG>태그로 그림 삽입하기
   01. 홈페이지용 그림 활용법
   [실습] 인터넷에 있는 그림 내 것으로 만들기
   02. 그림 삽입 태그 <IMG>
   [실습] 그림 꾸미기
   (CD) [실습] 조각 그림 짜 맞추기
   03. 배경 그림 다루기
   [실습] 배경 그림 삽입하기
   [실습] 배경 그림 고정하기
   04. 그림과 문자열의 어울림
   [실습] 그림과 문자열의 어울림 실습하기
        요약
        연습 문제/심화 연습 문제 

6장. <A>태그로 하이퍼링크 설정하기
   01. 하이퍼링크 설정
   [실습] 사이트 새 창으로 열기
   02. 절대경로와 상대경로
   [실습] 다른 폴더의 문서 링크걸기
   03. 대상 창 설정법
   [실습] 대상 창 설정법 두 가지
   04. 책갈피
   [실습] 같은 문서의 특정 위치로 이동하기
   (CD) [실습] 다른 문서의 특정 위치로 이동하기
   05. 이미지맵
   [실습] 앨범처럼 그림에 링크걸기
   [실습] 그림 하나에 여러 사이트 링크걸기
   06. 모든 종류의 파일 링크
   (CD) [실습] 음악감상실 만들기
   (CD) [실습] 다운로드 자료실 만들기
   (CD) [실습] 홈페이지에 이메일 연결하기
        요약
        연습 문제/심화 연습 문제 

7장. <TABLE> 태그로 표 디자인하기
   01. <TABLE> 태그 기본 사용법
   [실습] 2행 2열의 표 만들기
   02. 기본 태그 속성 살펴보기
   [실습] <TABLE>, <TR>, <TD>, <TH> 태그에 적용할 수 있는 속성 코딩해보기
   [실습] <TABLE> 태그의 속성 코딩해보기
   (CD) [실습] 얇은 가로선만 표시하기
   [실습] <TR>, <TD> 태그의 속성 코딩해보기
   03. 실습으로 <TABLE> 태그 사용법 익히기
   [실습] 해상도와 관계 없이 항상 브라우저의 중앙에 보이게 하기
   [실습] 달력 테두리 모양 다양하게 꾸며보기
   [실습] 나누기 힘들 땐 표를 중첩해서 사용한다
   [실습] 분할된 그림 표로 짜 맞추기
   (CD) [실습] 투명한 표 만들기
   (CD) [실습] 다양한 모양의 선 그리기
   (CD) [실습] 모서리가 둥근 표 만들기
        요약
        연습 문제/심화 연습 문제 

8장. 프레임 나누기
   01. 프레임 개요
   02. 프레임 관련 태그
   [실습] 프레임 수직으로 나누기
   [실습] 프레임 수평으로 나누기
   [실습] 프레임 안에 프레임 분할하기
   03. 원하는 프레임에 문서 보여주기
   [실습] 오르골 홈페이지에 프레임 나누기
   04. <IFRAME>태그로 독립적인 창 넣기
   [실습] 꿈풀이 문서 만들기
   (CD) 부모 프레임 안에 자식 프레임 종속시키기
        요약
        연습 문제/심화 연습 문제 

[현장의 목소리] 뿌리 없는 나무는 없다 

9장. 재미있게 활용할 수 있는 태그
   01. <EMBED> 태그
   [실습] 오르골 음악감상실 만들기
   [실습] 배경 음악 끝없이 흐르게 하기
   (CD) [실습] 플래시 애니메이션 삽입하기
   02. <MARQUEE> 태그
   [실습] <MARQUEE> 태그를 이용해 시 감상하기
   03. <META> 태그
   [실습] 고양이 앨범 자동으로 보기
        요약
        연습 문제/심화 연습 문제 

10장. 폼 양식으로 회원전용 공간 만들기
   01. 폼 관련 태그
   [실습] 폼 양식 만들어보기
   [실습] 회원가입 절차 4단계
        요약
        연습 문제/심화 연습 문제 

[현장의 목소리] 고객의 요구가 최우선? 


3부. 기본학습 2: CSS 

11장. CSS
   01. CSS 개요와 삽입법
   02. 선택자
   03. 글꼴/문단 관련 스타일
   [실습] 글꼴/문단 관련 스타일로 문자 디자인하기
        요약
        연습 문제/심화 연습 문제 

12장. 배경 그림, 목록, 하이퍼링크 관련 스타일
   01. 배경 그림 다루기
   [실습] 배경 그림을 화면의 중앙에 한 번만 표시되도록 하기
   02. 목록 꾸미기
   03. 하이퍼링크 꾸미기
   [실습] 하이퍼링크 문자에 다양한 스타일 적용해보기
   04. 마우스 커서 모양
   [실습] cursor 속성의 종류 알아보기
   [실습] 하이퍼링크 속성과 커서 모양 변경해보기
        요약
        연습 문제/심화 연습 문제 

13장. 테두리, 폼 양식 관련 스타일과 레이어
   01. 테두리 관련 스타일
   [실습] 스타일로 표 디자인하기
   02. 폼 양식 관련 스타일
   [실습] 폼 양식에 다양한 스타일 적용해보기
   03. 레이어
   [실습] 레이어의 계층 구조와 좌표 값 이해하기
   [실습] 인터넷 익스플로러 로고 만들기
   [실습] 그림 자르기
        요약
        연습 문제/심화 연습 문제 

14장. 필터 효과와 CSS 활용하기
   01. 포토샵을 대신하는 필터 효과
   [실습] 사진에 필터 효과주기
   [실습] 문자에 적용했을 때 효과적인 필터 확인해보기
   02. CSS 활용하기
   [실습] CSS 외부 파일 생성과 적용하기
        요약
        연습 문제/심화 연습 문제 


4부. 기본학습 3: 자바스크립트 

15장. 자바스크립트
   01.자바스크립트 개요
   02.자바스크립트 사용법
   [실습] 자바스크립트로 홈페이지 만들기
   03.객체와 속성, 메소드
   [실습] 방문자 화면 해상도 체크하기
   04.이벤트와 이벤트핸들러
   [실습] 홈페이지에 이벤트 발생시키기
   [실습] 그림에 롤오버 효과주기
        요약
        연습 문제/심화 연습 문제 

16장. 변수, 연산자, 사용자 정의 함수
   01. 변수
   [실습] 변수를 활용해 소스 줄이기
   02. 배열과 객체
   [실습] 배열의 개수를 나타내는 length 속성 알아보기
   [실습] 객체 조작문으로 롤오버 이미지 구현하기
   03. 연산자
   [실습] 시간 계산기 만들기
   04. 사용자 정의 함수
   [실습] 함수 두 개 만들어서 호출하기
   [실습] 함수 하나로 다양하게 호출해보기
   [실습] 덧셈 계산기 만들기
        요약
        연습 문제/심화 연습 문제 

[현장의 목소리] HTML 스크립터에서 프로젝트 관리자까지 

17장. 제어문과 내장 함수
   01. 제어문
   [실습] IF 문으로 비밀번호 체크하기
   [실습] FOR 문을 이용해 장미꽃 100송이 뿌려주기
   02. 내장 함수
   [실습] 간단한 계산기 만들기
   [실습] 해상도에 따라 창 크기 조절하기
   (CD) [실습] 미성년자 출입금지 사이트 만들기
        요약
        연습 문제/심화 연습 문제 

18장. window, screen, document, link, anchor 객체
   01. window 객체
   [실습] 이벤트 창 띄우기
   [실습] 확대보기와 창 닫기
   (CD) [실습] Remote Controler 제작하기
   (CD) [실습] 문서 스크롤하기
   02. screen 객체와 document 객체
   [실습] 문서 없이 새 창 열기
   03. link 객체와 anchor 객체
        요약
        연습 문제/심화 연습 문제 

19장. navigator, history, location, string 객체
   01. navigator 객체와 history 객체
   [실습] 브라우저의 종류에 따라 경고 메시지 띄우기
   [실습] 방문사이트 이동하기
   02. location 객체와 string 객체
   [실습] 내 홈페이지에 주소 입력줄 삽입하기
   [실습]입력한 메일 주소의 형식 확인하기
   [실습] 아이디 입력상자에 영문과 숫자만 입력되도록 설정하기
        요약
        연습 문제/심화 연습 문제 

20장. Date, Array 객체
   01. Date 객체
   [실습] 오늘 날짜와 요일 표시하기
   [실습] 그녀와 만난 날짜 계산하기
   [실습] 동작되는 시계 삽입하기
   02. Array 객체
   [실습] 로딩 시 배너 랜덤하게 바꾸기
        요약
        연습 문제/심화 연습 문제 

21장. frame, image, event, math, layer 객체
   01. frame 객체
   [실습] 두 개의 프레임에서 동시에 문서 열기
   02. image 객체
   [실습] 롤오버 이미지 만들기
   03. event 객체와 math 객체
   [실습] 클릭 지점의 브라우저 좌표 값 표시하기
   [실습] 접속할 때마다 다른 그림 보여주기
   04. layer 객체
   [실습] 반짝 설명글 보여주기
        요약
        연습 문제/심화 연습 문제 

22장. 폼 관련 객체
   01. form 객체
   [실습] 폼 양식의 name 속성 값 모두 출력하기
   02. 입력상자, 체크상자, 라디오 버튼
   [실습] 태그 연습장 만들기
   [실습] 아이스크림으로 알아보는 심리테스트
   03. 목록상자
   [실습] 목록상자에 주소록 추가하기
        요약
        연습 문제/심화 연습 문제 

23장. 자바스크립트 활용하기
   01. 스타일 제어
   [실습] 버튼에 스타일 적용하기
   02. 자바스크립트 활용하기
   [실습] 앨범 단계별로 만들기
   [실습] js 파일 생성과 적용하기
   03. 자바스크립트 무작정 배껴쓰기
   [실습] 마우스를 따라다니는 문자 만들기
        요약
        연습 문제/심화 연습 문제 

[현장의 목소리] XML: HTML을 뛰어 넘어 


5부. 실전 프로젝트: 홈페이지 구축 

24장. 시트콤 프렌즈 팬 사이트 구축하기
   01. 홈페이지 계획
   02. 홈페이지 구축
   03. 홈페이지 배포와 관리
        요약
        실습 문제


찾아보기
</pre>                                                            </p>
						</div>                        </div>
                              <!-- //목차 -->
  
          <!-- 출판사리뷰 -->
                              <!-- //출판사리뷰 -->
  
          <!-- 독자리뷰 -->
          
                     
                                           
                        <div id="tabs_5" ><a id="review_tab" ></a>                       
                            <p class="detail_tit" style="display:none;">독자리뷰</p>
                                                                       
            <div id="" class="detail_conbox" >
              <div class="detail_review_area">
                <div class="detail_btn right"><a href="javascript:;" onclick="review_start();">리뷰 쓰기</a></div>
                
                <div>
                                    
                  <li class="article hide"><div class="review_li" style="text-align:center; padding:20px 0; background-color:#fbfbfb;">첫번째 리뷰어가 되어주세요. </div></li>
                  
                                  </div>
                
              </div>
            </div>                          
                        </div>
                                      
          <!-- //독자리뷰 -->
  
          <!-- 오탈자 보기 -->
                                            <div id="tabs_6"><a id="misprint_tab" ></a>
                          <p class="detail_tit" style="display:none;">오탈자 보기</p>
                            		 					
						<div id="" class="detail_conbox"  >
							<div class="detail_btn right"><a href="/errata/view.html?isbn=9788979146363" target="_blank">(구 홈페이지 / 2016년 5월 이전) 오탈자보기</a> <a href="javascript:misprint_print();">인쇄하기</a><a href="javascript:misprint_start();">오탈자 등록하기</a></div>
							<!--a href="/store/books/misprint_view.html" target="_blank"-->
							<input type="hidden" name="p_sort_type" id="p_sort_type"  value="">
							<input type="hidden" name="r_sort_type" id="r_sort_type"  value="">
							
							
							<div id="misprint_con_div" class="misprint_list"><!--  오탈자 리스트 --></div>
							
							<!-- 오탈자 등록 버튼-->
							<div class="detail_btn right"><a href="javascript:misprint_print();">인쇄하기</a><a href="javascript:misprint_start();">오탈자 등록하기</a></div>
						</div>
						<script>
							$(function() { misprint_get_list();  });	 //오탈자 리스트 호출	
						</script>
                        </div>
                              <!-- //오탈자 보기 -->
  
          <!-- 부록/예제소스 -->
                    <div id="tabs_7"><a id="exam_tab" ></a>
            <p class="detail_tit" style="display:none;">부록/예제소스</p>
              <div style="margin:0 20px 40px !important;" id="" class="detail_conbox">
    <div class="table_area">
      <div class="down_area_detail">
		<div class="down_txt">
			<h3 class="down_h3"><strong>자료 다운로드시 유의사항</strong></h3>
			<h5 class="download00"><a href="https://hanb.link/1adb" target="_blank">▶ <span class="down_span">부록/자료 관련 FAQ</span></a></h5>
		</div>

		<ul>
			<li class="download01" >Q. <a href="https://hanb.link/1adc" target="_blank"><span class="down_span">다운로드한 파일이 압축해제가 되지 않습니다.</span></a></li>
			<li class="download01" >Q. <a href="https://hanb.link/1add" target="_blank"><span class="down_span">구글 드라이브(GDrive)로 제공하는 부록/예제소스가 다운로드되지 않습니다.</span></a></li>
		</ul>
      </div>
      <table class="tbl_type_list" border="0" cellspacing="0" summary="부록/예제소스">
        <caption>부록/예제소스</caption>
        <colgroup>
        <col width="">
        <col width="140px">
        <col width="120px">
        </colgroup>
        <thead>
          <tr>
            <th scope="col">자료명</th>
            <th scope="col">등록일</th>
            <th scope="col" class="bdr_r">다운로드</th>
          </tr>
        </thead>
        <tbody>
  <tr>
    <td class="b_tit"><img src="/images/common/srt_download.png" alt="DOWNLOAD" width="22" align="absmiddle" border="0"> 예제소스</td>
    <td>2016-04-06</td>
    <td><a href="/lib/examFileDown.php?hed_idx=355" class="btn_dw_default" style="color:#fff;">다운로드</a></td>
  </tr>
      </tbody>
    </table>
  </div>
</div>
          </div>
                    <!-- //부록/예제소스 -->
  
          <!-- 추천도서 -->
                    <!-- //추천도서 -->
        </div>
        <!-- //텝메뉴 -->
      </div>
      <!-- //하단 컨텐츠 -->
    </div>

    <div class="store_payment_area">
      <!-- 결재 정보 -->
                  <fieldset>
        <legend>결제하기</legend>
        <!-- 2차 상품이 있는 경우 -->

        
                

        <!-- 2차 상품이 없는 책 일 경우 -->
                <label class="payment_box curr">
          <p><span class="pbl">정가 : </span><span class="pbr"><del>22,000원</del></span></p>
          <p><span class="pbl"><strong>판매가 : </strong></span><span class="pbr"><strong>19,800</strong>원<span>(10% off)</span></span></p>
          <p><span class="pbl">마일리지 : </span><span class="pbr">1,100점 (5%)</span></p>
        </label>
                
        <!-- 2차 상품이 없는 eBook 일 경우 -->
        
        <!-- 2차 상품이 없고 무료인 eBook 일 경우-->
        
                <!-- 소득공제 유무 -->
        <div class="shopping_charge">
          <div class="shopping_charge_tit"><span style="color:#00AFA0;">&#149; 문화비 소득공제 가능</span></div>
        </div>
        <!-- //소득공제 유무 -->
        
        <!-- 배송료 -->
                <!-- //배송료 -->

        <input type="hidden" name="p_type_kind" id="p_type_kind"  value="B">
        <!-- 결재버튼 -->
        
        <!-- 아카데미, 비즈도서 판매중지, 2021-07-12 -->
        
                <div class="btn_nolink">절판</div>
        
                <label>
          <button name="" type="submit" value="구매하기" class="btn_hope" onClick="addSalePush('B1387042241','');">재판매 조르기</button>
        </label>
                <!-- //결제버튼 -->
      </fieldset>

      <!-- this code -->
            <div class="rsv_book_info">
        <p class="tit">도서구입 안내</p>
        <p class="txt">&lt;한빛아카데미&gt; 도서는 한빛 홈페이지에서 더 이상 판매를 하지 않습니다. 도서 구입은 인터넷 서점을 이용하시기 바랍니다. 양해바랍니다.</p>
      </div>
            <!--//this code -->

            
            <!-- //결재 정보 -->
      
      <!-- 관련 사이트 -->
            <!-- //관련 사이트 -->
    </div>

  </div>
  <!-- //카테고리 상세 wrap -->
  
  <!-- 레이어 팝업 - 리뷰쓰기 -->
  
	
	<div id="review_popup_div" >
		<div class="review_layer">					
			<div class="bg"></div>
			<div class="review_pop-layer" id="layer_review">												
				<div class="pop-container">
					<div class="pop-conts">																		
						<!--content //-->
						<form id="frm"  name="frm"  method="post" enctype="multipart/form-data">
						<input type="hidden" name="fk_p_code" id="fk_p_code" value="B1387042241">	
						<input type="hidden" name="fk_m_idx" id="fk_m_idx" value="">						
						<input type="hidden" name="hbr_score" id="hbr_score" value="">
						
						<p class="tit">리뷰쓰기</p>
						<div class="close"><a class="cbtn" href="javascript:;" onClick=""><img src="https://www.hanbit.co.kr/images/common/icon_close2.png" width="39" height="38" alt="닫기" /></a></div>
						
						<div class="layer_scroll">
							<div class="layer_con_box">
								<fieldset>
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>도서명 :</div>
									<div class="i_con">
										IT CookBook, 인터넷 프로그래밍 입문: HTML, CSS, JavaScript									</div>
								</div>
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>제목 :</div>
									<div class="i_con">
										<label>
											<input type="text" name="hbr_title" id="hbr_title" class="i_text1" value="">	
										</label>
									</div>
								</div>
								<div class="lp_register_li">
									
									<div class="i_tit"><span>* </span>별점평가</div>
									<div class="i_con">							
										<script>
										$.fn.raty.defaults.path = "https://www.hanbit.co.kr";
										$(function() {
											$('#default').raty({
												click: function(score, evt) { $("#hbr_score").val(score);}										
											});
										});
										</script>											
										<div id="default" style="margin-top:5px;"></div>
										<div class="highlight"><pre><span class="nt"><div></div></span></pre></div>
									</div>
								</div>
				
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>내용 :</div>
									<div class="i_con" id="hbc_cont_div">
										<label >																
											<textarea class="i_textarea" name="hbr_content_review_create" id="hbr_content_review_create"></textarea>				
                                            <script>
                                            var ck_editor_review_create;
                                            
                                            ClassicEditor.create(
                                                document.querySelector( '#hbr_content_review_create' ), {
                                                    htmlSupport: {
                                                        allow: [{
                                                            name: 'iframe',
                                                            attributes: true,
                                                            classes: true,
                                                            styles: true
                                                        }]
                                                    },
                                                    toolbar: {
                                                        shouldNotGroupWhenFull: true,
                                                        items: [
                                                            'fontSize', '|',
                                                            'Bold', 'Underline','Strikethrough','Italic', 'fontColor', 'fontBackgroundColor','Alignment','|',
                                                            'blockQuote', 'link', 'insertImage', 'mediaEmbed', '|',
                                                            'codeBlock', 'code', 'htmlEmbed', '|',
                                                            , 'sourceEditing', '|',
                                                        ]
                                                    },
                                                    ckfinder: {
                                                        uploadUrl: 'https://www.hanbit.co.kr/lib/ckeditor/image_upload.php'
                                                    }
                                            } )
                                            .then( newEditor => {
                                                ck_editor_review_create = newEditor;
                                            } )
                                            .catch( handleSampleError );

                                            function handleSampleError( error ) {
                                                const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';

                                                const message = [
                                                    'Oops, something went wrong!',
                                                    `Please, report the following error on ${ issueUrl } with the build id "bl3v0xacvas6-sy6lnenrhh5g" and the error stack trace:`
                                                ].join( '\n' );

                                                console.error( message );
                                                console.error( error );
                                            }
                                            </script>

                                            <style>
                                            #hbr_content_review_create + div { width: 810px; height: 200px;}
                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable { width: 810px; height: 200px; }

                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable > ul,
                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable > ul li {
                                            list-style-type: inherit;
                                            }

                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable ul {
                                            padding-left: 40px;
                                            }

                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable ol {
                                            list-style-type: decimal;
                                            }

                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable ol ol{
                                            list-style-type: lower-latin;
                                            }
                                            
                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable ol > li {
                                            display: list-item;
                                            list-style-type: decimal;
                                            }

                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable ol li {
                                            display: list-item;
                                            }
                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable ol {
                                             padding-left: 40px;
                                            }

                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable_inline {
                                                padding: 0 30px !important;
                                            }

                                            #hbr_content_review_create + div > .ck-editor__main > .ck-editor__editable ul > li > ul {
                                                padding-left: 40px;
                                            }
                                            </style>
										</label>
									</div>
								</div>
								</fieldset>
							</div>
							
							<p class="note_tit">* 리뷰 작성시 유의사항</p>
							<p class="note_txt">글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.</p>
							<p class="note_txt">
								1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).<br />
								2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.
							</p>
							
							<div class="btn_layer_default">
								<label><button id="proc_btn" name="proc_btn" type="button" value="" class="btn_blue" onclick="review_proc('re_ins','');">등록</button></label>
								<label><button id="reset_btn" name="reset_btn" type="button" value="" class="btn_white" onclick="frm_reset();">취소</button></label>
							</div>
						</div>

						</form> 
						<!--// content-->					
					</div>
				</div>											
			</div>			
		</div>			
	</div>			  <!-- //레이어 팝업 - 리뷰쓰기 -->
  
  <!-- 레이어 팝업 - 오탈자등록 -->
  	
	<div class="misprint_layer">
		<div class="bg"></div>
		<div class="misprint_pop-layer" id="layer_misprint">
			<div class="pop-container">
				<div class="pop-conts">
					
					<!--content //-->
					<p class="tit">오탈자 등록</p>
					<div class="close"><a class="cbtn" href="javascript:;" onClick=""><img src="/images/common/icon_close2.png" width="39" height="38" alt="닫기" /></a></div>
					
					<div class="layer_scroll">
						<form id="err_input_frm"  name="err_input_frm"  method="post" enctype="multipart/form-data">
							<input type="hidden" name="fk_p_code" id="fk_p_code" value="B1387042241">	
							<input type="hidden" name="fk_isbn" id="fk_isbn" value="">	
							<input type="hidden" name="fk_m_idx" id="fk_m_idx" value="">														
							<div class="layer_con_box">
								<fieldset>
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>도서명 :</div>
									<div class="i_con">
										IT CookBook, 인터넷 프로그래밍 입문: HTML, CSS, JavaScript									</div>
								</div>
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>구분 :</div>
									<div class="i_con">
										<label>
											<select id="err_type" name="err_type" class="i_select">	
												<option value="" selected>오탈자 유형 선택</option>	
												<option value="G">내용 오류/확인 요청</option>	
												<option value="P">주요 기술 오류(로직/코드)</option>	
												<option value="E">오자/탈자, 띄어쓰기 오류</option>												
											</select>	
										</label>
									</div>
		
								</div>
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>상품 버전</div>
									<div class="i_con">
										<span class="chk_list"><input type="checkbox" name="err_p_version[]" class="i_check" value="종이책"><span>종이책</span></span>
										<span class="chk_list"><input type="checkbox" name="err_p_version[]" class="i_check" value="PDF"><span>PDF</span></span>
										<span class="chk_list"><input type="checkbox" name="err_p_version[]" class="i_check" value="ePub"><span>ePub</span></span>
										<!--<span class="chk_list"><input type="checkbox" name="err_p_version[]" class="i_check" value="Mobi"><span>Mobi</span></span>-->
									</div>
								</div>
								
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>페이지 :</div>
									<div class="i_con">
										<label>
											<input type="text" name="err_p_page" id="err_p_page" class="i_text2" onkeyup="this.value=number_filter(this.value);" ><span>숫자로만 입력해주세요.</span>
										</label>
									</div>
								</div>
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>위치정보 :</div>
									<div class="i_con">
										<label>
											<input type="text" name="err_location" id="err_location" class="i_text1">	
										</label>
									</div>
								</div>							
								
								<div class="lp_register_li">
									<div class="i_tit"><span>* </span>내용 :</div>
									<div class="i_con">
										<label>
                                        <textarea class="i_textarea" name="hbr_content_misprint_create" id="hbr_content_misprint_create"></textarea>				
                                            <script>
                                            var ck_editor_misprint_create;

                                            ClassicEditor.create(
                                                document.querySelector( '#hbr_content_misprint_create' ), {
                                                    htmlSupport: {
                                                        allow: [{
                                                            name: 'iframe',
                                                            attributes: true,
                                                            classes: true,
                                                            styles: true
                                                        }]
                                                    },
                                                    toolbar: {
                                                        shouldNotGroupWhenFull: true,
                                                        items: [
                                                            'fontSize', '|',
                                                            'Bold', 'Underline','Strikethrough','Italic', 'fontColor', 'fontBackgroundColor','Alignment','|',
                                                            'blockQuote', 'link', 'insertImage', 'mediaEmbed', '|',
                                                            'codeBlock', 'code', 'htmlEmbed', '|',
                                                            , 'sourceEditing', '|',
                                                        ]
                                                    },
                                                    ckfinder: {
                                                        uploadUrl: 'https://www.hanbit.co.kr/lib/ckeditor/image_upload.php'
                                                    }
                                            } )
                                            .then( newEditor => {
                                                ck_editor_misprint_create = newEditor;
                                            } )
                                            .catch( handleSampleError );

                                            function handleSampleError( error ) {
                                                const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';

                                                const message = [
                                                    'Oops, something went wrong!',
                                                    `Please, report the following error on ${ issueUrl } with the build id "bl3v0xacvas6-sy6lnenrhh5g" and the error stack trace:`
                                                ].join( '\n' );

                                                console.error( message );
                                                console.error( error );
                                            }
                                            </script>

                                            <style>
                                            #hbr_content_misprint_create + div { width: 800px; height: 300px;}
                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable { width: 800px; height: 300px; }

                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable > ul,
                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable > ul li {
                                            list-style-type: inherit;
                                            }

                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable ul {
                                            padding-left: 40px;
                                            }

                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable ol {
                                            list-style-type: decimal;
                                            }

                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable ol ol{
                                            list-style-type: lower-latin;
                                            }
                                            
                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable ol > li {
                                            display: list-item;
                                            list-style-type: decimal;
                                            }

                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable ol li {
                                            display: list-item;
                                            }
                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable ol {
                                             padding-left: 40px;
                                            }

                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable_inline {
                                                padding: 0 30px !important;
                                            }

                                            #hbr_content_misprint_create + div > .ck-editor__main > .ck-editor__editable ul > li > ul {
                                                padding-left: 40px;
                                            }
                                            </style>	
										</label>
									</div>
								</div>
								</fieldset>
							</div>
						</form>
					
						<div class="btn_layer_default">
							<label>
								<button name="" type="submit" value="" class="btn_blue" onclick="misprint_proc('ins','');">등록</button>
							</label>
							<label>
								<button name="" type="submit" value="" class="btn_white" onclick="misprint_reset();">취소</button>
							</label>
						</div>
					</div>
					<!--// content-->
					
				</div>
			</div>
		</div>
	</div>
	  <!-- //레이어 팝업 - 오탈자등록 -->

  <!-- 레이어 팝업 - 도서인증 -->
  <link rel="stylesheet" href="/css/jquery-ui.css">
<script type="text/javascript" src="/js/jquery.ui.datepicker-ko.js"></script>
<script type="text/javascript">
 $(function() {    
  $("#buy_date").datepicker({ maxDate: '0'  });
 });

</script>
  <form name="cfrm" id="cfrm" method="post" action="/store/ajax.addBookauth.php">
  <input type="hidden" name="fk_p_code" id="fk_p_code" value="B1387042241">  
  <input type="hidden" name="fk_m_idx" id="fk_m_idx" value="">    
  <div class="certification_layer">
    <div class="bg"></div>
    <div class="certification_pop-layer" id="layer_certification">
      <div class="pop-container">
        <div class="pop-conts">
          
          <!--content //-->
          <p class="tit">도서 인증</p>
          <div class="close"><a class="cbtn" href="javascript:;" onClick=""><img src="https://www.hanbit.co.kr/images/common/icon_close2.png" width="39" height="38" alt="닫기" /></a></div>
          
          <div class="layer_scroll">
            <div class="layer_con_box">
              <fieldset>
              <div class="lp_register_li">
                <div class="i_tit">도서명<span>* </span></div>
                <div class="i_con">IT CookBook, 인터넷 프로그래밍 입문: HTML, CSS, JavaScript</div>
              </div>
              <div class="lp_register_li">
                <div class="i_tit">구입처<span>* </span></div>
                <div class="i_con">
                  <label>
                    <select id="buy_site" name="buy_site" class="i_select">  
                      <option value="" selected>선택하세요.</option>  
                      <option value="교보문고">교보문고</option>
                      <option value="예스24">예스24</option>
                      <option value="알라딘">알라딘</option>
<!--                       <option value="반디앤루니스">반디앤루니스</option> -->
                      <option value="영풍문고">영풍문고</option>
                      <option value="인터파크">인터파크</option>
                      <option value="쿠팡">쿠팡</option>
<!--                       <option value="한빛 웹사이트">한빛 웹사이트</option> -->
                      <option value="지역서점">지역서점</option>
                    </select>  
                  </label>
                </div>
  
              </div>
              <div class="lp_register_li">
                <div class="i_tit">구입일<span>* </span></div>
                <div class="i_con">
                  <!-- 달력 -->
                  <label><input class="i_text2" id="buy_date" name="buy_date" type="text" value=""  /></label>
                  <label><button name="btnBuyDate" id="btnBuyDate" type="button" value="검색" class="i_car">달력</button></label>
                  <!-- //달력 -->
                </div>
              </div>
              <div class="lp_register_li">
                <div class="i_tit">부가기호<span>* </span></div>
                <div class="i_con">
                  <label>
                    <input type="text" name="add_code" id="add_code" class="i_text2">  
                  </label>
                </div>
              </div>
              <div class="barcode_img">
                <img src="https://www.hanbit.co.kr/images/common/rs_barcode_ban.png" alt="부가기호 안내" />
              </div>
              </fieldset>
            </div>
            <p class="txt">* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.</p>
            <p class="txt">* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.</p>
            <p class="txt">* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.</p>
            
            <div class="btn_layer_default">
              <label>
                <button name="btnBookauth1" type="button" class="btn_blue" onclick='book_auth();'>등록</button>
              </label>
              <label>
                <button name="btnBookauth2" type="button" value="" class="btn_white">취소</button>
              </label>
            </div>
          </div>
          <!--// content-->
          
        </div>
      </div>
    </div>
  </div>
  </form>
<SCRIPT LANGUAGE="JavaScript">
<!--  
  $("#btnBuyDate").click(function() {          
    $('#buy_date').datepicker('show');
  });    

//-->
</SCRIPT>  <!-- //레이어 팝업 - 도서인증 -->
  
  <!-- 레이어 팝업 - 카트 담기 -->
  	<div class="add_cart_layer">
		<div class="bg"></div>
		<div class="add_cart_pop-layer" id="layer_add_cart">
			<div class="pop-container">
				<div class="pop-conts">
					
					<!--content //-->
					<div class="close"><a class="cbtn" href="javascript:;" onClick=""><img src="https://www.hanbit.co.kr/images/common/icon_close.png" width="38" height="38" alt="닫기" /></a></div>
					<p class="ctxt"><span id='cartmsg'>해당 상품을 장바구니에 담았습니다.</span><span id='cartmsg2'>이미 장바구니에 추가된 상품입니다.</span><br />장바구니로 이동하시겠습니까?</p>
					<div class="btn_layer">
						<a href="/myhanbit/cart.html">장바구니<br />이동</a>
						<!--<a href="javascript:;" onClick="$('.add_cart_layer').hide();">쇼핑<br />계속</a>-->
						<a class="cbtn" href="javascript:;" onClick="">쇼핑<br />계속</a>
					</div>
					<!--// content-->
					
				</div>
			</div>
		</div>
	</div>  <!-- //레이어 팝업 - 카트 담기 -->
</div>
<!-- //Contents -->
<script>

//숫자만 입력
function number_filter(str_value){
  return str_value.replace(/[^0-9]/gi, ""); 
}
  
function hb_show_tabs(t_num){        
  //alert(t_num);
  var t_max = 9;
  for(var t=1; t <t_max; t++){    
    if(t_num ==0){
      $("#tabs_"+t).show();
      $(".detail_tit").css({"display":"block"});
    }else{      
      if(t==t_num){ 
        $("#tabs_"+t).show();
        $(".detail_tit").css({"display":"none"});      
      }else{
        $("#tabs_"+t).hide();    
      }
    }
  }
  
}

var tid= "";
if(tid=="review"){  
  hb_show_tabs(5);
  document.getElementById("review_tab").scrollIntoView();
  
}else if(tid=="misprint"){  
  hb_show_tabs(6);
  document.getElementById("misprint_tab").scrollIntoView();

}else if(tid=="exam"){  
  hb_show_tabs(7);
  document.getElementById("exam_tab").scrollIntoView();
  
}else{
  hb_show_tabs(0);
}

//해쉬 태그로 포커스 이동후 해쉬 제거
function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}
</script>
<!-- Footer -->
<footer>
  <!-- 공지사항 -->
  <div class="foot_notice" style="height:6px;"></div>  <!-- //공지사항 -->
  
  <div class="foot_contents">
    <!-- 하단 메뉴 -->
    <div class="foot_menu">
      <!-- added by coffin -->
            <ul>
        <li><a href="https://www.hanbit.co.kr/publisher/index.html" target="_blank">회사소개</a>(<a href="https://www.hanbit.co.kr/publisher/index.html" target="_blank">KOR</a> | <a href="https://www.hanbit.co.kr/publisher/index.html?lang=e" target="_blank">ENG</a>) &#149; <a href="https://www.hanbit.co.kr/publisher/contact.html?lang=k" target="_blank">약도</a></li>
        <li><a href="https://www.hanbit.co.kr/publisher/write.html" target="_blank">기획 및 원고 모집</a></li>
        <li><a href="https://www.hanbit.co.kr/publisher/career.html" target="_blank">채용</a> &#149; 입사지원 <a href="mailto:jobs@hanbit.co.kr">jobs@hanbit.co.kr</a></li>
        <li><a href="https://www.hanbit.co.kr/publisher/foreignrights.html" target="_blank">FOREIGN RIGHTS</a></li>
        <li><a href="https://www.hanbit.co.kr/member/use_agreement.html">이용약관</a> &#149; <a href="https://www.hanbit.co.kr/member/privacy_policy.html"><strong>개인정보처리방침</strong></a></li>
        <li><a href="https://www.hanbit.co.kr/sitemap/sitemap.html">사이트맵</a></li>
      </ul>
          </div>
    <!-- //하단 메뉴 -->

    <!-- SNS -->
    <div class="foot_sns">
          	<!-- 데브레터 구독하기 -->
    	<div class="devletter_contet">
    		<div class="devletter_sub">
    			<span class="dev_header_img">데브레터 구독하기</span><a class="dev_sit_a" href="/devletter/" target="_blank"><span class="dev_site_img">데브레터 보러가기</span></a>
    		</div>
    
    		 <form class="subscribe_form" action="/devletter/dev_process.php" method="post">
                <input type="hidden" id="g-recaptcha" name="g-recaptcha">
                <fieldset class="subscribe_fiel">
    				<legend>구독서비스</legend>
    				<input type="text" placeholder="Your Email Address" name="user_email"></input>
    				<button type="submit" class="sub_btn"><span>구독</span></button>
    			</fieldset>
    		 </form>
    
    		  <div class="main_foot_sns">
    			  <ul>
    				<li class="main_foot_facebook"><a href="https://www.facebook.com/hanbitmedia" target="_blank"><span>페이스북</span></a></li>
    				<li class="main_foot_youtube"><a href="https://www.youtube.com/한빛TV" target="_blank"><span>유튜브</span></a></li>
    				<li class="main_foot_bolg"><a href="http://blog.hanbit.co.kr/" target="_blank"><span>블로그</span></a></li>
    				<li class="main_foot_naverpost"><a href="https://m.post.naver.com/hanbitstory" target="_blank"><span>네이버포스트</span></a></li>
    			  </ul>
    		  </div>
    	</div>  
    	<!-- 데브레터 구독하기 //-->
          
         </div>
    <!-- //SNS -->
    
    <!-- 한빛 정보 -->
    <div class="foot_about">
      <div class="foot_about_area">
        

        <p><strong>한빛미디어㈜ &#149; 한빛아카데미㈜ &#149; 한빛비즈㈜</strong></p>
        <p>(03785) 서울 서대문구 연희로2길 62</p>
        <!-- <p>EMAIL : support@hanbit.co.kr</p> -->
        <p>대표이사 : 김태헌</p>
        <p>사업자등록번호 : 220-81-05665 <a href="http://www.ftc.go.kr/bizCommPop.do?wrkr_no=2208105665" target="_blank">[확인]</a></p>
        <p>통신판매업신고 : 2017-서울서대문-0671호</p>
        <p>호스팅제공자 : 호스트센터(주)</p>        

      </div>
    </div>
    <!-- //한빛 정보 -->
  </div>
  
  <div class="copyright">&copy;1993-2024 Hanbit Publishing Network, Inc. All rights reserved.</div>
</footer>
<!-- //푸터 -->
<div class="foot_download_btn"><a href="https://www.hanbit.co.kr/support/supplement_list.html">자료실</a></div>

<!-- 공통 JS 호출 -->
<script type="text/javascript" src="/js/common.js"></script>
<!-- //공통 JS 호출 -->

</body>
</html>