본문 바로가기

도서 소개

처음 만나는 HTML5 & CSS3

이 책은 현재 절판입니다. 그간 읽어주신 분들께 감사드립니다.

 

알기 쉬운 설명! 모바일 중심 예제!

당신이 알던 그 예전의 HTML과 CSS가 아니다!

출판사 제이펍

원출판사 SB Creative

원서명 いちばんよくわかるHTML5&CSS3デザインきちんと入門(원서 ISBN: 9784797388541)

저자명 카노 스케하루

역자명 김완섭

출판일 2017년 12월 15일

페이지 384쪽

시리즈 First Step 시리즈 04

판 형 (170*225*18)

제 본 무선(soft cover)

정 가 25,000원

ISBN 979-11-88621-04-0 (93000)

키워드 HTML / CSS / 웹 개발 / 모바일 / 웹 / 웹 프로그래밍 / 반응형 디자인

분야 웹 프로그래밍 / HTML

 

관련 사이트

아마존 도서 소개 페이지

원출판사 도서 소개 페이지

 

관련 포스트

2017/12/05 - [출간전 책소식] - 'First Step' 시리즈 네 번째 책은 HTML5 & CSS3입니다!

 

관련 시리즈

■ First Step 시리즈

 

관련 도서

처음 만나는 자바스크립트

자바스크립트 & 제이쿼리

인터랙티브 웹 콘텐츠 제작 프로젝트

세르게이의 HTML5 & CSS3 퀵 레퍼런스

머리에 쏙쏙 들어오는 jQuery 입문

 

관련 파일 다운로드

예제 코드

 

 

강의보조 자료

교재로 채택하신 분들은 메일을 보내주시면 아래의 자료를 보내드리겠습니다: jeipubmarketer@gmail.com

■ 본문의 그림과 표

 

샘플 PDF(차례, 옮긴이 머리말, 머리말, 예제 데이터 사용법, 베타리더 후기, 1장 '웹 사이트의 구조를 알자')

처음만나는HTML5&CSS3_sample.pdf
다운로드

 

정오표 페이지

http://jpub.tistory.com/863

원서 정오표

도서구매 사이트(가나다순)

[강컴] [교보문고] [도서11번가] [반디앤루니스] [알라딘] [예스이십사] [인터파크]

 

도서 소개

알기 쉬운 설명! 모바일 중심 예제!

당신이 알던 그 예전의 HTML과 CSS가 아니다!

 

잘 안다고 생각했던 HTML과 CSS! 근데 과연 그럴까요? 이 책은 그런 안일함을 기분 좋게 깨주는 친절하고 상냥한 학습서랍니다! 이 책은 이론에 집중하기보다 지은이가 현장에서 겪은 실무 경험에서 우러난 생생한 노하우를 전달하며, 단순한 프로그래밍 지식뿐만 아니라 실무에서 사용되는 작업 순서나 생각 방식도 전수하는 것이 가장 큰 특징입니다. 또한, 쉬운 코드와 그림을 바탕으로 초보자도 쉽게 이해할 수 있도록 구성하였습니다.

 

무엇보다 단순히 태그 설명이나 CSS를 설명하는 것을 넘어, ‘이렇게 하면 페이지가 완성된다’라는, 작업의 전체 흐름을 이해하는 데 중점을 두고 집필하였으므로 이 책을 통해 자잘한 기술이 아닌, 실무에 필요한 능력을 키울 수 있을 것입니다!

 

이 책의 주요 내용

  • 1장 - 웹사이트 구조와 URL의 특징 그리고 사용할 수 있는 파일 종류 및 특징 등 웹사이트 제작을 시작하기에 앞서 알아 두어야 할 기초 지식을 정리
  • 2장 ~ 3장 - 간단한 예를 통해 HTML/CSS 코딩 흐름을 학습. 특히 언제 어떤 태그를 사용해서 페이지를 구성하면 좋은지를 개념 중심으로 설명
  • 4장 ~ 8장 - 기능별로 HTML/CSS 코딩 예를 소개. ‘설명을 위한 예제’가 아닌 실전 기술을 도입해서 예제를 구성했으므로 학습은 물론 실무에도 적용 가능
  • 9장 - 레이아웃에 관해 내용과 함께, 현재 주류가 되는 플렉스 박스(flex box) 기술을 사용해 전형적인 페이지 레이아웃과 내비게이션을 구현하는 방법을 상세하게 다룸
  • 10장 - 지금까지 소개한 기술을 조합해서 실제 웹사이트를 구축해 보고, 웹사이트의 HTML/CSS 작성 흐름과 사고방식에 따른 작업 순서를 소개함. 아무리 복잡한 디자인이라도 사실은 ‘작은 기술들의 집합’으로 만들어져 있다는 것을 이해할 수 있도록 구성

 

지은이 소개

카노 스케하루(狩野 祐東)

UI 디자이너/엔지니어/저술가

미국 샌프란시스코에서 UI 디자인 이론을 배웠다. 귀국 후 직장 생활을 하다 프리랜서를 거쳐 2016년부터 주식회사 Studio947을 설립했다. 웹사이트 및 애플리케이션 인터페이스 디자인, 인터랙티브 콘텐츠 개발 등을 하고 있으며, 각종 세미나나 강좌의 강사로 활동 중이다. 주요 저서로는 《처음 만나는 자바스크립트》(제이펍), 《スラスラわかるCSSデザインのきほん(쉽게 이해하는 CSS 디자인의 기본)》, 《作りながら学ぶjQueryデザインの教科書(만들면서 배우는 jQuery 디자인 교과서)》(SB크리에이티브) 등이 있다.

 

홈페이지: http://studio947.net

트위터: @deinonychus947

지은이의 도서 지원 사이트(일본어): http://www.solidpanda.com/book

옮긴이 소개

김완섭

네덜란드 ITC에서 Geoinformation for Disaster Risk Management 석사 학위를 취득했다. 약 9년간 일본과 한국의 기업에서 IT 및 GIS/LBS 분야 업무를 담당했으며, 일본에서는 세콤(SECOM) 계열사인 파스코(PASCO)에서 일본 외무부, 국토지리정보원 같은 정부기관을 대상으로 한 시스템 통합(SI) 업무를 담당했다. 이후 야후 재팬으로 직장을 옮겨 내비게이션 지도 개발 담당 시니어 엔지니어로 근무했으며, 한국으로 돌아와 SK에서 내비게이션 지도 데이터 담당 매니저로 근무했다. 현재는 싱가포르의 한 국제 연구 기관에서 echnical Specialist로 근무 중이다. 저서로는 《나는 도쿄 롯폰기로 출근한다》가 있으며, 역서로는 《인공지능 70》, 《처음 만나는 자바스크립트》, 《다양한 언어로 배우는 정규표현식》, 《그림으로 공부하는 IT 인프라 구조》, 《그림으로 공부하는 시스템 성능 구조》 등 20여 종이 있다. 블로그를 통해 IT 번역 관련 이야기와 싱가포르 직장 생활을 소개하고 있다.

 

차례

CHAPTER 1 웹사이트의 구조를 알자 ... 1

SECTION 1 웹사이트가 표시되는 구조 _2

SECTION 2 URL _5

SECTION 3 웹사이트에 사용되는 파일 종류 _9

SECTION 4 웹사이트의 파일 및 폴더 구조 _16

SECTION 5 웹사이트 제작 환경을 준비하자 _22

더보기

CHAPTER 2 HTML 기초 지식과 마크업 실전 예제 ... 29

SECTION 1 HTML이란? _30

SECTION 2 HTML 형식 _33

SECTION 3 HTML 문서 구조 _37

SECTION 4 마크업의 구성 방식 연습하기 _40

CHAPTER 3 CSS 기초 지식과 페이지 디자인 실전 예제 ... 55

SECTION 1 CSS 기초 지식 _56

SECTION 2 CSS 형식 _58

SECTION 3 페이지에 CSS를 적용하는 훈련 _61

CHAPTER 4 텍스트 꾸미기 ... 73

SECTION 1 제목이나 본문의 폰트 크기 조정하기 _74

SECTION 2 읽기 쉽게 행간 조절하기 _82

SECTION 3 단락에서 리드 문장을 굵은 글씨로 설정 _85

SECTION 4 폰트 설정하기 _88

SECTION 5 텍스트의 정렬 방식 변경하기 _96

SECTION 6 두 번째 행 이후를 한 글자 내린다 _99

SECTION 7 텍스트 색 변경하기 _102

SECTION 8 제목에 부제목 붙이기 _111

CHAPTER 5 링크 설정과 이미지 표시 ... 115

SECTION 1 텍스트에 링크 추가하기 _116

SECTION 2 텍스트 링크에 CSS 적용하기 _129

SECTION 3 이미지 표시하기 _139

SECTION 4 이미지 링크 걸기 _145

SECTION 5 이미지 주변에 텍스트 배치하기 _150

CHAPTER 6 박스와 정보 정리 ... 155

SECTION 1 인라인 박스와 블록 박스 _156

SECTION 2 항목 나열하기(리스트)의 마크업 _159

SECTION 3 리스트를 정보 정리에 사용하자 _162

SECTION 4 능숙한

사용법 _173

SECTION 5 CSS의 박스 모델 _178

SECTION 6 패딩, 보더 설정 _183

SECTION 7 두 개 이상의 박스 나열하기 _189

SECTION 8 박스의 디자인 조절하기 _197

CHAPTER 7 테이블 ... 209

SECTION 1 테이블 작성하기 _210

SECTION 2 접근성을 고려한 테이블 _220

SECTION 3 테이블의 디자인 변경 _227

CHAPTER 8 폼 ... 235

SECTION 1 폼 및 폼의 데이터 전송 구조 _236

SECTION 2 다양한 폼 부품 _239

SECTION 3 표준 폼의 예 _263

CHAPTER 9 페이지 전체 레이아웃과 내비게이션 ... 267

SECTION 1 실전 코딩을 위해 알아 두면 좋은 CSS 지식 _268

SECTION 2 1단 칼럼형 레이아웃 _275

SECTION 3 플렉스 박스를 사용한 칼럼 레이아웃 _292

SECTION 4 내비게이션 메뉴 작성하기 _304

CHAPTER 10 반응형 웹디자인 페이지 만들기 ... 317

SECTION 1 반응협 웹디자인이란? _318

SECTION 2 반응형 웹디자인 사이트 만들기 _323