<B>Chapter 01 HTML5와 CSS3 시작하기 </B><br/><br/>Unit 01 HTML5와 CSS3의 핵심 파악하기 <br/> |간단개요| HTML5의 탄생 역사 및 새롭게 추가된 기능 알아보기<br/> |간단개요| CSS3의 소개 및 새롭게 추가된 기능 알아보기 <br/>Unit 02 실전을 위한 작업 환경 준비하기<br/> |간단개요| 문서 제작을 위한 에디터 설정 및 웹브라우저 지원 <br/> |간단실습| 예제 파일 복사 및 지원 웹브라우저에서 결과 확인하기 <br/> |TIP| 파이어폭스와 오페라에서 문서 열고 결과 확인하기<br/> |간단실습| 에디트 플러스 설치 및 환경 설정하기 <br/> |TIP| 에디트 플러스에서 웹브라우저로 연동하여 결과 확인하기<br/><br/><b>Chapter 02 HTML5 마크업 시작하기 </b><br/><br/>Unit 01 HTML5 구조와 마크업 규칙 <br/> |간단개요| HTML5 구조 파악과 마크업 규칙 및 meta, comment 요소 알아보기 <br/> |TIP| UTF-8과 EUC-KR <br/> |TIP| HTML4와 XHTML 문서 선언<br/> |간단실습| HTML5 문서의 기본 구조와 주석 입력하기<br/> |간단실습| meta 요소를 이용한 문서 정보 지정과 주석 달기 <br/> |TIP| UTF-8 인코딩 방식으로 문서 저장하기<br/>Unit 02 문단, 제목에 관련된 요소<br/> |간단개요| 문단 편집과 관련된 요소 알아보기<br/> |간단실습| heading, p, br 요소를 이용한 내용 입력하기<br/> |TIP| 요소의 중첩<br/> |간단실습| 캐릭터 엔티티를 이용한 특수 문자 및 공백 입력하기<br/> |TIP| 특수 문자 입력<br/>Unit 03 텍스트에 관련된 요소<br/> |간단개요| 텍스트와 관련된 요소 알아보기 <br/> |간단실습| abbr, address, strong, sub, blockquote 요소 입력하기<br/> |TIP| strong 요소와 b 요소 <br/> |TIP| blockquote 요소와 q 요소<br/> |간단실습| HTML5에 추가된 텍스트 관련 요소 입력하기<br/> |TIP| time 요소와 속성<br/> |TIP| meter 요소와 속성<br/>Unit 04 목록에 관련된 요소 <br/> |간단개요| 순서, 비순서, 정의 목록에 관련된 요소 알아보기 <br/> |간단실습| 순서, 비순서 목록 요소 입력하기 <br/> |간단실습| 정의 목록과 관련된 요소 입력하기<br/>Unit 05 시맨틱 마크업을 위한 HTML5 요소<br/> |간단개요| HTML5에 새롭게 추가된 시맨틱 요소 살펴보기<br/> |간단실습| 시맨틱 요소를 이용한 HTML5 문서 만들기 1<br/> |간단실습| 시맨틱 요소를 이용한 HTML5 문서 만들기 2 <br/>POWER UNIT 에디트 플러스에서 HTML5 템플릿 문서 만들어 활용하기 <br/>POWER UNIT 에디트 플러스에서 HTML5의 클립 텍스트 사용하기 <br/>POWER UNIT 드림위버에서 HTML5 문서 만들기 <br/>활용실습<br/><br/><b>Chapter 03 HTML5의 임베디드 요소 알아보고 하이퍼링크 지정하기</b><br/><br/>Unit 01 이미지와 수평선에 관련된 요소<br/> |간단개요| 이미지 파일과 img, figure, figcaption, hr 요소 알아보기<br/> |간단실습| 이미지와 수평선 삽입하기 <br/> |간단실습| 이미지와 설명글 달기 <br/>Unit 02 비디오와 오디오에 관련된 요소<br/> |간단개요| video, audio 요소와 지원 파일 알아보기 <br/> |간단실습| audio 요소로 사운드 삽입하기 <br/> |TIP| 오디오 파일 변환 프로그램<br/> |간단실습| video 요소로 비디오 삽입하기 <br/> |TIP| mp4 파일 포맷의 비디오 만들기 <br/>POWER UNIT Firefogg를 이용하여 ogv 파일 형식으로 변환하기 <br/>Unit 03 하이퍼링크와 이미지맵에 관련된 요소 <br/> |간단개요| a, map, area 요소와 다양한 하이퍼링크 기능 알아보기 <br/> |간단실습| 다양한 하이퍼링크와 타깃 지정하기 <br/> |간단실습| 네임앵커 지정하기 <br/> |TIP| 다른 문서의 특정 위치로 이동하기<br/> |간단실습| 이미지맵 지정하기<br/>Unit 04 인라인 프레임에 관련된 요소<br/> |간단개요| iframe 요소와 하이퍼링크 지정 알아보기 <br/> |TIP| 프레임세트(Frameset)와 관련된 요소 <br/> |간단실습| iframe 요소로 특정 문서 삽입하기 <br/> |간단실습| 인라인 프레임 창에 하이퍼링크 연결하기<br/>활용실습 <br/><br/><b>Chapter 04 구조화된 테이블과 폼 만들기 </b><br/><br/>Unit 01 테이블에 관련된 요소와 속성<br/> |간단개요| 테이블 구성 요소와 속성 알아보기 <br/> |간단실습| table, tr, th, td 요소로 테이블 삽입하기<br/> |TIP| 테이블의 테두리 표시<br/> |간단실습| 테이블 요소에 속성 사용하기 <br/>Unit 02 테이블 제목과 행, 열의 그룹화 <br/> |간단개요| caption, col, colgroup, thead, tbody, tfoot 요소 알아보기 <br/> |간단실습| caption과 colgroup, col 요소로 제목과 열 그룹화하기 <br/> |TIP| 인라인 스타일 방식으로 요소에 CSS 적용하기 <br/> |간단실습| thead, tbody, tfoot 요소로 테이블 구조화하기<br/>Unit 03 폼 정의와 레이블, 다양한 폼 컨트롤 요소 <br/> |간단개요| 폼의 이해와 form, label, input 요소와 속성 알아보기<br/> |간단실습| 폼 정의와 텍스트, 암호, 이메일, 숫자, 날짜, 첨부 파일 입력 상자 삽입하기 <br/> |TIP| date 폼 컨트롤 요소 <br/> |TIP| number 폼 컨트롤 요소 <br/> |간단실습| 라디오 버튼, 체크 박스, 레이블 이용하기<br/> |간단실습| 폼 버튼, 폼 이미지 삽입하기<br/> |TIP| button 요소를 이용한 푸시 버튼 <br/>Unit 04 텍스트 영역, 셀렉트 메뉴, 필드 세트 요소 <br/> |간단개요| fieldset, legend, textarea, select, option 요소 알아보기<br/> |간단실습| fieldset, legend 요소로 그룹화시키기<br/> |간단실습| 여러 줄 글 상자와 셀렉트 메뉴 삽입하기 <br/>POWER UNIT 컬러 픽커와 슬라이더 삽입하기<br/>활용실습 <br/><br/><b>Chapter 05 CSS 마크업 시작하기 </b><br/><br/>Unit 01 CSS 마크업 방식의 이해와 인라인 스타일의 CSS 디자인<br/> |간단개요| CSS 용도와 적용 방식 알아보기 <br/> |간단실습| 블록 요소에 인라인 방식으로 CSS 적용하기<br/> |TIP| font-size 속성 <br/> |간단실습| span 요소의 사용과 특정 글자 꾸미기<br/> |TIP| background-color 속성<br/>Unit 02 style 요소를 이용한 CSS 선택자 등록<br/> |간단개요| style 요소와 CSS 주석 문 알아보기 <br/> |간단실습| 문서 전체의 여백과 배경 색상 적용하기<br/> |간단실습| 문단에 CSS 적용하기 <br/>Unit 03 외장 방식의 CSS 선택자 연결 <br/> |간단개요| link 요소와 @import 구문 이해하기<br/> |간단실습| link 요소로 CSS 문서 연결하기<br/> |TIP| 스타일시트 문서 안의 지정 속성<br/> |간단실습| @import로 CSS 문서 연결하기<br/>Unit 04 CSS3 지원을 위한 웹브라우저별 벤더 프리픽스 <br/> |간단개요| 벤더 프리픽스 알아보기 <br/> |간단실습| 둥근 모서리 만들기 <br/> |TIP| 소스 코드에 입력되어 있는 CSS 속성<br/> |간단실습| 박스 그림자 효과 만들기 <br/>활용실습<br/><br/><b>Chapter 06 CSS의 다양한 선택자 활용하기 </b><br/><br/>Unit 01 태그 선택자 <br/> |간단개요| 태그 선택자의 특징 및 사용법 알아보기 <br/> |간단실습| 태그 선택자 사용하여 heading 요소 꾸미기<br/> |TIP| width 속성 <br/> |간단실습| 태그 선택자 사용하여 li 요소에 일괄적으로 디자인 적용하기<br/> |TIP| line-height 속성 <br/>Unit 02 클래스 선택자 <br/> |간단개요| 클래스 선택자의 특징 및 사용법 알아보기 <br/> |간단실습| 클래스 선택자 사용하여 특정 heading 요소 꾸미기<br/> |TIP| border 속성 <br/> |간단실습| 클래스 선택자 사용하여 글자 일부를 꾸미는 span 요소에 적용하기 <br/> |TIP| font-weight 속성<br/>Unit 03 아이디 선택자 <br/> |간단개요| 아이디 선택자의 특징 및 사용법 알아보기 <br/> |간단실습| 아이디 선택자 사용하여 ul 요소 꾸미기 <br/> |TIP| list-style 속성 <br/> |간단실습| 아이디 선택자 사용하여 div 요소 꾸미기 <br/> |TIP| CSS 속성 값의 상속<br/>Unit 04 속성 선택자 <br/> |간단개요| 속성 선택자의 특징 및 사용법 알아보기<br/> |간단실습| 속성 선택자 사용하여 특정 속성이 지정된 요소 꾸미기<br/> |TIP| 특정 속성이 지정된 요소만 필터링하는 속성 선택자 형식<br/> |간단실습| 속성 선택자 사용하여 특정 속성 값이 지정된 요소 꾸미기 <br/>Unit 05 자식과 인접 형제 선택자 <br/> |간단개요| 자식과 인접 형제 선택자의 특징 및 사용법 알아보기<br/> |간단실습| 자식 선택자 사용하여 span 요소 꾸미기 <br/> |TIP| 자식 선택자 문법<br/> |간단실습| 인접 형제 선택자 사용하여 li 요소 꾸미기 <br/>Unit 06 링크 관련 및 동적인 가상 클래스 선택자<br/> |간단개요| 링크 관련 및 동적인 가상 클래스 선택자의 특징 및 사용법 알아보기<br/> |간단실습| 가상 클래스 선택자 사용해 하이퍼링크 메뉴 스타일 변경하기<br/> |TIP| 하이퍼링크에 관련된 가상 클래스 선택자<br/> |간단실습| 가상 클래스 선택자 사용하여 input 스타일 지정하기<br/> |TIP| 폼 요소에 관련된 가상 클래스 선택자 <br/>Unit 07 내용 추가 및 순서와 관련 있는 가상 클래스와 가상 요소 선택자 <br/> |간단개요| 가상 클래스와 가상 요소 선택자의 특징 및 사용법 알아보기<br/> |간단실습| 첫 번째, 짝수 번째, 세 번째 li 요소 꾸미기<br/> |TIP| 순서와 관련 있는 가상 클래스 선택자<br/> |간단실습| p 요소의 첫 번째 글자와 첫 줄 꾸미기 <br/> |간단실습| 요소의 앞과 뒤에 내용 추가하기 <br/> |TIP| content 속성 <br/>Unit 08 전체 선택자와 그룹 선택자 <br/> |간단개요| 전체 선택자와 그룹 선택자의 특징 및 사용법 알아보기<br/> |간단실습| 전체 선택자로 모든 요소의 속성 정의하기 <br/> |간단실습| 그룹 선택자 이용하여 같은 속성과 값 정의하기 <br/>Unit 09 소속을 정하는 트리 구조의 하위 자손 선택자<br/> |간단개요| 하위 자손 선택자의 특징 및 사용법 알아보기 <br/> |간단실습| 아이디 선택자 안의 h2 요소와 p 요소 꾸미기<br/> |간단실습| 아이디 선택자 안에 삽입된 목록의 특정 하이퍼링크 꾸미기 <br/>Unit 10 속성 값의 상속과 선택자 우선순위 <br/> |간단개요| 선택자 간의 속성 값 상속성과 우선순위 특징 알아보기<br/> |간단실습| 속성 값의 상속 관계 알아보기 <br/> |TIP| #cookingSrc p span 선택자의 속성 값 <br/> |간단실습| 선택자 간의 우선순위 알아보기<br/> |TIP| !important 속성 <br/>POWER UNIT CSS 레벨에 따른 선택자<br/>활용실습 <br/><br/><b>Chapter 07 CSS에서 제공하는 다양한 속성 알아보기 </b><br/><br/>Unit 01 텍스트에 관련된 속성 <br/> |간단개요| 텍스트에 관련된 다양한 속성과 값 알아보기 <br/> |간단실습| 글꼴, 크기, 굵기, 스타일, 색상, 대소문자의 속성 적용하기 <br/> |TIP| font 속성 <br/> |간단실습| 글자/단어/줄 간격, 정렬, 들여쓰기, 대소문자 변환, 줄 속성 적용하기 <br/> |TIP| text-transform 속성 <br/> |간단실습| 글 문단의 흐름 방향, 공백 처리에 관련된 속성 적용하기 <br/> |TIP| white-space 속성<br/>Unit 02 리스트, 콘텐츠 생성에 관련된 속성<br/> |간단개요| 목록 문단, 문자열이나 특수 문자와 관련된 속성과 값 알아보기 <br/> |간단실습| 목록 문단에 이미지, 위치, 스타일 제어하기<br/> |TIP| list-style-type 속성 <br/> |간단실습| 인용 부호, 특정 문자열과 같은 콘텐츠 생성하기<br/> |TIP| counter-increment 속성 <br/>Unit 03 여백, 크기, 테두리, 윤곽선에 관련된 속성<br/> |간단개요| 여백, 크기, 테두리, 윤곽선에 관련된 속성과 값 알아보기<br/> |간단실습| 요소의 크기 지정 및 여백 처리하기<br/> |TIP| margin 속성의 auto 값 <br/> |간단실습| 다양한 속성으로 테두리 표시하기<br/> |TIP| border 속성 <br/> |간단실습| 모서리가 둥근 테두리 만들기<br/> |TIP| border-radius 속성 <br/> |간단실습| 테두리 외곽에 아우트라인 처리하기 <br/> |TIP| outline 속성 <br/>Unit 04 배경 색상, 배경 이미지에 관련된 속성<br/> |간단개요| 배경 색상, 배경 이미지에 관련된 속성과 값 알아보기 <br/> |간단실습| 요소의 배경 처리하기 <br/> |TIP| background 속성 <br/> |간단실습| 다중 배경 이미지, 배경 이미지의 크기와 위치 속성 적용하기<br/> |TIP| 2개 이상의 배경 이미지 지정<br/>Unit 05 투명도, 그림자 효과와 관련된 속성 <br/> |간단개요| 투명도, 그림자 효과와 관련된 속성과 값 알아보기 <br/> |간단실습| 글자, 이미지, 배경 색상의 투명도 조절하기<br/> |TIP| opacity 속성 <br/> |간단실습| 요소에 그림자 효과 적용하기 <br/> |TIP| border 속성<br/>Unit 06 테이블에 관련된 속성<br/> |간단개요| 테이블에 관련된 속성과 값 알아보기<br/> |간단실습| 테이블 테두리 병합하기 <br/> |TIP| border-collapse 속성 <br/> |간단실습| 빈 셀 삭제하고 셀 사이 간격 조절하기<br/> |TIP| empty-cell 속성 <br/>POWER UNIT ‘border-radius.com’ 사이트 이용하기<br/>활용실습<br/><br/><b>Chapter 08 CSS 레이아웃과 CSS 애니메이션 구현하기 </b><br/><br/>Unit 01 float, clear 속성을 이용한 레이아웃 <br/> |간단개요| float, clear 속성과 특징 알아보기 <br/> |간단실습| 이미지 요소 옆에 문단 흐르게 만들기 <br/> |TIP| float 속성<br/> |간단실습| 단 구성하고 float 해제하기 <br/> |TIP| clear 속성 <br/>Unit 02 position 속성을 이용한 레이아웃 <br/> |간단개요| position과 관련된 속성과 값 알아보기 <br/> |간단실습| 절대 좌표 방식으로 배치하기 <br/> |TIP| position:absolute; 속성 <br/> |간단실습| 상대 좌표 방식으로 배치하기 <br/> |TIP| position:relative; 속성 <br/> |간단실습| 고정 좌표 방식으로 배치하기 <br/> |TIP| position:fixed; 속성 <br/>Unit 03 display 속성을 이용한 레이아웃<br/> |간단개요| display와 관련된 속성과 특징 알아보기 <br/> |간단실습| 이미지 요소를 세로로 배치하기 <br/> |TIP| display:block; 속성 <br/> |간단실습| 목록 요소를 가로로 배치하기<br/> |TIP| display:inline; 속성 <br/> |간단실습| 제목 텍스트 대신 이미지로 대체하기 <br/> |TIP| display:none; 속성 <br/> |간단실습| 정의 문단, 목록 문단을 테이블 형식으로 배치하기 <br/> |TIP| display:tablel;과 display:table-cell; 속성<br/>Unit 04 column과 box 속성을 이용한 레이아웃 <br/> |간단개요| column, box 속성과 관련된 값 알아보기 <br/> |간단실습| 다단에 구분선 표시하기 <br/> |TIP| column-count, column-rule, column-gap 속성 <br/> |간단실습| 목록을 역순으로 배치하고 가로 세로 중앙 정렬하기 <br/> |TIP| box-direction, box-orient, box-pack, box-align 속성 <br/> |간단실습| box-flex 속성으로 크기를 비율로 조정하기 <br/> |TIP| box-flex 속성<br/>Unit 05 transform, transition 속성을 이용한 요소 변형과 애니메이션 <br/> |간단개요| transform, transition 속성과 관련된 값 알아보기<br/> |간단실습| transform 속성으로 회전하기 <br/> |TIP| transform: rotate(n deg)와 transform-origin 속성<br/> |간단실습| transition 속성으로 롤오버 애니메이션 만들기 <br/> |TIP| transition-property, transition-duration 속성 <br/>POWER UNIT overflow와 clip 속성 사용하기 <br/> |TIP| clip 속성 <br/>활용실습<br/><br/><b>Chapter 09 테마별 활용 팁과 미디어 쿼리 알아보기 </b><br/><br/>Unit 01 그라데이션 활용 <br/> |간단개요| 그라데이션과 관련된 값 알아보기<br/> |간단실습| 그라데이션 상자와 회원 가입 버튼 만들기 <br/> |TIP| 선형 그라데이션 색상 값 <br/> |간단실습| 그라데이션 롤오버 메뉴바 만들기 <br/>Unit 02 롤오버 이미지 효과 적용 <br/> |간단개요| 롤오버 이미지에 필요한 속성 알아보기<br/> |간단실습| 투명도를 이용한 롤오버 이미지 만들기 <br/> |TIP| visibility 속성<br/> |간단실습| 가로, 세로로 애니메이션 되어 커지는 롤오버 이미지 만들기 <br/> |TIP| transition-property, transition-duration, transition-delay 속성 <br/>Unit 03 탭 구조를 이용한 아이템 갤러리 제작 <br/> |간단개요| 탭 구조의 갤러리에 필요한 속성 알아보기 <br/> |간단실습| 탭 구조를 이용한 갤러리 1 - 외부 CSS 연결하고 소스 코딩하기 <br/> |간단실습| 탭 구조를 이용한 갤러리 2 - 파일 저장하고 내용 교체하기<br/>Unit 04 이미지 목록 배치와 웹 스티커 효과 적용<br/> |간단개요| 이미지 목록 배치와 웹 스티커 효과에 필요한 속성 알아보기<br/> |간단실습| 이미지 배치하고 롤오버 시 블러 효과 적용하기<br/> |TIP| display:block; 속성 <br/> |간단실습| 이미지 위에 웹 스티커 붙이기<br/>Unit 05 로그인 폼과 주문 폼 디자인 <br/> |간단개요| 폼 문서 디자인 미리보기 <br/> |간단실습| 로그인 폼 문서 만들기 <br/> |간단실습| 주문 폼 문서 만들기 <br/>Unit 06 스타일이 돋보이는 테이블 디자인<br/> |간단개요| 테이블 디자인 미리보기 <br/> |간단실습| 세로 줄이 있는 테이블 헤더 만들기 <br/> |간단실습| 배경 이미지 활용과 롤오버 시 색상이 변경되는 테이블 만들기 <br/>Unit 07 미디어 쿼리로 반응형 웹디자인의 구현<br/> |간단개요| 반응형 웹디자인과 미디어 쿼리 개요 알아보기 <br/> |간단실습| 해상도에 따라 디자인 다르게 설정하기 449<br/> |간단실습| 화면용과 인쇄용 디자인 별도로 만들기 452<br/> |TIP| 미디어 타입 따라 변경되는 별도의 CSS 파일로 연결되는 미디어 쿼리 형식 457<br/>활용실습<br/><br/><b>Chapter 10 HTML5와 CSS3 기반의 실전 웹사이트 만들기 </b><br/><br/>Unit 01 제작 가이드라인 설계와 HTML5 마크업 <br/> |간단개요| 제작 가이드라인과 레이아웃 설계하기 <br/> |간단실습| 메인 페이지의 HTML5 마크업하기<br/> |간단실습| 서브 페이지의 HTML5 마크업하기 <br/> |간단실습| 영역별 서브 페이지의 HTML5 마크업 1<br/> |간단실습| 영역별 서브 페이지의 HTML5 마크업 2 <br/> |간단실습| 영역별 서브 페이지의 HTML5 마크업 3 <br/>Unit 02 공용 스타일시트 정의와 적용 <br/> |간단개요| 공용 스타일시트 제작 가이드라인 설계하기<br/> |간단실습| 공용 스타일시트 마크업하고 적용하기<br/> |TIP| -webkit-text-size-adjust:none; 속성<br/> |간단실습| 레이아웃 공용 스타일시트 마크업하고 적용하기<br/> |TIP| 전체 크기와 문서의 중앙 정렬 <br/> |TIP| 왼쪽 사이드바 메뉴 부분에 관련된 마크업 소스 <br/>Unit 03 영역별 메인 페이지와 서브 페이지의 디자인 <br/> |간단개요| 메인 페이지와 서브 페이지의 디자인 가이드라인 설계하기<br/> |간단실습| 영역별 메인 페이지에 디자인 적용하기 <br/> |TIP| 첫 번째 롤오버 메뉴 부분에 관련된 마크업 소스 <br/> |TIP| 두 번째 롤오버 메뉴 부분에 관련된 마크업 소스 <br/> |간단실습| 영역별 서브 페이지에 디자인 적용하기 1<br/> |TIP| 서브 페이지 롤오버 글자 내비게이션 부분에 관련된 마크업 소스 <br/> |간단실습| 영역별 서브 페이지에 디자인 적용하기 2 <br/> |TIP| 상단 내비게이션 부분에 관련된 마크업 소스<br/> |간단실습| 영역별 서브 페이지에 디자인 적용하기 3 <br/> |TIP| 목록 문단 부분에 관련된 마크업 소스 <br/>Unit 04 미디어 쿼리를 이용한 반응형 레이아웃 제작<br/> |간단개요| 미디어 쿼리를 이용한 반응형 레이아웃 제작 가이드라인 살펴보기 <br/> |간단실습| 미디어 쿼리를 이용한 해상도별 웹디자인하기 1 <br/> |간단실습| 미디어 쿼리를 이용한 해상도별 웹디자인하기 2<br/> |간단실습| 모바일 기기를 위한 레이아웃 구성하기 <br/>POWER UNIT 웹 출판 후 모바일 기기에서 확인하기 <br/> |TIP| 웹 계정 서비스 <br/> |TIP| 파일 질라 <br/>POWER UNIT HTML5가 지원되지 않는 인터넷 익스플로러 및 구 버전의 웹브라우저에 대처하기

HTML5+CSS3, 미디어 쿼리를 이용한 반응형 웹디자인의 구현, 웹사이트 실전 제작법 공개!
본문 마지막 장에서는 HTML5를 기반으로 한 구조를 마크업하고 CSS3로 레이아웃 디자인을 하여 템플릿 페이지를 구성해 하나의 웹사이트를 제작하는 실전 기법을 소개합니다. 기본 레이아웃이 구성되면 해상도에 따라 변경되도록 미디어 쿼리 기능을 사용하여 반응형 웹디자인을 구현해 봅니다.

이론과 예제로 익힌 기능을 바로 내 것으로 만드는 활용 문제와 해설 파일 제공!
이론도 익히고 예제도 따라 해보지만 HTML5와 CSS3를 자유자재로 구사하기는 쉽지 않습니다. 그래서 <실력이 탐나는 HTML5+CSS3>에서는 학습한 내용을 확실하게 내 것으로 만들 수 있도록 각 장이 끝날 때마다 활용 문제를 배치했습니다. 간략한 힌트만으로 활용 문제를 풀어보며 익힌 내용을 복습하고, 별도로 제공되는 해설 파일로 결과를 확인할 수 있습니다.

장별 요약

Chapter 01. HTML5과 CSS3 시작하기
Chapter 01에서는 HTML5와 CSS3를 이용하여 본격적으로 마크업하기 전 준비 사항과 함께 대략적인 마크업 언어의 특징들에 대해 알아봅니다. Chapter 02부터 진행되는 실습 예제를 위해서는 여기에서의 진행 과정이 필요하므로 HTML이나 CSS가 처음이거나 익숙하지 않은 사용자는 꼭 전반적인 진행 사항을 이해하고 준비하도록 합니다.

Chapter 02. HTML5 마크업 시작하기
웹 문서 제작에서 HTML5는 이전 버전의 HTML4 및 XHTML에서 사용되던 요소를 표준화시키면서 mark, ruby, header, navi, aside, section과 같이 웹 표준과 웹 접근성 향상을 위한 새로운 요소를 추가하였습니다. Chapter 02에서는 HTML5의 마크업 규칙을 바탕으로 이루어진 구성 요소, 텍스트에 관련된 문단 요소 및 시맨틱 웹을 위한 구조화 요소에 대해 알아보고 직접 마크업합니다.

Chapter 03. HTML5의 임베디드 요소 알아보고 하이퍼링크 지정하기
이미지, 비디오, 오디오와 같이 별도 파일로 구성된 개체를 특정 위치에 삽입하는 임베디드 요소인 img, audio, video와 함께 문서와 문서를 서로 연결해주는 하이퍼링크, 이미지맵, 네임앵커, 인라인 프레임에 관련된 마크업 요소에 대해 알아봅니다. 특히 HTML5에서 새로 추가된 audio, video 요소는 별도의 플러그인 없이 오디오와 비디오를 재생하므로 웹페이지 콘텐츠에 다양하게 활용할 수 있습니다.

Chapter 04. 구조화된 테이블과 폼 만들기
데이터를 행과 열의 조합으로 정리해주는 테이블과 관련된 요소에 대해 알아봅니다. 또한, 로그인 페이지, 회원가입 페이지, 설문 페이지, 주문서 페이지, 게시판, 검색 기능 등에서 사용되는 폼과 관련된 다양한 요소에 대해서도 살펴봅니다.

Chapter 05. CSS 마크업 시작하기
CSS는 HTML에서 지원하지 못했던 타이포그래피, 배경 이미지, 레이아웃, 테이블 속성을 다양하게 지원하고 있습니다. CSS의 특징과 함께 다양한 삽입 방법, 웹브라우저에서 CSS3 디자인을 위해 제공하는 벤더 프리픽스에 대해 알아봅니다.

Chapter 06. CSS의 다양한 선택자 활용하기
선택자는 CSS 속성과 값을 지정할 대상 영역을 지정하는 역할을 합니다. 문서에 삽입된 태그 전체나 사용자 이름으로 지정한 특정 영역을 지정하는 선택자도 있고, 마우스 포인터의 움직임에 따라 상태를 변화시키는 선택자도 있습니다. Chapter 06에서는 이러한 선택자의 다양한 특성을 이해하고 상황에 맞춰 사용하는 방법에 대해 알아봅니다.

Chapter 07. CSS에서 제공하는 다양한 속성 알아보기
정의한 선택자의 디자인을 결정하는 타이포그래피, 목록, 박스 모델의 크기, 여백, 테두리, 아우트라인, 배경 이미지, 그림자 효과, 투명도와 같은 CSS의 다양한 속성을 분야별로 알아봅니다. 특히 CSS3부터는 다중 배경 이미지 사용, 그림자 효과, 요소의 투명도, 둥근 모서리 처리와 같이 포토샵 등의 전문 그래픽 프로그램으로 구현할 수 있었던 기능들이 대폭 추가되었습니다.

Chapter 08. CSS 레이아웃과 CSS 애니메이션 구현하기
과거 테이블 구조를 이용해야만 했던 웹페이지의 레이아웃은 CSS의 출현 이후 float, position, display와 같은 다양한 속성을 이용하여 좀 더 유연하게 레이아웃을 구현할 수 있게 되었습니다. 특히 CSS3의 다단 칼럼 기능이나 박스에 관련된 속성을 이용하면 편집 디자인에서 사용했던 레이아웃을 직관적이며 유동적으로 구현할 수 있습니다. Chapter 08에서는 다양한 레이아웃을 구현해 보고 요소를 변형하고 애니메이션을 적용할 수 있는 동적 CSS 속성도 함께 알아봅니다.

Chapter 09. 테마별 활용 팁과 미디어 쿼리 알아보기
Chapter 09에서는 앞에서 학습했던 CSS 선택자, 다양한 속성을 이용하여 롤오버 이미지, 갤러리, 웹 스티커, 폼, 테이블과 같은 테마로 종합적인 예제를 만들어 봅니다. 이와 함께 CSS3에서 더욱 강력해진 그라데이션 효과와 모바일과 같은 디바이스 화면이나 인쇄물과 같이 다양한 환경에 따라 서로 다른 디자인으로 표시되는 미디어 쿼리 기능에 대해서도 알아봅니다.

Chapter 10. HTML5와 CSS3 기반의 실전 웹사이트 만들기
Chapter 10은 앞에서 다루어왔던 HTML5와 CSS3를 이용하여 템플릿 페이지를 만들고 문서와 문서를 연결해 하나의 웹사이트를 제작합니다. 특히 기본 레이아웃이 구성되면 해상도에 따라 변경되도록 미디어 쿼리 기능을 사용하여 반응형 웹디자인을 구현해 봅니다.