;)
웹 사이트 제작에 필요한 HTML5와 CSS3에 대한 내용을 담은 『HTML5 CSS3 실무테크닉』. 처음 시작하는 분들이라도 따라하기를 통해 쉽고 재미있게 배울 수 있고, 실무에서도 활용할 수 있도록 구성하였다. 웹 사이트를 만드는 데 필요한 내용만을 다루었기 때문에 지루한 이야기나 쓸모없는 설명에 시간을 빼앗기지 않고 필요로 하는 정보만을 습득할 수 있도록 했다.
저자: 김은기
Part 1 HTML5의 기초 다지기
Lesson 01 웹 브라우저의 언어, HTML5
HTML의 개념
HTML5의 개념
HTML5의 주요 기능
Lesson 02 웹 스타일을 책임지는 스타일시트, CSS3
스타일시트(CSS)의 개념
업그레이드된 CSS3
CSS3 주요 기능
HTML5와 CSS3를 지원하는 웹 브라우저
Lesson 03 웹 페이지를 새롭게 만드는 자바스크립트(JavaScript)
자바스크립트 소스
자바스크립트의 매력
Lesson04 HTML5, CSS3, JavaScript의 상관관계
HTML5, CSS3, JavaScript
웹 문서 작성 시 지켜야 할 규칙
Lesson 05 학습을 위한 준비
브래킷
웹 브라우저, 크롬
웹 사이트에서 샘플 다운로드하기
Part 2 HTML5 태그 정복하기
Lesson 01 HTML 기본 구조 들여다보기
HTML5의 기본 구조
HTML 태그의 특징
HTML 문서 연습하기
Lesson 02 웹 사이트의 안내자 《meta》 태그
《head》 태그 속의 《meta》 태그
문서의 문자 셋 선언하기
시간 설정하여 자동으로 페이지 이동하기
Lesson 03 HTML5 시멘틱 구조 태그
시멘틱 웹의 개념
제목 크기를 조절하는 《h1》~《h6》 태그
구획 정의를 위한 태그
Lesson 04 똑똑한 비서, 정리 태그 알아보기
《br》 태그 vs. 《p》 태그
수평선을 긋는 《hr》 태그
입력한 형태 그대로 보여주는 《pre》 태그
《div》와 《span》 태그
Lesson05 보기 좋은 목록을 만드는 태그
목록 만드는 태그
계층 구조를 만드는 《dl》 태그
Lesson 06 타이포에 마술을 거는 태그
글자 스타일을 바꾸는 태그
글자 위의 주석, 루비 글자 태그
특수 문자 입력하기
Lesson 07 웹 문서를 재미있게 꾸미는 태그
이미지를 삽입하는 《img》 태그
이미지 크기 지정하기
상대 경로와 절대 경로
웹 문서 속의 웹 문서 《iframe》
멀티미디어를 삽입하는 《embed》 태그
《audio》와 《video》 태그
동영상을 자동 재생하고 반복하기
이미지맵을 설정하는 《map》 태그
Lesson 08 깔끔한 웹 문서의 필수품, Table
《table》의 기본 태그
테이블로 문서 편집하기
가로, 세로 내 마음대로 셀 합치기
테이블 안에 아기 테이블 넣기
Lesson 09 웹 공간을 마음대로 헤엄치는 하이퍼링크
URL로 하이퍼링크 연결하기
하나의 문서 안에서 특정 위치로 이동하기
하이퍼링크로 할 수 있는 다양한 것
Lesson 10 폼(form)으로 방문자와 대화하기
server-side를 처리하기 위한 《form》
《form》 안에 사용되는 입력 양식
HTML5 《input》 태그
Lesson 11 HTML5에서 더 이상 지원하지 않는 태그
HTML5에서 지원하는 태그
HTML5에서 새로 지원하는 태그
Part 3 CSS 기초 이해하기
Lesson 01 나만의 스타일을 만드는 CSS3
스타일시트의 개념
스타일시트의 매력
Lesson 02 스타일시트를 적용하는 여러 가지 방법
외부 문서에서 연결하기(linked Style)
문서 내부에 정의하기(Embedded Style)
태그에 직접 정의하기(Inline Style)
Lesson 03 기초부터 알아보는 스타일시트
스타일시트 기본 형식
특정 태그에 스타일 지정하기
그룹으로 만든 태그에 스타일 지정하기
하위 태그에 스타일 지정하기
클래스 이용하기
아이디(ID) 이용하기
Lesson 04 배경을 꾸미는 스타일시트
배경 색상 바꾸기(background-color)
배경 그림 바꾸기(background-image)
반복되는 배경 그림 바꾸기(background-repeat)
배경 그림의 스크롤 지정하기(background-attachment)
배경 그림의 위치 지정하기(background-position)
배경 그림의 속성을 한 번에 지정하기(background)
Lesson 05 테두리를 폼 나게 꾸미는 스타일시트
테두리 형태 지정하기(border-style)
테두리의 색상 지정하기(border-color)
테두리의 두께 지정하기(border-방향-width)
테두리의 두께를 한 번에 지정하기(border-width)
Lesson 06 세련미를 풍기는 박스 여백
바깥 여백 지정하기(margin-방향)
바깥 여백 한 번에 지정하기(margin)
안쪽 여백 지정하기(padding-방향)
문단의 위치와 폭, 높이 지정하기
Lesson 07 다양한 글씨를 표현하는 스타일시트
글자 색상 바꾸기(color)
글꼴 지정하기(font-family)
글자 형태 지정하기(font-style)
글자 굵기 지정하기(font-weight)
글자 크기 지정하기(font-size)
글자 속성 한 번에 지정하기(font)
Lesson 08 문자와 문단을 꾸미는 스타일시트
자간 지정하기(letter-spacing)
단어 간격 지정하기(word-spacing)
줄 간격 지정하기(line-height)
공백과 줄바꿈 지정하기(white-space)
Lesson 09 내 마음대로 문서를 꾸미는 스타일시트
문단 들여쓰기 지정하기(text-indent)
글자에 밑줄 긋기(text-decoration)
영문자의 대/소문자 속성(text-transform)
Lesson 10 목록을 꾸미는 스타일시트
목록의 머리 기호 바꾸기(list-style-type)
그림으로 목록의 머리 기호 만들기(list-style-image)
목록의 들여쓰기 지정하기(list-style-position)
Lesson 11 하이퍼링크를 꾸미는 스타일시트
하이퍼링크 색상과 밑줄 표시하기
한 문서에 여러 가지 하이퍼링크 스타일 적용하기
Lesson 12 여러 개의 스타일을 동시에 적용하기
Part 4 업그레이드된 CSS3 살펴보기
Lesson 01 CSS3 살짝 맛보기
CSS3 접두어
Lesson 02 테두리 속성, border
다양해진 테두리 효과
테두리를 둥글게 만들기(border-radius)
테두리에 그림자 만들기(box-shadow)
테두리에 이미지 사용하기(border-image)
Lesson 03 배경 이미지 속성, background
배경 이미지 크기 지정하기(background-size)
배경 이미지 위치 지정하기(background-origin)
배경 이미지 여러 개 지정하기(background)
Lesson 04 그레이디언트 속성, gradient
선형 그레이디언트 주기(linear-gradient)
선형 그레이디언트에 방향 주기(linear-gradient)
선형 그레이디언트에 여러 개의 색상 주기(linear-gradient)
선형 그레이디언트에 투명도 주기(linear-gradient)
선형 그레이디언트 반복하기(linear-gradient)
방사형 그레이디언트 만들기(radial-gradient)
방사형 그레이디언트에 모양 주기(radial-gradient)
방사형 그레이디언트에 크기와 위치 지정하기(radial-gradient)
방사형 그레이디언트 반복하기(radial-gradient)
Lesson 05 텍스트와 관련된 여러 가지 속성
Text Shadow
Word Wrapping
Lesson 06 CSS3를 이용한 간단한 애니메이션
animation 정의하기
@keyframe을 이용하여 Animation의 중간 상태 기술하기
Lesson 07 위치, 모양, 크기를 내 맘대로, transform
transform 사용하기
Lesson 08 애니메이션 속도를 제어하는 transition
transition 사용하기
Lesson 09 사용자 인터페이스(Basic User Interface) 만들기
Resizing
Box Sizing
Outline Offset
Multi-column
Part 5 반응형 웹 디자인과 부트스트랩
Lesson 01 반응형 웹 디자인 이해하기
반응형 웹 디자인의 개념
반응형 웹 사이트
반응형 웹 디자인이 적용된 경우
반응형 웹 디자인을 위한 브레이크 포인트
Lesson 02 웹 디자인 레이아웃을 위한 그리드 시스템
그리드 시스템의 기능
그리드 시스템 참조 사이트
정적, 동적, 반응형 그리드 시스템
Lesson 03 float과 display로 3단 레이아웃 만들기
float로 만든 3단 레이아웃
display:table-cell로 만든 3단 레이아웃
Lesson 04 미디어 타입과 미디어 쿼리
미디어 타입
미디어 쿼리
미디어 쿼리의 문법
Lesson 05 반응형 웹 디자인 따라하기
브레이크 포인트
가변 그리드 패턴
단 드롭 패턴
레이아웃 시프터 패턴
작은 변화 패턴
오프 캔버스 패턴
Lesson 06 이전 웹 브라우저에서 HTML5 사용하기
사람들은 어떤 웹 브라우저를 많이 사용할까?
웹 브라우저 버전에 따른 HTML5 사용하기
IE7 미만에서 HTML 및 CSS 엘리먼트, 투명 PNG 지원하기
Lesson 07 트위터의 오픈 소스, 부트스트랩
부트스트랩의 특징
부트스트랩 다운로드
부트스트랩 기본 문서 템플릿
그리드 시스템
테이블
폼과 버튼
기타 다양하게 제공되는 CSS
다양한 컴포넌트
반응형 디자인
커스터마이징
Part 6 따라해보는 실무 예제 및 템플릿
Lesson 01 따라하기 전 준비 사항
Lesson 02 가장 많이 사용하는 드롭다운 상단 메뉴
Lesson 03 펼쳐지고 접혀지는 아코디언 메뉴
Lesson 04 그룹화시켜 보여주는 탭 메뉴
Lesson 05 CSS를 이용한 아이콘 버튼
Lesson 06 여러 가지 이미지를 보여주는 이미지 슬라이더
Lesson 07 동영상을 컨트롤하는 동영상 플레이어
Lesson 08 실무에서 바로 써먹는 웹 사이트 템플릿
웹 사이트의 기초 설계
Top Menu
Lesson 01 웹 브라우저의 언어, HTML5
HTML의 개념
HTML5의 개념
HTML5의 주요 기능
Lesson 02 웹 스타일을 책임지는 스타일시트, CSS3
스타일시트(CSS)의 개념
업그레이드된 CSS3
CSS3 주요 기능
HTML5와 CSS3를 지원하는 웹 브라우저
Lesson 03 웹 페이지를 새롭게 만드는 자바스크립트(JavaScript)
자바스크립트 소스
자바스크립트의 매력
Lesson04 HTML5, CSS3, JavaScript의 상관관계
HTML5, CSS3, JavaScript
웹 문서 작성 시 지켜야 할 규칙
Lesson 05 학습을 위한 준비
브래킷
웹 브라우저, 크롬
웹 사이트에서 샘플 다운로드하기
Part 2 HTML5 태그 정복하기
Lesson 01 HTML 기본 구조 들여다보기
HTML5의 기본 구조
HTML 태그의 특징
HTML 문서 연습하기
Lesson 02 웹 사이트의 안내자 《meta》 태그
《head》 태그 속의 《meta》 태그
문서의 문자 셋 선언하기
시간 설정하여 자동으로 페이지 이동하기
Lesson 03 HTML5 시멘틱 구조 태그
시멘틱 웹의 개념
제목 크기를 조절하는 《h1》~《h6》 태그
구획 정의를 위한 태그
Lesson 04 똑똑한 비서, 정리 태그 알아보기
《br》 태그 vs. 《p》 태그
수평선을 긋는 《hr》 태그
입력한 형태 그대로 보여주는 《pre》 태그
《div》와 《span》 태그
Lesson05 보기 좋은 목록을 만드는 태그
목록 만드는 태그
계층 구조를 만드는 《dl》 태그
Lesson 06 타이포에 마술을 거는 태그
글자 스타일을 바꾸는 태그
글자 위의 주석, 루비 글자 태그
특수 문자 입력하기
Lesson 07 웹 문서를 재미있게 꾸미는 태그
이미지를 삽입하는 《img》 태그
이미지 크기 지정하기
상대 경로와 절대 경로
웹 문서 속의 웹 문서 《iframe》
멀티미디어를 삽입하는 《embed》 태그
《audio》와 《video》 태그
동영상을 자동 재생하고 반복하기
이미지맵을 설정하는 《map》 태그
Lesson 08 깔끔한 웹 문서의 필수품, Table
《table》의 기본 태그
테이블로 문서 편집하기
가로, 세로 내 마음대로 셀 합치기
테이블 안에 아기 테이블 넣기
Lesson 09 웹 공간을 마음대로 헤엄치는 하이퍼링크
URL로 하이퍼링크 연결하기
하나의 문서 안에서 특정 위치로 이동하기
하이퍼링크로 할 수 있는 다양한 것
Lesson 10 폼(form)으로 방문자와 대화하기
server-side를 처리하기 위한 《form》
《form》 안에 사용되는 입력 양식
HTML5 《input》 태그
Lesson 11 HTML5에서 더 이상 지원하지 않는 태그
HTML5에서 지원하는 태그
HTML5에서 새로 지원하는 태그
Part 3 CSS 기초 이해하기
Lesson 01 나만의 스타일을 만드는 CSS3
스타일시트의 개념
스타일시트의 매력
Lesson 02 스타일시트를 적용하는 여러 가지 방법
외부 문서에서 연결하기(linked Style)
문서 내부에 정의하기(Embedded Style)
태그에 직접 정의하기(Inline Style)
Lesson 03 기초부터 알아보는 스타일시트
스타일시트 기본 형식
특정 태그에 스타일 지정하기
그룹으로 만든 태그에 스타일 지정하기
하위 태그에 스타일 지정하기
클래스 이용하기
아이디(ID) 이용하기
Lesson 04 배경을 꾸미는 스타일시트
배경 색상 바꾸기(background-color)
배경 그림 바꾸기(background-image)
반복되는 배경 그림 바꾸기(background-repeat)
배경 그림의 스크롤 지정하기(background-attachment)
배경 그림의 위치 지정하기(background-position)
배경 그림의 속성을 한 번에 지정하기(background)
Lesson 05 테두리를 폼 나게 꾸미는 스타일시트
테두리 형태 지정하기(border-style)
테두리의 색상 지정하기(border-color)
테두리의 두께 지정하기(border-방향-width)
테두리의 두께를 한 번에 지정하기(border-width)
Lesson 06 세련미를 풍기는 박스 여백
바깥 여백 지정하기(margin-방향)
바깥 여백 한 번에 지정하기(margin)
안쪽 여백 지정하기(padding-방향)
문단의 위치와 폭, 높이 지정하기
Lesson 07 다양한 글씨를 표현하는 스타일시트
글자 색상 바꾸기(color)
글꼴 지정하기(font-family)
글자 형태 지정하기(font-style)
글자 굵기 지정하기(font-weight)
글자 크기 지정하기(font-size)
글자 속성 한 번에 지정하기(font)
Lesson 08 문자와 문단을 꾸미는 스타일시트
자간 지정하기(letter-spacing)
단어 간격 지정하기(word-spacing)
줄 간격 지정하기(line-height)
공백과 줄바꿈 지정하기(white-space)
Lesson 09 내 마음대로 문서를 꾸미는 스타일시트
문단 들여쓰기 지정하기(text-indent)
글자에 밑줄 긋기(text-decoration)
영문자의 대/소문자 속성(text-transform)
Lesson 10 목록을 꾸미는 스타일시트
목록의 머리 기호 바꾸기(list-style-type)
그림으로 목록의 머리 기호 만들기(list-style-image)
목록의 들여쓰기 지정하기(list-style-position)
Lesson 11 하이퍼링크를 꾸미는 스타일시트
하이퍼링크 색상과 밑줄 표시하기
한 문서에 여러 가지 하이퍼링크 스타일 적용하기
Lesson 12 여러 개의 스타일을 동시에 적용하기
Part 4 업그레이드된 CSS3 살펴보기
Lesson 01 CSS3 살짝 맛보기
CSS3 접두어
Lesson 02 테두리 속성, border
다양해진 테두리 효과
테두리를 둥글게 만들기(border-radius)
테두리에 그림자 만들기(box-shadow)
테두리에 이미지 사용하기(border-image)
Lesson 03 배경 이미지 속성, background
배경 이미지 크기 지정하기(background-size)
배경 이미지 위치 지정하기(background-origin)
배경 이미지 여러 개 지정하기(background)
Lesson 04 그레이디언트 속성, gradient
선형 그레이디언트 주기(linear-gradient)
선형 그레이디언트에 방향 주기(linear-gradient)
선형 그레이디언트에 여러 개의 색상 주기(linear-gradient)
선형 그레이디언트에 투명도 주기(linear-gradient)
선형 그레이디언트 반복하기(linear-gradient)
방사형 그레이디언트 만들기(radial-gradient)
방사형 그레이디언트에 모양 주기(radial-gradient)
방사형 그레이디언트에 크기와 위치 지정하기(radial-gradient)
방사형 그레이디언트 반복하기(radial-gradient)
Lesson 05 텍스트와 관련된 여러 가지 속성
Text Shadow
Word Wrapping
Lesson 06 CSS3를 이용한 간단한 애니메이션
animation 정의하기
@keyframe을 이용하여 Animation의 중간 상태 기술하기
Lesson 07 위치, 모양, 크기를 내 맘대로, transform
transform 사용하기
Lesson 08 애니메이션 속도를 제어하는 transition
transition 사용하기
Lesson 09 사용자 인터페이스(Basic User Interface) 만들기
Resizing
Box Sizing
Outline Offset
Multi-column
Part 5 반응형 웹 디자인과 부트스트랩
Lesson 01 반응형 웹 디자인 이해하기
반응형 웹 디자인의 개념
반응형 웹 사이트
반응형 웹 디자인이 적용된 경우
반응형 웹 디자인을 위한 브레이크 포인트
Lesson 02 웹 디자인 레이아웃을 위한 그리드 시스템
그리드 시스템의 기능
그리드 시스템 참조 사이트
정적, 동적, 반응형 그리드 시스템
Lesson 03 float과 display로 3단 레이아웃 만들기
float로 만든 3단 레이아웃
display:table-cell로 만든 3단 레이아웃
Lesson 04 미디어 타입과 미디어 쿼리
미디어 타입
미디어 쿼리
미디어 쿼리의 문법
Lesson 05 반응형 웹 디자인 따라하기
브레이크 포인트
가변 그리드 패턴
단 드롭 패턴
레이아웃 시프터 패턴
작은 변화 패턴
오프 캔버스 패턴
Lesson 06 이전 웹 브라우저에서 HTML5 사용하기
사람들은 어떤 웹 브라우저를 많이 사용할까?
웹 브라우저 버전에 따른 HTML5 사용하기
IE7 미만에서 HTML 및 CSS 엘리먼트, 투명 PNG 지원하기
Lesson 07 트위터의 오픈 소스, 부트스트랩
부트스트랩의 특징
부트스트랩 다운로드
부트스트랩 기본 문서 템플릿
그리드 시스템
테이블
폼과 버튼
기타 다양하게 제공되는 CSS
다양한 컴포넌트
반응형 디자인
커스터마이징
Part 6 따라해보는 실무 예제 및 템플릿
Lesson 01 따라하기 전 준비 사항
Lesson 02 가장 많이 사용하는 드롭다운 상단 메뉴
Lesson 03 펼쳐지고 접혀지는 아코디언 메뉴
Lesson 04 그룹화시켜 보여주는 탭 메뉴
Lesson 05 CSS를 이용한 아이콘 버튼
Lesson 06 여러 가지 이미지를 보여주는 이미지 슬라이더
Lesson 07 동영상을 컨트롤하는 동영상 플레이어
Lesson 08 실무에서 바로 써먹는 웹 사이트 템플릿
웹 사이트의 기초 설계
Top Menu
