나의 첫 HTML & CSS 웹 디자인

HTML & CSS 기초부터 반응형 웹, CSS 애니메이션, 멀티 페이지 사이트 제작까지
$24.95
SKU
9791192987149
+ Wish
[Free shipping over $100]

Standard Shipping estimated by Fri 05/31 - Thu 06/6 (주문일로부 10-14 영업일)

Express Shipping estimated by Tue 05/28 - Thu 05/30 (주문일로부 7-9 영업일)

* 안내되는 배송 완료 예상일은 유통사/배송사의 상황에 따라 예고 없이 변동될 수 있습니다.
Publication Date 2023/10/06
Pages/Weight/Size 188*245*20mm
ISBN 9791192987149
Categories IT 모바일 > 웹사이트
Description
이토록 쉬운 웹 디자인 책을 기다려왔다

웹 제작을 전혀 몰라도 이 책 한 권이면 HTML과 CSS의 기본을 확실히 익힐 수 있다. 귀여운 만화와 풍부한 일러스트로 보는 재미까지 더했다. 멋진 웹 디자인의 SNS 링크 모음 사이트, 블로그 사이트, 웹 초대장 사이트, 레스토랑 사이트를 따라 만들면서 기초적인 내용은 물론 Flexbox 레이아웃, CSS 그리드 레이아웃, 반응형 웹 디자인, CSS 애니메이션까지 배운다. 부록으로는 웹사이트 공개 방법, 제작을 도와주는 추천 사이트 모음, 치트시트, 사이트의 샘플 디자인 XD 데이터를 제공한다.
Contents
옮긴이 머리말 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
Author
Capybara Design,다케우치 나오토,다케우치 루미,문지현
기업의 웹사이트를 구축하는 부부 프리랜서 디자인 유닛이다. 회사 이름은 카피바라와 함께 살고 싶은 마음에서 유래했다.

웹사이트: https://capybara-design.com
인스타그램: @html_css_webdesign
X(구 트위터): @html_css_1min
기업의 웹사이트를 구축하는 부부 프리랜서 디자인 유닛이다. 회사 이름은 카피바라와 함께 살고 싶은 마음에서 유래했다.

웹사이트: https://capybara-design.com
인스타그램: @html_css_webdesign
X(구 트위터): @html_css_1min