HOME
eBook
- eBook
- 오디오(북)
- 동영상
IT/프로그래밍
- 경제경영
- 자기계발
- 시/에세이
- 인문
- 종교
- 소설
- 국어/외국어
- 정치/사회
- 역사/문화
- 과학/공학
- IT/프로그래밍
- 건강/의학
- 가정/생활/요리
- 여행/취미
- 예술/대중문화
- 유아
- 아동
- 청소년
- 교재/수험서
- 외국도서
- 매거진
- 대학교재
- 로맨스
- 로맨스판타지
- BL
- GL
- 판타지
- 무협
- 라이트노벨
- 추리
- 미스터리
- 스릴러
- 섹슈얼로맨스
- 단행본만화
- 웹툰
- 웹소설
웹사이트/홈페이지/블로그
- IT일반/교양
- 컴퓨터입문/활용
- 컴퓨터수험서
- 컴퓨터공학
- 데이터베이스/아키텍처
- OS/네트워크
- 코딩/프로그래밍/언어
- OA (사무 보조 프로그램)
- 웹사이트/홈페이지/블로그
- 그래픽/디자인
- 영상/미디어
- 게임
- AI/AR/VR
- 기타

반응형 웹 실전 프로젝트 가이드

HTML5 CSS3 자바스크립트 제이쿼리를 한 권으로

김광수 , 조혜경 지음

아이콕스

2019년 03월 28일 출간

국내도서 : 2019년 01월 12일 출간

(개의 리뷰)

( 0% 의 구매자)

eBook 상품 정보

파일 정보 PDF (55.98MB)

ISBN 9791164260256

지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어

교보eBook App 듣기(TTS) 가능

TTS 란?

텍스트를 음성으로 읽어주는 기술입니다.

전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를 읽을 수 있습니다.

이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.

PDF 필기가능 (Android, iOS)

소득공제

소장

정가 : 24,000원

쿠폰적용가 21,600원

10% 할인 | 5%P 적립

이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.

카드&결제 혜택

5만원 이상 구매 시 추가 2,000P
3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
리뷰 작성 시, e교환권 추가 최대 200원

상품정보
리뷰 (0)
이용안내

작품소개

이 상품이 속한 분야

HTML5, CSS3, JavaScript, jQuery를 한 권으로!
실전 프로젝트를 통하여 반응형 웹사이트를 직접 구현해 본다!

이 책은 ‘웹 표준이라는 약속’에 대한 이야기를 바탕으로, 누구나 쉽게 단계적으로 따라갈 수 있도록 HTML5, CSS3, Javascript와 jQuery까지 표준형 웹 제작을 위한 모든 도구들을 기본부터 활용까지 리드하도록 만들어졌습니다.

누구나 쉽게 웹 표준에 맞는 페이지를 제작할 수 있도록 도구들의 기본부터 활용까지 다루되, PC와 스마트폰, 태블릿 등 사용자의 기기에 따라 유연하게 구현되는 차세대 웹 기술 ‘반응형 웹’을 소재로 하여 가장 최근에 이슈화되는 소재를 통하여 직접 웹 페이지를 제작하는 모든 독자분들께 실제적인 도움을 줍니다.

머리말
실습에 필요한 기본 프로그램 안내
반응형 프로젝트 미리보기

CHAPTER 1 HTML5
1.1 HTML5 기본 문서
01 HTML5 기본 구성
02 W3C validator
03 마크업 기본 문법 규칙
1.2 시멘틱 마크업과 논리적인 순서 마크업
01 시멘틱 마크업(Semantic markup)
02 논리적 순서 마크업(Logical sequence markup)
1.3 블록 레벨 요소와 인라인요소
01 블록 레벨 요소(Block-level Elements)
02 인라인 요소(inline Element)
03 블록 레벨 요소와 인라인 요소의 특성
1.4 기본 요소
01 제목

~

02 문단

03 주소

04 링크
05 이미지
1.5 텍스트 관련 요소
01 ,,,,,_{,^{1.6 목록 관련 요소
01 순서 목록
02 비순서 목록
03 설명 목록
1.7 표 관련 요소 및 속성
01 표 생성 , , , , ,
02 셀 합치기 colspan 속성, rowspan 속성
03 표 접근성 , ,
, scope 속성
1.8 폼 관련 요소 및 주요 속성
01 폼 ,
02 한줄 입력 요소 , type 속성
03 여러 줄 입력 요소, 선택 요소 , <select><br /> 04 폼 접근성 label 속성<br /> 05 주요 입력 속성<br />1.9 그룹 요소<br /> 01 <div><br /> 02 <span><br />1.10 구조 관련 요소<br /> 01 <header>, <section>, <footer>, <nav>, <article>, <aside><br />1.11 미디어 요소<br /> 01 <audio><br /> 02 <video><br /><br />CHAPTER 2 CSS (CSS5)<br />2.1 CSS 기본 문법<br /> 01 내부 스타일시트<br /> 02 외부 스타일시트<br /> 03 @import<br /> 04 인라인 스타일(inline style)<br />2.2 선택자(selector)<br /> 01 type 선택자<br /> 02 id 선택자<br /> 03 class 선택자<br /> 04 전체 선택자<br /> 05 하위 선택자<br /> 06 자식 선택자<br /> 07 인접 선택자<br /> 08 형제 선택자<br /> 09 그룹 선택자<br /> 10 속성 선택자<br /> 11 가상클래스 선택자<br /> 12 가상요소 선택자<br /> 13 종속 선택자<br /> 14 선택자의 우선순위<br />2.3 문자 관련 스타일<br /> 01 font-family<br /> 02 font-size, 단위의 고찰<br /> 03 font-weight<br /> 04 font-style<br /> 05 font-variant<br /> 06 line-height<br /> 07 font<br /> 08 웹폰트<br /> 09 color, 색상 코드 고찰<br /> 10 letter-spacing, word-spacing<br /> 11 text-decoration<br /> 12 text-transform<br /> 13 text-shadow<br />2.4 문단(paragraph) 관련 스타일<br /> 01 text-align<br /> 02 vertical-align<br /> 03 text-indent<br /> 04 word-wrap<br /> 05 word-break<br /> 06 white-space<br /> 07 text-overflow<br /> 08 display<br /> 09 visibility<br /> 10 overflow<br /> 11 opacity<br />2.5 배경(background)<br /> 01 background-color<br /> 02 background-image<br /> 03 background-repeat<br /> 04 background-position<br /> 05 background-attachment<br /> 06 background-size<br /> 07 background-origin<br /> 08 background-clip<br /> 09 Image Sprite<br /> 10 배경에 gradient 적용하기<br /> 11 multiple background<br />2.6 BOX MODEL<br /> 01 width, height<br /> 02 padding<br /> 03 margin<br /> </div>
</div>
</div>
<div class="auto_overflow_footer">
<button type="button" class="btn_more_body" data-btn-toggle><span class="text">펼치기</span><span class="ico_arw"></span></button>
</div>
</div>
</div>



<div id="BookPpubRe" class="round_gray_box book_publish_review">
<div class="auto_overflow_wrap type_text">
<div class="auto_overflow_contents">
<div class="auto_overflow_inner">
<p class="info_text">HTML5와 CSS3에 대한 지식이 있다면 간단한 반응형 웹페이지를 제작하는 일은 그리 어려운 일은 아니지만 실제 다양한 디바이스와 디스플레이 환경을 고려한 반응형 웹을 구현하는 것은 결코 쉬운 일만은 아닐 것입니다. 이것은 아마도 반응형 웹에 대한 이론적인 지식만으로는 해결하기 힘든 부분이기 있어서가 아닐까 생각합니다. 반응형 웹 제작에 필요한 이론적인 정보들은 쉽게 찾아볼 수 있지만 이론을 활용한 실제 반응형 웹퍼블리싱에 대한 정보는 찾아보기 힘든 것이 현실입니다.<br /><br />이 책은 꼭 반응형 웹이 아니더라도 웹퍼블리싱에 관심이 있는 입문자나 데스크탑 PC, 모바일 웹페이지에 대한 제작 경험은 있으나 반응형 웹 제작에 어려움을 겪고 있는 분들에게 도움이 될 것이라 생각합니다. 웹퍼블리싱 분야에 입문하는 분들에게는 웹퍼블리싱의 필수 기술인 HTML5, CSS3, Javascript, jQuery에서 꼭 알고 있어야 하는 내용들을 각 섹션별로 정리해 놓았으며 특히, 마지막 섹션인 반응형 웹 프로젝트에서는 반응형 웹 예제를 통하여 단순히 예제를 따라해 보는 것에 그치는 것이 아니라 HTML5, CSS3, Javascript, jQuery 기술을 활용하여 반응형 메인페이지와 회원가입, 게시판 등 다양한 서브페이지들을 어떤 방법으로 퍼블리싱 해야 되는지에 대해 충분히 경험해 볼 수 있도록 구성하였습니다.</p>
</div>
</div>
<div class="auto_overflow_footer">
<button type="button" class="btn_more_body" data-btn-toggle><span class="text">펼치기</span><span class="ico_arw"></span></button>
</div>
</div>
</div>
</div>





<div class="product_detail_area product_person"> 
<div class="title_wrap title_size_md">
<h2 class="title_heading">작가정보</h2>
</div>

<div class="round_gray_box info">
<div class="bg">
<div class="title_wrap title_size_def">
<h3 class="title_heading"><span class="title_prefix">저자(글)</span>
<a href="javascript:void(0)" class="person_link" onclick="KbbJS.plugins.uiServiceEpdDetail.goSearch('김광수', '1000385817' , 'C')">
<span class="text">김광수</span>
</a>
</h3>

<button type="button" class="btn_xs btn_pill btn_alarm" name="nbopPersonBtn" onclick="KbbJS.plugins.uiServiceEpdDetail.updateNbopPerson("1000385817", "\uAE40\uAD11\uC218", "\uC800\uC790(\uAE00)")">
<span class="ico_alarm"><span class="hidden">알림</span></span><span class="text">OFF</span>
</button>

<div class="right_area">
<a onclick="KbbJS.plugins.uiServiceEpdDetail.goPageEvent('작가정보', 'select_content', null, null, null, null, null, '저자(글)', '1000385817', '김광수', null, 'https://www.kyobobook.co.kr/service/profile/information?chrcCode=1000385817')" class="btn_xs btn_line_gray">
<span class="ico_write_info"></span><span class="text">상세정보</span>
</a>
</div>
</div>

<div class="tag_wrap type_white">

<a href="javascript:void(0)" class="tag" onclick="KbbJS.plugins.uiServiceEpdDetail.goAutrCtgrDsplMenu("8680","8690","9146")">웹디자이너</a>

</div>


<div class="writer_info_box">

<div class="auto_overflow_wrap">
<div class="auto_overflow_contents">
<div class="auto_overflow_inner">
<p class="info_text">EIT 웹 개발 총괄, 삼성인재개발원 차장을 역임하였으며, 주요 저서로는 실전프로젝트 반응형 웹퍼블리싱, 자바스크립트+jQuery 마스터 등이 있다.</p>
</div>
</div>
<div class="auto_overflow_footer">
<button type="button" class="btn_more_body" data-btn-toggle>
<span class="text">펼치기</span><span class="ico_arw"></span>
</button>
</div>
</div>
</div>

<div class="prod_swiper_wrap swiper-container">
<ul class="prod_list swiper-wrapper">


<li class="prod_item swiper-slide">
<div class="prod_area">
<div class="prod_thumb_box">
<a onclick="KbbJS.plugins.uiServiceEpdDetail.goPageEvent('작가정보', 'select_item', 'E000003233660', null, '반응형 웹퍼블리싱', null, '김광수', null, null, null, '1', 'https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000003233660')" class="prod_link">
<span class="img_box">
<img src="https://contents.kyobobook.co.kr/sih/fit-in/240x360/pdt/9788996852124.jpg"/>
</span>
</a>
</div>
<div class="prod_info_box">
<a onclick="KbbJS.plugins.uiServiceEpdDetail.goPageEvent('작가정보', 'select_item', 'E000003233660', null, '반응형 웹퍼블리싱', null, '김광수', null, null, null, '1', 'https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000003233660')" class="prod_info">
<span class="prod_name">반응형 웹퍼블리싱</span>
</a>
</div>
</div>
</li>

<li class="prod_item swiper-slide">
<div class="prod_area">
<div class="prod_thumb_box">
<a onclick="KbbJS.plugins.uiServiceEpdDetail.goPageEvent('작가정보', 'select_item', 'E000003233663', null, '자바스크립트 + jQuery 마스터', null, '김광수', null, null, null, '2', 'https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000003233663')" class="prod_link">
<span class="img_box">
<img src="https://contents.kyobobook.co.kr/sih/fit-in/240x360/pdt/9788996852186.jpg"/>
</span>
</a>
</div>
<div class="prod_info_box">
<a onclick="KbbJS.plugins.uiServiceEpdDetail.goPageEvent('작가정보', 'select_item', 'E000003233663', null, '자바스크립트 + jQuery 마스터', null, '김광수', null, null, null, '2', 'https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000003233663')" class="prod_info">
<span class="prod_name">자바스크립트 + jQuery 마스터</span>
</a>
</div>
</div>
</li>

<li class="prod_item swiper-slide">
<div class="prod_area">
<div class="prod_thumb_box">
<a onclick="KbbJS.plugins.uiServiceEpdDetail.goPageEvent('작가정보', 'select_item', 'E000002975736', null, '반응형 웹 실전 프로젝트 가이드', null, '김광수', null, null, null, '3', 'https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000002975736')" class="prod_link">
<span class="img_box">
<img src="https://contents.kyobobook.co.kr/sih/fit-in/240x360/pdt/9791186886908.jpg"/>
</span>
</a>
</div>
<div class="prod_info_box">
<a onclick="KbbJS.plugins.uiServiceEpdDetail.goPageEvent('작가정보', 'select_item', 'E000002975736', null, '반응형 웹 실전 프로젝트 가이드', null, '김광수', null, null, null, '3', 'https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000002975736')" class="prod_info">
<span class="prod_name">반응형 웹 실전 프로젝트 가이드</span>
</a>
</div>
</div>
</li>

</ul>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
<div class="round_gray_box info">
<div class="bg">
<div class="title_wrap title_size_def">
<h3 class="title_heading"><span class="title_prefix">저자(글)</span>
<a href="javascript:void(0)" class="person_link" onclick="KbbJS.plugins.uiServiceEpdDetail.goSearch('조혜경', '' , 'C')">
<span class="text">조혜경</span>
</a>
</h3>

<div class="right_area">

</div>
</div>




<div class="writer_info_box">

<div class="auto_overflow_wrap">
<div class="auto_overflow_contents">
<div class="auto_overflow_inner">
<p class="info_text">주요 경력으로는 코카콜라-코크플레이(2016.11-2018.02), LG수출입비즈플랫폼(2018.09-2018.11) 등이 있으며, 실전프로젝트 반응형 웹퍼블리싱과 웹 표준 리뉴얼 마스터의 저자이다</p>
</div>
</div>
<div class="auto_overflow_footer">
<button type="button" class="btn_more_body" data-btn-toggle>
<span class="text">펼치기</span><span class="ico_arw"></span>
</button>
</div>
</div>
</div>


</div>
</div>

</div>








<div class="product_detail_area product_series" id="productSrsArea"> 
<div class="title_wrap title_size_md has_btn">
<h2 class="title_heading">이 상품의 총서 <span id="srsTotalCnt"></span></h2> 

<button type="button" class="btn_heart" onclick="KbbJS.plugins.uiServiceEpdDetail.srs.updateSrsList('checkAll')">
<span class="ico_wish"></span>
<span class="hidden">찜/알림 설정하기</span>
</button>

<div class="right_area">
<span class="form_chk" id="chkAllSeriesBtn">
<input id="chkAllSeries02" type="checkbox" />
<label for="chkAllSeries02">전체선택</label>
</span>
<div class="switch_list_btn_wrap" data-target=".edition.round_gray_box"> 
<button type="button" class="btn_sm btn_line_gray ico_list" data-type="list"><span class="hidden">텍스트형 으로 보기</span></button>
<button type="button" class="btn_sm btn_line_gray ico_img active" data-type="img"><span class="hidden">이미지형 으로 보기</span></button>
</div>
<button type="button" class="btn_sm btn_line_gray" onclick="KbbJS.plugins.uiServiceEpdDetail.srs.openSrs("ebook")">
<span class="ico_all_view"></span>
<span class="text">전체목록</span>
</button>
</div>
</div>
<div class="round_gray_box view_type_img edition"> 

<div class="prod_swiper_wrap only_title swiper-container"> 
<ul class="prod_list swiper-wrapper" id="prodListSwiper"> </ul>
<div class="swiper-scrollbar"></div>
</div>



<div class="prod_swiper_text swiper-container">
<ul class="prod_text_list swiper-wrapper" id="prodTextListSwiper"> </ul>
<div class="swiper-scrollbar"></div>
</div>


<div class="bottom_btn_area">

<button type="button" class="btn_wish" onclick="KbbJS.plugins.uiServiceEpdDetail.srs.updateSrsList('checkList')">
<span class="ico_wish"></span>
<span class="hidden">찜하기</span>
</button>
<button type="button" class="btn_ip btn_light_gray" id="addCart" onclick="KbbJS.plugins.uiServiceEpdDetail.srs.confirmSpbk('checkArray')">
<span class="text">장바구니</span>
</button>
</div>
</div>
</div>




<div class="product_detail_area product_related" id="relationEbooksLayer" style="display:none">
</div>



<div class="product_detail_area cast" id="bookcastLayer" style="display:none">
</div>

</section>


<section id="scrollSpyProdReview" class="tab_content sps" data-add-offset="73" data-height-observe>
<div class="product_detail_area klover_review_wrap">
<div class="title_wrap title_size_md has_btn">
<h2 id="KloverLength" class="title_heading">Klover리뷰 (0)</h2>

<div class="tooltip_wrap">
<button type="button" class="btn_tooltip" data-btn-toggle><span class="ico_info"></span><span class="hidden">툴팁열기</span></button>
<div class="tooltip_inner">
<div class="tooltip_header">
<div class="tooltip_head_title">Klover리뷰 안내</div>
</div>
<div class="tooltip_contents">
<div class="tooltip_desc">Klover(Kyobo-lover)는 교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.</div>
<div class="tooltip_sub_title">1. 리워드 안내</div>
<div class="tooltip_desc">
구매 후 90일 이내에 평점 작성 시 e교환권 100원을 적립해 드립니다.
<ul>
<li class="font_size_xxs">- e교환권은 적립일로부터 180일 동안 사용 가능합니다.</li>
<li class="font_size_xxs">- 리워드는 5,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다. (2024년 9월 30일부터 적용)</li>
<li class="font_size_xxs">- 리워드는 한 상품에 최초 1회만 제공됩니다.</li>
<li class="font_size_xxs">- sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.</li>
</ul>
</div>
<div class="tooltip_sub_title">2. 운영 원칙 안내</div>
<div class="tooltip_desc">Klover리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다. 일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.</div>
<div class="tooltip_desc">
<ul class="bul_list info_text_box">
<li class="bul_item_dot font_size_xxs">도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰</li>
<li class="bul_item_dot font_size_xxs">도서와 무관한 내용의 리뷰</li>
<li class="bul_item_dot font_size_xxs">인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰</li>
<li class="bul_item_dot font_size_xxs">의성어나 의태어 등 내용의 의미가 없는 리뷰</li>
</ul>
</div>
</div>
<button type="button" class="btn_tooltip_close"><span class="hidden">툴팁닫기</span></button>
</div>
</div>

<div class="right_area">
<p class="bul_item_asterisk font_size_xxs">구매 후 리뷰 작성 시, e교환권 100원 적립</p>
<button type="button" class="btn_sm btn_primary" onclick="KbbJS.plugins.uiServiceEpdDetail.review.openReviewWrite()"><span class="ico_review"></span><span class="text">리뷰 작성</span></button>
</div>
</div>

<div class="klover_review_box">

</div>



<div class="tab_wrap type_sm" data-type-btn>

<div class="tab_list_wrap">
<ul class="tabs">

<li class="tab_item ui-state-active"><button class="tab_link" onclick="KbbJS.plugins.uiServiceEpdDetail.review.chgTab(this,'li','ui-state-active',KbbJS.plugins.uiServiceEpdDetail.review.kvTabCallback); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', 'Klover리뷰', '탭_전체리뷰', '');"><span class="tab_text">전체 리뷰</span></button></li>
<li class="tab_item"><button class="tab_link" onclick="KbbJS.plugins.uiServiceEpdDetail.review.chgTab(this,'li','ui-state-active',KbbJS.plugins.uiServiceEpdDetail.review.kvTabCallback); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', 'Klover리뷰', '탭_eBook리뷰', '');"><span class="tab_text">eBook 리뷰</span></button></li>
<li class="tab_item"><button class="tab_link" onclick="KbbJS.plugins.uiServiceEpdDetail.review.chgTab(this,'li','ui-state-active',KbbJS.plugins.uiServiceEpdDetail.review.kvTabCallback); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', 'Klover리뷰', '탭_종이책리뷰', '');"><span class="tab_text">종이책 리뷰</span></button></li>
<li class="tab_item"><button class="tab_link" onclick="KbbJS.plugins.uiServiceEpdDetail.review.chgTab(this,'li','ui-state-active',KbbJS.plugins.uiServiceEpdDetail.review.kvTabCallback); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', 'Klover리뷰', '탭_구매리뷰', '');"><span class="tab_text">구매 리뷰</span></button></li>
</ul>
<div class="right_area">


<div class="form_sel" data-class="type_sm">
<select id="kloverSort" name="kloverSort" title="정렬방식 선택">
<option value="001">좋아요 순</option>
<option value="002">최신순</option>
</select>
</div>

</div>
</div>


<div class="tab_content kloverContent">

<div class="no_data size_sm hidden">
<div class="no_data_desc">이 상품의 첫 리뷰어가 되어주세요.</div>
</div>

<div class="comment_wrap">

<div class="comment_list" id="kloverContents"></div>

<div class="pagination" id="klover_pagination"></div>
</div>

</div>

</div>


</div>







<div class="product_detail_area killing_part">
<div class="title_wrap title_size_md has_btn">
<h2 class="title_heading">문장수집</h2>

<div class="tooltip_wrap">
<button type="button" class="btn_tooltip" data-btn-toggle=""><span class="ico_info"></span><span class="hidden">툴팁열기</span></button>
<div class="tooltip_inner">
<div class="tooltip_header">
<div class="tooltip_head_title">문장수집 안내</div>
</div>
<div class="tooltip_contents">
<div class="tooltip_desc">문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여 주는 교보문고의 새로운 서비스 입니다. 교보eBook 앱에서 도서 열람 후 문장 하이라이트 하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 ‘좋아요’ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보없이 삭제될 수 있습니다.</div>
<div class="tooltip_sub_title">리워드 안내</div>
<div class="tooltip_desc">
<ul class="bul_list">
<li class="bul_item_dot font_size_xxs">구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.</li>
<li class="bul_item_dot font_size_xxs">e교환권은 적립일로부터 180일 동안 사용 가능합니다.</li>
<li class="bul_item_dot font_size_xxs">리워드는 5,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다. (2024년 9월 30일부터 적용)</li>
<li class="bul_item_dot font_size_xxs">리워드는 한 상품에 최초 1회만 제공됩니다.</li>
<li class="bul_item_dot font_size_xxs">sam 이용권 구매 상품 / 선물받은 eBook / 오디오북·동영상 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.</li>
</ul>
</div>
</div>
<button type="button" class="btn_tooltip_close"><span class="hidden">툴팁닫기</span></button>
</div>
</div>
<div class="tab">
<button type="button" onclick="KbbJS.plugins.uiServiceEpdDetail.review.chgTab(this,'button','current',KbbJS.plugins.uiServiceEpdDetail.review.kpTabCallBack); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', '문장수집', '탭_전체', '')">전체</button>
<button type="button" class="current" onclick="KbbJS.plugins.uiServiceEpdDetail.review.chgTab(this,'button','current',KbbJS.plugins.uiServiceEpdDetail.review.kpTabCallBack); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', '문장수집', '탭_eBook', '')">eBook</button>
<button type="button" onclick="KbbJS.plugins.uiServiceEpdDetail.review.chgTab(this,'button','current',KbbJS.plugins.uiServiceEpdDetail.review.kpTabCallBack); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', '문장수집', '탭_종이책', '')">종이책</button>
</div>

<div class="right_area">
<button type="button" class="btn_sm btn_line_gray" onclick="KbbJS.plugins.uiServiceEpdDetail.review.goFullUrl(this.getAttribute('data-href'),'로그인을 먼저 진행해주세요.'); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', '문장수집', '내독서기록', '')" data-href="https://my.kyobobook.co.kr/library"><span class="text">내 독서기록</span></button>
<button type="button" class="btn_sm btn_primary" onclick="KbbJS.plugins.uiServiceEpdDetail.review.openKillWrite(); ga360.GA_Event('click_eBook_상품상세_PC', '상세탭_리뷰', '문장수집', '문장수집작성', '')"><span class="ico_review"></span><span class="text">문장수집 작성</span></button>
</div>
</div>
<div class="title_wrap title_tab">
<p class="bul_item_asterisk font_size_xxs">구매 후 문장수집 작성 시, e교환권 100원 적립</p>
</div>
<div class="no_data type_gray size_sm hidden">
<div class="no_data_desc">이 책의 첫 기록을 남겨주세요</div>
</div>

<div class="killing_part_contents sentencesContent killing_part_swiper">
<div class="swiper-container">
<ul class="swiper-wrapper"></ul>
</div>
</div>
<div class="pagination sentencesList" id="killing_part_pagination"> </div>

</div>

</section>


<section id="scrollSpyProdClaim" class="tab_content sps" data-add-offset="73" data-height-observe>
<div class="product_detail_area claim_info_wrap" id="termsInfo">

</div>
</section>

</div>


<div class="prod_detail_recommend">

<div class="product_detail_area recommend_event ent_banner" id="rcmnEventLayer" style="display:none">
</div>



<div class="product_detail_area" id="trvrLayer" style="display:none"></div>



<div class="product_detail_area lang" id="otherLnggPrdLayer" style="display:none">
</div>



<div class="product_detail_area thisbest" id="bestPrdLayer" style="display:none">
</div>


<div class="product_detail_area" id="nwpbLayer" style="display:none">
</div>

</div>

</div>
</div>



</html>


<div class="prod_detail_footer">




<div class="prod_purchase_info_wrap">

<div class="footer_contents_inner">







<div class="left_area">
<p>
<em>소장</em>
<span>





<b id="prceTxt-E000002975736" data-cpn-pric="21600">
24,000
</b>
원
</span>
</p>
</div>
<div class="right_area">
<button type="button" class="btn_wish size_lg" name="nbopBtn" onclick="KbbJS.plugins.uiServiceEpdDetail.updateNbop()"><span class="ico_wish"></span><span class="hidden">찜하기</span></button>
<button type="button" class="btn_lg btn_line_gray gift" onclick="KbbJS.plugins.uiServiceEpdDetail.confirmGft('psss')"><span class="ico_gift"></span><span class="text">선물하기</span></button>
<button type="button" class="btn_lg btn_line_primary cart" onclick="KbbJS.plugins.uiServiceEpdDetail.confirmSpbk('psss'); ga360.GA_Event('click_eBook_상품상세_PC', '하단붙박이', '', '장바구니', '');"><span class="text">장바구니</span></button>

<button type="button" class="btn_lg btn_primary" data-role="btn-dialog" onclick="KbbJS.plugins.uiServiceEpdDetail.openStlmPopup({"dtlExlsYsno":"N","dgctSaleCdtnCode":"001","dgctSaleCmdtGrpCode":"001","dgctSaleCmdtDtlGrpCode":"001","dgctSaleCmdtDvsnCode":"EBK","cmdtid":"5800008590634","saleLmttAge":"0","samPsblYsno":"N","cncsYsno":"N","dgctCmdtDsplClstCode":"2117","vndrCode":"06B5137","audiPatrCode":null,"hdYsno":"N","saleCmdtid":"E000002975736","hgrnSaleCmdtid":null,"cverBarcd":"9791186886908","introCverBarcd":"9791186886908","setBarcdYN":"N","saleCmdtidRent":null,"saleCmdtidRentNonLimit":null,"psssPsblYsno":"Y","cmdtcode":"4801186886909","srisYsno":"N","srisMotherSaleCmdtid":null,"srisMotherCmdtid":null,"rltnSaleCmdtRprsCmdtName":null,"srlzYsno":"N","genrYsno":"N","setYsno":"N","dgctCmdtSetPatrCode":null,"dgctSaleCmdtDvsnName":"eBook","largeCtgrCode":"21","largeCtgrName":"IT\/\uD504\uB85C\uADF8\uB798\uBC0D","middleCtgrCode":"2117","middleCtgrName":"\uC6F9\uC0AC\uC774\uD2B8\/\uD648\uD398\uC774\uC9C0\/\uBE14\uB85C\uADF8","subCtgrCode":null,"subCtgrName":null,"optSrmb":"1","optName":"\uC77C\uBC18 e\uBD81","optDgctCmdtDsplClstCode":"21","ppbkSaleCmdtid":null,"ebookSaleCmdtid":null,"audioSaleCmdtid":null,"ebookDscnSapr":null,"audioDscnSapr":null,"splmYsno":"N","prvwYsno":"N","kwchKwnjName":null,"cmdtHnglName":"\uBC18\uC751\uD615 \uC6F9 \uC2E4\uC804 \uD504\uB85C\uC81D\uD2B8 \uAC00\uC774\uB4DC","bksSbttName":"HTML5 CSS3 \uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8 \uC81C\uC774\uCFFC\uB9AC\uB97C \uD55C \uAD8C\uC73C\uB85C","bksSbttName2":null,"cmfgCmdtQntt":"0","bksSbttName3":null,"srsName":null,"srsVlmNumb":null,"pbcmCode":"PB29135","pbcmName":"\uC544\uC774\uCF55\uC2A4","pbcmSiteYsno":"N","ppbkPublDate":"20190112","elbkPublDate":"20190328","dalyLargeCtgrRank":null,"dalyLargeCtgrName":null,"dalyMiddleCtgrRank":null,"dalyMiddleCtgrName":null,"weekLargeCtgrRank":null,"weekLargeCtgrName":null,"weekMiddleCtgrRank":null,"weekMiddleCtgrName":null,"ctgrRankUrl":null,"dgctIsbnPatrCode":"001","dgctIsbnPatrName":"ISBN","dgctIsbnIsncFilePatrCode":"002","dgctIsbnIsncFilePatrName":"PDF","dgctIsbnIsncFilePatrByteCont":55.98251819610596,"stdBksIdnfNum":"9791164260256","pageCont":"0","dgctFileByteCont":0,"suprLnggCode":"001","suprLnggName":"\uD55C\uAD6D\uC5B4","suprLnggEnName":"ko","incmDdctTrgtYsno":"Y","fbpTrgtYsno":"Y","tdybkYsno":"N","evntYsno":"N","frbeYsno":"N","samYsno":null,"psssYsno":null,"rentYsno":null,"psssPrce":"24000","psssDscnSapr":"24000","psssDscnRate":"0","psssEvntAcmlRate":"5","psssDscnYsno":"N","rentPrce":"0","rentDscnSapr":"0","rentDscnRate":"0","rentEvntAcmlRate":"0","rentDscnYsno":"N","rentStnrDyCont":"0","rentStnrInfo":"0\uC77C","rentSttgDate":null,"rentEndDate":null,"rentFreeYsno":"Y","rentPrceRent":"0","psssFreeYsno":"N","psssOrdrId":null,"psssDgctOrdrCmdtSrmb":null,"psssCmdtcode":null,"psssSubCmdtcode":null,"rentOrdrId":null,"rentDgctOrdrCmdtSrmb":null,"rentCmdtcode":null,"rentSubCmdtcode":null,"samOrdrId":null,"samDgctOrdrCmdtSrmb":null,"samCmdtcode":null,"samSubCmdtcode":null,"mrchMemoCntt":null,"bookIntcYsno":"Y","bookIntcGnrl":"HTML5, CSS3, JavaScript, jQuery\uB97C \uD55C \uAD8C\uC73C\uB85C!\n\uC2E4\uC804 \uD504\uB85C\uC81D\uD2B8\uB97C \uD1B5\uD558\uC5EC \uBC18\uC751\uD615 \uC6F9\uC0AC\uC774\uD2B8\uB97C \uC9C1\uC811 \uAD6C\uD604\uD574 \uBCF8\uB2E4!\n\n\uC774 \uCC45\uC740 \u2018\uC6F9 \uD45C\uC900\uC774\uB77C\uB294 \uC57D\uC18D\u2019\uC5D0 \uB300\uD55C \uC774\uC57C\uAE30\uB97C \uBC14\uD0D5\uC73C\uB85C, \uB204\uAD6C\uB098 \uC27D\uAC8C \uB2E8\uACC4\uC801\uC73C\uB85C \uB530\uB77C\uAC08 \uC218 \uC788\uB3C4\uB85D HTML5, CSS3, Javascript\uC640 jQuery\uAE4C\uC9C0 \uD45C\uC900\uD615 \uC6F9 \uC81C\uC791\uC744 \uC704\uD55C \uBAA8\uB4E0 \uB3C4\uAD6C\uB4E4\uC744 \uAE30\uBCF8\uBD80\uD130 \uD65C\uC6A9\uAE4C\uC9C0 \uB9AC\uB4DC\uD558\uB3C4\uB85D \uB9CC\uB4E4\uC5B4\uC84C\uC2B5\uB2C8\uB2E4.\n\n\uB204\uAD6C\uB098 \uC27D\uAC8C \uC6F9 \uD45C\uC900\uC5D0 \uB9DE\uB294 \uD398\uC774\uC9C0\uB97C \uC81C\uC791\uD560 \uC218 \uC788\uB3C4\uB85D \uB3C4\uAD6C\uB4E4\uC758 \uAE30\uBCF8\uBD80\uD130 \uD65C\uC6A9\uAE4C\uC9C0 \uB2E4\uB8E8\uB418, PC\uC640 \uC2A4\uB9C8\uD2B8\uD3F0, \uD0DC\uBE14\uB9BF \uB4F1 \uC0AC\uC6A9\uC790\uC758 \uAE30\uAE30\uC5D0 \uB530\uB77C \uC720\uC5F0\uD558\uAC8C \uAD6C\uD604\uB418\uB294 \uCC28\uC138\uB300 \uC6F9 \uAE30\uC220 \u2018\uBC18\uC751\uD615 \uC6F9\u2019\uC744 \uC18C\uC7AC\uB85C \uD558\uC5EC \uAC00\uC7A5 \uCD5C\uADFC\uC5D0 \uC774\uC288\uD654\uB418\uB294 \uC18C\uC7AC\uB97C \uD1B5\uD558\uC5EC \uC9C1\uC811 \uC6F9 \uD398\uC774\uC9C0\uB97C \uC81C\uC791\uD558\uB294 \uBAA8\uB4E0 \uB3C5\uC790\uBD84\uB4E4\uAED8 \uC2E4\uC81C\uC801\uC778 \uB3C4\uC6C0\uC744 \uC90D\uB2C8\uB2E4.","metaBookIntcGnrl":"HTML5, CSS3, JavaScript, jQuery\uB97C \uD55C \uAD8C\uC73C\uB85C! \uC2E4\uC804 \uD504\uB85C\uC81D\uD2B8\uB97C \uD1B5\uD558\uC5EC \uBC18\uC751\uD615 \uC6F9\uC0AC\uC774\uD2B8\uB97C \uC9C1\uC811 \uAD6C\uD604\uD574 \uBCF8\uB2E4! \uC774 \uCC45\uC740 \u2018\uC6F9 \uD45C\uC900\uC774\uB77C\uB294 \uC57D\uC18D\u2019\uC5D0 \uB300\uD55C \uC774\uC57C\uAE30\uB97C \uBC14\uD0D5\uC73C\uB85C, \uB204\uAD6C\uB098 \uC27D\uAC8C \uB2E8\uACC4\uC801\uC73C\uB85C \uB530\uB77C\uAC08 \uC218 \uC788\uB3C4\uB85D HTML5, CSS3, Javascript\uC640 jQuery\uAE4C\uC9C0 \uD45C\uC900\uD615 \uC6F9 \uC81C\uC791\uC744 \uC704\uD55C \uBAA8\uB4E0 \uB3C4\uAD6C\uB4E4\uC744 \uAE30\uBCF8\uBD80\uD130 \uD65C\uC6A9\uAE4C\uC9C0 \uB9AC\uB4DC\uD558\uB3C4...","bookIntcSmplcy":null,"bookIntcDtl":null,"bookIntcVdinLinkUrladrs":null,"bookIntcDtlImgLinkUrladrs":null,"prfcCntt":null,"bkrvYsno":"Y","bkrvCntt":"HTML5\uC640 CSS3\uC5D0 \uB300\uD55C \uC9C0\uC2DD\uC774 \uC788\uB2E4\uBA74 \uAC04\uB2E8\uD55C \uBC18\uC751\uD615 \uC6F9\uD398\uC774\uC9C0\uB97C \uC81C\uC791\uD558\uB294 \uC77C\uC740 \uADF8\uB9AC \uC5B4\uB824\uC6B4 \uC77C\uC740 \uC544\uB2C8\uC9C0\uB9CC \uC2E4\uC81C \uB2E4\uC591\uD55C \uB514\uBC14\uC774\uC2A4\uC640 \uB514\uC2A4\uD50C\uB808\uC774 \uD658\uACBD\uC744 \uACE0\uB824\uD55C \uBC18\uC751\uD615 \uC6F9\uC744 \uAD6C\uD604\uD558\uB294 \uAC83\uC740 \uACB0\uCF54 \uC26C\uC6B4 \uC77C\uB9CC\uC740 \uC544\uB2D0 \uAC83\uC785\uB2C8\uB2E4. \uC774\uAC83\uC740 \uC544\uB9C8\uB3C4 \uBC18\uC751\uD615 \uC6F9\uC5D0 \uB300\uD55C \uC774\uB860\uC801\uC778 \uC9C0\uC2DD\uB9CC\uC73C\uB85C\uB294 \uD574\uACB0\uD558\uAE30 \uD798\uB4E0 \uBD80\uBD84\uC774\uAE30 \uC788\uC5B4\uC11C\uAC00 \uC544\uB2D0\uAE4C \uC0DD\uAC01\uD569\uB2C8\uB2E4. \uBC18\uC751\uD615 \uC6F9 \uC81C\uC791\uC5D0 \uD544\uC694\uD55C \uC774\uB860\uC801\uC778 \uC815\uBCF4\uB4E4\uC740 \uC27D\uAC8C \uCC3E\uC544\uBCFC \uC218 \uC788\uC9C0\uB9CC \uC774\uB860\uC744 \uD65C\uC6A9\uD55C \uC2E4\uC81C \uBC18\uC751\uD615 \uC6F9\uD37C\uBE14\uB9AC\uC2F1\uC5D0 \uB300\uD55C \uC815\uBCF4\uB294 \uCC3E\uC544\uBCF4\uAE30 \uD798\uB4E0 \uAC83\uC774 \uD604\uC2E4\uC785\uB2C8\uB2E4.\n\n\uC774 \uCC45\uC740 \uAF2D \uBC18\uC751\uD615 \uC6F9\uC774 \uC544\uB2C8\uB354\uB77C\uB3C4 \uC6F9\uD37C\uBE14\uB9AC\uC2F1\uC5D0 \uAD00\uC2EC\uC774 \uC788\uB294 \uC785\uBB38\uC790\uB098 \uB370\uC2A4\uD06C\uD0D1 PC, \uBAA8\uBC14\uC77C \uC6F9\uD398\uC774\uC9C0\uC5D0 \uB300\uD55C \uC81C\uC791 \uACBD\uD5D8\uC740 \uC788\uC73C\uB098 \uBC18\uC751\uD615 \uC6F9 \uC81C\uC791\uC5D0 \uC5B4\uB824\uC6C0\uC744 \uACAA\uACE0 \uC788\uB294 \uBD84\uB4E4\uC5D0\uAC8C \uB3C4\uC6C0\uC774 \uB420 \uAC83\uC774\uB77C \uC0DD\uAC01\uD569\uB2C8\uB2E4. \uC6F9\uD37C\uBE14\uB9AC\uC2F1 \uBD84\uC57C\uC5D0 \uC785\uBB38\uD558\uB294 \uBD84\uB4E4\uC5D0\uAC8C\uB294 \uC6F9\uD37C\uBE14\uB9AC\uC2F1\uC758 \uD544\uC218 \uAE30\uC220\uC778 HTML5, CSS3, Javascript, jQuery\uC5D0\uC11C \uAF2D \uC54C\uACE0 \uC788\uC5B4\uC57C \uD558\uB294 \uB0B4\uC6A9\uB4E4\uC744 \uAC01 \uC139\uC158\uBCC4\uB85C \uC815\uB9AC\uD574 \uB193\uC558\uC73C\uBA70 \uD2B9\uD788, \uB9C8\uC9C0\uB9C9 \uC139\uC158\uC778 \uBC18\uC751\uD615 \uC6F9 \uD504\uB85C\uC81D\uD2B8\uC5D0\uC11C\uB294 \uBC18\uC751\uD615 \uC6F9 \uC608\uC81C\uB97C \uD1B5\uD558\uC5EC \uB2E8\uC21C\uD788 \uC608\uC81C\uB97C \uB530\uB77C\uD574 \uBCF4\uB294 \uAC83\uC5D0 \uADF8\uCE58\uB294 \uAC83\uC774 \uC544\uB2C8\uB77C HTML5, CSS3, Javascript, jQuery \uAE30\uC220\uC744 \uD65C\uC6A9\uD558\uC5EC \uBC18\uC751\uD615 \uBA54\uC778\uD398\uC774\uC9C0\uC640 \uD68C\uC6D0\uAC00\uC785, \uAC8C\uC2DC\uD310 \uB4F1 \uB2E4\uC591\uD55C \uC11C\uBE0C\uD398\uC774\uC9C0\uB4E4\uC744 \uC5B4\uB5A4 \uBC29\uBC95\uC73C\uB85C \uD37C\uBE14\uB9AC\uC2F1 \uD574\uC57C \uB418\uB294\uC9C0\uC5D0 \uB300\uD574 \uCDA9\uBD84\uD788 \uACBD\uD5D8\uD574 \uBCFC \uC218 \uC788\uB3C4\uB85D \uAD6C\uC131\uD558\uC600\uC2B5\uB2C8\uB2E4.","ctntYsno":"Y","ctntCntt":"\uBA38\uB9AC\uB9D0\n\uC2E4\uC2B5\uC5D0 \uD544\uC694\uD55C \uAE30\uBCF8 \uD504\uB85C\uADF8\uB7A8 \uC548\uB0B4\n\uBC18\uC751\uD615 \uD504\uB85C\uC81D\uD2B8 \uBBF8\uB9AC\uBCF4\uAE30\n\nCHAPTER 1 HTML5\n1.1 HTML5 \uAE30\uBCF8 \uBB38\uC11C\n\t01 HTML5 \uAE30\uBCF8 \uAD6C\uC131\n\t02 W3C validator\n\t03 \uB9C8\uD06C\uC5C5 \uAE30\uBCF8 \uBB38\uBC95 \uADDC\uCE59\n1.2 \uC2DC\uBA58\uD2F1 \uB9C8\uD06C\uC5C5\uACFC \uB17C\uB9AC\uC801\uC778 \uC21C\uC11C \uB9C8\uD06C\uC5C5\n\t01 \uC2DC\uBA58\uD2F1 \uB9C8\uD06C\uC5C5(Semantic markup)\n\t02 \uB17C\uB9AC\uC801 \uC21C\uC11C \uB9C8\uD06C\uC5C5(Logical sequence markup)\n1.3 \uBE14\uB85D \uB808\uBCA8 \uC694\uC18C\uC640 \uC778\uB77C\uC778\uC694\uC18C\n\t01 \uBE14\uB85D \uB808\uBCA8 \uC694\uC18C(Block-level Elements)\n\t02 \uC778\uB77C\uC778 \uC694\uC18C(inline Element)\n\t03 \uBE14\uB85D \uB808\uBCA8 \uC694\uC18C\uC640 \uC778\uB77C\uC778 \uC694\uC18C\uC758 \uD2B9\uC131\n1.4 \uAE30\uBCF8 \uC694\uC18C\n\t01 \uC81C\uBAA9 <h1>~<h6>\n\t02 \uBB38\uB2E8 <p>\n\t03 \uC8FC\uC18C <address>\n\t04 \uB9C1\uD06C <a>\n\t05 \uC774\uBBF8\uC9C0 <img>\n1.5 \uD14D\uC2A4\uD2B8 \uAD00\uB828 \uC694\uC18C\n\t01 <em>,<strong>,<mark>,<b>,<small>,<sub>,<sup>\n1.6 \uBAA9\uB85D \uAD00\uB828 \uC694\uC18C\n\t01 \uC21C\uC11C \uBAA9\uB85D <ol>\n\t02 \uBE44\uC21C\uC11C \uBAA9\uB85D <ul>\n\t03 \uC124\uBA85 \uBAA9\uB85D <dl>\n1.7 \uD45C \uAD00\uB828 \uC694\uC18C \uBC0F \uC18D\uC131\n\t01 \uD45C \uC0DD\uC131 <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <colgroup>\n\t02 \uC140 \uD569\uCE58\uAE30 colspan \uC18D\uC131, rowspan \uC18D\uC131\n\t03 \uD45C \uC811\uADFC\uC131 <caption>, scope \uC18D\uC131\n1.8 \uD3FC \uAD00\uB828 \uC694\uC18C \uBC0F \uC8FC\uC694 \uC18D\uC131\n\t01 \uD3FC <form>, <fieldset>\n\t02 \uD55C\uC904 \uC785\uB825 \uC694\uC18C <input>, type \uC18D\uC131\n\t03 \uC5EC\uB7EC \uC904 \uC785\uB825 \uC694\uC18C, \uC120\uD0DD \uC694\uC18C <textarea>, <select>\n\t04 \uD3FC \uC811\uADFC\uC131 label \uC18D\uC131\n\t05 \uC8FC\uC694 \uC785\uB825 \uC18D\uC131\n1.9 \uADF8\uB8F9 \uC694\uC18C\n\t01 <div>\n\t02 <span>\n1.10 \uAD6C\uC870 \uAD00\uB828 \uC694\uC18C\n\t01 <header>, <section>, <footer>, <nav>, <article>, <aside>\n1.11 \uBBF8\uB514\uC5B4 \uC694\uC18C\n\t01 <audio>\n\t02 <video>\n\nCHAPTER 2 CSS (CSS5)\n2.1 CSS \uAE30\uBCF8 \uBB38\uBC95\n\t01 \uB0B4\uBD80 \uC2A4\uD0C0\uC77C\uC2DC\uD2B8\n\t02 \uC678\uBD80 \uC2A4\uD0C0\uC77C\uC2DC\uD2B8\n\t03 @import\n\t04 \uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C(inline style)\n2.2 \uC120\uD0DD\uC790(selector)\n\t01 type \uC120\uD0DD\uC790\n\t02 id \uC120\uD0DD\uC790\n\t03 class \uC120\uD0DD\uC790\n\t04 \uC804\uCCB4 \uC120\uD0DD\uC790\n\t05 \uD558\uC704 \uC120\uD0DD\uC790\n\t06 \uC790\uC2DD \uC120\uD0DD\uC790\n\t07 \uC778\uC811 \uC120\uD0DD\uC790\n\t08 \uD615\uC81C \uC120\uD0DD\uC790\n\t09 \uADF8\uB8F9 \uC120\uD0DD\uC790\n\t10 \uC18D\uC131 \uC120\uD0DD\uC790\n\t11 \uAC00\uC0C1\uD074\uB798\uC2A4 \uC120\uD0DD\uC790\n\t12 \uAC00\uC0C1\uC694\uC18C \uC120\uD0DD\uC790\n\t13 \uC885\uC18D \uC120\uD0DD\uC790\n\t14 \uC120\uD0DD\uC790\uC758 \uC6B0\uC120\uC21C\uC704\n2.3 \uBB38\uC790 \uAD00\uB828 \uC2A4\uD0C0\uC77C\n\t01 font-family\n\t02 font-size, \uB2E8\uC704\uC758 \uACE0\uCC30\n\t03 font-weight\n\t04 font-style\n\t05 font-variant\n\t06 line-height\n\t07 font\n\t08 \uC6F9\uD3F0\uD2B8\n\t09 color, \uC0C9\uC0C1 \uCF54\uB4DC \uACE0\uCC30\n\t10 letter-spacing, word-spacing\n\t11 text-decoration\n\t12 text-transform\n\t13 text-shadow\n2.4 \uBB38\uB2E8(paragraph) \uAD00\uB828 \uC2A4\uD0C0\uC77C\n\t01 text-align\n\t02 vertical-align\n\t03 text-indent\n\t04 word-wrap\n\t05 word-break\n\t06 white-space\n\t07 text-overflow\n\t08 display\n\t09 visibility\n\t10 overflow\n\t11 opacity\n2.5 \uBC30\uACBD(background)\n\t01 background-color\n\t02 background-image\n\t03 background-repeat\n\t04 background-position\n\t05 background-attachment\n\t06 background-size\n\t07 background-origin\n\t08 background-clip\n\t09 Image Sprite\n\t10 \uBC30\uACBD\uC5D0 gradient \uC801\uC6A9\uD558\uAE30\n\t11 multiple background\n2.6 BOX MODEL\n\t01 width, height\n\t02 padding\n\t03 margin\n\t","thwr":null,"scmtrCntt":null,"srisCmdtYsno":null,"wbvwYsno":"Y","pageScrlYsno":"N","pageDrctnCode":"001","ttsYsno":"Y","nbopCount":19,"dgctCmdtPatrCode":"002","dgctLaterCont":null,"dgctLaterContTxt":null,"psssSaleCmdtid":null,"rentSaleCmdtid":null,"samSaleCmdtid":null,"psssCpn":{"cpnId":"7700193951","mktgvcIssuMagentCode":"002","cpnKindPatrCode":"001","cpnKindCode":"001","cpnName":"\uBC18\uC751\uD615 \uC6F9 \uC2E4\uC804 \uD504\uB85C\uC81D\uD2B8 \uAC00\uC774\uB4DC[10% \uD560\uC778\uCFE0\uD3F0]","cpnDscr":"\uBC18\uC751\uD615 \uC6F9 \uC2E4\uC804 \uD504\uB85C\uC81D\uD2B8 \uAC00\uC774\uB4DC[10% \uD560\uC778\uCFE0\uD3F0]","cpnAplCndtDvsnCode":"001","cpnDscnFxamtFxrtDvsnCode":"002","dscnRate":10,"mxmmDscnAmnt":0,"cpnDscnAmnt":0,"cpnIsncPsblYsno":"Y","cpnIsncPrdSttgDttm":"20191219000000","cpnIsncPrdEndDttm":"29991230235959","vldtPrdDvsnCode":"002","vldtPrdDyCont":null,"vldtPrdSttgDttm":"20191219000000","vldtPrdEndDttm":"29991230235959","cpnRcptLmttQntt":0,"cpnIsncLmttQntt":0,"cpnUseLmttQntt":0,"cpnUseStnrOrdrAmnt":null,"cpnUseStnrOrdrQntt":null,"saleCmdtid":"E000002975736","dgctSaleFrDvsnCode":"001","saleCmdtDvsnCode":"EBK","mmbrIsncPsblYsno":null,"unsdCpnQntt":0},"rentCpn":{},"psssCpnSapr":"21600","rentCpnSapr":null,"rentCpnDscnRate":null}, 'psss')"><span class="text">구매하기</span></button>

</div>













</div>




</div>

</div>

</section>
</main>

<footer class="footer_wrapper"
data-kbbfn="ui-module"
data-kbbfn-name="footer-notice"
>

<div class="footer_header default">

<div class="footer_inner">
<div class="notice_wrap">
<span class="notice_text">공지사항</span>
</div>
<div class="notice_wrap winner">
<span class="notice_text">당첨자발표</span>
</div>
</div>
</div>

<div class="footer_body">
<div class="footer_inner">
<div class="logo_box">


<div class="logo_box">
<a href="https://www.kyobobook.co.kr/" class="logo_link ebook"
>

<img alt="KYOBO 교보문고" srcset="
https://contents.kyobobook.co.kr/resources/dig-fo/images/common/ink/img_logo_kyobo_footer.png 1x,
https://contents.kyobobook.co.kr/resources/dig-fo/images/common/ink/img_logo_kyobo_footer@1.5x.png 1.5x,
https://contents.kyobobook.co.kr/resources/dig-fo/images/common/ink/img_logo_kyobo_footer@2x.png 2x"
/>

</a>

</div>

<div class="footer_body_right">

<div class="family_site_box">

<button type="button" class="btn_family_site"><span class="text">Family Site</span></button>
<ul class="family_site_list">

<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kyobo.com">교보생명</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.iprovest.com">교보증권</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kyobodts.co.kr">교보DTS</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kyoborealco.co.kr">교보리얼코</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kyoboaxa-im.co.kr">교보악사자산운용</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.lifeplanet.co.kr">교보라이프플래닛생명</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kcasonsa.co.kr">KCA 손해사정</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kcase.co.kr">KCA 서비스</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kyobotrust.co.kr">교보자산신탁주식회사</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.daesan.or.kr">대산문화재단</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.kbedu.or.kr">교보교육재단</a>
</li>
<li class="family_site_item">

<a class="family_site_link" target="_blank" href="https://www.dsa.or.kr">대산농촌재단</a>
</li>

</ul>

</div>

<div class="sns_share_box">

<a class="btn_sns_share fb" target="_blank"
href="https://www.facebook.com/kyoboeBook"
><span class="hidden">facebook 공유</span></a>

<a class="btn_sns_share insta" target="_blank"
href="https://www.instagram.com/kyobo_ebook/"
><span class="hidden">instagram 공유</span></a>

<a class="btn_sns_share twitter" target="_blank"
href="https://twitter.com/kyobo_comix"
><span class="hidden">twitter 공유</span></a>

<a class="btn_sns_share blog" target="_blank"
href="https://blog.naver.com/ebookpanda"
><span class="hidden">blog 공유</span></a>

</div>

</div>
</div>
<div class="footer_contents_wrap">
<div class="footer_contents_left">

<div class="footer_menu_box">

<ul class="footer_menu_list">

<li class="footer_menu_item"
>
<a class="footer_menu_link"
target="_blank"
href="https://company.kyobobook.co.kr/ims/user/Intro/r/go?param=intro"
>회사소개</a>
</li>

<li class="footer_menu_item"
>
<a class="footer_menu_link"
href="https://www.kyobobook.co.kr/contents/provision"
>이용약관</a>
</li>

<li class="footer_menu_item privacy"
>
<a class="footer_menu_link"
href="https://www.kyobobook.co.kr/contents/privacy-policy"
>개인정보처리방침</a>
</li>

<li class="footer_menu_item"
>
<a class="footer_menu_link"
href="https://www.kyobobook.co.kr/contents/youth-policy"
>청소년보호정책</a>
</li>

<li class="footer_menu_item"
>
<a class="footer_menu_link"
href="https://big.kyobobook.co.kr"
>대량주문안내</a>
</li>

<li class="footer_menu_item"
>
<a class="footer_menu_link"
href="https://www.kyobobook.co.kr/partners/chargeperson"
>협력사여러분</a>
</li>

<li class="footer_menu_item"
>
<a class="footer_menu_link"
target="_blank"
href="https://ehr.kyobobook.co.kr/recr/recruit_system_1.jsp"
>채용정보</a>
</li>

<li class="footer_menu_item"
>
<a class="footer_menu_link"
target="_blank"
href="https://ad.kyobobook.co.kr"
>광고소개</a>
</li>

</ul>

</div>

<address class="footer_info_box">

<span class="info_text">대표이사 : 안병현, 김상훈</span>
<span class="gap">|</span>
<span class="info_text">서울특별시 종로구 종로 1</span>
<span class="gap">|</span>

<span class="info_text">사업자등록번호 : 102-81-11670</span> <br/>
<span class="info_text call">대표전화 : 1544-1900(발신자 부담전화)</span>

<span class="gap">|</span>
<span class="info_text">FAX : 0502-987-5711(지역번호 공통)</span>
<span class="gap">|</span>
<span class="info_text">서울특별시 통신판매업신고번호 : 제 653호</span>

<a href="http://www.ftc.go.kr/info/bizinfo/communicationViewPopup.jsp?wrkr_no=1028111670" class="btn_footer_link"
target="_blank">사업자정보확인</a>

</address>
<div class="copyright">

<span>© KYOBO BOOK CENTRE</span>
</div>
</div>
<div class="footer_contents_right">
<div class="footer_service">
<span class="service_text">토스페이먼츠 구매안전서비스 </span>
<a href="https://pgweb.tosspayments.com/ms/escrow/s_escrowYn.do?mertid=ink0911" class="btn_footer_link"
target="_blank">서비스 가입 확인</a>
<p class="service_desc">
고객님은 안전거래를 위해 현금 등으로 결제시 저희 쇼핑몰에서 가입한 <br/>
토스페이먼츠의 구매안전서비스를 이용하실 수 있습니다.
</p>
</div>
<div class="footer_mark_isms">
<a target="_blank" href="https://www.kyobobook.co.kr/pop_isms" class="mark_link">
정보보호관리체계<br />
ISMS 인증획득
</a>

<p class="mark_desc">
[인증범위] 인터넷 교보문고 및 브랜드 서비스 운영<br />
[유효기간] 2023.11.15 ~ 2026.11.14
</p>
</div>

</div>
</div>
</div>
</div>
</footer>


<section class="fly_menu_wrapper sps">
<div class="fly_menu_inner">
<a href="javascript:void(0)" class="fly_menu_banner"><img></a>

<div class="fly_event_area">
<a href="javascript:void(0)" class="fly_menu_link">이벤트</a>
<div class="fly_event_banner">
<div class="swiper-container">
<ul class="swiper-wrapper">

</ul>
</div>
<div class="swiper_control_box">
<button type="button" class="swiper-button-prev"><span class="hidden">이전</span></button>
<div class="swiper-pagination"></div>
<button type="button" class="swiper-button-next"><span class="hidden">다음</span></button>
</div>
</div>
</div>

<div class="fly_link_box">
<a id="wing_coupon" href="javascript:void(0)" class="fly_menu_link">쿠폰/혜택</a>
<a id="wing_special" href="javascript:void(0)" class="fly_menu_link">sam 이란?</a>
</div>
</div>

</section>



<section id="contents" class="contents_wrap">
<div class="contents_inner">
<div id="etcPopFirst" class="dialog_wrap no_title_line has_btn">
<button type="button" class="btn_dialog_close" data-dialog-close><span class="ico_dialog_close"></span><span class="hidden">닫기</span></button>

<div class="dialog_header">
<div class="dialog_title hidden">교보eBook 첫 방문을 환영 합니다!</div>
</div>
<div class="dialog_contents" oncontextmenu="return false" ondragstart="return false">
<div class="pop_etc_visit">
<strong>교보eBook 첫 방문을 환영 합니다!</strong>
<p class="sub_tit">신규가입 혜택 지급이 완료 되었습니다.</p>
<p class="sub_desc">바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)<br />
지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!</p>
<div class="img">
<img src="https://contents.kyobobook.co.kr/resources/dig-fo/dig/images/ink/etc/img_eCash@2x.png" alt="교보e캐시 1,000원" />
</div>
</div>
</div>

<div class="dialog_footer">
<a href="https://ebook.kyobobook.co.kr/dig/etc/ebookgdnc" class="btn_md btn_light_gray">이용안내</a>
<a href="https://ebook.kyobobook.co.kr/dig/sam/samcnfg?tabType=SAM" class="btn_md btn_light_gray">sam이란?</a>
<a href="https://ecash.kyobobook.co.kr/dig/opr/ecash/general" class="btn_md btn_primary">교보e캐시</a>
</div>

</div>
</div>
</section>


<div class="floating_wrapper">

<button type="button" class="btn_history no-item" data-role="btn-dialog" data-target="#popHistoryContents" data-kbbfn="ui-recently-contents">
<span data-tag-index="floatingmenu" class="img_box">
<img src="https://contents.kyobobook.co.kr/resources/dig-fo/dig/images/ink/common/ico_view_history@2x.png" alt="최근 본 컨텐츠 임시 이미지">
</span>
<span class="hidden">최근 본 컨텐츠 모두보기</span>
<span class="count none">3</span>
</button>


<a href="#top" class="btn_go_top" title="최상위 화면으로">

<span>TOP</span>

</a>


</div>

</div>




<div id="popNewAlarm" class="dialog_wrap has_btn" data-class="dialog_sm">
<button type="button" class="btn_dialog_close" data-dialog-close><span class="ico_dialog_close"></span><span class="hidden">닫기</span></button>

<div class="dialog_header">
<div class="dialog_title">신간 알림 안내</div>
</div>


<div class="dialog_contents">
<div class="custom_scroll_wrap">
<div class="alarm_cont">




<strong>반응형 웹 실전 프로젝트 가이드</strong>
<span>웹툰 신간 알림이 신청되었습니다.</span>

</div>
</div>
</div>


<div class="dialog_footer">
<button type="button" class="btn_md btn_light_gray" onclick="KbbJS.plugins.uiServiceEpdDetail.goProductDtl3NwpbNoti()"><span class="text">알림 설정/확인</span></button>
<button type="button" class="btn_md btn_primary" data-dialog-close><span class="text">확인</span></button>
</div>

</div>



<div id="popNewAlarmCncl" class="dialog_wrap has_btn" data-class="dialog_sm">
<button type="button" class="btn_dialog_close" data-dialog-close><span class="ico_dialog_close"></span><span class="hidden">닫기</span></button>

<div class="dialog_header">
<div class="dialog_title">신간 알림 안내</div>
</div>


<div class="dialog_contents">
<div class="custom_scroll_wrap">
<div class="alarm_cont">




<strong>반응형 웹 실전 프로젝트 가이드</strong>
<span>웹툰 신간 알림이 취소되었습니다.</span>

</div>
</div>
</div>


<div class="dialog_footer">
<button type="button" class="btn_md btn_light_gray" onclick="KbbJS.plugins.uiServiceEpdDetail.goProductDtl3NwpbNoti()"><span class="text">알림 설정/확인</span></button>
<button type="button" class="btn_md btn_primary" data-dialog-close><span class="text">확인</span></button>
</div>

</div>












<div id="popProductReview" class="dialog_wrap has_btn dialog_review_write">
<button type="button" class="btn_dialog_close" onclick="KbbJS.plugins.uiServiceEpdDetail.review.reviewWrite.dialogClose();"><span class="ico_dialog_close"></span><span class="hidden">닫기</span></button>

<div class="dialog_header">
<div class="dialog_title">리뷰작성</div>
</div>


<div class="dialog_contents">
<div class="custom_scroll_wrap">
<div class="thumbnail_round_box">
<div class="prod_area horizontal">
<div class="prod_thumb_box size_xs">
<div class="prod_link">
<span class="img_box">
<img src="https://contents.kyobobook.co.kr/sih/fit-in/800x1146/pdt/9791186886908.jpg" loading="lazy"/>
</span>
</div>
</div>
<div class="prod_info_box size_xs">
<a href="javascript:void(0)" class="prod_info">
<span class="prod_name">반응형 웹 실전 프로젝트 가이드</span>
</a>
<div class="epis_seled hidden"></div>
<input id="kloverRate" type="number" class="form_rating" title="평가점수 선택" data-caption data-size="lg" />
</div>






</div>
</div>
<div class="info_text_box">
<ul class="bul_list">
<li class="bul_item_dot font_size_xxs">구매 후 90일 이내 작성 시, <span class="fc_black">e교환권 100원</span> (최초1회)</li>
<li class="bul_item_dot font_size_xxs">리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고</li>
<li class="bul_item_dot font_size_xxs">콘텐츠 다운로드 또는 바로보기 완료 후 리뷰 작성 시 익일 제공</li>
</ul>
</div>

<div class="form_wrap type_md">

<div class="form_box">
<div class="form_title">
<span class="form_label">감성 태그</span>
<p class="info_text font_size_xxs">가장 와 닿는 하나의 키워드를 선택해주세요.</p>
</div>
<div class="form_cont">
<div class="tag_wrap size_lg" data-tag-toggle>


<button type="button" class="tag" data-code="001"><span class="text">집중돼요</span></button>

<button type="button" class="tag" data-code="002"><span class="text">도움돼요</span></button>

<button type="button" class="tag" data-code="003"><span class="text">쉬웠어요</span></button>

<button type="button" class="tag" data-code="004"><span class="text">최고예요</span></button>

<button type="button" class="tag" data-code="005"><span class="text">추천해요</span></button>

</div>
</div>
</div>


<div class="form_box">
<div class="form_title">
<label for="textReview" class="form_label">리뷰 작성</label>
</div>
<div class="form_cont">

<div class="byte_check_wrap">
<textarea id="textReview" class="form_textarea" title="타이틀 입력" placeholder="10자 이상 입력해주세요. 주제와 무관한 댓글, 악플, 배송문의 등의 글은 임의 삭제될 수 있습니다." style="height: 70px;">

0
1000

이 리뷰는 스포일러 내용이 포함되어 있습니다.

사진 첨부(선택)
0 / 5

첨부파일 추가

총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.

신고/차단

신고 사유를 선택해주세요.
신고 내용은 이용약관 및 정책에 의해 처리됩니다.

비방, 명예훼손, 욕설, 혐오발언

홍보, 영리목적

음란, 유해, 불법정보

도서와 무관한 내용

도배 및 내용이 없는 리뷰

기타

0
300

허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
있으니 유의하시어 신중하게 신고해주세요.

이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.

문장수집 작성

반응형 웹 실전 프로젝트 가이드

구매 후 90일 이내 작성 시, e교환권 100원 적립
eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.

문장수집 작성

0
300

발췌 페이지 (선택)

P.

반응형 웹 실전 프로젝트 가이드

HTML5 CSS3 자바스크립트 제이쿼리를 한 권으로

저자 모두보기

저자(글)

김광수

조혜경

낭독자 모두보기

sam 이용권 선택

님이 보유하신 이용권입니다.

차감하실 sam이용권을 선택하세요.

sam 이용권 선택

님이 보유하신 이용권입니다.

차감하실 sam이용권을 선택하세요.

sam 이용권 선택

님이 보유하신 프리미엄 이용권입니다.

선물하실 sam이용권을 선택하세요.

결제완료

e캐시 원 결제

계속 하시겠습니까?

교보 e캐시 간편 결제

sam 열람권 선물하기

보유 권수 / 선물할 권수
0권 / 1권

받는사람 이름

받는사람 휴대전화

구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
열람권은 1인당 1권씩 선물 가능합니다.
선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
선물한 열람권의 등록유효기간은 14일 입니다.

(상대방이 기한내에 등록하지 않을 경우 소멸됩니다.)
무제한 이용권일 경우 열람권 선물이 불가합니다.

이 상품의 총서 전체보기

네이버 책을 통해서 교보eBook 첫 구매 시
교보e캐시 지급해 드립니다.

네이버 책을 통해서 교보eBook 첫 구매 시

교보e캐시 지급해 드립니다.

첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
한 ID당 최초 1회 지급 / sam 이용권 제외
네이버 책을 통해 교보eBook 구매 이력이 없는 회원 대상
교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)

sam이란?
교보e캐시

오늘 하루 이 창 그만보기

구글바이액션을 통해서 교보eBook
첫 구매 시 교보e캐시 지급해 드립니다.

구글바이액션을 통해서 교보eBook

첫 구매 시 교보e캐시 지급해 드립니다.

첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
한 ID당 최초 1회 지급 / sam 이용권 제외
구글바이액션을 통해 교보eBook 구매 이력이 없는 회원 대상
교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)

sam이란?
교보e캐시

오늘 하루 이 창 그만보기}}