나의 첫 HTML & CSS 웹 디자인

이토록 쉬운 웹 디자인 책을 기다려왔다

 

웹 제작을 전혀 몰라도 이 책 한 권이면 HTML과 CSS의 기본을 확실히 익힐 수 있다. 귀여운 만화와 풍부한 일러스트로 보는 재미까지 더했다. 멋진 웹 디자인의 SNS 링크 모음 사이트, 블로그 사이트, 웹 초대장 사이트, 레스토랑 사이트를 따라 만들면서 기초적인 내용은 물론 Flexbox 레이아웃, CSS 그리드 레이아웃, 반응형 웹 디자인, CSS 애니메이션까지 배운다. 부록으로는 웹사이트 공개 방법, 제작을 도와주는 추천 사이트 모음, 치트시트, 사이트의 샘플 디자인 XD 데이터를 제공한다.

 

 

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

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [인터파크]  [쿠팡]

 

전자책 구매 사이트(가나다순)

[교보문고]  [구글북스]  [리디북스]  [알라딘]  [예스이십사]

 

출판사 제이펍
저작권사 翔泳社
원서명 これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本 (9784798170114)
도서명 나의 첫 HTML & CSS 웹 디자인
부제 HTML & CSS 기초부터 반응형 웹, CSS 애니메이션, 멀티 페이지 사이트 제작까지
지은이 Capybara Design 다케우치 나오토, 다케우치 루미
옮긴이 문지현
감수자 (없음)
시리즈 (없음)
출판일 2023. 10. 06
페이지 288쪽
판 형 46배판변형(188*245*13.7)
제 본 무선(soft cover)
정 가 22,000원
ISBN 979-11-92987-14-9 (93000)
키워드 마크업, HTML, CSS, 웹디자인, Flexbox, 반응형웹, 멀티페이지, 레이아웃, CSS애니메이션, 웹사이트
분 야 웹 디자인/ 웹 프로그래밍

 

관련 사이트
■ 아마존 도서 페이지
■ 저작권사 도서 페이지

■ 깃허브

 

관련 시리즈

■ (없음)

 

관련 포스트

■ 2023.09.18 - [출간 전 책 소식] - 혹시... 나만의 웹사이트를 만들어보고 싶지 않으신가요?

 

관련 도서

■ 2022.10.27 - [도서 소개] - 웹 디자인, 이렇게 하면 되나요?

■ 2021.02.18 - [도서 소개] - 다양한 예제로 배우는 CSS 설계 실전 가이드

 

관련 파일 다운로드

■ 예제 코드

 

강의 보조 자료(교재로 채택하신 분들은 메일(textbook@jpub.kr)을 보내주시면 다음 자료를 보내드립니다.)
■ 없음

 

미리보기(차례, 옮긴이 머리말, 베타리더 후기, 들어가며, 이 책을 읽는 방법, 각 파트의 학습 포인트, 이 책에서 만들 사이트, 실습용 데이터 다운로드, Part2 일부) 

 

정오표 페이지
■ https://jpub.tistory.com/1477

 

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

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [인터파크]  [쿠팡]

 

전자책 구매 사이트(가나다순)

[교보문고]  [구글북스]  [리디북스]  [알라딘]  [예스이십사]

 

도서 소개

배우기 쉽고, 재미있고, 결과물이 멋지기까지 한 나의 첫 웹 디자인 책

 

누구나 한 번쯤 ‘나만의 웹사이트’를 꿈꿔봤을 것이다. 이 책의 편집자도 코딩을 배우자마자 웹사이트를 만들었다. 템플릿을 써서 어찌어찌 만들어보기는 했으나 더 멋지게 만들려면 어떻게 해야 하는지는 오리무중이었다. 이 책을 편집하면서 내가 바라던 초보자를 위한 웹 디자인 책이 바로 이 책이라는 것을 깨달았다.

 

책을 펼치면 귀여운 카피바라 캐릭터 ‘카피조우’가 우리를 반긴다. 카피조우는 카피코에게 데이트 신청을 하기 위해 SNS 링크 모음 사이트를 만들고, 당근 농장 홍보를 위해 업무용 블로그 사이트를 만든다. 카피코와 결혼하기로 한 카피조우는 웹 초대장 사이트도 만들고, 레스토랑을 차려 레스토랑 사이트도 만든다. 카피조우의 삶을 따라가다 보면 나만의 멋진 웹사이트를 4종류나 만들 수 있게 된다.

 

중간중간 나오는 ‘인간’ 웹 디자이너와 마크업 디자이너의 설명은 이해하기 쉬우며 웹 디자인의 핵심을 짚어준다. 기초부터 차근차근 알려줘 관련 지식이 전혀 없는 상태에서 시작한 사람도 문제없다. 부록은 총 네 가지다. ‘웹사이트 공개 방법’에서는 ‘나만의 웹사이트’를 사람들에게 공개하는 방법을 알려주고, ‘추천 사이트 모음’에서는 저자(또는 역자)가 실제 업무에서 사용하고 있는 사이트 47개를 소개한다.

 

‘샘플 디자인 XD 데이터’는 이미지 잘라내기나 색상 추출 등 연습용으로 사용하고 디자인 파일 제작에 참고할 수 있다. 가장 유용했던 부록 ‘치트시트’는 학습할 때뿐 아니라 앞으로 웹사이트를 만들고 관리할 때 두고두고 참고할 수 있다. 웹사이트 제작을 처음부터 배우고 싶은 초보자, 웹 디자이너가 되고 싶은 사람들에게 강력히 추천한다.

 

주요 내용

• HTML & CSS의 기본
• SNS 링크 모음 사이트
• 블로그 사이트
• 웹 초대장 사이트
• CSS 애니메이션
• 반응형 웹 디자인
• 레스토랑 사이트
• 웹사이트 공개 방법

지은이 소개

Capybara Design

기업의 웹사이트를 구축하는 부부 프리랜서 디자인 유닛이다. 회사 이름은 카피바라와 함께 살고 싶은 마음에서 유래했다.

웹사이트: https://capybara-design.com

인스타그램: @html_css_webdesign

X(구 트위터): @html_css_1min

 

다케우치 나오토 竹内 直人

웹 제작 회사, 동영상 마케팅 회사에서 디렉터·마케터·엔지니어로 일했으며 2018년에 독립했다. 현역 프런트 엔지니어의 실무 기반 지식을 바탕으로 코딩 강사로도 활동하고 있다.

 

다케우치 루미(竹内 瑠美)

UI/UX 및 마케팅 관점을 포함한 종합적인 비주얼 디자인이 전문이다. 다양한 벤처 회사에서의 경험을 살려 현재는 스타트업 회사의 디자인 파트너로 일하고 있다.

 

옮긴이 소개

문지현

대학에서 일본학·컴퓨터과학을 전공하고, IT 솔루션 회사에서 윈도우 클라이언트를 개발했다. 한자와 코드를 한 지면에서 접할 수 있다는 점이 좋아서 일본 IT 서적 번역을 시작했다. 번역한 책으로는 《파이썬 자동화 교과서》(제이펍, 2022)가 있다.

 

차례

옮긴이 머리말 x

베타리더 후기 xii

들어가며 xiii

이 책을 읽는 방법 xv

각 파트의 학습 포인트 xvi

이 책에서 만들 사이트 xvii

실습용 데이터 다운로드 xxi

4개의 부록을 다운로드하자 xxii

프롤로그 만화 xxvi

 

PART 1 HTML 작성하기

CHAPTER 1 시작하기 전에

SECTION 1 학습을 시작하기 전에 2

SECTION 2 웹사이트의 구조 이해하기 3

SECTION 3 필요한 애플리케이션 설치하기 4

SECTION 4 효율적으로 학습하기 9

SECTION 5 초간단 예제로 워밍업하기 12

 

CHAPTER 2 HTML의 기본

SECTION 1 마크업이 중요한 이유 14

SECTION 2 러브레터 내용 정리하기 16

SECTION 3 HTML 첫발 딛기 20

SECTION 4 러브레터 마크업하기 24

SECTION 5 읽기 쉬운 코드 작성하기 38

 

PART 2 SNS 링크 모음 페이지 만들기

이 파트에서 만들 사이트 ▶ SNS 링크 모음 사이트 42

 

CHAPTER 3 CSS의 기본

SECTION 1 CSS 첫발 딛기 44

SECTION 2 개발자 도구 사용하기 46

SECTION 3 HTML과 CSS 연결하기 48

SECTION 4 브라우저 기본 스타일 리셋하기 52

SECTION 5 박스 모델 이해하기 54

 

CHAPTER 4 SNS 링크 모음 CSS 작성하기

SECTION 1 CSS 작성하기 56

 

PART 3 2칼럼 페이지 만들기

이 파트에서 만들 사이트 ▶ 2칼럼 레이아웃 디자인 74

 

CHAPTER 5 블로그 사이트 HTML 작성하기

SECTION 1 웹사이트의 영역 구분하기 76

SECTION 2 블로그의 문서 구조 마크업하기 78

SECTION 3 아웃라인과 섹션 알아보기 83

SECTION 4 그 외에 새로운 HTML 태그 배우기 86

 

CHAPTER 6 블로그 사이트 CSS 작성하기

SECTION 1 Flexbox 레이아웃 알아보기 90

SECTION 2 페이지 전체와 헤더의 CSS 작성하기 94

SECTION 3 메인 영역과 사이드바의 CSS 작성하기 100

SECTION 4 아티클 영역과 푸터의 CSS 작성하기 110

 

PART 4 1칼럼 페이지 만들기

이 파트에서 만들 사이트 ▶ 1칼럼 레이아웃 디자인 120

 

CHAPTER 7 웹 초대장 사이트 HTML 작성하기

SECTION 1 HTML 구조 파악하기 122

SECTION 2 페이지 내부 링크 넣기 124

SECTION 3 폼 마크업하기 125

 

CHAPTER 8 웹 초대장 사이트 CSS 작성하기

SECTION 1 CSS 작성 순서 132

SECTION 2 웹 폰트를 사용하는 방법 134

SECTION 3 글꼴 관련 CSS 작성하기 136

SECTION 4 레이아웃 관련 CSS 작성하기 137

SECTION 5 공통 디자인 CSS 작성하기 139

SECTION 6 헤더 CSS 작성하기 140

SECTION 7 msg 섹션 CSS 작성하기 149

SECTION 8 date 섹션 CSS 작성하기 153

SECTION 9 form 섹션 CSS 작성하기 157

SECTION 10 footer와 패럴랙스 효과 CSS 작성하기 162

 

CHAPTER 9 CSS 애니메이션 추가하기

SECTION 1 CSS 애니메이션의 기초 164

 

CHAPTER 10 반응형 웹 디자인 지원하기

SECTION 1 멀티 디바이스 지원의 기본 170

SECTION 2 반응형 웹 디자인 준비하기 172

SECTION 3 각 파트를 화면 안에 넣기 177

SECTION 4 각 파트의 디자인 조정하기 180

SECTION 5 고해상도 디스플레이 지원 이미지 만들기 184

 

PART 5 멀티 페이지 사이트 만들기

이 파트에서 만들 사이트 ▶ 멀티 페이지 사이트 188

 

CHAPTER 11 사이트 제작과 웹 디자인의 기본

SECTION 1 웹사이트 제작의 흐름 190

SECTION 2 웹 디자인 개요 193

SECTION 3 웹 디자인의 기본 194

 

CHAPTER 12 레스토랑 사이트 CSS 작성하기(모바일)

SECTION 1 멀티 페이지 사이트 제작의 포인트 198

SECTION 2 TOP 페이지 CSS 작성하기 200

SECTION 3 CONCEPT 페이지 CSS 작성하기 208

SECTION 4 MENU 페이지 CSS 작성하기 220

SECTION 5 INFO 페이지 CSS 작성하기 224

 

CHAPTER 13 레스토랑 사이트 CSS 작성하기(PC)

SECTION 1 TOP 페이지 CSS 작성하기(PC) 234

SECTION 2 CONCEPT 페이지 CSS 작성하기(PC) 240

SECTION 3 MENU 페이지 CSS 작성하기(PC) 246

SECTION 4 INFO 페이지 CSS 작성하기(PC) 248

 

CHAPTER 14 참고 사이트 활용 방법 배우기

SECTION 1 웹상의 정보 활용하기 250

SECTION 2 샘플 코드를 사이트에 끼워 넣기 252

 

CHAPTER 15 웹사이트 공개 준비하기

SECTION 1 파비콘 설정하기 254

SECTION 2 OGP 설정하기 256

 

이 책을 읽은 후의 공부 방법 258

 

 

제이펍 소식 더 보기(제이펍의 소통 채널에서 더욱 다양한 소식을 확인하세요!)

포스트  유튜브  인스타그램  트위터  페이스북