| 첫째마당 | HTML과 CSS
01 웹 문서를 논리적이고 깔끔하게 만드는 HTML과 CSS
HTML이란?
HTML을 배우는 이유
전문 HTML 통역사, 웹 브라우저
인터넷 익스플로러
파이어폭스
오페라
브라우저에서 HTML을 읽는 방법
[잠깐만요] HTML과 표준 규약
HTML 편집 프로그램
메모장
HTML 전용 편집기
위지윅 편집기
HTML과 관련된 웹 언어
XHTML
자바스크립트
서버 스크립트 언어
[잠깐만요] HTML 파일을 저장할 때 주의하세요.
스타일 시트란
스타일 시트를 사용해야 하는 이유
스타일 시트의 사용방법
스타일의 종류
태그 스타일
클래스 스타일
ID 스타일
스타일의 적용 규칙
상속
스타일의 우선순위
[잠깐만요] 웹 표준이란?
무작정 따라하기 실습 파일 설치하기
무작정 따라하기 나의 첫 번째 HTML 문서 만들기
무작정 따라하기 윈도우 탐색기에서 파일 확장자 표시하기
02 웹 문서의 형태를 결정하는 기본 구조와 배경 다루기
HTML 문서의 기본 구조
HTML 태그의 특징
여는 태그와 닫는 태그의 구분
대소문자를 구별하지 않고 사용
들여쓰기가 적용되지 않음
[잠깐만요] 태그나
태그가 빠진 이유
글자와 글자 사이는 한 칸만 인식
태그 안에 속성 정의가 가능
비추천 태그와 속성이 존재
문서 정보 지정하기 -
태그
문자셋 지정하기
키워드와 요약 정보 제공하기
웹 문서 제작 프로그램과 제작자 지정하기
[잠깐만요] 문서 유형을 알려주는 DOCTYPE
일정 시간 후 자동으로 다른 홈페이지 연결하기
문서 제목 지정하기 -
태그<BR>
단락 제목 지정하기 - <hn> 태그<BR>
수평선 삽입하기 - <hr> 태그<BR>
주석 삽입하기 - <!-- --><BR>
글자색 바꾸기 - color 속성<BR>
색상 표시 방법<BR>
[잠깐만요] 스타일 속성 표를 읽는 방법<BR>
웹 문서의 배경 다루기 - background 속성<BR>
문서 배경색 바꾸기 - background-color 속성<BR>
배경 이미지의 경로 지정하기 - background-image 속성<BR>
배경 이미지 반복하기 - background-repeat 속성<BR>
배경 이미지 고정하기 background-attachment 속성<BR>
배경 이미지의 위치 지정하기 - background-position 속성<BR>
모든 속성을 한꺼번에 지정하기 - background 속성<BR>
무작정 따라하기 자주 사용하는 메모장 프로그램의 바로 가기 만들기<BR>
무작정 따라하기 오른쪽 아래에 고정된 배경 이미지 삽입하기<BR>
무작정 따라하기 중요한 내용을 형광펜으로 색칠하기<BR>
실전예제<BR>
<BR>
03 웹 문서에 내용을 채우는 글자와 단락 다루기<BR>
단락 구분하기 - <p> 태그<BR>
줄 바꾸기 - <br> 태그<BR>
[잠깐만요] <p> 태그를 줄바꿈 태그로 사용하지 마세요.<BR>
다양한 텍스트 관련 태그들<BR>
사용자의 입력 형식을 그대로 보여주기 - <pre> 태그<BR>
인용한 내용을 구별하기 - <blockquote> 태그<BR>
기타 텍스트 태그들<BR>
순서 목록 만들기 - <ol> / <li> 태그<BR>
순서없는 목록 만들기 - <ul> / <li> 태그<BR>
정의 목록 만들기 - <dl> / <dt> / <dd> 태그<BR>
글꼴 다루기 - font 속성<BR>
글꼴 지정하기 - font-family<BR>
글자 크기 지정하기 - font-size<BR>
이탤릭체 지정하기 - font-style<BR>
글꼴 굵기 지정하기 - font-weight<BR>
작은 대문자 표시하기 - font-variant<BR>
줄 간격 지정하기 - line-height 속성<BR>
글자 간격과 단어 간격 지정하기 - letter-spacing / word-spacing 속성<BR>
단락 다루기 - text 속성<BR>
단락의 첫 글자 들여쓰기 - text-indent 속성<BR>
텍스트 정렬하기 - text-align 속성<BR>
글자에 효과주기 - text-decoration 속성<BR>
무작정 따라하기 웹 문서에 텍스트 입력하기<BR>
무작정 따라하기 순서 없는 목록으로 항목 나열하기<BR>
무작정 따라하기 정의 목록을 이용하여 항목 나열하기<BR>
무작정 따라하기 글자를 보기 좋게 정리하기<BR>
무작정 따라하기 웹 문서의 텍스트 단락 구분하기<BR>
무작정 따라하기 스타일 시트를 이용한 텍스트 조절하기<BR>
<BR>
04 여백과 테두리를 잡아주는 박스 모델 스타일 시트 다루기<BR>
박스(box) 형태의 텍스트 단락<BR>
바깥 여백 지정하기 - margin 속성<BR>
안 여백 지정하기 - padding 속성<BR>
테두리 지정하기 - border 속성<BR>
테두리 두께 지정하기 - border-width 속성<BR>
테두리 색상 지정하기 - border-color 속성<BR>
테두리 스타일 지정하기 - border-style 속성<BR>
목록 스타일 지정하기 - list-style 속성<BR>
목록의 불릿 유형 지정하기 - list-style-type 속성<BR>
불릿 위치 지정하기 - list-style-position 속성<BR>
불릿을 이미지로 바꾸기 - list-style-image 속성<BR>
목록을 메뉴로 활용하기<BR>
세로형 메뉴 ①<BR>
세로형 메뉴 ②<BR>
가로형 메뉴<BR>
무작정 따라하기 텍스트 단락의 여백과 테두리 조절하기<BR>
한걸음 더 목록을 이용한 다양한 내비게이션 메뉴<BR>
실전 예제 <BR>
<BR>
05 홈페이지를 깔끔하게 정리하는 표와 폼 다루기<BR>
표 만들기<BR>
표의 시작과 끝 정리하기 - <table> 태그<BR>
표에 제목 붙이기 - <caption> 태그<BR>
열과 행, 제목 지정하기 - <tr>, <td>, <th> 태그<BR>
[잠깐만요] 표와 레이아웃의 분리<BR>
표 안에 표 넣기<BR>
헤더와 푸터, 본문 구분하기 - <thead> / <tfoot> / <tbody> 태그<BR>
폼 삽입하기 - <form> 태그<BR>
폼의 주요 속성 정의하기 - <input> 태그<BR>
텍스트 필드 삽입하기 - type="text" 속성<BR>
패스워드 필드 삽입하기 - type="password" 속성 <BR>
라디오 버튼 삽입하기 - type="radio" 속성<BR>
체크박스 삽입하기 - type="checkbox" 속성<BR>
확인/초기화/버튼 만들기 - type="submit" / type="reset" / type="button" 속성<BR>
히든 필드 만들기 - type="hidden" 속성<BR>
파일 첨부 버튼 만들기 - type="file" 속성<BR>
선택 목록 만들기 - <select> 태그와 <option> 태그<BR>
선택 목록 정의하기 - <select> 태그<BR>
선택 항목 지정하기 - <option> 태그<BR>
텍스트 영역 만들기 - <textarea> 태그<BR>
셀이 각각 표시되는 테두리 그리기<BR>
일반적인 표 테두리 그리기<BR>
무작정 따라하기 <table> 태그를 이용한 영양 비교표 만들기<BR>
무작정 따라하기 CSS가 적용된 폼 만들기<BR>
<BR>
06 홈페이지의 꽃 하이퍼링크 만들고 꾸미기<BR>
하이퍼링크란?<BR>
하이퍼링크의 종류<BR>
이미지 링크<BR>
텍스트 링크<BR>
메뉴 링크<BR>
하이퍼링크 만들기 - <a> 태그와 href 속성<BR>
텍스트 링크 만들기<BR>
이미지 링크 만들기<BR>
상대 경로와 절대 경로<BR>
앵커 이용하기 - name 속성<BR>
새 창에 링크 열기 - target 속성<BR>
링크 밑줄 다루기<BR>
밑줄 없애기 - text-decoration:none<BR>
밑줄을 점선으로 표시하기 - border-bottom:dotted<BR>
링크와 관련된 스타일<BR>
마우스 포인터를 링크 위에 올려놓는 상황 - a:hover 스타일<BR>
링크를 클릭하는 상황 - a:active 스타일<BR>
한번 방문했던 링크에 적용- a:visited 스타일<BR>
링크 관련 스타일의 적용 순위<BR>
무작정 따라하기 각 문서로 연결하는 링크 만들기<BR>
<BR>
07 홈페이지를 더 멋지게 만드는 이미지와 멀티미디어 파일 삽입하기^6<BR>
이미지 삽입하기 - <img> 태그<BR>
웹 문서와 이미지<BR>
이미지를 대신하는 텍스트 만들기 - alt 속성<BR>
이미지를 설명하는 텍스트 만들기 - title 속성<BR>
alt 속성을 사용하지 않는 경우<BR>
[잠깐만요] 다른 홈페이지에 있는 이미지 삽입하기<BR>
내 컴퓨터의 이미지를 게시판에 올리기<BR>
<BR>
멀티미디어 파일 삽입하기 - <embed> / <object> 태그<BR>
<embed> 태그 사용하기<BR>
[잠깐만요] 웹앨범 서비스를 제공하는 구글의 피카사<BR>
<object> 태그 사용하기<BR>
웹 서버에 있는 동영상 삽입하기<BR>
[잠깐만요] 사용자 컴퓨터에서 액티브엑스(ActiveX) 실행하기<BR>
무작정 따라하기 웹 문서에 이미지 삽입하기<BR>
무작정 따라하기 인터넷 동영상 퍼오기<BR>
한걸음 더 컨트롤을 활성화하지 않고 멀티미디어 파일 재생하기<BR>
<BR>
08 스타일 시트로 홈페이지의 레이아웃 디자인하기<BR>
레이아웃 시안 그리기<BR>
각각의 요소를 알맞은 그릇에 넣기 - <div> 태그<BR>
요소들을 원하는 위치에 배치하기 - position 속성<BR>
동등한 위치에 배치하기 - static 속성값<BR>
상대적인 위치에 배치하기 - relative 속성값<BR>
절대적인 위치에 배치하기 - absolute 속성값<BR>
요소의 좌우 위치를 지정하기 - float 속성<BR>
float 속성을 취소하기 - clear 속성<BR>
무작정 따라하기 스타일 시트로 내용 배치하기<BR>
무작정 따라하기 스타일 시트 숨겨 두기<BR>
<BR>
| 둘째마당 | 자바스크립트<BR>
<BR>
09 움직이는 홈페이지 자바스크립트<BR>
자바스크립트란?<BR>
HTML과 자바스크립트의 관계<BR>
자바스크립트의 탄생<BR>
[잠깐만요] 자바스크립트와 자바는 다른 언어입니다.<BR>
자바스크립트의 동작 원리<BR>
자바스크립트 소스 작성 요령<BR>
자바스크립트의 선언 방법<BR>
내부 스크립트 사용하기<BR>
외부 스크립트 연결하기<BR>
외부 스크립트의 장점과 단점<BR>
코딩을 위해 지켜야 할 규칙<BR>
스크립트 실행하기<BR>
<head> 태그와 </head> 태그 사이에 자바스크립트 삽입하기<BR>
<body> 태그 바로 다음에 자바스크립트 삽입하기<BR>
</body> 태그 바로 직전에 자바스크립트 삽입하기<BR>
이벤트 핸들러 이용하기<BR>
무작정 따라하기 HTML 문서에 자바스크립트 삽입하기<BR>
무작정 따라하기 외부 스크립트 연결하기<BR>
<BR>
10 기본을 튼튼히 다져주는 자바스크립트 기초 문법 1<BR>
자바스크립트 변수<BR>
변수 이름<BR>
변수 선언하기<BR>
변수 영역<BR>
저장 유형<BR>
데이터 유형<BR>
숫자형<BR>
[잠깐만요] 용어 통일은 어려워요!<BR>
[잠깐만요] 색상값 표현은 16진수입니다.<BR>
논리형<BR>
문자열<BR>
[잠깐만요] 특수 문자 사용법<BR>
null<BR>
연산자<BR>
산술 연산자<BR>
문자열 연산자<BR>
대입 연산자<BR>
비교 연산자<BR>
논리 연산자<BR>
데이터 유형 연산자<BR>
연산자의 우선순위<BR>
대화상자<BR>
경고 창<BR>
확인 창<BR>
프롬프트 창<BR>
조건문<BR>
if 문<BR>
else 문<BR>
중첩된 if-else 문<BR>
switch 문<BR>
무작정 따라하기 사용자가 입력한 문자 테스트하기<BR>
한걸음 더 2진수와 8진수, 그리고 16진수<BR>
한걸음 더 비트 연산자와 시프트 연산자<BR>
<BR>
11 기본을 튼튼히 다져주는 자바스크립트 기초 문법 2<BR>
반복문<BR>
for 문<BR>
while 문<BR>
do … while 문<BR>
break 문<BR>
[잠깐만요] for 문, while 문, do...while 문의 삼각관계<BR>
continue 문<BR>
함수<BR>
함수와 매개변수<BR>
함수와 인수<BR>
기본 인수가 필요한 함수의 사용법<BR>
[잠깐만요] <script> 태그 위치에 따른 실행 순서 차이<BR>
return 문<BR>
이벤트와 이벤트 핸들러<BR>
이벤트<BR>
이벤트 핸들러<BR>
[잠깐만요] 이벤트 핸들러가 대소문자를 인식하는 방법<BR>
인라인 이벤트 핸들러<BR>
함수와 함께 이벤트 핸들러 사용하기<BR>
객체<BR>
프로퍼티<BR>
메서드<BR>
인스턴스 객체 만들기<BR>
한걸음 더 오류를 줄이기 위한 소스 작성 방법<BR>
<BR>
12 어디에서든 활용하는 기본 내장 객체<BR>
내장 객체의 구조<BR>
내장 객체의 종류<BR>
HTML 태그와 자바스크립트 객체의 관계<BR>
배열 다루기 - Array 객체<BR>
배열 선언<BR>
배열 길이 알아내기 - length 프로퍼티<BR>
다차원 배열<BR>
메서드<BR>
날짜와 시간 정보 조절하기 - Date 객체<BR>
인스턴스 객체 만들기<BR>
메서드<BR>
문자열을 다양하게 활용하기 - String 객체<BR>
문자열 길이 구하기 - length 프로퍼티<BR>
글꼴 관련 메서드<BR>
링크 관련 메서드<BR>
문자열 위치 관련 메서드<BR>
문자열 추출 관련 메서드<BR>
수학적 계산 실행하기 - Math 객체<BR>
프로퍼티<BR>
메서드<BR>
함수를 객체로 정의하기 - Function 객체<BR>
최대/최소/무한대 다루기 - Number 객체<BR>
화면 정보 가져오기 - Screen 객체<BR>
무작정 따라하기 하루를 시작하는 메시지 표시하기<BR>
<BR>
13 브라우저를 움직이는 window 객체<BR>
window 객체<BR>
window 객체 프로퍼티<BR>
[잠깐만요] <body> 태그에서 프로퍼티 지정하기<BR>
window 객체 메서드<BR>
새 브라우저 창 열기 - open() 메서드<BR>
[잠깐만요] 팝업 창의 위치를 원하는 곳으로 지정하기<BR>
브라우저 창 닫기 - close() 메서드<BR>
창의 위치 조절하기 - moveBy() / moveTo() 메서드<BR>
창의 크기 조절하기 - resizeBy() / resizeTo() 메서드<BR>
시간과 관련된 동작 지정하기 - setTimeout() / clearTimeout() 메서드<BR>
무작정 따라하기 이벤트 핸들러를 이용한 팝업 창 열기<BR>
실전예제<BR>
<BR>
14 브라우저의 정보를 다루는 location / history / navigator 객체<BR>
웹 문서 주소 정보 다루기 - location 객체<BR>
프로퍼티<BR>
메서드<BR>
브라우저 주소 목록 저장하기 - history 객체<BR>
프로퍼티<BR>
메서드<BR>
[잠깐만요] 인터넷 익스플로러 브라우저를 구별하는 방법<BR>
브라우저 정보 보여주기 - navigator 객체<BR>
프로퍼티<BR>
메서드<BR>
무작정 따라하기 현재 웹 문서에 위치 고정하기<BR>
<BR>
15 내용을 돋보이게 하는 document 객체<BR>
문서 내용 다루기 - document 객체<BR>
프로퍼티<BR>
문서 정보와 관련된 프로퍼티<BR>
메서드<BR>
문서에 내용 입력하기 - write() / writeln() 메서드<BR>
문서 안의 앵커 정보 이용하기 - anchor 객체<BR>
문서 안 앵커 개수 확인하기 - length 프로퍼티<BR>
웹 문서의 링크 정보 이용하기 - link 객체<BR>
프로퍼티<BR>
웹 문서의 이미지 정보 이용하기 - image 객체<BR>
프로퍼티<BR>
무작정 따라하기 이미지 슬라이드 쇼 만들기<BR>
<BR>
16 완벽한 회원 가입 양식을 만드는 form 객체<BR>
폼과 자바스크립트<BR>
form 객체<BR>
form 객체의 하위 객체<BR>
<form> 태그와 관련된 프로퍼티<BR>
<form> 태그와 관련 없는 프로퍼티 - elements / length 프로퍼티<BR>
form 요소를 순서대로 배열하기 - forms 프로퍼티<BR>
form 객체 메서드<BR>
텍스트 필드 관리하기 - text 객체<BR>
프로퍼티<BR>
메서드<BR>
이벤트 핸들러<BR>
패스워드 필드 관리하기 - password 객체<BR>
[잠깐만요] 주소 표시줄에 아이디와 비밀번호가 다 보입니다.<BR>
프로퍼티 / 메서드 / 이벤트 핸들러<BR>
텍스트 영역 관리하기 - textarea 객체<BR>
프로퍼티 / 메서드 / 이벤트 핸들러<BR>
히든 필드 관리하기 - hidden 객체<BR>
프로퍼티<BR>
버튼 관리하기 - button / submit / reset 객체<BR>
프로퍼티<BR>
[잠깐만요] 자바스크립트가 할 수 있는 일과 할 수 없는 일<BR>
이벤트 핸들러<BR>
체크박스 관리하기 - checkbox 객체<BR>
프로퍼티<BR>
메서드<BR>
이벤트 핸들러<BR>
라디오 버튼 관리하기 - radio 객체<BR>
프로퍼티<BR>
메서드<BR>
이벤트 핸들러<BR>
콤보 메뉴 관리하기 - select 객체<BR>
프로퍼티<BR>
메서드<BR>
이벤트 핸들러<BR>
options 배열 프로퍼티<BR>
생성자를 이용해 Option 객체 만들기<BR>
파일 업로드 관리하기 - fileUpload 객체<BR>
프로퍼티<BR>
메서드<BR>
이벤트 핸들러<BR>
무작정 따라하기 비밀번호가 같은지 확인하기<BR>
<BR>
17 홈페이지 정보를 파일로 저장하는 쿠키<BR>
쿠키란?<BR>
형식<BR>
동작<BR>
무작정 따라하기 윈도우 비스타에서 쿠키 정보 찾아보기<BR>
</p></div>
</div>
<div id="tab4" class="tab-content">
<em class="anchor" id="bookAuthor"></em>
<h3>저자소개</h3>
<div id="innerAuthor" class="content-inner" style="border: 1px solid #ececec; border-radius: 5px; margin-bottom:30px; padding: 5px;">
<div style="min-height: 40px;">
<span class="author-name">고경희 (지은이)</span>
<a class="author-more" rel="noreferrer" target="_blank" href="https://www.aladin.co.kr/author/wauthor_overview.aspx?AuthorSearch=@1568&partner=bookprice">정보 더보기</a><br/>
<div id="author-info" class="indent">2010년 《Do it! HTML5 + CSS3》 출간 이후 웹 관련 강의와 집필을 꾸준히 해왔다. 특히 2021년 출간한 《Do i t! HTML+CSS+자바스크립트 웹 표준의 정석》은 웹 개발 입문자의 필독서로 자리매김하여 출간 후 웹 분야 베스트셀러를 계속 이어 오고 있다. 그동안 HTML과 DHTML(Dynamic HTML), CSS, 자바스크립트 등 웹 관련 기술을 더 쉽게 익힐 수 있는 도서 60여 종을 집필했다.
홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부한 뒤, 현재 Development Technologies 분야에서 마이크로소프트 공인 최고 기술자(Microsoft Most Valuable Professional, MMVP)로 활동하고 있다. 코딩 입문자부터 실무 개발자까지 모두에게 도움이 되는 노드제이에스 입문서를 만들고자 이 책을 집필했다.</div>
</div>
<div class="authInfo-more"><span>펼치기</span><i class="i-more"></i></div>
<div style="margin:10px 0px 10px 0px;">
<div style="margin-top: 5px; font-weight: bold;">고경희의 다른 책 > </div>
<div class="related">
<a href="/compare.jsp?isbn=9791163035244">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791163035244.jpg" alt=" Do it! Node.js 프로그래밍 입문" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title"> Do it! Node.js 프로그래밍 입문</div>
<div class="related-author">고경희 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791140702961">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791140702961.jpg" alt=" 윈도우 11 무작정 따라하기 에센셜북" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title"> 윈도우 11 무작정 따라하기 에센셜북</div>
<div class="related-author">고경희 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791163034223">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791163034223.jpg" alt=" Do it! 모던 자바스크립트 프로그래밍의 정석" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title"> Do it! 모던 자바스크립트 프로그래밍의 정석</div>
<div class="related-author">고경희 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791163034025">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791163034025.jpg" alt=" Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title"> Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문</div>
<div class="related-author">고경희, 이고잉 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791165219345">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791165219345.jpg" alt=" 무작정 따라하기 윈도우 10 + 엑셀 & 파워포인트 & 워드 + 한글" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title"> 무작정 따라하기 윈도우 10 + 엑셀 & 파워포인트 & 워드 + 한글</div>
<div class="related-author">고경희, 박미정, 박은진 </div>
</a>
</div>
<div class="clear"></div>
</div><div class="clear"></div>
</div>
</div>
<div id="tab5" class="tab-content">
<em class="anchor" id="bookReview"></em>
<h3>리뷰</h3>
<div class="content-inner" >
<a target="_blank" rel="noreferrer" href="https://blog.aladin.co.kr/711587185/6297949?partner=bookprice">
<div class="review-box">
<div id="writer">gb_********</div>
<div id="star">★★★☆☆<span style="color:black">(6)</span></div>
<div id="review">([100자평]책 내용은 좋으나 다만 html과 css의 구성순서가 ...)</div>
<div id="expand">자세히</div><div class="clear"></div>
</div>
</a>
<a target="_blank" rel="noreferrer" href="https://blog.aladin.co.kr/711587185/6297949?partner=bookprice">
<div class="review-box">
<div id="writer">gb_****</div>
<div id="star">★★★☆☆<span style="color:black">(6)</span></div>
<div id="review">([100자평]책 내용은 좋으나 다만 html과 css의 구성순서가 ...)</div>
<div id="expand">자세히</div><div class="clear"></div>
</div>
</a>
<a target="_blank" rel="noreferrer" href="https://blog.aladin.co.kr/786151166/3426906?partner=bookprice">
<div class="review-box">
<div id="writer">하너*</div>
<div id="star">★★★★★<span style="color:black">(10)</span></div>
<div id="review">([100자평]책의 부연설명이 잘되어있어서 좋음)</div>
<div id="expand">자세히</div><div class="clear"></div>
</div>
</a>
<a target="_blank" rel="noreferrer" href="https://blog.aladin.co.kr/711587185/6297949?partner=bookprice">
<div class="review-box">
<div id="writer">crd***</div>
<div id="star">★★★☆☆<span style="color:black">(6)</span></div>
<div id="review">([100자평]책 내용은 좋으나 다만 html과 css의 구성순서가 ...)</div>
<div id="expand">자세히</div><div class="clear"></div>
</div>
</a>
</div>
</div>
<div id="tab7" class="tab-content">
<em class="anchor" id="bookRelate"></em>
<h3>추천도서</h3>
<div class="content-inner" style="border: 1px solid #ececec; border-radius: 5px; margin-bottom:30px; padding: 5px;">
<div style="font-weight:bold;">분야의 베스트셀러 > </div>
<div class="related">
<a href="/compare.jsp?isbn=9791160074772">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791160074772.jpg" alt="샐러리맨 그리는 법 - 디지털 도구로 그리는" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">샐러리맨 그리는 법 - 디지털 도구로 그리는</div>
<div class="related-author">김재훈 , 이이노 타카히로 (감수)</div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791198364272">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791198364272.jpg" alt="제가 쓰는 챗GPT는 당신이 쓰는 챗GPT와 전혀 다릅니다 - 당신만 모르는 챗GPT 상위 1% 활용법" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">제가 쓰는 챗GPT는 당신이 쓰는 챗GPT와 전혀 다릅니다 - 당신만 모르는 챗GPT 상위 1% 활용법</div>
<div class="related-author">허민 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791158392239">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791158392239.jpg" alt="모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리</div>
<div class="related-author">이웅모 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791169211987">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791169211987.jpg" alt="맛있는 디자인 포토샵 & 일러스트레이터 CC 2024 - 누구나 쉽게 배워 제대로 써먹는 그래픽 입문서" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">맛있는 디자인 포토샵 & 일러스트레이터 CC 2024 - 누구나 쉽게 배워 제대로 써먹는 그래픽 입문서</div>
<div class="related-author">빨간고래(박정아), 윤이사라(포완카) </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791140709090">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791140709090.jpg" alt="코드 작성 가이드 - 현직 LINE 개발자가 알려주는 읽기 쉽고 코드 리뷰하기 좋은" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">코드 작성 가이드 - 현직 LINE 개발자가 알려주는 읽기 쉽고 코드 리뷰하기 좋은</div>
<div class="related-author">이시가와 무네토시 , 정기욱 </div>
</a>
</div>
<div class="clear"></div>
</div>
<div class="content-inner" style="border: 1px solid #ececec; border-radius: 5px; margin-bottom:30px; padding: 5px;">
<div style="font-weight:bold;">분야의 신간도서 > </div>
<div class="related">
<a href="/compare.jsp?isbn=9791169212434">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791169212434.jpg" alt="네이버 스마트스토어 시작하기 - 왕초보 판매자도 파워셀러가 되는, 개정 2판" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">네이버 스마트스토어 시작하기 - 왕초보 판매자도 파워셀러가 되는, 개정 2판</div>
<div class="related-author">서미진 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9788931469820">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9788931469820.jpg" alt="마인크래프트 몹 완벽 가이드" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">마인크래프트 몹 완벽 가이드</div>
<div class="related-author">Mojang AB , 이주안 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791193059241">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791193059241.jpg" alt="만들면서 배우는 아두이노 IoT 사물인터넷과 40개의 작품들 - ESP8266, 표준 프로토콜, IoT 상용서비스, ESP32-CAM, 카메라 CCTV, 사진전송을 활용한 사물인터넷 작품 만들기, 2판" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">만들면서 배우는 아두이노 IoT 사물인터넷과 40개의 작품들 - ESP8266, 표준 프로토콜, IoT 상용서비스, ESP32-CAM, 카메라 CCTV, 사진전송을 활용한 사물인터넷 작품 만들기, 2판</div>
<div class="related-author">장문철 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9791163035800">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9791163035800.jpg" alt="나, 개발자로 100명 취업시켰다 - 취업 준비부터 면접 노하우, 두고두고 보는 개발자 상식까지!" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">나, 개발자로 100명 취업시켰다 - 취업 준비부터 면접 노하우, 두고두고 보는 개발자 상식까지!</div>
<div class="related-author">김규석 </div>
</a>
</div>
<div class="related">
<a href="/compare.jsp?isbn=9788931475388">
<div class="related-img"><img class="lazy" data-src="/img_thumb/9788931475388.jpg" alt="Web · Programming · Git이 쉬워지는 Visual Studio Code 가이드" onerror="this.src='./img/prepare.png'"></div>
<div class="related-title">Web · Programming · Git이 쉬워지는 Visual Studio Code 가이드</div>
<div class="related-author">리브로웍스 , 김은철, 유세라 </div>
</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="supply-coupang">이 포스팅은 쿠팡 파트너스 활동의 일환으로,</div>
<div class="supply-coupang">이에 따른 일정액의 수수료를 제공받습니다.</div>
<div class="supply">도서 DB 제공 : 알라딘 서점(www.aladin.co.kr)</div>
</div>
<div class="clear"></div>
</div>
<style>
.right-side {
position:fixed;
left: calc(50% + 600px);
top: calc(25%);
}
#recent-list {
position: relative;
border: 1px solid #e3e5e8;
width: 100px;
max-height: 525px;
z-index: 9999;
border-radius: 5px;
}
#recent-list.on {
top: auto;
bottom: 204px;
z-index: 1;
}
.right-side.on {
top: auto;
bottom: 150px;
z-index: 1;
}
.view-all {
margin: 2px 0 3px 5px;
padding: 5px 0;
font-size: 12px;
font-weight: bold;
}
.view-all a{
color: #5d5959;
}
@media (max-width: 1170px){
.right-side {display: none;}
.top-anchor {display: block;}
}
</style>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('.top-anchor').fadeIn(100);
} else {
$('.top-anchor').fadeOut(100);
}
});
$(window).on('scroll resize onResize', function() {
var sT = $(window).scrollTop();
var val = $(document).height() - $(window).height() - $('.copyright').outerHeight();
if(sT >= val){
$('.right-side').addClass('on');
} else {
$('.right-side').removeClass('on');
}
});
</script>
<div class="right-side">
<div id="recent-list">
<div style="font-weight:bold; color: #528996; font-size: 14px; padding: 5px; border-bottom: 1px solid #ececec">최근 본 책</div>
</div>
<div class="top-anchor" style="display: none; width: 34px; height: 44px; margin-top:10px; background-image:url('./img/gotop.png'); background-size: 34px 44px; cursor:pointer;" onclick="window.scrollTo(0,0);"></div>
</div>
<div class="clear"></div>
<!-------right------->
</section>
<style>
footer {height: 120px}
.logo-footer {float:left; margin: 45px 30px 30px 150px;}
.content-footer {margin: 20px 0px 0px 60px; float: left}
.copyright {display: block; text-align: left; padding: 0px; margin: 0px 0px 15px 0px; line-height: 22px;}
.footer-nav {float: left; padding:2px 0px; font-size: 14px; margin: 10px 0px 15px 0px; font-weight: bold;}
.footer-nav::after {content: "|"; display: block; float: right; padding: 0px 40px; color: #d9d9d9; font-size: 13px;}
.footer-nav:nth-child(3)::after {content: ""; padding: 0px;}
.footer-nav:nth-child(1) {padding-left: 0px;}
.footer-nav:nth-child(3) {color: #767676}
@media (max-width: 1170px){
footer {border-top: 2px solid #cbeaf1;}
.container .copyright {display: block; margin-left: 0px !important;}
.container .logo-footer {display: none;}
.container .content-footer {margin: 0 auto; width: 670px; float: none}
.container .privacy {margin-top: -10px !important; font-size: 12px !important; float:none !important; text-align: center;}
}
@media (max-width: 800px){
.container .copyright .copyright_li {font-size: 10px; display: none;}
.container .content-footer {float: right; width: 100%}
.container .content-footer ul {text-align: center;}
.container .content-footer .footer-nav {float: none; display: inline-block;}
.footer-nav:nth-child(1)::before {content: "";}
}
@media (max-width: 700px){
footer {height: 60px;}
.container .content-footer {width: 270px; margin: 10px auto; float: none; line-height: 10px; }
.container .content-footer .footer-nav{ font-size: 11px; margin: 5px 0px; display: inline-block; float: none;}
.container .content-footer .footer-nav:nth-child(2)::after{display: none;}
}
</style>
<footer>
<div class="container">
<div class="logo-footer">
<img style="width: 200px; height:27px;"src="./img/logo_left.png" alt="logo">
</div>
<div class="content-footer">
<ul>
<li class="footer-nav"><a href="./board/question.jsp">문의하기</a>
<li class="footer-nav"><a href="./privacy.jsp">개인정보처리방침</a></li>
<li class="footer-nav">Copyright 2021 BOOKPRICE All rights reserved</li>
</ul>
<ul class="copyright">
<li class="copyright_li">(주)인터버드 | 대표이사 : 성낙복 | 주소: 부산광역시 영도구 절영로71 멀티미디어 지원센터 301호<li>
<li class="copyright_li">사업자등록번호: 602-81-25941 | 통신판매업 신고 번호: 2003-부산영도-0052</li>
</ul>
</div>
<div class="clear"></div>
</div>
</footer><!----footer------------>
</div><!--wrap-->
<script>
document.addEventListener('DOMContentLoaded', function () {
let lazyloadImages = document.querySelectorAll('img.lazy');
let lazyloadThrottleTimeout;
function lazyload() {
if (lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function () {
let scrollTop = window.pageYOffset;
Array.prototype.forEach.call(lazyloadImages, function (img,index) {
if(img.offsetParent!=null){
if (img.offsetParent.offsetTop < window.innerHeight + scrollTop) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
}
});
if (lazyloadImages.length === 0) {
document.removeEventListener('scroll', lazyload);
window.removeEventListener('resize', lazyload);
window.removeEventListener('orientationChange', lazyload);
window.removeEventListener('load', lazyload);
}
}, 20);
}
document.addEventListener('scroll', lazyload);
window.addEventListener('resize', lazyload);
window.addEventListener('orientationChange', lazyload);
window.addEventListener('load', lazyload);
});
$(document).ready(function(){
$("#new_tb").on("click", "tbody .tr2", function(event){
const clickTarget = event.target.parentNode.getAttribute('onclick');
const params = {"target": clickTarget, "sid": '', isbn: '9788975607547', ua: navigator.userAgent, t: "new"}
Clicker(params);
})
$("#used_tb").on("click", "tbody .tr4", function(event){
const clickTarget = event.target.parentNode.getAttribute('onclick');
const params = {"target": clickTarget, "sid": '', isbn: '9788975607547', ua: navigator.userAgent, t: "used"}
Clicker(params);
})
$('#tab4 #innerAuthor').each(function (){
var aa= $(this).children().find("#author-info")[0].scrollHeight;
var bb = $(this).children().find("#author-info").innerHeight();
if(aa > bb) {
$(this).children(".authInfo-more").css("display","block");
}
});
$('.authInfo-more').click(function(){
var more = $(this).parent().children().children('#author-info');
if(more.css("-webkit-line-clamp") != "3"){
more.css("-webkit-line-clamp","3");
$(this).children('.i-more').css("transform","rotate(360deg)");
$(this).children('span').text("펼치기");
} else {
more.css("-webkit-line-clamp","initial");
$(this).children('.i-more').css("transform","rotate(180deg)");
$(this).children('span').text("접기");
}
});
$(window).on('scroll resize onResize', function() {
if($( window ).width() > 700){
if($(document).scrollTop() >= $('.content').offset().top-100){
$('.tab').removeClass('tab-fix-mo');
$('.tab').addClass('tab-fix');
// $('header').css('height','103px');
} else {
$('.tab').removeClass('tab-fix');
$('.tab').removeClass('tab-fix-mo');
}
} else {
if($(document).scrollTop() >= $('.content').offset().top-82){
$('.tab').removeClass('tab-fix');
$('.tab').addClass('tab-fix-mo');
} else {
$('.tab').removeClass('tab-fix-mo');
$('.tab').removeClass('tab-fix');
}
}
});
$(window).on('scroll resize onResize', function() {
$('.tab-content').each(function() {
if($(window).scrollTop()>=$(this).offset().top-100){
var text = $(this).children("h3").text();
$('.tab a div').removeClass('tab-select');
$('.tab a div:contains('+text+')').addClass('tab-select');
} else if ($(window).scrollTop()+1 >= $(document).height() - $(window).height()){
$('.tab a div').removeClass('tab-select');
$('.tab a div').last().addClass('tab-select');
}
});
});
$('.tab div').click(function(){
var index = $('.tab div').index(this)
$('.tab div').removeClass('tab-select');
$('.tab div').removeClass('tab-select');
$(this).addClass('tab-select');
$('.tab div:eq('+index+')').addClass('tab-select');
});
if('false'!='true'){
ajaxNew('9788975607547','ko','23800','0','HTML.CSS.자바스크립트 무작정 따라하기','0','0','null','고경희');
ajaxUsed('9788975607547','0','0','https://www.aladin.co.kr/shop/UsedShop/wuseditemall.aspx?ItemId=2313484&TabType=2&partner=bookprice','24','1,750','https://www.aladin.co.kr/shop/UsedShop/wuseditemall.aspx?ItemId=2313484&TabType=1&partner=bookprice','0','1750','');
}
if(document.querySelector('#amzn_assoc_ad_div_adunit0_0')!=null){
setTimeout(function(){
const oversea = document.getElementsByClassName('oversea');
const amzAds = document.getElementById('amzn-native-ad-0');
if(amzAds.style.display != 'block'){$('.oversea').html("등록된 직구도서 정보가 없습니다.");}
}, 2000);
} else if(document.querySelector('.oversea')!=null){
$('.oversea').html("등록된 직구도서 정보가 없습니다.");
}
});
function Clicker(params){
$.ajax({
type: "post",
url: "./ajax/ajax_clicker.jsp",
data: params,
dataType: "html",
contentType: "application/x-www-form-urlencoded; charset:UTF-8",
cache: true,
timeout: 600000, //10분
success: function(data) {
},
error: function(){
console.log("cliker error");
},
complete: function(){
}
});
}
document.querySelector('#book-thumb_img').addEventListener("click",(e)=>{
e.preventDefault();
let link = document.querySelector('#new_tb .tr2').getAttribute("onclick");
if(link) {
link = link.substring(link.indexOf("(")+2, link.indexOf(")")-1);
window.open(link);
}
});
document.querySelector('.detail').addEventListener("click",(e)=>{
const isbn = e.target.getAttribute("data-id");
window.open(`/img_thumb/${isbn}.jpg`);
});
</script>
</body>
<!--block:0.001-->
<!--upYN:0.002-->
<!--api+db:0.177-->
<!--db:0.007-->
<!--img:1.107-->
<!--sel:0.063-->
<!--series:1.71424677209E9-->
<!--total:1.35-->
<!--0-->
</html>
