국내도서

>

컴퓨터/인터넷

>

컴퓨터 활용/WEB

>

웹/홈페이지

>

HTML/CSS/Javascript

• 
• 제휴몰 주문 시 고객보상, 일부 이벤트 참여 및 증정품 증정, 하루/당일 배송에서 제외되므로 참고 바랍니다.

• 
• 도서  > 컴퓨터/인터넷  > 컴퓨터 활용/WEB  > 웹/홈페이지  > HTML/CSS/Javascript

• 
• 
• 어렵고 지루한 설명은 그만! 사용도가 높은 HTML 태그와 CSS 속성을 짧고 쉽게 설명한 책! 웹 디자이너로 실무를 진행하던 저자는 퍼블리싱 업무를 진행하게 되면서 부딪힌 궁금증과 시행착오를 해결하기 위해 많은 책과 씨름했다. 하지만 어려운 용어와 내용으로 가득한 사전 같은 책은 보기에도 불편하고 과한 정보로 인해 지면 낭비인 경우가 많았으며 여기저기 서치해 찾아낸 자료도 하나를 해결하면 또 다른 질문이 생겨 진일보하지 못하는 상황이었다. 20여 년간 실무에 있으면서 많은 어려움을 스스로 해결해온 저자는 활용도 높은 책의 필요성을 절감해 경험과 연륜을 모아 이 책을 집필했다. 이 책은 개념과 용도를 설명하고 바로 이어 실습을 따라 해 기능을 익히게 했고, 색과 타이포그래피, 레이아웃 등 디자인에 필요한 내용을 다루어 감각적인 디자인도 가능하게 했다. 코딩 작업의 가독성을 높이는 설정을 하고 수시로 크롬 브라우저로 미리 보기 하니 작업능률도 높다. 기능을 모두 익히고 나면 실제로 웹사이트를 만들면서 실력을 발휘해보자! 천천히 따라 하면 누구든 원하는 웹 사이트를 만들 수 있을 것이다.
• 
• 웹 표준을 위한 HTML5, CSS3로 웹 기본기 완성!! 웹브라우저는 사용자에게 최고의 경험을 제공하기 위해 새로운 기술과 기능을 제공한다. 하지만 다양한 웹브라우저는 서로 다른 렌더링 엔진을 사용하고 기본 설정이 다르기 때문에 웹 페이지를 표시하는 방식이 다르다. 그래서 이 책은 브라우저의 종류와 버전에 관계없이 웹 페이지 표시가 최대한 동일하게 보이고 웹 표준을 준수하는 학습을 하도록 했다. 시대가 변하는 속도에 따라 웹 개발 분야도 빠르게 변화하고 있다. 하지만 HTML과 CSS 기본은 변하지 않는다. 웹에 막 입문한 독자라도 책이 안내하는 대로 HTML 태그와 CSS 속성과 속성값 등의 개념을 알아보고 다양한 실습을 통해 소스를 작성하다 보면 기본기를 탄탄하게 쌓을 수 있다.
• 
• CHAPTER 01 HTML과 CSS 준비하기 01. HTML, CSS 개념 알기 | 01 | 웹브라우저(Web browser) 02. 뭘 준비하죠? ？웹브라우저의 종류와 점유율 ？크롬(Chrome) 브라우저 설치하기 ？개발자 도구 실습 _ 웹사이트 [+더보기]에서 HTML 요소와 CSS 속성과 속성값 알아보기 실습 _ [개발자 도구]로 색과 내용 수정해보기 | 01 | 편집기(Editors) 실습 _ 비주얼 스튜디오 코드 파일 다운로드하기 실습 _ 비주얼 스튜디오 코드 설치하기 ？비주얼 스튜디오 코드의 인터페이스 알아보기 ？편리한 확장 기능 사용하기 실습 _ 영문 메뉴를 한글로 교체하기 실습 _ HTML 파일을 실시간 미리 보기 ？코딩 속도를 높이는 기능 설정하기 CHAPTER 02 HTML 페이지 만들기 01. 태그(tag)가 뭐죠? 02. 요소(elements)가 뭐죠? 03. HTML 문서의 기본 구성 실습 _ [자동 완성] 기능을 이용해 HTML 구조 알아보기 04. 속성(Attributes) | 01 | href 속성 | 02 | target 속성 | 03 | src 속성 | 04 | alt 속성 05. 요소(elements)의 특징 | 01 | Block level 요소(elements) | 02 | Inline 요소(elements) 06. 텍스트(Text) 요소(elements) | 01 | 〈h1〉~〈h6〉 제목 ...태그(tags) | 02 | 문단 〈p〉 태그 | 03 | 줄 바꿈 〈br〉 태그 | 04 | 특수코드 문자(entity) | 05 | 문자 강조 태그 | 06 | 주석(comment) 실습 _ HTML 문서 만들기 07. 이미지(Images) 태그와 속성 | 01 | 〈img, src, alt〉를 이용하여？이미지 삽입하기 | 02 | 이미지 파일 경로(file paths) | 03 | HTML에서 사용할 수 있는 이미지 파일 형식 실습 _ 이미지 삽입하기 08. 하이퍼링크(Hyperlinks) | 01 | 이미지에 링크 적용하기 | 02 | 텍스트에 링크 적용하기 | 03 | 이메일에 링크 적용하기 | 04 | 주소(URL) 입력하기 실습 _ 이미지를 클릭해 새로운 탭(페이지)으로 열기 실습 _ 텍스트를 클릭해 새로운 탭(페이지)으로 열기 09. 목록(List) 태그 | 01 | 순서 없는 목록〈ul li〉 | 02 | 순서 있는 목록 〈ol li〉 실습 _ 순서 없는 목록에 순서 적용하기 10. 표(Table) 태그 실습 _ 3열 3행 표 만들기 11. 폼(Form) 태그 | 01 | 인풋(input) 태그 | 02 | 레이블(label) 태그 실습 _ 아이콘이 있는 검색 폼 만들기 12. 버튼(button) 태그 13. 미디어(Media) 태그 | 01 | 비디오(video) 태그 | 02 | 오디오(audio) 태그 | 03 | 유튜브(youtube) 연결 실습 _ 유튜브 영상을 HTML 페이지에 삽입하기 14. 의미론적인 요소로 구성된 HTML5 페이지？구조 | 01 | 헤더(header) 태그 | 02 | 내비게이션(nav) 태그 | 03 | 섹션(section) 태그 | 04 | 아티클(article) 태그 | 05 | 어사이드(aside) 태그 | 06 | 푸터(footer) 태그 실습 _ 의미론적 HTML 페이지 만들기 CHAPTER 03 CSS로 HTML 페이지 스타일링하기 01. CSS 입력법(Syntax) 02. 선택자(Selectors)의 종류 | 01 | 요소(element) | 02 | 아이디(#) | 02 | 클래스(.) | 03 | 모든(*) | 04 | 그룹(,) | 05 | 자손 선택자(한 칸 띄기) | 06 | 자식？선택자(〉) 03. 가상(pseudo) 클래스 04. HTML 페이지에 CSS 연결하기 | 01 | 외부(External CSS) 스타일 | 02 | 내부(Internal CSS) 스타일 | 03 | 인라인(Inline？CSS) 실습 _ 제목 글자 색 적용하기 05. 폰트(Fonts) | 01 | 패밀리(family) | 02 | 스타일(style) | 03 | 사이즈(size) | 04 | 웨이트(font-weight) | 05 | 구글 웹폰트(Google Web fonts) 실습 _ 구글 웹폰트 적용하기 06. 컬러(color) | 01 | 이름(names) | 02 | 16진수(HEX:Hexadecimal) | 03 | RGB(Red,？Green,？Blue) | 04 | HSL(Hue, Saturation, Lightness) | 05 | 컬러 선택기(Color Picker) 07. 텍스트 스타일링(Text styling) | 01 | 텍스트？정렬(align) | 02 | 데코레이션(decoration) | 03 | 들여쓰기(indent) | 04 | 자간(letter？spacing) | 05 | 단어 간격(word？spacing) | 06 | 행간(line？height) 08. 박스 모델(Box Model) | 01 | 크기(width,？height) | 02 | 테두리 선(border) | 03 | 여백(padding, margin) ？Padding(안쪽 여백) ？Margin(바깥 여백) | 01 | 둥근？모서리(radius) | 02 | box-sizing 09. 레이아웃(Layout) | 03 | float | 04 | clear | 05 | overflow ？이미지와 내용을 2단으로 레이아웃 구성하기 | 01 | display | 02 | position | 03 | flexbox ？부모(container)에서 사용하는 수평축 정렬 속성들 ◇ flex ◇ flex-direction ⑴ flex-direction : column ⑵ flex-direction : column-reverse ⑶ flex-direction : row ⑷ flex-direction : row-reverse ◇ flex-wrap ⑴ flex-wrap : wrap ⑵ flex-wrap : no- wrap ⑶ flex-wrap : wrap-reverse ◇ justfy-contents ⑴ justfy-contents : flex-start ⑵ justfy-contents : flex-end ⑶ justfy-contents : center ⑷ justify-contents : space-between ⑸ justify-contents : space-around ⑹ justify-contents : space-evenly ？부모(container)에서 사용하는 수직축 정렬 속성들 ◇ align-items ⑴ align-items: stretch ⑵ align-items: center ⑶ align-items: flex-start ⑷ align-items: flex-end ⑸ align-items: baseline ◇ align-contents 속성 ⑴ align-content : space-between ⑵ align-content : space-around ⑶ align-content : stretch ⑷ align-content : center ⑸ align-content : flex-start ⑹ align-content : flex-end ？자식(item)에서 사용하는 속성들 ◇ order ◇ flex-grow ◇ flex-shrink ◇ flex-basis ◇ flex ◇ align-self 실습 _ flexbox를 이용하여 HTML5 문서 레이아웃 디자인하기 | 07 | z-index 실습 _ z-index 속성 적용하기 z-index 속성을 활용해 겹침 순서 지정하기 10. 배경(background) | 01 | 배경색(background？color) 적용하기 | 02 | 배경에？이미지(background？image) 넣기 ？background-image ？background-repeat ？background-position ⑴ background-position : 키워드 ⑵ background-position : 좌푯값 ？background-size ⑴ background-size ⑵ background-size 속성의 속성값 비교 : auto, contain, cover | 03 | 불투명도(opacity) CHAPTER 04 실전 예제 웹사이트 만들기 01. 메인 페이지 만들기 | 01 | 메인 페이지 HTML 구성과 공통 CSS 만들기 | 02 | 메인 페이지에 로고와 GNB 만들기 | 03 | 이벤트 배너 배치하기 | 04 | 이미지？수평？정렬？만들기 | 05 | 유튜브 삽입하기 | 06 | 섬네일 갤러리와 뉴스 리스트 만들기 | 07 | footer 만들기 | 08 | 상단으로 이동하는 [top] 버튼 만들기 02. 서브 페이지 만들기 | 01 | 서브 페이지 HTML 구성 | 02 | 브레드크럼(breadcrumb) 만들기 | 03 | 제목과 이미지 수직 정렬 만들기 | 04 | 배경색 위에 섬네일 이미지 수평 정렬 만들기 | 05 | 제목과 이미지 가운데 정렬 만들기 | 06 | GNB 메뉴에 페이지로 이동하는 하이퍼링크 적용하기 | 부록 | 칼퇴족에게 유용한 사이트 모음
• 

• 전체 0개의 구매후기가 있습니다.
• 

인터파크도서는 고객님의 단순 변심에 의한 교환과 반품에 드는 비용은 고객님이 지불케 됩니다. 단, 상품이나 서비스 자체의 하자로 인한 교환 및 반품은 무료로 반품 됩니다. 교환 및 반품이 가능한 경우 상품을 공급 받은 날로부터 7일이내 가능 공급받으신 상품의 내용이 표시, 광고 내용과 다르거나 다르게 이행된 경우에는 공급받은 날로부터 3개월 이내,    혹은 그사실을 알게 된 날 또는 알 수 있었던 날로부터 30일 이내 상품에 아무런 하자가 없는 경우 소비자의 고객변심에 의한 교환은 상품의 포장상태 등이 전혀 손상되지 않은 경우에 한하여 가능 교환 및 반품이 불가능한 경우 구매확정 이후(오픈마켓상품에 한함) 고객님의 책임 있는 사유로 상품 등이 멸실 또는 훼손된 경우    (단, 상품의 내용을 확인하기 위하여 포장 등을 훼손한 경우는 제외) 시간이 지남에 따라 재판매가 곤란할 정도로 물품의 가치가 떨어진 경우 포장 개봉되어 상품 가치가 훼손된 경우 다배송지의 경우 반품 환불 다배송지의 경우 다른 지역의 반품을 동시에 진행할 수 없습니다. 1개 지역의 반품이 완료된 후 다른 지역 반품을 진행할 수 있으므로, 이점 양해해 주시기 바랍니다. 중고상품의 교환 중고상품은 제한된 재고 내에서 판매가 이루어지므로, 교환은 불가능합니다. 오픈마켓 상품의 환불 오픈마켓상품에 대한 책임은 원칙적으로 업체에게 있으므로, 교환/반품 접수시 반드시 판매자와 협의 후 반품 접수를 하셔야하며,    반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가능할 수 있으니 유의하시기 바랍니다.

배송예정일 안내 인터파크 도서는 모든 상품에 대해 배송완료예정일을 웹사이트에 표시하고 있습니다. <인터파크 직배송 상품> 상품은 월~토요일 오전 10시 이전 주문분에 대하여 당일 출고/당일 배송완료를 보장하는 상품입니다. 상품은 서울지역/평일 주문분은 당일 출고/익일 배송완료를 보장하며, 서울외지역/평일 주문분의 경우는 오후 6시까지 주문분에 대하여 익일 배송완료를 보장하는 상품입니다. (단, 월요일은 12시까지 주문에 한함) 상품은, 입고예정일(제품출시일)+택배사배송일(1일)에 배송완료를 보장합니다. ~ 상품은 유통특성상 인터파크에서 재고를 보유하지 않은 상품으로 주문일+기준출고일+택배사배송일(1일)에 배송완료를 보장합니다.(토/공휴일은 배송기간에 포함되지 않습니다.) ※기준출고일:인터파크가 상품을 수급하여 물류창고에서 포장/출고하기까지 소요되는 시간 <업체 직접배송/오픈마켓 상품> ~ 상품은 업체가 주문을 확인하고, 출고하기까지 걸리는 시간입니다. 주문일+기준출고일+택배사배송일(2일)에 배송완료를 보장합니다.(토/공휴일은 배송기간에 포함되지 않습니다.) ※5일이내 출고가 시작되지 않을시, 오픈마켓 상품은 자동으로 주문이 취소되며, 고객님께 품절보상금을 지급해 드립니다. 배송비 안내 도서(중고도서 포함)만 구매하시면 : 배송비 2,000원 (1만원이상 구매 시 무료배송) 음반/DVD만 구매하시면 : 배송비 1,500원 (2만원이상 구매 시 무료배송) 잡지/만화/기프트만 구매하시면 : 배송비 2,000원 (2만원이상 구매 시 무료배송) 도서와 음반/DVD를 함께 구매하시면 : 배송비 1,500원 1만원이상 구매 시 무료배송) 도서와 잡지/만화/기프트/중고직배송상품을 함께 구매하시면 : 2,000원 (1만원이상 구매 시 무료배송) 업체직접배송상품을 구매시 : 업체별로 상이한 배송비 적용    * 세트상품의 경우 부분취소 시 추가 배송비가 부과될 수 있습니다.    * 북카트에서 배송비없애기 버튼을 클릭하셔서, 동일업체상품을 조금 더 구매하시면, 배송비를 절약하실 수 있습니다. 해외배송 안내 인터파크도서에서는 국내에서 주문하시거나 해외에서 주문하여 해외로 배송을 원하실 경우 DHL과 특약으로 책정된 요금표에    의해 개인이 이용하는 경우보다 배송요금을 크게 낮추며 DHL(www.dhl.co.kr)로 해외배송 서비스를 제공합니다. 해외배송은 도서/CD/DVD 상품에 한해 서비스하고 있으며, 다른 상품을 북카트에 함께 담으실 경우 해외배송이 불가합니다. 해외주문배송 서비스는 인터파크 도서 회원 가입을 하셔야만 신청 가능합니다. 알아두세요!!! 도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 취소될 수 있습니다. 오픈마켓업체의 배송지연시 주문이 자동으로 취소될 수 있습니다. 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 기준으로 배송됩니다. 유통의 특성상 출고기간은 예정보다 앞당겨지거나 늦춰질 수 있습니다. 택배사 배송일인 서울 및 수도권은 1~2일, 지방은 2~3일, 도서, 산간, 군부대는 3일 이상의 시간이 소요됩니다.