간편결제, 신용카드 청구할인
PAYCO(페이코) 최대 5,000원 할인
(페이코 신규 회원 및 90일 휴면 회원 한정)
네이버페이 1%
(네이버페이 결제 시 적립)
북피니언 롯데카드 30% (13,860원)
(최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (15,840원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (17,820원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (18,420원)
(최대할인 3만원 / 3만원 이상 결제)
Close

Do it! 프런트엔드 웹 디자인 입문 : 꼭 알아야 할 웹 디자인 6대 기술을 담았다![개정판]

소득공제

2013년 9월 9일 이후 누적수치입니다.

판매지수 1,428
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
정가

22,000원

  • 19,800 (10%할인)

    1,100P (5%적립)

  • 구매

    14,800 (33%할인)

    740P (5%적립)

할인혜택
적립혜택자동적립
추가혜택
배송정보
주문수량
감소 증가
  • 북카트 담기
  • 바로구매
  • 매장픽업
  • 이벤트/기획전(1)

  • 연관도서(1)

  • 사은품(14)

책소개

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


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

출판사 서평

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

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


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

[[Do it! 프런트엔드 웹 디자인 입문]] 전면 개정판 무엇이 바뀌었나?

1. 입문자를 위한 이론 부분 강화

프런트엔드 웹 디자인을 이해하기 위한 반응형 웹과 구현방법을 자세하게 설명합니다. 그리고 다양한 웹 디자인 종류들을 소개하고, 최신 사이트에서 많이 쓰는 디자인 요소들을 장별로 나눠 실었습니다.
2. 더 많은 실습과 예제들
초판에서는 실습과 예제를 둘째마당에서만 다뤘지만, 개정판에서는 더 많은 실습과 예제를 모아 둘째마당, 셋째마당에 나눠 담았습니다. 다양해진 실습과 예제로 코딩하면 웹 디자인 기법들을 확실하게 익힐 수 있습니다.
3. 브라우저 웹 개발 도구 창 활용
웹 개발에 필요한 소스를 보거나 리소스, CSS 파일의 확인, 자바스크립트 디버깅 등 다양하게 활용하고 있는 브라우저 웹 개발 도구 창의 사용방법을 실었습니다.
4. 플렉스 박스로 손쉽게 그리드 레이아웃 제작
웹 사이트에서 널리 사용되는 그리드 레이아웃을 간단하게 만들 수 있는 플렉스 박스의 사용법을 실었습니다.
5. 최신 부트스트랩 4.0 반영
개발 경험이 부족해도 쉽게 반응형 웹을 만들 수 있게 해주는 부트스트랩 프레임워크의 최신 버전을 반영했습니다. 또한, 최신 부트스트랩 프레임워크로 실습하여 실제 웹 사이트를 제작해 볼 수 있습니다.
6. 저자 직강 동영상 제공
코딩이 두려운 입문자는 개발 도구 설치부터 실습까지 저자가 제공하는 동영상으로 1:1 과외를 받을 수 있습니다.

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

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

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

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

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

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

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

혼자 공부하다가 모르는 문제가 나오면 검색으로 시간 낭비하지 말고 바로 저자가 운영하는 네이버 카페(cafe.naver.com/doithtml5)에 질문을 올려보세요. 당신의 질문에 저자가 직접 답변을 해줍니다. 또한, 이 책에서 다루지 못한 내용이나 업그레이드되는 자료는 저자의 네이버 카페와 페이스북(facebook.com/do.it.html5)을 통해서 지속적으로 제공합니다.

함께 공부하고 정보도 공유하자! - Do it! 스터디룸

지금 바로 Do it! 스터디룸 네이버 카페(cafe.naver.com/doitstudyroom)를 방문해 보세요. 함께 공부할 멤버도 찾을 수 있고, 웹 디자인 정보도 공유할 수 있습니다.

※ 책의 실습 파일은 저자의 네이버 카페(cafe.naver.com/doithtml5) 또는 저자의 깃허브(github.com/kyrieko/webd)와 이지스퍼블리싱 홈페이지(www.easyspub.co.kr)에서 회원가입 후 다운로드 받을 수 있습니다.

추천사

"누구도 속 시원히 알려주지 않던 그 기술이 궁금하다면?"

"웹 디자인 트렌드를 이렇게 배우기 쉽게 정리한 책은 처음인 것 같습니다"

대학에서도 웹 디자인 수업은 필수로 가르치고 있습니다. 하지만 웹 디자인 분야를 꿈꾸는 학생들이 초보 딱지를 떼고 실무자로서 일하기 위해서는 HTML5, CSS3만으로는 부족한 것이 현실입니다. 그런 점에서 웹 디자인 트렌드를 배우기 쉽게 정리해서 알려주는 [Do it! 프런트엔드 웹 디자인 입문]의 출간이 정말 반갑고 기쁩니다. 고경희 저자의 이전 책, [Do it! HTML5+CSS3 웹 표준의 정석]의 명성에 걸맞게 이 책 역시 초보자도 쉽게 프런트엔드 웹 디자인에 입문할 수 있도록 배려하고 있습니다. 특히 이론부터 실습을 거쳐 웹 디자인 트렌드를 반영한 사이트의 소스를 분석해 볼 수 있도록 유도하는 흐름은 이 책의 큰 장점이라고 생각합니다. 웹을 시작하려는 학생들에게도, 웹 디자인 트렌드를 가르치려는 교육 현장에도 정말 유용한 책입니다.
- 안인순 / 안동과학대학교 컴퓨터정보과 교수

"웹 디자인 분야 실무 경쟁력을 갖추기 위한 필수 도서"
모두가 Mobile first를 지나 Mobile only를 외치는 시대입니다. 앱으로 몰리고 있죠. 시계를 과거로 돌려보면 PC에 응용프로그램을 설치하여 작업을 수행하고 있는 사람들이 보입니다. 하지만 지금은 어떤가요? SaaS(Softwareas a Service)를 넘어 PaaS(Platform as a Service)까지 이제는 거의 모든 중요한 애플리케이션이 웹으로 서비스됩니다. 모바일에서도 마찬가지입니다. 앱을 통해서만 가능하다고 생각했던 기능은 웹에서도 제한적으로 구현할 수 있습니다. 웹보다 유니버셜(universal)한 것이 있을까요? 그 무엇보다 빠르게 적용하고 눈으로 확인할 수 있으며 그 즉시 사용자에게 전달됩니다. 앱의 미래는 웹입니다. 코딩, UI 개발, 퍼블리싱 등 여러 용어로 불리는 프런트엔드 웹 디자인 기술을 익히는 것은 곧 다가올 미래의 실무 경쟁력을 쌓기 위한 좋은 투자이며 이 책이 바로 그 시작점이 될 것입니다.
- 신성철 / 야놀자 서비스 기획실장

"다양한 웹 디자인 기법을 저자 특유의 친절함으로 이해하기 쉽게 풀어 쓴 책!"
열정만으로는 안 되던 초보 시절, 아무리 책을 읽어도 어떻게 시작할지 막막하던 때, 정말 좋은 책 한 권으로 엉켜 있던 실타래가 풀리는 경험을 해 보셨는지요. 1998년 제가 웹 개발을 시작할 때나 현재나 관련 분야 전공자가 아닌 상태에서 오직 책과 씨름하며 독학으로 실력을 키워 온 저로서는 좋은 책만큼 체계적인 학습 방법은 없다고 생각합니다. 이 책은 저처럼 웹 디자인에 대한 열정은 가득하나 어떻게 시작해야 할지 모르는 이들에게 마른 사막에 내리는 단비 같은 지식을 줄 것입니다. 누구도 제대로 알려주지 않았던 다양한 웹 기술을 이해하기 쉽게 풀어서 설명하고 있어서 이제 입문하는 웹 디자이너뿐 아니라 웹 퍼블리셔, 웹 개발자 모두에게 충분히 좋은 길잡이가 되어 줄 것입니다.
- 김은규 / 커넥티드에잇 부설연구소 소장

"인터넷을 헤매며 최신 웹 디자인 정보를 찾고 있는 사람들의 필독서"

웹 분야 종사자라면 누구든지 웹 디자인의 변화를 포착하기 위해 다양한 채널을 벤치마킹할 것입니다. 이 책은 지금의 트렌드에 걸맞은 ‘프런트엔드’ 웹 디자인 기술에 입문할 수 있도록 책에 나온 기술이 실제 적용된 사이트를 예로 들어 쉽고 명확하게 설명해 주고 있습니다. 현직 웹 디자이너, HTML5 & CSS3 지식은 있으나 최신 웹 디자인 경향에 어두운 분, 또 웹 디자인을 처음 배우지만 HTML5와 CSS3까지 한 번에 배우고 싶은 학생이나 초보자 등 누구나 프런트엔드 웹 디자이너가 될 수 있는 기회를 안겨 줄 것입니다.
- 유영경 / Digital Marketing & Creative Group ㈜엠피알디 대표이사

"취업용 포트폴리오를 준비하는 초보자에게 이 책을 강력히 추천합니다"
사실 프런트엔드 분야는 여러 분야가 접목되어 있어 접근하기가 쉽지 않습니다. 하지만 [Do it! 프런트엔드 웹 디자인 입문]은 누구라도 쉽게 예제를 따라 할 수 있습니다.
웹 업계에 종사하는 사람은 이 책에서 최신 웹 기술을 접할 수 있어 웹 업계의 동향을 파악할 수 있을 뿐만 아니라 자신의 기술을 향상시키는 계기가 될 것입니다. 특히 꼼꼼하게 짜인 둘째마당의 실습을 차근차근 따라해 보면, 최신 트렌드를 반영한 취업용 포트폴리오를 준비하는 데 큰 도움이 될 것입니다.
- 김운아 / [Do it! 반응형 웹 디자인] 저자

"이 책을 미리 읽어본 대학생 서포터즈의 한마디"

HTML과 CSS에 대한 기초 지식만 있다면 충분히 혼자 따라할 수 있는 웹 디자인 예제들이 풍부했어요! 스스로 웹사이트를 분석할 수 있는 힘을 길러주는 책입니다.
- 배영 / 멀티미디어공학과 4학년

개념부터 차근차근 설명하면서 실습과 심화 단계까지 알차게 구성되어 있습니다. 무엇보다 설명에 맞는 디자인과 다양한 웹사이트를 예시로 보여줘서 이해도 쉽고 재미있었어요!
- 신지연 / 멀티미디어공학과 4학년

그동안 웹사이트 디자인에 대해 막연히 생각만 하고 어떻게 구현해야 할지 막막했는데, 이 책에서 코드를 한 줄 한 줄 자세히 설명해 주는 점이 정말 친절해서 좋았어요!
- 강석원 / 컴퓨터공학과 2학년

목차

첫째마당 최신 웹 디자인 트렌드 살펴보기

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 버튼과 내비게이션 바

관련이미지

저자소개

생년월일 -
출생지 -
출간도서 15종
판매수 13,877권

마이크로소프트 공인 최고 기술 전문가
국내에 인터넷이 보급되기 시작하던 1990년 초반부터 초보자와 중급자를 위한 베스트셀러 컴퓨터 서적을 집필해 온 IT 전문 필자이다.
현재 Developer Technologies 분야 마이크로소프트 최고 기술 전문가로 활동 중이며, HTML과 DHTML(Dynamic HTML), CSS, Javascript 등 웹 관련 기술들을 좀 더 쉽게 익힐 수 있는 서적 40여 종을 집필했다.

대표 저서로는 이지스퍼블리싱의 [Do it! HTML5+CSS3 웹 표준의 정석], [Do it! 프런트엔드 웹 디자인 입문], [Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편], 길벗의 [윈도우 10

펼쳐보기

저자의 다른책

전체보기
펼쳐보기

이벤트 기획전

  • 이벤트

    이벤트 기간

    2019/06/25 ~ 2019/08/31

    Event. 1 파이썬 코딩 면허 시험 PDF 무료제공
    Event. 2 무료 소스 활용법 PDF 공개
    Event. 3<된다!>, 시리즈 구매 시, <데일리 성공노트 > 증정 (포인트 차감)

    *자세한 내용은 이벤트 페이지에서 확인해 주세요.

이 책과 내용이 비슷한 책 ? 내용 유사도란? 이 도서가 가진 내용을 분석하여 기준 도서와 얼마나 많이 유사한 콘텐츠를 많이 가지고 있는가에 대한 비율입니다.

    리뷰

    0.0 (총 0건)

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    10.0

    교환/환불

    교환/환불 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

    교환/환불 가능 기간

    고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

    교환/환불 비용

    고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

    교환/환불 불가사유

    반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
    배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

    소비자 피해보상

    소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
    교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

    기타

    도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

    배송안내

    • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

    • 배송비

    도서(중고도서 포함) 구매

    2,000원 (1만원이상 구매 시 무료배송)

    음반/DVD/잡지/만화 구매

    2,000원 (2만원이상 구매 시 무료배송)

    도서와 음반/DVD/잡지/만화/
    중고직배송상품을 함께 구매

    2,000원 (1만원이상 구매 시 무료배송)

    업체직접배송상품 구매

    업체별 상이한 배송비 적용