홈앤서비스 SK BROADBAND

HTML5와 CSS Level 3 표준을 따르는 최신 실전 코드를 배울 수 있도록 꼼꼼한 설명이 덧붙여진 예제 코드를 담고 있는 학습서다. 실무에서 구현해서 사용하는 실제 코드를 기초로 설명하기 때문에 학습한 내용에서 끝나는 것이 아니라 실제로 사용할 수 있는 코드를 작성할 수 있는 실력을 키울 수 있다.

실무에서 부딪히게 될 다양한 호환성 문제들도 꼼꼼하게 체크를 해 주기 때문에 실제로 써먹을 수 있는 코드를 완성하는 데도 많은 도움이 된다. 모바일 환경 및 반응형 레이아웃을 만드는 방법을 배울 수 있으며, 인터넷 익스플로러 호환성 문제를 해결하는 솔루션까지 충실하게 제공한다. 기초부터 최신 쇼핑몰 레이아웃까지 제작할 수 있도록 풍부한 예제를 제공하며, 실전 예제들을 다운로드 받아 참고할 수 있도록 제공한다. 책의 일부 내용을 미리 읽어보실 수 있습니다. 미리보기

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

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장. 그리드로 쇼핑몰 레이아웃 만들기 펼쳐보기접어보기