본문 바로가기

추천 검색어

실시간 인기 검색어

Do it! 프런트엔드 웹 디자인 입문

꼭 알아야 할 웹 디자인 6대 기술을 담았다!
고경희 지음
이지스퍼블리싱

2018년 02월 28일 출간

종이책 : 2018년 02월 14일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 pdf (135.90MB)
듣기(TTS) 가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 전자책 화면에 표기된 주석 등을 모두 읽어 줍니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.
  • '교보 ebook' 앱을 최신 버전으로 설치해야 이용 가능합니다. (Android v3.0.26, iOS v3.0.09,PC v1.2 버전 이상)
소득공제
소장
정가 : 14,800원

쿠폰적용가 13,320

10% 할인 | 5%P 적립

이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.

카드&결제 혜택

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
  • 리뷰 작성 시, e교환권 추가 최대 300원

작품소개

이 상품이 속한 분야

웹 디자인 분야 베스트셀러! 전면 개정판으로 돌아오다!
최신 웹 디자인 트렌드를 반영한 6대 기술을 담았다!
웹 디자인 분야 베스트셀러! 전면 개정판으로 돌아오다!
최신 웹 디자인 트렌드를 반영한 6대 기술을 담았다!

‘웹 사이트 이 기능은 도대체 어떻게 만들지?’ 당신이 만들고 싶은 그 기능, 더 이상 인터넷 검색해서 짜깁기하지 말고 이 책을 보자. 유명 웹 에이전시 열에 아홉은 사용한다는 반응형 웹, 패럴렉스 스크롤링, 풀 스크린 배경, 구글 웹 폰트, 플렉스 박스, 부트스트랩까지 당신이 꼭 알아야할 웹 디자인 기법만을 골라 담았다. 5년 연속 베스트셀러, <>의 고경희 저자가 국내외 최신 웹 사이트를 분석하고 웹 디자인의 이론과 실습에 가장 알맞은 예제를 엄선하여 내용을 구성했기 때문에 믿을 수 있다. 뭐부터 시작해야할지 모르는 입문자에게는 웹 디자인 개념을 확실하게 잡아주고, 실무자는 원하는 기능만 찾아 바로 써먹을 수 있는 이 책으로 지금 당장 웹 디자인을 시작하자!
첫째마당 최신 웹 디자인 트렌드 살펴보기

01장 다양한 화면 크기에 최적화하다! - 반응형 웹
01-1 반응형 웹이란?
01-2 반응형 웹은 만능일까?
01-3 반응형 웹 디자인 패턴
01-4 반응형 웹을 만드는 여러 가지 방법

02장 입체에서 평면으로! - 플랫 디자인
02-1 불필요한 요소는 최소화하다! - 플랫 디자인
02-2 플랫 디자인, 이렇게 만들어야 한다!
02-3 구글의 디자인 철학 - 머티리얼 디자인
02-4 콘텐츠에 집중하다! - 카드형 디자인

03장 반응형 웹에 어울리는 그리드 레이아웃 디자인
03-1 그리드 시스템
03-2 그리드 레이아웃을 만드는 방법 4가지

04장 클릭보다 스크롤로! - 원 페이지 사이트
04-1 한 페이지에 모든 내용을 담다! - 원 페이지 사이트
04-2 동적인 효과로 강한 인상을 준다! - 패럴랙스 스크롤링

05장 풀 스크린 배경과 캐러셀
05-1 풀 스크린 배경
05-2 이미지로 만드는 풀 스크린 배경
05-3 동영상으로 만드는 풀 스크린 배경
05-4 풀 스크린 배경에 어울리는 고스트 버튼
05-5 여러 가지 중용한 정보를 슬라이드로 보여준다! - 캐러셀

06장 웹의 기본은 텍스트 - 타이포그래피
06-1 웹과 타이포그래피
06-2 빅 타이포그래피
06-3 웹 폰트
06-4 무료로 사용하는 구글 웹 폰트


둘째마당. 반응형 웹을 위한 레이아웃 제작하기

07장 화면 크기에 반응하는 미디어 쿼리
07-1 뷰포트와 미디어 쿼리 알아보기
07-2 미디어 쿼리 사용하기
07-3 가변 이미지
07-4 가변 동영상

08장 원 페이지 사이트와 패럴랙스 스크롤링 효과 만들기
08-1 원 페이지 사이트 만들기
08-2 패럴랙스 스크롤링 효과 만들기

09장 그리드 레이아웃 제작하기
09-1 다단 칼럼을 사용해 그리드 레이아웃 만들기
09-2 jQuery 플러그인을 사용해 그리드 레이아웃 만들기
09-3 플렉스 박스 사용하기

10장 풀 스크린 랜딩 페이지 만들기
10-1 풀 스크린 배경 이미지 직접 만들기
10-2 풀 스크린 배경 동영상 직접 만들기

셋째마당 방문자의 눈길을 사로잡는 웹 요소 제작하기

11장 하나씩 회전하며 보여주기 - 캐러셀
11-1 캐러셀이란?
11-2 캡션, 비디오, 반응형 등 다향한 옵션 설정이 가능한 bxSlider 플러그인
11-3 한 화면에 여러 개의 이미지를 보여줄 수 있는 Owl Carousel 플러그인
11-4 그 밖의 캐러셀 플러그인

12장 코드로 만든 이미지 - SVG 이미지
12-1 SVG 이미지란?
12-2 SVG 이미지 사용하기

13장 다양한 웹 폰트 사용하기
13-1 웹 폰트 표시 단위
13-2 CSS로 웹 폰트 사용하기
13-3 구글 웹 폰트 사용하기

넷째마당 내가 직접 만드는 최신 웹 사이트

14장 웹 사이트 분석해 보기
14-1 웹 사이트의 소스를 들여다보기 전에
14-2 웹 개발에 도움이 되는 확장 프로그램
14-3 웹 사이트 들여다보기

15장 플렉스 박스를 사용해 웹 사이트 만들기
15-1 웹 사이트 구상하기
15-2 캐러셀 삽입하기
15-3 플렉스 박스 사용하기

16장 부트스트랩을 사용해 웹 사이트 만들기
16-1 부트스트랩 시작하기
16-2 미디어 쿼리와 그리드 시스템
16-3 버튼과 내비게이션 바

웹 퍼블리셔&웹 기획자&웹 디자이너의 필수 코스!
잘 나가는 웹 에이전시 선배들에게나 배울 수 있는 기법을 모아 놓았다.

웹 디자인 전문가가 되기 위한 6대 기술을 마스터 해보자!

- 접속 기기에 따라 레이아웃을 다르게 보여주는 반응형 웹 디자인
- 화면을 스크롤 할 때마다 애니메이션처럼 화면이 바뀌는 패럴렉스 스크롤링
- 이미지나 동영상으로 만드는 풀 스크린 배경
- 어느 기기에서도 동일한 폰트로 정보를 전달하기 위해 사용하는 구글 웹 폰트
- 그리드 레이아웃을 손쉽게 만들 수 있도록 도와주는 플렉스 박스
- 간단하게 반응형 웹을 제작하는 부트스트랩 프레임워크

<> 전면 개정판 무엇이 바뀌었나?

1. 입문자를 위한 이론 부분 강화
프런트엔드 웹 디자인을 이해하기 위한 반응형 웹과 구현방법을 자세하게 설명합니다. 그리고 다양한 웹 디자인 종류들을 소개하고, 최신 사이트에서 많이 쓰는 디자인 요소들을 장별로 나눠 실었습니다.

2. 더 많은 실습과 예제들
초판에서는 실습과 예제를 둘째마당에서만 다뤘지만, 개정판에서는 더 많은 실습과 예제를 모아 둘째마당, 셋째마당에 나눠 담았습니다. 다양해진 실습과 예제로 코딩하면 웹 디자인 기법들을 확실하게 익힐 수 있습니다.

3. 브라우저 웹 개발 도구 창 활용
웹 개발에 필요한 소스를 보거나 리소스, CSS 파일의 확인, 자바스크립트 디버깅 등 다양하게 활용하고 있는 브라우저 웹 개발 도구 창의 사용방법을 실었습니다.

4. 플렉스 박스로 손쉽게 그리드 레이아웃 제작
웹 사이트에서 널리 사용되는 그리드 레이아웃을 간단하게 만들 수 있는 플렉스 박스의 사용법을 실었습니다.

5. 최신 부트스트랩 4.0 반영
개발 경험이 부족해도 쉽게 반응형 웹을 만들 수 있게 해주는 부트스트랩 프레임워크의 최신 버전을 반영했습니다. 또한, 최신 부트스트랩 프레임워크로 실습하여 실제 웹 사이트를 제작해 볼 수 있습니다.

6. 저자 직강 동영상 제공
코딩이 두려운 입문자는 개발 도구 설치부터 실습까지 저자가 제공하는 동영상으로 1:1 과외를 받을 수 있습니다.

입문자는 앞에서부터 차근차근, 실무자는 당장 필요한 기술부터 골라서 공부하자!

HTML5, CSS3의 기본 지식은 가지고 있지만, 웹 디자인은 처음인 입문자는 이론이 실린 첫째마당부터 공부해 보세요. 이해하기 어려운 용어는 배제하고 입문자의 눈높이에서 맞춰 쉬운 말로 풀어서 설명했습니다.
웹 디자인을 해본 경력자들은 바로 필요한 기술의 실습부터 시작해 보세요. 둘째마당, 셋째마당은 반응형 웹을 위한 레이아웃 제작부터 방문자의 눈길을 사로잡는 웹 요소를 직접 제작해 보는 실습까지 담겨 있습니다. 마지막으로 넷째마당에서는 앞에서 실습해 본 여러 웹 디자인 요소들을 활용하여 직접 최신 웹 사이트를 제작해 봅니다.

웹 디자인 코딩, 웹 분야 전문가와 함께라면 더 이상 겁먹을 필요 없다!

이 책의 저자는 2017년 웹 분야 1위 <>의 저자입니다.
웹 분야 전문가인 저자가 입문자의 눈높이에 맞춰 웹 디자인 기법을 익히기에 가장 적합한 실습과 예제 60여 개를 선택했습니다. 또한, 아직 코딩이 두려운 입문자를 위해 이 책의 모든 실습은 코드를 조금씩 나눠서 차근차근 만들도록 구성했습니다. 그리고 실습 코드 내용을 완벽하게 이해할 수 있도록 한 줄의 코드도 허투루 지나치지 않고 꼼꼼하게 설명했습니다. 혼자서 공부하는 독자들을 위해 저자가 직접 제공하는 동영상도 만나보세요.

맞춤형 진도표 제공 - 흔들리지 말고 이대로 공부하라!

이 책은 초급자와 중급자를 위한 맞춤형 학습 진도표를 제공합니다. 이제 막 웹 디자인을 공부하기 시작했다면 15일 완성 진도표를, 웹 디자인을 해 본 경험이 있다면 10일 완성 진도표로 공부할 수 있습니다. 자신에게 맞는 진도표로 공부하다 보면 어느새 멋진 웹 사이트를 완성할 수 있습니다.

공부하다 어려움에 부딪히면 혼자 끙끙 앓지 말고 물어보자!

혼자 공부하다가 모르는 문제가 나오면 검색으로 시간 낭비하지 말고

작가정보

저자(글) 고경희

저자 : 고경희
마이크로소프트 공인 최고 기술 전문가
국내에 인터넷이 보급되기 시작하던 1990년 초반부터 초보자와 중급자를 위한 베스트셀러 컴퓨터 서적을 집필해 온 IT 전문 필자이다.
현재 Developer Technologies 분야 마이크로소프트 최고 기술 전문가로 활동 중이며, HTML과 DHTML(Dynamic HTML), CSS, Javascript 등 웹 관련 기술들을 좀 더 쉽게 익힐 수 있는 서적 40여 종을 집필했다.
대표 저서로는 이지스퍼블리싱의 『Do it! HTML5+CSS3 웹 표준의 정석』, 『Do it! 프런트엔드 웹 디자인 입문』, 『Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편』, 길벗의 『윈도우 10 무작정 따라하기』 등이 있다..

이 상품의 총서

Klover리뷰 (0)

Klover리뷰 안내
Klover(Kyobo-lover)는 교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1. 리워드 안내
구매 후 90일 이내에 평점 작성 시 e교환권 100원을 적립해 드립니다.
  • - e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • - 리워드는 1,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다.
  • - 리워드는 한 상품에 최초 1회만 제공됩니다.
  • - sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.
2. 운영 원칙 안내
Klover리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다. 일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

구매 후 리뷰 작성 시, e교환권 100원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여 주는 교보문고의 새로운 서비스 입니다. 교보eBook 앱에서 도서 열람 후 문장 하이라이트 하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 ‘좋아요’ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보없이 삭제될 수 있습니다.
리워드 안내
  • 구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.
  • e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • 리워드는 1,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다.
  • 리워드는 한 상품에 최초 1회만 제공됩니다.
  • sam 이용권 구매 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.

구매 후 문장수집 작성 시, e교환권 100원 적립

    교보eBook 첫 방문을 환영 합니다!

    신규가입 혜택 지급이 완료 되었습니다.

    바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)
    지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!

    교보e캐시 1,000원
    TOP
    신간 알림 안내
    Do it! 프런트엔드 웹 디자인 입문 웹툰 신간 알림이 신청되었습니다.
    신간 알림 안내
    Do it! 프런트엔드 웹 디자인 입문 웹툰 신간 알림이 취소되었습니다.
    리뷰작성
    • 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
    • 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
    감성 태그

    가장 와 닿는 하나의 키워드를 선택해주세요.

    사진 첨부(선택) 0 / 5

    총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.

    신고/차단

    신고 사유를 선택해주세요.
    신고 내용은 이용약관 및 정책에 의해 처리됩니다.

    허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
    있으니 유의하시어 신중하게 신고해주세요.


    이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.

    문장수집 작성

    구매 후 90일 이내 작성 시, e교환권 100원 적립

    eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.

    P.
    Do it! 프런트엔드 웹 디자인 입문
    꼭 알아야 할 웹 디자인 6대 기술을 담았다!
    저자 모두보기
    저자(글)
    낭독자 모두보기
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 프리미엄 이용권입니다.
    선물하실 sam이용권을 선택하세요.
    결제완료
    e캐시 원 결제 계속 하시겠습니까?
    교보 e캐시 간편 결제
    sam 열람권 선물하기
    • 보유 권수 / 선물할 권수
      0권 / 1
    • 받는사람 이름
      받는사람 휴대전화
    • 구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
    • 열람권은 1인당 1권씩 선물 가능합니다.
    • 선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
    • 선물한 열람권의 등록유효기간은 14일 입니다.
      (상대방이 기한내에 등록하지 않을 경우 소멸됩니다.)
    • 무제한 이용권일 경우 열람권 선물이 불가합니다.
    이 상품의 총서 전체보기
    네이버 책을 통해서 교보eBook 첫 구매 시
    교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 네이버 책을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)
    구글북액션을 통해서 교보eBook
    첫 구매 시 교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 구글북액션을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)