소장자료검색

아무런 지식 없이 웹이 어떻게 동작하는지 그 원리와 웹 페이지 실제 제작 기법을 함께 배울 수 있도록 구성된 『러닝 웹 디자인』. 최신 기술, 모범 사례와 더불어 HTML5와 CSS3를 포함한 현재의 웹 표준을 배울 수 있도록 도와준다. 각 장의 연습을 통해 다양한 기술을 배우는 데 도움을 줄 것이며 간단한 퀴즈를 통해 중요 개념을 확실히 이해할 수 있도록 했다.

웹 페이지를 만들고 싶은데 아무런 경험도, 지식도 없으신가요? 그렇다면 이 책은 그런 분들에게 가장 알맞은 친절한 출발점이 될 것입니다. 아무런 지식 없이 시작하여 웹이 어떻게 동작하는지 그 원리와 웹 페이지 실제 제작 기법을 함께 배웁니다. 이 책을 끝낼 무렵에는 모바일 장치에도 적용할 수 있는 간단한 반응형 웹을 만드는 기술을 익히게 될 것입니다.
그리고 최신 기술, 모범 사례와 더불어 HTML5와 CSS3를 포함한 현재의 웹 표준을 배웁니다. 각 장의 연습을 통해 다양한 기술을 배우는 데 도움을 줄 것이며 간단한 퀴즈를 통해 중요 개념을 확실히 이해할 수 있습니다.
개정을 거듭한 이 책은 다양한 배경과 기술 수준을 지닌 학생이나 직장인에게 이상적입니다. 처음 시작하든 실력을 향상하고자 하든 상관없이 말이죠.

이 책에서 다루는 내용
- 텍스트, 하이퍼링크, 이미지, 표, 폼 등을 이용한 HTML 페이지 제작
- 스타일시트(CSS)를 이용한 색, 배경, 텍스트 형식 등의 레이아웃과 간단한 애니메이션 효과
- HTML5 요소, API, CSS3 속성을 배움으로써 역동적인 웹 페이지 구현
- 반응형 웹 디자인을 적용하여 모바일 장치에 대비
- 자바스크립트의 동작 방식과 웹 디자인에서의 중요성 이해
- 최적화하여 빠르게 내려받을 수 있는 웹 그래픽 만들기

1부 웹 디자인 시작하기
1장 시작하기
1. 웹 디자인의 시작
2. 웹 디자이너가 하는 일
3. 웹 디자인에 필요한 언어
4. 웹 디자인에 필요한 소프트웨어와 장비
5. 정리하기
6. 실력 확인하기

2장 웹의 세계
1. 인터넷과 웹
2. 정보 제공하기
3. 브라우저
4. 웹 페이지의 주소(URL)
5. 웹 페이지의 구조
6. 정리하기
7. 실력 확인하기

3장 웹 디자인에서 고려할 주요 개념
1. 현기증 날 정도로 많은 장치
2. 웹 표준 준수하기
3. 단계적 향상
4. 반응형 웹 디자인
5. 모두를 위한 웹 사이트(웹 접근성)
6. 속도 향상(사이트의 성능)
7. 실력 확인하기

2부 HTML 마크업(문서 구조)
4장 간단한 웹 페이지 만들기(HTML 살펴보기)
1. 단계별로 웹 페이지 만들기
2. 텍스트 편집기 실행하기
3. 1단계: 콘텐츠 작성하기
4. 2단계: 문서를 구조화하기
5. 3단계: 텍스트 요소 지정하기
6. 4단계: 이미지 추가하기
7. 5단계: 스타일시트로 페이지의 스타일 변경하기
8. 페이지가 엉망이 되는 경우
9. 문서의 유효성 검사하기
10. 실력 확인하기
11. 요소 리뷰

5장 텍스트 마크업 하기
1. 단락
2. 머리글
3. 목록
4. 기타 콘텐츠 요소
5. 페이지 콘텐츠 구조화하기
6. 인라인 요소 정리
7. 일반적인 요소(와 )
8. 특수 문자
9. 정리하기
10. 실력 확인하기
11. 요소 리뷰: 텍스트 요소

6장 링크 넣기
1. href 속성
2. 웹에 있는 페이지 링크하기
3. 같은 사이트 내로 링크하기
4. 새 브라우저 창으로 열기
5. 메일 링크
6. 전화번호 링크
7. 실력 확인하기
8. 요소 리뷰

7장 이미지 넣기
1. 이미지 형식
2. 요소
3. 창 안의 창
4. 실력 확인하기
5. 요소 리뷰

8장 테이블 마크업
1. 테이블의 용도와 활용 방법
2. 최소한의 테이블 구조
3. 테이블 헤더
4. 셀 합치기
5. 테이블 접근성
6. 테이블에 대해 배운 내용 정리하기
7. 실력 확인하기
8. 요소 리뷰

9장 폼
1. 폼의 동작 원리
2. 요소
3. 변수와 콘텐츠
4. 폼 컨트롤 종합
5. 폼의 접근성
6. 폼 레이아웃과 디자인
7. 실력 확인하기
8. 요소 리뷰

10장 HTML5 소개
1. HTML의 역사
2. HTML5의 마크업
3. API
4. 비디오와 오디오
5. 요소
6. 정리하기
7. 실력 확인하기

3부 CSS (문서 꾸미기)
11장 CSS 소개
1. CSS의 장점
2. 스타일시트가 동작하는 방법
3. CSS의 중요한 개념
4. CSS 정리하기
5. 실력 확인하기

12장 텍스트 서식
1. 글꼴과 관련된 속성들
2. 텍스트 색 변경하기
3. 선택자 형식
4. 텍스트 줄 조정
5. 밑줄과 기타 장식
6. 대문자로 표시하기
7. 간격
8. 텍스트에 그림자 효과 넣기
9. 목록의 글머리 기호와 번호 변경하기
10. 실력 확인하기
11. CSS 리뷰: 글꼴과 텍스트 관련 속성

13장 색과 배경
1. 색상 값 지정하기
2. 전경색
3. 배경색
4. 불투명도
5. 의사 클래스 선택자 소개
6. 의사 요소 선택자
7. 속성 선택자
8. 배경 이미지
9. background 속성
10. 그러디언트
11. 외부 스타일시트
12. 실력 확인하기
13. CSS 리뷰: 색과 배경과 관련된 속성

14장 상자 모델(패딩, 경계선, 여백)
1. 요소 상자
2. 상자 크기 지정하기
3. 패딩
4. 경계선
5. 여백
6. 디스플레이 역할 할당하기
7. 상자에 그림자 효과 넣기
8. 실력 향상하기
9. CSS 리뷰: 상자와 관련된 기본 속성

15장 플로팅과 위치
1. 정상적인 문서 플로
2. 플로팅
3. 위치
4. 상대 위치
5. 절대 위치
6. 고정 위치
7. 실력 확인하기
8. CSS 리뷰: 플로팅과 위치 관련 속성

16장 CSS로 페이지 레이아웃 구성하기
1. 페이지 레이아웃 전략
2. 페이지 레이아웃 기술
3. 플로팅을 이용한 다단 레이아웃
4. 위치 지정된 레이아웃
5. 상단에서 하단으로 열에 배경 추가하기
6. 실력 확인하기

17장 트랜지션, 트랜스폼, 애니메이션
1. CSS 트랜지션
2. CSS 트랜스폼
3. 키프레임 애니메이션
4. 실력 확인하기
5. CSS 리뷰: 트랜지션, 트랜스폼, 애니메이션

18장 CSS 활용 기술
1. CSS 리셋을 이용해서 스타일 초기화하기
2. 이미지 교체하기
3. CSS 스프라이트
4. 폼 스타일링하기
5. 테이블 스타일링하기
6. 기본적인 반응형 웹 디자인
7. 스타일시트 마무리하기
8. 실력 확인하기
9. CSS 리뷰 : 테이블 관련 속성

4부 동적 문서를 위한 자바스크립트
19장 자바스크립트 소개
1. 자바스크립트는 무엇인가?
2. 페이지에 자바스크립트 추가하기
3. 스크립트의 구조
4. 브라우저 객체
5. 이벤트
6. 정리하기
7. 실력 확인하기

20장 자바스크립트 이용하기
1. DOM이란?
2. 폴리필
3. 자바스크립트 라이브러리
4. 자바스크립트를 마치며
5. 실력 확인하기

5부 웹 페이지용 그래픽 만들기
21장 웹 그래픽의 기초
1. 이미지 구하기
2. 그래픽 파일 형식
3. 이미지 크기와 해상도
4. 투명도 처리하기
5. SVG 소개
6. 이미지 정리하기
7. 실력 확인하기

22장 웹 그래픽 최적화
1. 일반적인 이미지 최적화 전략
2. GIF 최적화하기
3. JPEG 최적화하기
4. PNG 최적화하기
5. 파일 크기에 맞게 최적화하기
6. 최적화 정리
7. 실력 확인하기

부록 A 정답
부록 B CSS 선택자

찾아보기