실력이 탐나는 드림위버 HTML5 + CSS3

Chapter 01 HTML5와 CSS3 시작하기

Unit 01 HTML5와 CSS3의 핵심 파악하기
|간단개요| HTML5의 탄생 역사 및 새롭게 추가된 기능 알아보기
|간단개요| CSS3의 소개 및 새롭게 추가된 기능 알아보기
Unit 02 실전을 위한 작업 환경 준비하기
|간단개요| 문서 제작을 위한 에디터 설정 및 웹브라우저 지원
|간단실습| 예제 파일 복사 및 지원 웹브라우저에서 결과 확인하기
|TIP| 파이어폭스와 오페라에서 문서 열고 결과 확인하기
|간단실습| 에디트 플러스 설치 및 환경 설정하기
|TIP| 에디트 플러스에서 웹브라우저로 연동하여 결과 확인하기

Chapter 02 HTML5 마크업 시작하기

Unit 01 HTML5 구조와 마크업 규칙
|간단개요| HTML5 구조 파악과 마크업 규칙 및 meta, comment 요소 알아보기
|TIP| UTF-8과 EUC-KR
|TIP| HTML4와 XHTML 문서 선언
|간단실습| HTML5 문서의 기본 구조와 주석 입력하기
|간단실습| meta 요소를 이용한 문서 정보 지정과 주석 달기
|TIP| UTF-8 인코딩 방식으로 문서 저장하기
Unit 02 문단, 제목에 관련된 요소
|간단개요| 문단 편집과 관련된 요소 알아보기
|간단실습| heading, p, br 요소를 이용한 내용 입력하기
|TIP| 요소의 중첩
|간단실습| 캐릭터 엔티티를 이용한 특수 문자 및 공백 입력하기
|TIP| 특수 문자 입력
Unit 03 텍스트에 관련된 요소
|간단개요| 텍스트와 관련된 요소 알아보기
|간단실습| abbr, address, strong, sub, blockquote 요소 입력하기
|TIP| strong 요소와 b 요소
|TIP| blockquote 요소와 q 요소
|간단실습| HTML5에 추가된 텍스트 관련 요소 입력하기
|TIP| time 요소와 속성
|TIP| meter 요소와 속성
Unit 04 목록에 관련된 요소
|간단개요| 순서, 비순서, 정의 목록에 관련된 요소 알아보기
|간단실습| 순서, 비순서 목록 요소 입력하기
|간단실습| 정의 목록과 관련된 요소 입력하기
Unit 05 시맨틱 마크업을 위한 HTML5 요소
|간단개요| HTML5에 새롭게 추가된 시맨틱 요소 살펴보기
|간단실습| 시맨틱 요소를 이용한 HTML5 문서 만들기 1
|간단실습| 시맨틱 요소를 이용한 HTML5 문서 만들기 2
POWER UNIT 에디트 플러스에서 HTML5 템플릿 문서 만들어 활용하기
POWER UNIT 에디트 플러스에서 HTML5의 클립 텍스트 사용하기
POWER UNIT 드림위버에서 HTML5 문서 만들기
활용실습

Chapter 03 HTML5의 임베디드 요소 알아보고 하이퍼링크 지정하기

Unit 01 이미지와 수평선에 관련된 요소
|간단개요| 이미지 파일과 img, figure, figcaption, hr 요소 알아보기
|간단실습| 이미지와 수평선 삽입하기
|간단실습| 이미지와 설명글 달기
Unit 02 비디오와 오디오에 관련된 요소
|간단개요| video, audio 요소와 지원 파일 알아보기
|간단실습| audio 요소로 사운드 삽입하기
|TIP| 오디오 파일 변환 프로그램
|간단실습| video 요소로 비디오 삽입하기
|TIP| mp4 파일 포맷의 비디오 만들기
POWER UNIT Firefogg를 이용하여 ogv 파일 형식으로 변환하기
Unit 03 하이퍼링크와 이미지맵에 관련된 요소
|간단개요| a, map, area 요소와 다양한 하이퍼링크 기능 알아보기
|간단실습| 다양한 하이퍼링크와 타깃 지정하기
|간단실습| 네임앵커 지정하기
|TIP| 다른 문서의 특정 위치로 이동하기
|간단실습| 이미지맵 지정하기
Unit 04 인라인 프레임에 관련된 요소
|간단개요| iframe 요소와 하이퍼링크 지정 알아보기
|TIP| 프레임세트(Frameset)와 관련된 요소
|간단실습| iframe 요소로 특정 문서 삽입하기
|간단실습| 인라인 프레임 창에 하이퍼링크 연결하기
활용실습

Chapter 04 구조화된 테이블과 폼 만들기

Unit 01 테이블에 관련된 요소와 속성
|간단개요| 테이블 구성 요소와 속성 알아보기
|간단실습| table, tr, th, td 요소로 테이블 삽입하기
|TIP| 테이블의 테두리 표시
|간단실습| 테이블 요소에 속성 사용하기
Unit 02 테이블 제목과 행, 열의 그룹화
|간단개요| caption, col, colgroup, thead, tbody, tfoot 요소 알아보기
|간단실습| caption과 colgroup, col 요소로 제목과 열 그룹화하기
|TIP| 인라인 스타일 방식으로 요소에 CSS 적용하기
|간단실습| thead, tbody, tfoot 요소로 테이블 구조화하기
Unit 03 폼 정의와 레이블, 다양한 폼 컨트롤 요소
|간단개요| 폼의 이해와 form, label, input 요소와 속성 알아보기
|간단실습| 폼 정의와 텍스트, 암호, 이메일, 숫자, 날짜, 첨부 파일 입력 상자 삽입하기
|TIP| date 폼 컨트롤 요소
|TIP| number 폼 컨트롤 요소
|간단실습| 라디오 버튼, 체크 박스, 레이블 이용하기
|간단실습| 폼 버튼, 폼 이미지 삽입하기
|TIP| button 요소를 이용한 푸시 버튼
Unit 04 텍스트 영역, 셀렉트 메뉴, 필드 세트 요소
|간단개요| fieldset, legend, textarea, select, option 요소 알아보기
|간단실습| fieldset, legend 요소로 그룹화시키기
|간단실습| 여러 줄 글 상자와 셀렉트 메뉴 삽입하기
POWER UNIT 컬러 픽커와 슬라이더 삽입하기
활용실습

Chapter 05 CSS 마크업 시작하기

Unit 01 CSS 마크업 방식의 이해와 인라인 스타일의 CSS 디자인
|간단개요| CSS 용도와 적용 방식 알아보기
|간단실습| 블록 요소에 인라인 방식으로 CSS 적용하기
|TIP| font-size 속성
|간단실습| span 요소의 사용과 특정 글자 꾸미기
|TIP| background-color 속성
Unit 02 style 요소를 이용한 CSS 선택자 등록
|간단개요| style 요소와 CSS 주석 문 알아보기
|간단실습| 문서 전체의 여백과 배경 색상 적용하기
|간단실습| 문단에 CSS 적용하기
Unit 03 외장 방식의 CSS 선택자 연결
|간단개요| link 요소와 @import 구문 이해하기
|간단실습| link 요소로 CSS 문서 연결하기
|TIP| 스타일시트 문서 안의 지정 속성
|간단실습| @import로 CSS 문서 연결하기
Unit 04 CSS3 지원을 위한 웹브라우저별 벤더 프리픽스
|간단개요| 벤더 프리픽스 알아보기
|간단실습| 둥근 모서리 만들기
|TIP| 소스 코드에 입력되어 있는 CSS 속성
|간단실습| 박스 그림자 효과 만들기
활용실습

Chapter 06 CSS의 다양한 선택자 활용하기

Unit 01 태그 선택자
|간단개요| 태그 선택자의 특징 및 사용법 알아보기
|간단실습| 태그 선택자 사용하여 heading 요소 꾸미기
|TIP| width 속성
|간단실습| 태그 선택자 사용하여 li 요소에 일괄적으로 디자인 적용하기
|TIP| line-height 속성
Unit 02 클래스 선택자
|간단개요| 클래스 선택자의 특징 및 사용법 알아보기
|간단실습| 클래스 선택자 사용하여 특정 heading 요소 꾸미기
|TIP| border 속성
|간단실습| 클래스 선택자 사용하여 글자 일부를 꾸미는 span 요소에 적용하기
|TIP| font-weight 속성
Unit 03 아이디 선택자
|간단개요| 아이디 선택자의 특징 및 사용법 알아보기
|간단실습| 아이디 선택자 사용하여 ul 요소 꾸미기
|TIP| list-style 속성
|간단실습| 아이디 선택자 사용하여 div 요소 꾸미기
|TIP| CSS 속성 값의 상속
Unit 04 속성 선택자
|간단개요| 속성 선택자의 특징 및 사용법 알아보기
|간단실습| 속성 선택자 사용하여 특정 속성이 지정된 요소 꾸미기
|TIP| 특정 속성이 지정된 요소만 필터링하는 속성 선택자 형식
|간단실습| 속성 선택자 사용하여 특정 속성 값이 지정된 요소 꾸미기
Unit 05 자식과 인접 형제 선택자
|간단개요| 자식과 인접 형제 선택자의 특징 및 사용법 알아보기
|간단실습| 자식 선택자 사용하여 span 요소 꾸미기
|TIP| 자식 선택자 문법
|간단실습| 인접 형제 선택자 사용하여 li 요소 꾸미기
Unit 06 링크 관련 및 동적인 가상 클래스 선택자
|간단개요| 링크 관련 및 동적인 가상 클래스 선택자의 특징 및 사용법 알아보기
|간단실습| 가상 클래스 선택자 사용해 하이퍼링크 메뉴 스타일 변경하기
|TIP| 하이퍼링크에 관련된 가상 클래스 선택자
|간단실습| 가상 클래스 선택자 사용하여 input 스타일 지정하기
|TIP| 폼 요소에 관련된 가상 클래스 선택자
Unit 07 내용 추가 및 순서와 관련 있는 가상 클래스와 가상 요소 선택자
|간단개요| 가상 클래스와 가상 요소 선택자의 특징 및 사용법 알아보기
|간단실습| 첫 번째, 짝수 번째, 세 번째 li 요소 꾸미기
|TIP| 순서와 관련 있는 가상 클래스 선택자
|간단실습| p 요소의 첫 번째 글자와 첫 줄 꾸미기
|간단실습| 요소의 앞과 뒤에 내용 추가하기
|TIP| content 속성
Unit 08 전체 선택자와 그룹 선택자
|간단개요| 전체 선택자와 그룹 선택자의 특징 및 사용법 알아보기
|간단실습| 전체 선택자로 모든 요소의 속성 정의하기
|간단실습| 그룹 선택자 이용하여 같은 속성과 값 정의하기
Unit 09 소속을 정하는 트리 구조의 하위 자손 선택자
|간단개요| 하위 자손 선택자의 특징 및 사용법 알아보기
|간단실습| 아이디 선택자 안의 h2 요소와 p 요소 꾸미기
|간단실습| 아이디 선택자 안에 삽입된 목록의 특정 하이퍼링크 꾸미기
Unit 10 속성 값의 상속과 선택자 우선순위
|간단개요| 선택자 간의 속성 값 상속성과 우선순위 특징 알아보기
|간단실습| 속성 값의 상속 관계 알아보기
|TIP| #cookingSrc p span 선택자의 속성 값
|간단실습| 선택자 간의 우선순위 알아보기
|TIP| !important 속성
POWER UNIT CSS 레벨에 따른 선택자
활용실습

Chapter 07 CSS에서 제공하는 다양한 속성 알아보기

Unit 01 텍스트에 관련된 속성
|간단개요| 텍스트에 관련된 다양한 속성과 값 알아보기
|간단실습| 글꼴, 크기, 굵기, 스타일, 색상, 대소문자의 속성 적용하기
|TIP| font 속성
|간단실습| 글자/단어/줄 간격, 정렬, 들여쓰기, 대소문자 변환, 줄 속성 적용하기
|TIP| text-transform 속성
|간단실습| 글 문단의 흐름 방향, 공백 처리에 관련된 속성 적용하기
|TIP| white-space 속성
Unit 02 리스트, 콘텐츠 생성에 관련된 속성
|간단개요| 목록 문단, 문자열이나 특수 문자와 관련된 속성과 값 알아보기
|간단실습| 목록 문단에 이미지, 위치, 스타일 제어하기
|TIP| list-style-type 속성
|간단실습| 인용 부호, 특정 문자열과 같은 콘텐츠 생성하기
|TIP| counter-increment 속성
Unit 03 여백, 크기, 테두리, 윤곽선에 관련된 속성
|간단개요| 여백, 크기, 테두리, 윤곽선에 관련된 속성과 값 알아보기
|간단실습| 요소의 크기 지정 및 여백 처리하기
|TIP| margin 속성의 auto 값
|간단실습| 다양한 속성으로 테두리 표시하기
|TIP| border 속성
|간단실습| 모서리가 둥근 테두리 만들기
|TIP| border-radius 속성
|간단실습| 테두리 외곽에 아우트라인 처리하기
|TIP| outline 속성
Unit 04 배경 색상, 배경 이미지에 관련된 속성
|간단개요| 배경 색상, 배경 이미지에 관련된 속성과 값 알아보기
|간단실습| 요소의 배경 처리하기
|TIP| background 속성
|간단실습| 다중 배경 이미지, 배경 이미지의 크기와 위치 속성 적용하기
|TIP| 2개 이상의 배경 이미지 지정
Unit 05 투명도, 그림자 효과와 관련된 속성
|간단개요| 투명도, 그림자 효과와 관련된 속성과 값 알아보기
|간단실습| 글자, 이미지, 배경 색상의 투명도 조절하기
|TIP| opacity 속성
|간단실습| 요소에 그림자 효과 적용하기
|TIP| border 속성
Unit 06 테이블에 관련된 속성
|간단개요| 테이블에 관련된 속성과 값 알아보기
|간단실습| 테이블 테두리 병합하기
|TIP| border-collapse 속성
|간단실습| 빈 셀 삭제하고 셀 사이 간격 조절하기
|TIP| empty-cell 속성
POWER UNIT ‘border-radius.com’ 사이트 이용하기
활용실습

Chapter 08 CSS 레이아웃과 CSS 애니메이션 구현하기

Unit 01 float, clear 속성을 이용한 레이아웃
|간단개요| float, clear 속성과 특징 알아보기
|간단실습| 이미지 요소 옆에 문단 흐르게 만들기
|TIP| float 속성
|간단실습| 단 구성하고 float 해제하기
|TIP| clear 속성
Unit 02 position 속성을 이용한 레이아웃
|간단개요| position과 관련된 속성과 값 알아보기
|간단실습| 절대 좌표 방식으로 배치하기
|TIP| position:absolute; 속성
|간단실습| 상대 좌표 방식으로 배치하기
|TIP| position:relative; 속성
|간단실습| 고정 좌표 방식으로 배치하기
|TIP| position:fixed; 속성
Unit 03 display 속성을 이용한 레이아웃
|간단개요| display와 관련된 속성과 특징 알아보기
|간단실습| 이미지 요소를 세로로 배치하기
|TIP| display:block; 속성
|간단실습| 목록 요소를 가로로 배치하기
|TIP| display:inline; 속성
|간단실습| 제목 텍스트 대신 이미지로 대체하기
|TIP| display:none; 속성
|간단실습| 정의 문단, 목록 문단을 테이블 형식으로 배치하기
|TIP| display:tablel;과 display:table-cell; 속성
Unit 04 column과 box 속성을 이용한 레이아웃
|간단개요| column, box 속성과 관련된 값 알아보기
|간단실습| 다단에 구분선 표시하기
|TIP| column-count, column-rule, column-gap 속성
|간단실습| 목록을 역순으로 배치하고 가로 세로 중앙 정렬하기
|TIP| box-direction, box-orient, box-pack, box-align 속성
|간단실습| box-flex 속성으로 크기를 비율로 조정하기
|TIP| box-flex 속성
Unit 05 transform, transition 속성을 이용한 요소 변형과 애니메이션
|간단개요| transform, transition 속성과 관련된 값 알아보기
|간단실습| transform 속성으로 회전하기
|TIP| transform: rotate(n deg)와 transform-origin 속성
|간단실습| transition 속성으로 롤오버 애니메이션 만들기
|TIP| transition-property, transition-duration 속성
POWER UNIT overflow와 clip 속성 사용하기
|TIP| clip 속성
활용실습

Chapter 09 테마별 활용 팁과 미디어 쿼리 알아보기

Unit 01 그라데이션 활용
|간단개요| 그라데이션과 관련된 값 알아보기
|간단실습| 그라데이션 상자와 회원 가입 버튼 만들기
|TIP| 선형 그라데이션 색상 값
|간단실습| 그라데이션 롤오버 메뉴바 만들기
Unit 02 롤오버 이미지 효과 적용
|간단개요| 롤오버 이미지에 필요한 속성 알아보기
|간단실습| 투명도를 이용한 롤오버 이미지 만들기
|TIP| visibility 속성
|간단실습| 가로, 세로로 애니메이션 되어 커지는 롤오버 이미지 만들기
|TIP| transition-property, transition-duration, transition-delay 속성
Unit 03 탭 구조를 이용한 아이템 갤러리 제작
|간단개요| 탭 구조의 갤러리에 필요한 속성 알아보기
|간단실습| 탭 구조를 이용한 갤러리 1 - 외부 CSS 연결하고 소스 코딩하기
|간단실습| 탭 구조를 이용한 갤러리 2 - 파일 저장하고 내용 교체하기
Unit 04 이미지 목록 배치와 웹 스티커 효과 적용
|간단개요| 이미지 목록 배치와 웹 스티커 효과에 필요한 속성 알아보기
|간단실습| 이미지 배치하고 롤오버 시 블러 효과 적용하기
|TIP| display:block; 속성
|간단실습| 이미지 위에 웹 스티커 붙이기
Unit 05 로그인 폼과 주문 폼 디자인
|간단개요| 폼 문서 디자인 미리보기
|간단실습| 로그인 폼 문서 만들기
|간단실습| 주문 폼 문서 만들기
Unit 06 스타일이 돋보이는 테이블 디자인
|간단개요| 테이블 디자인 미리보기
|간단실습| 세로 줄이 있는 테이블 헤더 만들기
|간단실습| 배경 이미지 활용과 롤오버 시 색상이 변경되는 테이블 만들기
Unit 07 미디어 쿼리로 반응형 웹디자인의 구현
|간단개요| 반응형 웹디자인과 미디어 쿼리 개요 알아보기
|간단실습| 해상도에 따라 디자인 다르게 설정하기 449
|간단실습| 화면용과 인쇄용 디자인 별도로 만들기 452
|TIP| 미디어 타입 따라 변경되는 별도의 CSS 파일로 연결되는 미디어 쿼리 형식 457
활용실습

Chapter 10 HTML5와 CSS3 기반의 실전 웹사이트 만들기

Unit 01 제작 가이드라인 설계와 HTML5 마크업
|간단개요| 제작 가이드라인과 레이아웃 설계하기
|간단실습| 메인 페이지의 HTML5 마크업하기
|간단실습| 서브 페이지의 HTML5 마크업하기
|간단실습| 영역별 서브 페이지의 HTML5 마크업 1
|간단실습| 영역별 서브 페이지의 HTML5 마크업 2
|간단실습| 영역별 서브 페이지의 HTML5 마크업 3
Unit 02 공용 스타일시트 정의와 적용
|간단개요| 공용 스타일시트 제작 가이드라인 설계하기
|간단실습| 공용 스타일시트 마크업하고 적용하기
|TIP| -webkit-text-size-adjust:none; 속성
|간단실습| 레이아웃 공용 스타일시트 마크업하고 적용하기
|TIP| 전체 크기와 문서의 중앙 정렬
|TIP| 왼쪽 사이드바 메뉴 부분에 관련된 마크업 소스
Unit 03 영역별 메인 페이지와 서브 페이지의 디자인
|간단개요| 메인 페이지와 서브 페이지의 디자인 가이드라인 설계하기
|간단실습| 영역별 메인 페이지에 디자인 적용하기
|TIP| 첫 번째 롤오버 메뉴 부분에 관련된 마크업 소스
|TIP| 두 번째 롤오버 메뉴 부분에 관련된 마크업 소스
|간단실습| 영역별 서브 페이지에 디자인 적용하기 1
|TIP| 서브 페이지 롤오버 글자 내비게이션 부분에 관련된 마크업 소스
|간단실습| 영역별 서브 페이지에 디자인 적용하기 2
|TIP| 상단 내비게이션 부분에 관련된 마크업 소스
|간단실습| 영역별 서브 페이지에 디자인 적용하기 3
|TIP| 목록 문단 부분에 관련된 마크업 소스
Unit 04 미디어 쿼리를 이용한 반응형 레이아웃 제작
|간단개요| 미디어 쿼리를 이용한 반응형 레이아웃 제작 가이드라인 살펴보기
|간단실습| 미디어 쿼리를 이용한 해상도별 웹디자인하기 1
|간단실습| 미디어 쿼리를 이용한 해상도별 웹디자인하기 2
|간단실습| 모바일 기기를 위한 레이아웃 구성하기
POWER UNIT 웹 출판 후 모바일 기기에서 확인하기
|TIP| 웹 계정 서비스
|TIP| 파일 질라
POWER UNIT HTML5가 지원되지 않는 인터넷 익스플로러 및 구 버전의 웹브라우저에 대처하기