장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
HTML&CSS 마스터북
미리보기

HTML&CSS 마스터북

  • 어포스트
  • |
  • 어포스트
  • |
  • 2021-03-15 출간
  • |
  • 720페이지
  • |
  • 189 X 258 X 38 mm /1439g
  • |
  • ISBN 9791197122828
판매가

24,500원

즉시할인가

22,050 원

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
22,050원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평




HTML5와 CSS Level 3 표준을 따르는 최신 실전 코드를 배울 수 있도록 꼼꼼한 설명이 덧붙여진 예제 코드를 담고 있는 학습서입니다. 실무에서 구현해서 사용하는 실제 코드를 기초로 설명하기 때문에 학습한 내용에서 끝나는 것이 아니라 실제로 사용할 수 있는 코드를 작성할 수 있는 실력을 키울 수 있습니다. 실무에서 부딪히게 될 다양한 호환성 문제들도 꼼꼼하게 체크를 해 주기 때문에 실제로 써먹을 수 있는 코드를 완성하는 데도 많은 도움이 됩니다.

꼼꼼한 설명과 주석으로 보고 바로 이해할 수 있는 실전 코드들을 기초로 학습합니다. 실무에서 실제로 사용하는 최신 CSS 기법과 팁들을 알려드립니다. 실제로 활용할 수 있는 실전 예제들을 풍부하게 담고 있습니다. 포토갤러리와 쇼핑몰 레이아웃을 최신 기법으로 만드는 방법을 배울 수 있습니다. 완성된 예제 코드들을 다운로드 받아 활용할 수 있도록 소스를 제공합니다. 실전에서 부딪히게 되는 웹 브라우저 호환성 문제에 대한 충실한 안내를 담고 있습니다. 다양한 모바일 기기에 대응하는 반응형 레이아웃 제작 방법을 소개합니다.


목차


책을 학습하기 전 꼭 알아야할 내용

1부 HTML 기초
1장. HTML의 역사
2장. 하이퍼텍스트 마크업 언어(Hypertext Markup Language)
3장. CSS의 역사
4장. 뷰어와 웹 브라우저
5장. 웹 에디터와 통합 개발 도구
6장. HTML 문서의 기본 구조 이해
7장. HTML 5.2의 개선 내용 알기
8장. 기본 HTML 문서 만들어 보기
9장. HTML 문서에 이미지(〈img〉) 연결하기
10장. 하이퍼링크(〈a〉)로 HTML 문서를 연결하기
11장. 웹에서 사용할 수 있는 이미지 포맷들
12장. 시멘틱 태그로 검색에 최적화된 HTML 문서 만들기
13장. 멀티미디어 컨텐츠를 HTML 문서에 연결하기
14장. 사라져가는 태그와 속성들
15장. 폼(〈form〉) 만들기 완전 기초 - 폼 정의하기
16장. 폼 만들기 완전 기초 - 폼(〈form〉) 태그에 속성 추가하기
17장. 폼 만들기 완전 기초 - 〈input〉 태그로 입력 받기
18장. 인터넷 익스플로러에서 지원되지 않는 〈input〉 타입
19장. 〈input〉 태그의 속성 요약해서 보기
20장. 사용빈도가 낮은 고급 “〈input〉”?속성들
21장. 드롭다운 리스트(〈select〉) 기초
22장. 로그인 폼 만들어 보기
23장. 회원가입 폼 만들어 보기

2부 CSS 기초
1장. CSS의 기초 개념 이해하기
2장. CSS를 작성하는 순서 이해하기
3장. 클래스 이름을 정하는 규칙
4장. 클래스 선택자 기초 개념 이해
5장. 가상 요소 기초 개념 배우기
6장. HTML 요소(들)을 선택하는 CSS 선택자(Selector) 기초
7장. CSS 텍스트 속성 기초 익히기
8장. 텍스트 속성들 요약해서 보기
9장. 여백과 테두리?속성 배우기
10장. 요소의 너비와 높이 그리고 차지하는 영역의 크기를 이해하기
11장. 배경(background) 속성 기초 배우기
12장. 테이블(〈table〉) 만들기 기초
13장. HTML5에 새로 추가된 태그들 알아보기

3부 비주얼 스튜디오 코드와 개발자 도구 사용법
1장. 비주얼 스튜디오 코드 설치와 화면 구성
2장. 비주얼 스튜디오 코드 프로젝트 관리와 코드 작성 방법
3장. 비주얼 스튜디오 코드 필수 확장 프로그램 설치
4장. 비주얼 스튜디오 코드 열 선택 모드와 다중 커서 모드 활용
5장. 비주얼 스튜디오 코드 에밋과 약어의 사용
6장. 웹 브라우저 개발자 도구의 필요성
7장. 크롬 개발자 도구 화면 구성
8장. 크롬 개발자 도구 표시 위치 바꾸기
9장. 구글 크롬보다 더 나은 웹 브라우저 마이크로소프트 신형 엣지
10장. 크롬 개발자 도구 명령어 리스트 보기
11장. 크롬 개발자 도구 다크모드 사용하기
12장. 크롬 개발자 도구 디자인 모드로 웹페이지를 에디터처럼 수정하기
13장. 웹 디자이너를 위한 크롬 개발자 도구 Top 11 팁

4부 CSS 단위, 선택자, 여백의 기초
1장. 반응형 웹의 핵심인 em과 rem 단위의 이해
2장. CSS 유닛(Unit) 단위와 픽셀과의 관계
3장. CSS 선택자 고급 - 부분 선택자(Partial Selector)
4장. CSS 선택자 고급 - 가상 클래스 (Pseudo Class)의 이해
5장. CSS 선택자 고급 - 가상 클래스(Pseudo Class) 핵심 요약
6장. CSS 선택자 고급 - 가상 요소(Pseudo Element)로 사용하기
7장. CSS 선택자 고급 - “:nth-” 가상 클래스로 필터링 하기
8장. CSS 속성 선택자(Attribute Selector) 기초
9장. CSS 패딩(Padding), 마진(Margin), 테두리(Border)의 방향과 순서 이해하기
10장. 자식 요소의 % 패딩(% padding) 값이 정해지는 기준
11장. 중첩된 빈 블록 요소의 상단 마진(margin-top) 겹침 현상 이해하기

5부 CSS 애니메이션 기초
1장. CSS 애니메이션 기초
2장. CSS 애니메이션(animation) 속성 이해하기
3장. CSS 애니메이션 가속도 함수의 이해
4장. 애니메이션 채우기 모드의 이해
5장. 다중 애니메이션 적용하기
6장. “steps()” 애니메이션 함수의 이해
7장. 변수를 활용해 CSS 애니메이션 만들기
8장. SVG 벡터 경로(Path)를 따라 이동하는 CSS 애니메이션 만들기
9장. CSS 애니메이션과 자바스크립트 이벤트 처리 연동하기
10장. 개발자 도구로 CSS 애니메이션 디버깅 하기

6부 플렉스박스와 그리드로 만드는 CSS 레이아웃 기초
1장. CSS 플렉스박스(Flexbox) 기초 이해
2장. 플렉스박스 아이템 수직 정렬하기
3장. 플렉스박스 배치 속성의 이해
4장. 플렉스박스로 레이아웃 만들기 기초
5장. 줄 바꿈 아이템으로 플렉스박스 레이아웃 만들기
6장. 플렉스박스 고급 - “flex-grow”와 “flex-shrink” 속성의 완벽 이해
7장. 플렉스박스 레이아웃 속성 요약 정리
8장. 플렉스박스로 반응형 레이아웃 만들기
9장. 플렉스박스(flex)와 마진(margin) 속성으로 반응형 메뉴 만들기
10장. CSS 그리드(Grid) 기초 이해
11장. CSS 그리드 컨테이너 선언과 속성 기초
12장. 그리드 열 구획 속성(Attribute)과 메서드(Method) 활용
13장. 그리드 영역 구획하기 406
14장. 그리드 인터넷 익스플로러 호환성 구현하기

7부 HTML 태그 고급 활용 기법
1장. CSS 가상 요소로 삼각형 화살표 디자인 제작하기
2장. CSS 테두리 선으로 삼각형 화살표 디자인 만들기
3장. 체크박스와 라디오버튼 변형 디자인
4장. 체크박스와 CSS로 만드는 FAQ 리스트
5장. 라디오버튼과 CSS로 만드는 탭(Tab) 박스 디자인 만들기
6장. 라디오버튼으로 만드는 다단 풀다운 메뉴
7장. 체크박스 로 만드는 접히는 사이드바 레이아웃
8장. 이미지로 만드는 체크박스
9장. 이미지 파일 없이 투명 GIF/PNG 이미지 사용하기
10장. 이미지 지연 로딩(Lazy loading)과 검색 최적화
11장. 〈abbr〉과 〈dfn〉 태그의 활용
12장. 〈sup〉 태그(어깨문자 태그)를 CSS로 대체 구현하기
13장. 블록 태그 안의 이미지 밑에 여백이 남는 이유와 해결 방법
14장. 하이퍼링크 “download” 속성으로 파일 강제 다운로드 하기

8부 CSS 고급 활용 기법
1장. 버튼 애니메이션 만들기
2장. 수직/수평 가운데 정렬을 자유자재로 하기
3장. 반응형 레이아웃 대상을 구분하는 기준 이해하기
4장. CSS로 SVG 색상 제어하기
5장. 헤더가 고정된 스크롤 테이블 만들기
6장. CSS 변수(Variable) 사용 기초
7장. CSS 변수 오버라이딩(Overriding)을 활용한 디자인 테마 구현
8장. CSS 변수로 반응형 웹 구현하기
9장. “inline-block” 속성의 공백 버그를 회피하는 방법들
10장. CSS로 터치 스크린 장치 구분하기
11장. 벤더 프리픽스(Vendor Prefix) 자세히 알기
12장. CSS로 멀티 컬러 배경 만들기
13장. 플렉스박스(Flex)와 그리드(Grid) 요소의 가운데 정렬
14장. CSS 기능 쿼리(@support)로 속성 지원 여부 알기
15장. 이미지를 배치하는 “object-fit”, “object-position” 속성의 이해
16장. CSS 작성 초기화(Reset) 방법
17장. CSS 로 하이퍼링크 기본 스타일 초기화 하기
18장. CSS로 내용 표시 줄 수 제한하기
19장. 활성화 된 요소(Element)의 포커스 테두리 없애기
20장. CSS 텍스트영역(〈textarea〉) 크기 조절 차단하기
21장. 플레이스홀더(placeholder) 속성 스타일 정의하기
22장. CSS로 텍스트 영역 선택 차단하기
23장. 배경 SVG 이미지가 크기 조절이 안되는 문제 해결하기
24장. 모바일 웹 줌인아웃(Zoom In/Out) 차단하기7
25장. 프린트용 미디어쿼리 설정하기
26장. 괜찮은 CSS 배경 그림자 효과 4가지

9부 실전 레이아웃 디자인
1장. 반투명 유리 배경 효과 만들기
2장. 이미지 슬라이드 만들기1 - 투명 전환 효과
3장. 이미지 슬라이드 만들기2 - 이동 효과
4장. 이미지 슬라이드 만들기3 - 입체 3D 효과
5장. 체크박스로 펼침 메뉴 만들기
6장. 플렉스박스로 포토갤러리 만들기
7장. 플렉스박스로 쇼핑몰 레이아웃 만들기
8장. 그리드로 포토갤러리 만들기1
9장. 그리드로 포토갤러리 만들기2
10장. 그리드로 쇼핑몰 레이아웃 만들기
추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.