1장 백견불여일타! HTML5와 CSS3로 기본 웹사이트 만들기
1.1 HTML5+CSS3 기초 개념
1.2 우리가 만들 웹사이트로 보는 HTML5 문서 구조
1.3 헤더 만들기-HTML5로 구조 만들기
1.4 헤더 만들기-CSS3와 자바스크립트로 디자인 스타일 정의하기
1.5 헤더 만들기-CSS로 디자인 입히기
1.6 헤더 만들기-디자인 속성 적용하기
1.7 메인 이미지 만들기-대표 이미지로 메인 만들기
1.8 헤더와 메인 이미지 영역 크기 맞추기-box-sizing 속성 적용하기
1.9 본문1 만들기-텍스트 및 사진 처리하기
1.10 본문2 만들기-텍스트 및 아이콘 넣기
1.11 푸터 만들기
[연습문제]
[실습문제] 개발 환경을 만들고 익숙해지기
2장 HTML5의 기초
2.1 DocType
2.2 XHTML1.0과 HTML5의 차이점
2.3 HTML5에서 사라진 태그
2.4 HTML5에서 추가된 태그
2.5 HTML5 멀티미디어 태그
2.6 canvas와 SVG
2.7 HTML5에서 추가된 form 관련 태그들
[연습문제]
[실습문제] HTML5 문서 구성 및 form 작성 실습
3장 CSS3 기초
3.1 선택자
3.2 선택자 적용 방법
3.3 개별 선택자의 활용
3.4 박스 모델
[연습문제]
[실습문제] 속성 적용과 웹 페이지 디자인 실습
4장 박스 모델의 레이아웃을 결정하는 float, position, 그리고 flexbox
4.1 float 속성
4.2 position 속성
4.3 flexbox
[연습문제]
[실습문제] 블로그 형식의 웹 페이지 디자인 실습
5장 CSS를 이용한 텍스트와 문장 구성
5.1 텍스트와 폰트
5.2 웹 폰트
5.3 text-shadow와 멀티 컬럼
5.4 웹 컬러
5.5 텍스트와 문장 구성 관련 속성
[연습문제]
[실습문제] 웹 페이지에 텍스트와 문장 구성 실습
6장 CSS3를 이용한 특수효과
6.1 트랜지션 효과
6.2 2
앞뒤로 프로젝트가 3개, 반복하며 실력을 쌓는다!
레이아웃 마법사 최신 플렉스박스 완벽 정리
이 책은 완성된 수준의 웹사이트를 먼저 만들어보는 것부터 시작한다. 닥치고 사이트부터 만들어본다. 무작정 따라가다 보면 HTML과 CSS의 큰 그림이 그려진다. 이후에 기초지식을 정리하고 각 장마다 연습문제와 실습문제를 두어 개념을 정리하고 복습하며 응용력을 높이도록 하였다. 마지막에 한번 더 프로젝트를 추가하여 학습한 지식이 빠져나갈 수 없도록 촘촘하게 구성하였다.
나도 프로처럼 디자인하고 싶다! 따라 하다 보면 저절로 몸에 붙는
현장의 생생함이 살아 있는 프로젝트 3개 수록!
_프로젝트 하나, 기본적인 웹사이트
1장에서 가장 기본적인 웹사이트를 만들어본다. 메뉴, 텍스트 및 그림의 배치, 백그라운드 처리 등 웹 디자인에 필요한 기술이 거의 모두 들어가 있다.
_프로젝트 둘, 싱글 페이지 기반의 웹사이트
10장에서는 요즘 유행하는 싱글 페이지 기반의 웹사이트를 만들어본다. 이 책에서 다루는 거의 모든 기술이 들어가 있다. 바로 홍보용이나 포트폴리오 웹사이트로 사용해도 될 수준이다.
_프로젝트 셋, 멀티 페이지 기반의 웹사이트
역시 10장에서 다룬다. 쇼핑몰이나 기업형 웹사이트와 같이 멀티 페이지 기반의 웹사이트를 만들어 본다. 페이지를 PHP 기반으로 분리하는 기술 등을 사용하며 서버 기반으로 동작하는 방법까지 배운다.
함께 공부할 수 있는 백견불여일타 카페! cafe.naver.com/codefirst
백견불여일타 독자라면 누구나 가입하여 질문하고 정보를 공유하며 스터디 그룹을 만들어 함께 공부할 수 있는 공간이다.
"이 책은 독특하게 1장에서 프로젝트가 등장하였습니다. 처음에는 적잖이 당황하였는데, 하나하나 타이핑해보면서 프로젝트를 완성해보니 CSS로 디자인을 이렇게 하는구나 하고 감이 팍 오는 것이었습니다. 학습동기가 생기니 뒷장부터는 정말 몰입하며 학습하게 되었습니다."
_베타리더 김용희(대학생 3학년
"양용석 저자
