HTML5 & CSS3 웹 표준 디자인 강좌(30일 레슨으로 쉽게 배우는)

30개의 레슨으로 마스터하는 HTML5와 CSS3



웹사이트 제작 스킬을 처음부터 차근차근 배우고 싶은 사람, 앞으로 웹 제작을 목표로 배우고자 하는 사람, 그리고 이미 웹 제작을 하고 있으나 실무에 활용할 수 있는 제대로 된 지식과 기술을 기초부터 확실히 배우고 싶은 사람들을 위한 기본서!



총 9개의 챕터, 30개의 강의를 통해 HTML과 CSS의 기본기를 확실하게 배우고 웹 사이트 디자인을 직접 따라하며 실무에 바로 적용할 수 있는 노하우를 단번에 익힌다!



Chapter 01 HTML로 문서 작성하기

HTML의 기본 구조를 이해하고 HTML을 제대로 사용할 수 있도록 전반적인 기본 규칙에 대해 알아봅니다. HTML은 어렵지 않지만 그렇다고 해서 되는 대로 쓰는 것이 아니라 HTML이 갖고 있는 역할을 분명히 인식하면서 써야 합니다. 여기서는 간단한 샘플 문서를 HTML화 해가면서 HTML의 기본 내용을 살펴봅니다.



Chapter 02 CSS로 문서 장식하기

CSS의 기본 서식, 선택자, 프로퍼티, 박스 모델 등 CSS를 이용하는 데 반드시 마스터해 두어야 할 사항을 알아봅니다. 또한 색상이나 여백, 글꼴 설정 등 흔히 사용하는 문서 장식을 직접 따라하면서 기본적인 CSS 프로퍼티 연습을 할 수 있습니다.



Chapter 03 CSS 레이아웃의 기본

웹사이트의 레이아웃은 그 용도나 목적에 따라 다양한 기법이 있습니다. 여기서는 다양한 레이아웃 기법의 특징과 용도를 소개하면서 베이스가 되는 'float 프로퍼티'와 'position 프로퍼티'를 사용한 레이아웃의 제작 방법을 알아봅니다.



Chapter 04 HTML5로 마크업을 하기 위한 기초 지식

챕터 4에서는 보다 본격적으로 HTML5 마크업을 하는 데 필요한 새로운 요소와 속성 사용법, 그리고 새로운 개념과 규칙에 대해 알아봅니다.



Chapter 05 본격적인 웹 제작을 위한 설계와 준비

HTML·CSS의 기초를 공부한 초보자가 막상 본격적인 웹사이트를 만들려고 했을 때 실제로 어디서부터 손을 대야 할지 당황할 수 있습니다. 또한 생각대로 잘 컨트롤하지 못하는 경우도 흔히 있습니다. 이 장에서는 실무적인 내용의 웹사이트를 제작하는데 미리 알아 두는 것이 좋은 지식이나 노하우, 효율적으로 코딩을 진행하기 위한 사전 준비에 대해 알아봅니다.



Chapter 06 실천적인 웹사이트 코딩

챕터 06에서는 앞에서 확인한 코딩 설계도를 기초로 하여 간단한 기업 웹사이트를 코딩하는 법을 배웁니다. 여기서는 어떤 사이트를 코딩하는 경우에도 도움이 되는 기본적인 지식이나 테크닉을 배울 수 있습니다.



Chapter 07 CSS3 입문

CSS3에서는 둥근 모서리나 드롭 섀도우뿐만 아니라 디자인 표현을 자유롭게 할 수 있는 다양한 프로퍼티와 선택자 등의 기능이 다수 갖춰 있습니다. 특히 최근 웹 제작에서 거의 필수적인 멀티 디바이스 대응을 할 때에는 CSS3가 상당히 중요한 역할을 하고 있습니다. 이 장에서는 이용 빈도가 높고 즉시 사용할 수 있는 것을 중심으로 CSS3의 선택자와 프로퍼티 기능을 알려 줍니다. 또한 실무에 CSS3를 이용하는 데 주의해야 할 점에 대해서도 배울 수 있습니다.



Chapter 08 멀티 디바이스 대응의 기초 지식

챕터 08에서는 스마트폰이나 태블릿용 웹사이트를 제작할 때 필요한 디바이스의 특성과 주의할 점을 살펴봅니다.



Chapter 09 반응형 웹 디자인의 코딩

반응형 코딩을 하려면 HTML이나 CSS, 멀티 디바이스 대응 지식을 종합적으로 활용해야 합니다. 이 장에서는 기본적인 반응형 코딩에 대해 살펴보겠습니다.

Chapter 01 HTML로 문서 작성하기

LESSON01 HTML의 개요

LESSON02 문서를 HTML로 마크업하기

LESSON03 줄 바꾸기와 강조, 이미지, 링크 넣기

LESSON04 표와 폼 설치하기

ㆍ보강 〈문법 체크하기〉

ㆍ보강 〈DOCTYPE을 HTML4.01/XHTML1.0으로 할 경우 주의할 점〉



Chapter 02 CSS로 문서 장식하기

LESSON05 CSS의 개요

LESSON06 기본 프로퍼티와 선택자 사용법

LESSON07 배경 이미지로 장식하기

LESSON08 기본적인 문서 레이아웃과 박스 모델

LESSON09 표와 입력 폼의 스타일링



Chapter 03 CSS 레이아웃의 기본

LESSON10 레이아웃의 종류

LESSON11 float 레이아웃

LESSON12 position 레이아웃

ㆍ보강 〈새로운 레이아웃 기법〉



Chapter 04 HTML5로 마크업을 하기 위한 기초 지식

LESSON13 섹션 관련 새 요소

LESSON14 새로운 카테고리와 콘텐츠 모델

LESSON15 기타 새로운 요소와 속성

ㆍ보강 〈HTML5의 전체 사양과 구현상의 주의할 점〉



Chapter 05 본격적인 웹 제작을 위한 설계와 준비

LESSON16 웹사이트의 코딩 설계

LESSON17 효율적인 CSS 코딩 준비



Chapter 06 실천적인 웹사이트 코딩

LESSON18 큰 테두리의 레이아웃 포맷 작성하기

LESSON19 display 프로퍼티를 활용한 레이아웃

LESSON20 CSS 스프라이트의 구조를 이해한다

LESSON21 메인 콘텐츠 영역을 작성한다



Chapter 07 CSS3 입문

LESSON22 CSS3의 개요

LESSON23 CSS3 선택자

LESSON24 CSS3 프로퍼티

LESSON25 변형ㆍ애니메이션과 미디어 쿼리



Chapter 08 멀티 디바이스 대응의 기초 지식

LESSON26 디바이스의 특성 이해하기

LESSON27 모바일 대응 웹사이트 제작의 기초 지식



Chapter 09 반응형 웹 디자인의 코딩

LESSON28 반응형 화면 설계와 베이스 코딩

LESSON29 미디어 쿼리를 사용한 레이아웃 조정

LESSON30 Retina 디스플레이 대책

ㆍ보강 〈반응형 관련 각종 팁〉

Akemi Kusano 저자 Akemi Kusano는 아이치현립고등학교에서 세계사 교사로 근무하다가 전문학교를 거쳐 웹 제작의 현장에 진출했다. 리쿠르트 관련 자회사 디지털 제작 부문에서 일하다 2003년 독립했다. 이후 HTML과 CSS 코딩을 하는 프리랜서로 활동 중이다. '초보자와 중급자를 위한 코딩' 세미나 강사로도 활동하고 있다.