본문 바로가기
WebDev/HTML5

[HTML5&CSS3] DO It! HTML5+CSS3 웹표준의 정석(book)

by ㅇㅏㄹI 수 2013. 11. 22.
728x90

교재 DO It! HTML5+CSS3 웹표준의 정석

교재이미지[^1]
[^1]: 이지스퍼블리싱 출판사 이미지 링크 연결.

출간일 : 2013년 09월 27일
저자 : 고경희^2
네이버카페 : cafe.naver.com/doithtml5

출판사 : 이지스퍼블리싱

목차

첫째마당
기초 태그부터 시작하는 HTML5의 모든 것

01장 HTML 기본 다지기
01-1 웹, HTML 이해하기
01-2 왜 HTML과 CSS를 배워야 할까?
01-3 웹 표준은 무엇인가?
01-4 실습 준비하기
[직접] 무료 편집기 노트패트++ 설치하기
[직접] 책에 있는 실습과정 준비하기
[직접] 닷홈에 무료 호스팅 서비스 신청하기
[직접] 무료 FTP 프로그램 FileZilla 설치하기
01-5 처음 만드는 HTML 문서
[직접] 기본 구조의 HTML 문서 만들기
[직접] 내가 만든 문서 웹 서버에 올리고 확인하기
01-6 HTML 문서의 구조
01-7 자주 쓰는 기본 태그 익히기
01-8 이 사이트는 어떻게 만든 거지? - 개발자 도구

[Special 01] 블로그와 게시판에서 사용하는 HTML
[Special 02] 네이버 편집기에서 HTML 태그 연습해 보기

02장 HTML5와 시맨틱 태그
02-1 HTML5의 문서 구조
02-2 레이아웃을 위한 HTML5 시맨틱 태그들
02-3 웹 브라우저 버전 고려하기

03장 텍스트와 하이퍼링크 관련 태그들
03-1 텍스트를 묶어서 처리하는 태그들
03-2 다양한 텍스트 관련 태그들
03-3 목록을 만드는 태그들
[직접] 다양한 텍스트 태그 연습하기
03-4 표 관련 태그들
03-5 원하는 곳으로 연결해주는 하이퍼링크

04장 멀티미디어를 다루는 태그들
04-1 HTML5와 이미지
[Special 03] 이미지 맵으로 이벤트 페이지 만들기
04-2 이미지 파일에 캡션 붙이기
[직접] 웹 문서에 이미지 파일 넣기
04-3 멀티미디어 재생하기
[직접] 비디오 파일 변환하기
[직접] 웹 문서에 비디오 파일 넣기
[Special 04] 블로그에 유튜브 동영상 넣기

05장 폼과 관련된 태그들
05-1 폼 만들기
05-2 사용자가 정보를 입력하는 태그
05-3 태그의 다양한 속성
[직접] 상품 주문서 만들기1- 마크업 작성하기
[직접] 상품 주문서 만들기2- CSS 적용하기
05-4 여러 데이터 나열해서 보여주기
05-5 기타 다양한 폼 요소들

둘째마당
CSS로 완성하는 웹 표준 사이트

06장 스타일시트 기초
06-1 웹 디자인을 실현해 주는 CSS
06-2 스타일의 우선순위
06-3 선택자
06-4 속성 선택자
06-5 가상 클래스
06-6 다양한 효과를 만들어내는 CSS3

07장 텍스트 관련 스타일
07-1 글꼴 관련 스타일
07-2 텍스트 스타일
07-3 텍스트 간격을 조절하는 스타일
[직접] 텍스트 스타일을 이용해 문서 정리하기
07-4 목록 스타일
[직접] 목록 스타일을 이용해 문서 정리하기

08장 색상과 배경을 위한 스타일
08-1 색상과 관련된 스타일
08-2 배경색과 배경 이미지
[직접] 제목에 배경 이미지 사용하기
[직접] 배경색과 배경 이미지 채우기
08-3 그러데이션 효과로 배경 꾸미기

[Special 05] 티스토리 블로그에서 스킨 바꾸기

09장 레이아웃을 위한 스타일
09-1 박스 모델
09-2 테두리 관련 속성들
09-3 CSS3 박스 관련 속성들
[직접] 박스 모델로 콘텐츠 정리하기
09-4 배치와 관련된 블록 레벨과 인라인 레벨
09-5 여러 요소를 원하는 형태로 배치하기
[직접] 포지셔닝을 이용해 타일 형식으로 배치하기
09-6 다단으로 편집하기
[직접] 웹 문서 3단 편집하기
09-7 표 관련 스타일

10장 변형(transform)을 위한 스타일
10-1 변형(transtorm)
[직접] 변형을 이용해 그림 강조하기
10-2 변형과 관련된 속성들
10-3 시간에 따른 변화를 만들어 주는 트랜지션
10-4 애니메이션 속성
[직접] 트랜지션을 이용해 내용 강조하기

[Special 06] CSS로 다양한 사진 효과 만들기
[Special 07] 드롭다운 내비게이션 만들기

셋째마당
PC, 태블릿, 스마트폰용 웹사이트를 한 번에 만든다
반응형 웹사이트 만들기

11장 반응형 웹 디자인과 미디어 쿼리
11-1 자유자재로 변하는 반응형 웹 디자인
11-2 반응형 웹을 실현시켜주는 미디어 쿼리
11-3 미디어 쿼리를 적용하기
[직접] PC용 미디어 쿼리 작성하기
[직접] 스마트폰용으로 미디어 쿼리 작성하기

12장 반응형 웹을 만드는 또 다른 방법, 유동형 레이아웃
12-1 유동형 레이아웃
12-2 유동형 레이아웃 만들기
[직접] CSS로 유동형 레이아웃 구성하기
12-3 유동형 이미지와 비디오

13장 그리드 레이아웃으로 웹사이트 제작하기
13-1 반응형 웹사이트 만들기

[Special 08] 최신 웹 기술, HTML5+자바스크립트+API

동영상 강좌

http://www.youtube.com/user/easyspub 에서 확인할 수 있다.

  1. Do it! HTML5+CSS3 웹표준의 정석-01강 : 왜 html과 css를 공부해야 할까
  2. Do it! HTML5+CSS3 웹표준의 정석-02강 : html5 시맨틱 태그
  3. Do it! HTML5+CSS3 웹표준의 정석-03강 : 시맨틱 태그로 웹표준에 맞는 문서 만들기
  4. Do it! HTML5+CSS3 웹표준의 정석-04강 : IE를 고려한 시맨틱 태그
  5. Do it! HTML5+CSS3 웹표준의 정석-05강 : 텍스트 관련 태그들
  6. Do it! HTML5+CSS3 웹표준의 정석-06강 : 목록과 텍스트 태그 연습하기
  7. Do it! HTML5+CSS3 웹표준의 정석-07강 : 하이퍼링크를 만드는 태그
  8. Do it! HTML5+CSS3 웹표준의 정석-08강 : HTML5와 이미지
  9. Do it! HTML5+CSS3 웹표준의 정석-09강 : 이미지 맵으로 이벤트 페이지 만들기
  10. Do it! HTML5+CSS3 웹표준의 정석-10강 : HTML5와 멀티미디어
  11. Do it! HTML5+CSS3 웹표준의 정석-11강 : 다양한 input 태그
  12. Do it! HTML5+CSS3 웹표준의 정석-12강 : input 태그의 속성
  13. Do it! HTML5+CSS3 웹표준의 정석-13강 : 상품 주문서 만들기
  14. Do it! HTML5+CSS3 웹표준의 정석-14강 : CSS기초
  15. Do it! HTML5+CSS3 웹표준의 정석-15강 : 텍스트 관련 스타일
  16. Do it! HTML5+CSS3 웹표준의 정석-16강 : 텍스트 관련 스타일
  17. Do it! HTML5+CSS3 웹표준의 정석-17강 : 색상과 배경 스타일
  18. Do it! HTML5+CSS3 웹표준의 정석-18강 : 그라데이션 효과와 배경 꾸미기
  19. Do it! HTML5+CSS3 웹표준의 정석-19강 : 박스모델이란
  20. Do it! HTML5+CSS3 웹표준의 정석-20강 : 박스 모델의 테두리 관련 속성들
  21. Do it! HTML5+CSS3 웹표준의 정석-21강 : 블록 레벨 요소와 인라인 레벨 요소
  22. Do it! HTML5+CSS3 웹표준의 정석-22강 : 포지셔닝
  23. Do it! HTML5+CSS3 웹표준의 정석-23강 : 다단으로 편집하기
  24. Do it! HTML5+CSS3 웹표준의 정석-24강 : 변경을 위한 스타일
  25. Do it! HTML5+CSS3 웹표준의 정석-25강 : 애니메이션을 위한 스타일
  26. Do it! HTML5+CSS3 웹표준의 정석-26강 : CSS로 다양한 사진효과 만들기
  27. Do it! HTML5+CSS3 웹표준의 정석-27강 : 드롭다운 메뉴 만들기
  28. Do it! HTML5+CSS3 웹표준의 정석-28강 : 반응형 웹디자인&미디어쿼리1
  29. Do it! HTML5+CSS3 웹표준의 정석-29강 : 반응형 웹디자인&미디어쿼리2
  30. Do it! HTML5+CSS3 웹표준의 정석-30강 : 유동형 레이아웃

자료실

  • Do it! HTML5+CSS3 웹표준의 정석 - Sample.zip (예제 파일)
  • Do it! HTML5+CSS3 웹표준의 정석 - HTML실습.zip (직접해보세요 파일)
  • Do it! HTML5+CSS3 웹표준의 정석 - Specials.zip (스페셜 코너 파일)
  • Do it! HTML5+CSS3 웹표준의 정석 - 연습문제.zip (도전 Mission 파일)


728x90

'WebDev > HTML5' 카테고리의 다른 글

HTML5 준비하기  (0) 2012.12.30
HTML5 관련 참고 사이트  (0) 2012.12.24

댓글