기본 예제로 개념 이해하고, 프로젝트를 직접 만들고, 핵심정리로 복습하고, 실습예제로 실력을 쌓을 수 있는 알찬 구성!
〈한 권으로 끝내는 그누위즈의 HTML5 & CSS3 웹 디자인 입문+활용〉 책은 기본 문법부터 바로 적용할 수 있는 웹 사이트 제작까지 한 권에 모두 담았다.
이 책은
하나, 220여 개의 기본 예제 수록
HTML5 & CSS3 기초 문법은 220 여 개의 예제를 통해 익힐 수 있도록 구성하였다.
둘, 4개의 실전 프로젝트 수록
세로스크롤형 웹 사이트, 풀페이지형 웹 사이트, 가로스크롤형 웹 사이트, 반응형 웹 사이트 등 4개 실전 프로젝트의 실제 제작 과정을 통해 실전 테크닉을 자연스럽게 익힐 수 있게 구성하였다.
셋, 실습 예제
단원별 핵심정리와 실습 예제가 수록되었다.
이 책의 220여 개의 기본 예제와 4개 프로제트를 직접 실습하는 과정에서 오류가 발생하거나 이해되지 않는 부분은 저자가 운영하는 그누위즈 사이트 또는 앤써북 독자지원센터 책 전용 게시판을 통해 질문할 수 있다.
- 그누위즈 사이트 : https://www.gnuwiz.com
- 앤써북 독자지원센터 책 전용 게시판 : https://cafe.naver.com/answerbook/menu/199
그누위즈 사이트 또는 앤써북 독자지원센터 책 전용 게시판이용 방법은 책 5쪽을 참고한다.
〈한 권으로 끝내는 그누위즈의 HTML5 & CSS3 웹 디자인 입문+활용〉 책은 영어 문법처럼 수학 공식처럼 웹 기초와 HTML, CSS 기초 문법부터 4가지 유형의 웹 사이트를 직접 코딩하며 만들어 본다.
기본 문법부터 바로 적용할 수 있는 웹 사이트 제작까지 한 권에 모두 답았다!
- 첫 코딩하는 분도 이해하기 쉬운 친절하고 깊이있는 자세한 설명과 220여 개 실습
- 실무에 바로 적용할 수 있는 다양한 유형의 4가지 실전 프로젝트 실습
이 책은 웹 기초부터 HTML, CSS 기초 문법은은 물론 4개의 주제별 웹 사이트를 직접 코딩하며 만들어볼 수 있도록 구성하였다.
- Part 01 : HTML 시작하기
웹 사이트의 기본적인 개념과 HTML 기본문법 , 웹 문서의 다양한 내용입력, HTML 입력양식(form) 작성하기 그리고 HTML의 다양한 요소에 대한 설명을 위한 파트이다.
- Part 02 : CSS 다루기
CSS의 기본 개념과 CSS 선택자, 텍스트 꾸미기, 색과 배경 넣어서 꾸미기, 레이아웃 박스 만들기 및 배치하기 그리고 내 스타일 적용하기 설명을 위한 파트이다.
- Part 03 HTML & CSS 한 걸음 나아가기
HTML과 CSS를 함께 적용하여 HTML 시멘틱 태그, CSS 상속, CSS 고급 선택자 그리고 반응형 웹과 미디어 퀴리 설명을 위한 파트이다.
- Part 04 실전 웹 디자인
Part 01 ~ Part03에서 배운 HTML & CSS을 바탕으로 실전에서도 사용 가능한 세로 스크롤형 사이트, 풀페이지형 사이트, 가로 스크롤형 사이트 그리고 반응형 사이트 만들기를 위한 파트이다.
70페이지 분량의 다음 내용을 책속의 책 부록 PDF 파일로 제공된다. PDF 파일 다운로드 방법은 책 5쪽을 참조한다.
- Chapter 12 예제 10개
- 트랜지션과 애니메이션
- 실전 웹 사이트 제작 전 필요한 사항
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 글자 굵게
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 프로그램 웹 호스팅 연결하기
윤성훈 [저]
현재 웹에이젼시 그누위즈 대표이자 gnuwiz.com 대표 운영자이다. 출간한 저서로 그누위즈의 PHP&MySQL 웹 프로그래밍 입문 + 활용(전면 개정판)_앤써북, JSP Study의 JSP 웹 프로그래밍 입문 + 활용(2판)_앤써북이 있다.
전체 0개의 구매후기가 있습니다.
인터파크도서는 고객님의 단순 변심에 의한 교환과 반품에 드는 비용은 고객님이 지불케 됩니다.
단, 상품이나 서비스 자체의 하자로 인한 교환 및 반품은 무료로 반품 됩니다.
교환 및 반품이 가능한 경우
상품을 공급 받은 날로부터 7일이내 가능 공급받으신 상품의 내용이 표시, 광고 내용과 다르거나 다르게 이행된 경우에는 공급받은 날로부터 3개월 이내, 혹은 그사실을 알게 된 날 또는 알 수 있었던 날로부터 30일 이내 상품에 아무런 하자가 없는 경우 소비자의 고객변심에 의한 교환은 상품의 포장상태 등이 전혀 손상되지 않은 경우에 한하여 가능
교환 및 반품이 불가능한 경우
구매확정 이후(오픈마켓상품에 한함) 고객님의 책임 있는 사유로 상품 등이 멸실 또는 훼손된 경우
(단, 상품의 내용을 확인하기 위하여 포장 등을 훼손한 경우는 제외) 시간이 지남에 따라 재판매가 곤란할 정도로 물품의 가치가 떨어진 경우 포장 개봉되어 상품 가치가 훼손된 경우
다배송지의 경우 반품 환불
다배송지의 경우 다른 지역의 반품을 동시에 진행할 수 없습니다. 1개 지역의 반품이 완료된 후 다른 지역 반품을 진행할 수 있으므로, 이점 양해해 주시기 바랍니다.
중고상품의 교환
중고상품은 제한된 재고 내에서 판매가 이루어지므로, 교환은 불가능합니다.
오픈마켓 상품의 환불
오픈마켓상품에 대한 책임은 원칙적으로 업체에게 있으므로, 교환/반품 접수시 반드시 판매자와 협의 후 반품 접수를 하셔야하며, 반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가능할 수 있으니 유의하시기 바랍니다.
배송예정일 안내
인터파크 도서는 모든 상품에 대해 배송완료예정일을 웹사이트에 표시하고 있습니다.
<인터파크 직배송 상품>
상품은 월~토요일 오전 10시 이전 주문분에 대하여 당일 출고/당일 배송완료를 보장하는 상품입니다.
상품은 서울지역/평일 주문분은 당일 출고/익일 배송완료를 보장하며, 서울외지역/평일 주문분의 경우는 오후 6시까지 주문분에 대하여 익일 배송완료를 보장하는 상품입니다. (단, 월요일은 12시까지 주문에 한함)
상품은, 입고예정일(제품출시일)+택배사배송일(1일)에 배송완료를 보장합니다.
~
상품은 유통특성상 인터파크에서 재고를 보유하지 않은 상품으로 주문일+기준출고일+택배사배송일(1일)에 배송완료를 보장합니다.(토/공휴일은 배송기간에 포함되지 않습니다.) ※기준출고일:인터파크가 상품을 수급하여 물류창고에서 포장/출고하기까지 소요되는 시간
<업체 직접배송/오픈마켓 상품>
~
상품은 업체가 주문을 확인하고, 출고하기까지 걸리는 시간입니다. 주문일+기준출고일+택배사배송일(2일)에 배송완료를 보장합니다.(토/공휴일은 배송기간에 포함되지 않습니다.) ※5일이내 출고가 시작되지 않을시, 오픈마켓 상품은 자동으로 주문이 취소되며, 고객님께 품절보상금을 지급해 드립니다.
배송비 안내
도서(중고도서 포함)만 구매하시면 : 배송비 2,000원 (1만원이상 구매 시 무료배송) 음반/DVD만 구매하시면 : 배송비 1,500원 (2만원이상 구매 시 무료배송) 잡지/만화/기프트만 구매하시면 : 배송비 2,000원 (2만원이상 구매 시 무료배송) 도서와 음반/DVD를 함께 구매하시면 : 배송비 1,500원 1만원이상 구매 시 무료배송) 도서와 잡지/만화/기프트/중고직배송상품을 함께 구매하시면 : 2,000원 (1만원이상 구매 시 무료배송) 업체직접배송상품을 구매시 : 업체별로 상이한 배송비 적용
* 세트상품의 경우 부분취소 시 추가 배송비가 부과될 수 있습니다.
* 북카트에서 배송비없애기 버튼을 클릭하셔서, 동일업체상품을 조금 더 구매하시면, 배송비를 절약하실 수 있습니다.
해외배송 안내
인터파크도서에서는 국내에서 주문하시거나 해외에서 주문하여 해외로 배송을 원하실 경우 DHL과 특약으로 책정된 요금표에
의해 개인이 이용하는 경우보다 배송요금을 크게 낮추며 DHL(www.dhl.co.kr)로 해외배송 서비스를 제공합니다. 해외배송은 도서/CD/DVD 상품에 한해 서비스하고 있으며, 다른 상품을 북카트에 함께 담으실 경우 해외배송이 불가합니다.
해외주문배송 서비스는 인터파크 도서 회원 가입을 하셔야만 신청 가능합니다.
알아두세요!!!
도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 취소될 수 있습니다. 오픈마켓업체의 배송지연시 주문이 자동으로 취소될 수 있습니다. 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 기준으로 배송됩니다. 유통의 특성상 출고기간은 예정보다 앞당겨지거나 늦춰질 수 있습니다. 택배사 배송일인 서울 및 수도권은 1~2일, 지방은 2~3일, 도서, 산간, 군부대는 3일 이상의 시간이 소요됩니다.
;)
;){kind=small}
전체 0개의 구매후기가 있습니다.
교환 및 반품이 가능한 경우 
상품을 공급 받은 날로부터 7일이내 가능 
상품은 월~토요일 오전 10시 이전 주문분에 대하여 당일 출고/당일 배송완료를 보장하는 상품입니다.
상품은 서울지역/평일 주문분은 당일 출고/익일 배송완료를 보장하며,
상품은, 입고예정일(제품출시일)+택배사배송일(1일)에 배송완료를 보장합니다.
~ 
상품은 유통특성상 인터파크에서 재고를 보유하지 않은 상품으로
상품은 업체가 주문을 확인하고, 출고하기까지 걸리는 시간입니다.
