홈앤서비스 SK BROADBAND

기본 예제로 개념 이해하고, 프로젝트를 직접 만들고, 핵심정리로 복습하고, 실습예제로 실력을 쌓을 수 있는 알찬 구성! 『한 권으로 끝내는 그누위즈의 HTML5 & CSS3 웹 디자인 입문+활용』 책은 기본 문법부터 바로 적용할 수 있는 웹 사이트 제작까지 한 권에 모두 담았다.

이 책은 하나, 220여 개의 기본 예제 수록 HTML5 & CSS3 기초 문법은 220 여 개의 예제를 통해 익힐 수 있도록 구성하였다. 둘, 4개의 실전 프로젝트. 세로스크롤형 웹 사이트, 풀페이지형 웹 사이트, 가로스크롤형 웹 사이트, 반응형 웹 사이트 등 4개 실전 프로젝트의 실제 제작 과정을 통해 실전 테크닉을 자연스럽게 익힐 수 있게 구성하였다. 셋, 실습 예제. 단원별 핵심정리와 실습 예제가 수록되었다.

이 책의 220여 개의 기본 예제와 4개 프로제트를 직접 실습하는 과정에서 오류가 발생하거나 이해되지 않는 부분은 저자가 운영하는 그누위즈 사이트 또는 앤써북 독자지원센터 책 전용 게시판을 통해 질문할 수 있다.

Part 01 HTML 시작하기
Chapter 00 들어가기에 앞서
01 _ 웹 디자이너에게 HTML&CSS가 필요한 이유
02 _ 코딩? 코딩을 배우는 방법
02-1 코딩이란
02-2 코딩을 공부하는 방법
03 _ 코딩 프로그램 설치
03-1 비주얼 스튜디오 코드(VS Code) 다운로드 및 설치
03-2 비주얼 스튜디오 코드(VS Code) 확장 프로그램 설치하기
03-3 비주얼 스튜디오 코드(VS Code) 환경 설정

Chapter 01 웹 사이트 기본 알아보기
01 _ 웹 사이트란?
01-1 웹의 개념
01-2 웹 사이트의 종류(기업, 브랜드, 프로모션 등)
02 _ 웹 사이트의 구조
03 _ 웹 브라우저 종류
04 _ 웹 표준과 웹 접근성
04-1 웹 표준
04-2 웹 접근성
05 _ 크로스 브라우징(웹 호환성)
핵심 정리
실습 예제

Chapter 02 HTML 기본 알아보기
01 _ HTML 이란 무엇인가?
02 _ HTML 파일 만들기
03 _ HTML 기본 문서 구조
03-1 〈!DOCTYPE html〉
03-2 〈html〉~〈/html〉
03-3 〈head〉~〈/head〉
03-4 〈meta〉
03-5 〈title〉~〈/title〉
03-6 〈body〉~〈/body〉
04 _ HTML 기본 문법
04-1 HTML 기본 작성 규칙
04-2 셀프 클로징(Self-Closing), 빈 태그
04-3 HTML 요소 구조
04-4 블록 요소, 인라인 요소, 인라인-블록 요소
04-5 주석
핵심 정리
실습 예제

Chapter 03 HTML 웹 문서에 다양한 내용 입력하기
01 _ 텍스트 입력하기
01-1 제목 〈h1〉~〈h6〉
01-2 문단 〈p〉
01-3 줄 바꿈 〈br〉
01-4 글자 기울임 〈i〉
01-5 글자 굵게 〈b〉
01-6 텍스트 강조 〈em〉
01-7 텍스트 강조 〈strong〉
01-8 텍스트 작게 〈small〉
01-9 마킹 표시 〈mark〉
02 _ 목록 만들기
02-1 순서 없는 목록 〈ul〉〈il〉
02-2 순서 있는 목록 〈ol〉〈li〉
03 _ 표 만들기 84
03-1 표 삽입 〈table〉 84
03-2 표 제목 〈caption〉 87
03-3 표의 열을 묶는 그룹 〈colgroup〉〈col〉
03-4 표 영역을 그룹화 〈thead〉〈tbody〉〈tfoot〉
03-5 표의 행 생성 〈tr〉
03-6 표의 열 생성 〈td〉
03-7 표의 행, 열 타이틀 생성 〈th〉
03-8 셀 열(가로) 병합 colspan
03-9 셀 행(세로) 병합 rowspan
04 _ 이미지 삽입하기
04-1 이미지 삽입 〈img〉
04-2 〈img〉 태그에서 사용하는 URL 주소와 파일 경로
05 _ 하이퍼링크 삽입하기
05-1 하이퍼링크 〈a〉
핵심 정리
실습 예제

Chapter 04 HTML 입력 양식 작성하기
01 _ 폼 삽입하기
01-1 입력 폼 〈form〉
01-2 사용자 입력 〈input〉
01-3 선택 목록 〈select〉
01-4 〈select〉〈datalist〉 태그의 항목 정의 〈option〉
01-5 〈option〉 항목을 묶는 그룹 〈optgroup〉
01-6 문장 입력 〈textarea〉
01-7 버튼 〈button〉
01-8 라벨 〈label〉
핵심 정리
실습 예제

Chapter 05 HTML 부모 요소, 자식 요소, 형제 요소
01 _ DOM으로 요소 관계 파악하기
02 _ HTML 요소 관계 파악하기
핵심 정리

Part 02 CSS 다루기
Chapter 06 CSS 기본 알아보기
01 _ CSS란 무엇인가?
02 _ CSS 기본 문법
02-1 CSS 기본 구조
02-2주석
03 _ CSS 스타일 시트 적용
03-1 인라인 스타일
03-2내부 스타일 시트 〈style〉〈/style〉
03-3 외부 스타일 시트 〈link〉
03-4외부 스타일 시트 @import
04 _ CSS 스타일 적용 우선 순위(캐스케이딩)
04-1스타일 시트 파일 우선순위
04-2 동일 스타일 시트 내에 우선순위
핵심 정리
실습 예제

Chapter 07 CSS 선택자 알아보기
01 _ CSS 기본 선택자
01-1 전체 선택자 *
01-2 태그 선택자 〈태그명〉
01-3 클래스 선택자 .
01-4 아이디 선택자 #
01-5 속성 강제 적용 !important
01-6 선택자 우선순위(캐스케이딩)
핵심 정리
실습 예제

Chapter 08 텍스트 꾸미기
01 _ 폰트(글꼴) 관련 속성
01-1 폰트 스타일 font-style
01-2 폰트 두께 font-weight
01-3 폰트 사이즈 font-size
01-4 폰트 종류 font-family
01-5 폰트 색상 color
02 _ 텍스트 관련 스타일
02-1 텍스트 정렬 text-align
02-2 글자 라인 text-decoration
02-3 텍스트 그림자 text-shadow
02-4 텍스트를 대문자나 소문자 변경 text-transform
02-5 글자 사이 간격 letter-spacing
03 _ 문단(문장) 관련 속성
03-1 문장과 문장 사이의 간격 line-height
03-2 줄 바꿈, 공백, 줄 속성 white-space
03-3 줄 바꿈 속성 word-break
03-4 단어 사이의 간격 word-spacing
03-5 줄 바꿈 설정 word-wrap
04 _ 목록 관련 속성
04-1 목록 스타일 list-style
04-2 목록 마커의 유형 list-style-type
04-3 목록 마커의 이미지 설정 list-style-image
04-4 목록 마커의 위치 속성 list-style-position
05 _ 웹 폰트 사용하기
05-1 시스템 폰트 vs 이미지 폰트 vs 웹 폰트
05-2 웹 폰트 특징과 종류
05-3 웹 폰트를 사용하기 위해 알아야 할 @font-face
05-4 구글 웹 폰트 사용
핵심 정리
실습 예제

Chapter 09 색과 배경 넣어서 꾸미기
01 _ 색상 관련 속성
01-1 색상 값 종류
01-2 투명도 지정 opacity
02 _ 배경 지정 관련 속성
02-1 배경 속성 background
02-2 배경색 지정(단색) background-color
02-3 배경 이미지 지정 background-images
02-4 배경색 지정(선형 그라데이션)
02-5 배경색 지정(원형 그라데이션)
03 _ 배경 이미지 관련 속성
03-1 배경 이미지 고정 여부 background-attachment
03-2 배경 이미지 위치 기준점 background-origin
03-3 배경 이미지 위치 영역 background-position
03-4 배경 이미지 사용 반복 여부 background-repeat
03-5 배경 이미지 사이즈 background-size
핵심 정리
실습 예제

Chapter 10 레이아웃을 만들기 위한 CSS 박스 모델
01 _ CSS 박스 모델
01-1 박스 모델 개념
01-2 CSS 박스 요소
02 _ 콘텐츠 관련 속성들
02-1 요소 너비 width
02-2 요소 높이 height
03 _ 테두리 관련 속성들
03-1 요소 테두리 border
03-2 요소 테두리 모양 설정 border-style
03-3 요소 테두리 색상 설정 border-color
03-4 요소 테두리 두께 설정 border-width
03-5 요소 테두리 둥글게 설정 border-radius
04 _ 여백 관련 속성들
04-1 요소 바깥 여백 margin
04-2 요소 내부 여백 padding
04-3 박스 크기 기준 box-sizing
핵심 정리
실습 예제

Chapter 11 내 스타일 적용을 위한 CSS 초기화
01 _ CSS 초기화
01-1 CSS 초기화 개념
01-2 CSS 초기화 기초
01-3 CSS 초기화 응용
01-4 외부 CSS 초기화(Reset) 코드 사용
핵심 정리
실습 예제

Chapter 12 레이아웃 배치를 위한 CSS 포지셔닝
01 _ 가로로 배치하는 float
01-1 가로 배치 속성 float
01-2 가로 왼쪽 정렬 속성 left
01-3 가로 오른쪽 정렬 속성 right
01-4 float 해제 속성 clear
02 _ 원하는 위치에 배치하는 position
02-1 브라우저 좌표
02-2 원하는 위치에 배치하는 속성 position
02-3 자기 자신 기준 relative
02-4 부모 기준 absolute
02-5 브라우저 기준 fixed
02-6 스크롤 영역 기준 sticky
02-7 요소의 순서를 제어하는 속성 z-index
03 _ 중앙으로 배치하는 쉬운 방법
03-1 text-align/line-height 사용 (텍스트)
03-2 vertical-align 사용 (인라인 요소)
03-3 margin 사용 (블록 요소)
03-4 position/margin 사용 (블록 요소)
03-5 position/transform 사용 (블록 요소)
04 _ 플렉스 박스
04-1 배치 속성 flex
04-2 플렉스 박스 속성
04-3 flex를 활용하여 가로 배치
05 _ 레이아웃 속성 활용해보기
핵심 정리
실습 예제

Part 03 HTML & CSS 한 걸음 나아가기
Chapter 13 HTML 시멘틱 태그
01 _ 문서 구조화를 위한 시맨틱 태그란?
01-1 시맨틱 태그 개념
01-2 시맨틱 태그를 사용해야 하는 이유
02 _ 시맨틱 태그 종류
02-1 페이지 상단에 위치한 머리말 요소 〈header〉
02-2 메인 메뉴 부분을 나타내는 요소 〈nav〉
02-3 페이지 전체의 주요 콘텐츠를 나타내는 요소 〈main〉
02-4 주제별로 나눌 수 있는 요소 〈section〉
02-5 개별 콘텐츠를 나타내는 요소 〈article〉
02-6 주요 콘텐츠가 아닌 부가적인 정보를 나타내는 요소 〈aside〉
02-7 페이지 하단에 위치한 꼬리말 요소 〈footer〉
02-8 의미를 가지지 않는 블록 요소를 만드는 〈div〉
02-9 의미를 가지지 않는 인라인 요소를 만드는 〈span〉
핵심 정리
실습 예제

Chapter 14 CSS 스타일 상속
01 _ CSS 스타일 상속
01-1 상속 가능한 속성
01-2 상속이 되지 않는 속성
01-3 강제 상속(inherit 키워드)
핵심 정리

Chapter 15 CSS 고급 선택자
01 _ 그룹 선택자(,)
02 _ 하위 선택자
03 _ 자식 선택자(〉)
04 _ 인접 형제 선택자(+)
05 _ 일반 형제 선잭자(~)
06 _ 속성 선택자
07 _ 반응 선택자
08 _ 상태 선택자
09 _ 구조 선택자
10 _ 형태 구조 선택자
11 _ 가상 선택자
핵심 정리
실습 예제

Chapter 16 반응형 웹과 미디어 쿼리
01 _ 반응형 웹과 적응형 웹
01-1 반응형 웹(Responsive Web)
01-2 적응형 웹(Adaptive Web)
01-3 모바일 퍼스트 디자인(Mobile First Design)
02 _ 브라우저 크기에 따라 변하는 가변 그리드와 요소
03 _ 미디어 쿼리란?
04 _ 미디어 쿼리 적용 방법
핵심 정리
실습 예제

Part 04 실전 웹 디자인
Chapter 17 세로 스크롤형 사이트 만들기
01 _ 레이아웃 구조 파악
02 _ 기본적인 준비
03 _ 헤더 영역 만들기
04 _ 콘텐츠 영역 만들기

Chapter 18 풀페이지형 사이트 만들기
01 _ 레이아웃 구조 파악
02 _ 기본적인 준비
03 _ 헤더 영역 만들기
04 _ 콘텐츠 영역 만들기

Chapter 19 가로 스크롤형 사이트 만들기
01 _ 레이아웃 구조 파악
02 _ 기본적인 준비
03 _ 콘텐츠 영역 만들기

Chapter 20 반응형 사이트 만들기
01 _ 미디어 쿼리 범위 정하기
02 _ 기본적인 준비
03 _ 콘텐츠 영역 만들기

[별책 부록(PDF 별책)]
Appendix 01 Chapter 12 예제 10개

Appendix 02 트랜지션과 애니메이션
01 _ 변형과 관련된 속성들
01-1 변형 속성 transform
01-2 기준점 설정 transform-origin
02 _ 애니메이션 545
02-1 CSS 애니메이션 사용하는 이유
02-2 애니메이션 정의 @keyframes
02-3 애니메이션 속성 animation
02-4 애니메이션 이름 설정 animation-name
02-5 애니메이션 움직임 시간 설정 animation-duration
02-6 애니메이션 지연 시간 설정 animation-delay
02-7 애니메이션 반복 횟수 설정 animkation-iteration-count
02-8 애니메이션 움직임 방향 설정 animation-direction
02-9 애니메이션 재생 속도 설정 animation-timing-function
02-10 애니메이션 끝난 후 상태 설정 animation-fill-mode
02-11 애니메이션 진행 상태 설정 animation-play-state
03 _ 트랜지션
03-1 전환 속성 transition
03-2 전환 적용 여부 설정 transition-property
03-3 전환 시간 설정 transition-duration
03-4 전환 속도 설정 transition-timing-function
03-5 전환 지연 시간 설정 transition-delay
04 _ 트랜지션과 애니메이션 응용
04-1 애니메이션 vs 트랜지션
04-2 애니메이션 또는 트랜지션과 트랜스폼 함께 사용하기

Appendix 03 실전에 앞서
01 _ 나만의 웹 호스팅 서버 만들기
01-1 웹 호스팅과 도메인
01-2 무료 웹 호스팅 서버 만들기
02 _ FTP 프로그램 웹 호스팅 연결하기