최신 웹 사이트 제작에 필요한 모든 지식을 이 책 한 권으로 배워보자! 이 책은 HTML, CSS, 웹 디자인 기초를 다루고, 예제를 만들면서 배워보는 책입니다. 웹 디자인에 대해 아무것도 몰라도 처음부터 차근차근 배울 수 있도록 HTML과 CSS 기초를 알려주며 반응형 웹, Flexbox, 그리드 등 최신 기술까지 익힐 수 있도록 도와줍니다. 나아가 뒷부분에서는 앞에서 배운 내용을 바탕으로 직접 하나의 웹 사이트를 제작해 봅니다. 코드를 보고, 직접 손으로 입력하고, 만들면서 배우므로 실제 웹 사이트를 만드는 제작 흐름을 체험해 볼 수 있습니다. 더불어 이 책에서는 HTML과 CSS 같은 기본적인 기술 외에도 배색, 레이아웃, 타이포그래피 같은 ‘디자인 기초’도 함께 설명합니다. 또, 웹 페이지 디자인을 위한 편집 툴과 디자인 관련해서 참고할 만한 다양한 정보도 소개합니다. 어떻게 하면 예쁜 웹 페이지를 만들지 고민하는 독자에게도 유용한 책이 될 것입니다. ★ 이 책의 대상 독자 ★ ◎ 이제 처음 웹 사이트 제작을 시작해 보려는 초보자 ◎ HTML과 CSS를 기본부터 배우고 싶은 사람 ◎ 아름다운 디자인의 웹 사이트를 만들고 싶은 사람 ◎ 최신 웹 기술을 알고 싶은 사람

저자 : Mana 일본에서 2년 동안 그래픽 디자이너로 일한 뒤, 캐나다 밴쿠버에 있는 웹 제작 학교를 졸업했다. 캐나다, 호주, 영국 기업에서 웹 디자이너로 일했으며 현재는 일본에서 웹과 관련된 세미나를 진행하고, 웹 제작 컨설턴트로 교육에 힘쓰고 있다. 블로그 ‘웹 크리에이터 박스’는 2010년 일본 알파 블로거 어워드를 수상했다. 역자 : 윤인성 어쩌다가 책을 집필/번역하기 시작해서, 지금까지 계속해서 집필/번역하고 있다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하고 있다. 오전에는 커피, 오후에는 홍차를 마신다. 요리, 피아노, 기타, 작곡, 그림, 스컬핑 등의 취미를 갖고 있다. 《HTML5 웹 프로그래밍 입문》 《혼자 공부하는 파이썬》 《모던 웹을 위한 HTML5+CSS3 바이블》 등을 저술했으며 《최신 표준 HTML+CSS 디자인》 《파이썬을 이용한 머신러닝, 딥러닝 실전 개발 입문》 《파이썬을 이용한 웹 크롤링과 스크레이핑》 등을 번역하였다. 이 책의 역자 소개를 작성하는 시점을 기준으로 51번째 책이다.

▣ CHAPTER 1: 기억해 두어야 하는 웹 사이트 기본 1-1 좋은 웹 디자인이란? __디자인의 목적은 상대방에게 무언가를 전달하는 것 __쉬운 사용 __보다 좋은 생활을 제공하는 것 1-2 다양한 종류의 사이트 __기업 사이트 __프로모션 사이트 __포트폴리오 사이트 __쇼핑 사이트 __미디어 사이트 __SNS __ “사용하기 쉬움”을 생각하기 __보기 쉽게 디자인하기 1-3 사용성이란? __읽기 쉬운 글 만들기 __사용하기 쉬운 조작성 1-4 웹 사이트의 구조 __인터넷이란? __웹이란? __웹 페이지의 구조 __URL이란? 1-5 장치의 종류 __단말기 __주변기기 1-6 웹 브라우저의 종류 __웹 페이지는 웹 브라우저에서 1-7 제작 흐름 __제작 흐름 __기획 __사이트맵 제작 __와이어프레임 만들기 __와이어프레임 작성 예 __디자인 __코딩 __웹에 공개 1-8 제작을 시작하기 전에 __텍스트 에디터 설치 __브라우저 설치 __구글 크롬 설치 방법 __그래픽 도구 확인 ▣ CHAPTER 2: 웹 기본 구조 만들기 - HTML 기본 2-1 HTML이란? __컴퓨터에 지시를 내리는 HTML 2-2 HTML 파일 만들기 __텍스트 에디터 실행하기 __코드 작성하기 __파일 저장하기 __웹 브라우저에서 열어 보기 __HTML 파일 이름 규칙 __[!doctype html] __html~/html __head~/head __meta charset=“UTF-8” 2-3 HTML 파일의 골격 __title~/title __meta name="description" content="~" __body~/body 2-4 HTML의 기본 작성 방법 __HTML 기본 문법과 태그 __태그를 작성하는 규칙 __태그 내부에 있는 태그 __태그에 정보 추가하기 2-5 제목 붙이기 __제목 태그 h1~h6 태그 __제목 태그를 사용하는 순서 2-6 문장 출력하기 __단락을 출력하는 p 태그 2-7 이미지 삽입하기 __이미지를 출력하는 img 태그 __파일 경로 지정하기 2-8 링크 만들기 __링크를 만드는 a 태그 2-9 리스트 출력하기 __기본적인 리스트를 만드는 “ul 태그 + li 태그” 2-10 표 만들기 __순서 있는 리스트를 만드는 “ol 태그 + li 태그” __표 기본 __셀 병합하기 2-11 입력 양식 만들기 __여러 개의 부품 조합하기 __입력 양식란을 만드는 form 태그 __입력 양식에 사용하는 부품 2-12 사용하기 쉬운 입력 양식 만들기 __입력 양식의 레이블을 만드는 label 태그 2-13 블록 요소로 그룹 나누기 __그룹 구분하기 __페이지 상부의 헤더를 만드는 header 태그 __내비게이션 메뉴를 만드는 nav 태그 __기사 부분을 만드는 article 태그 __테마를 가진 그룹을 만드는 section 태그 __페이지의 메인 콘텐츠 부분을 만드는 main 태그 __메인 콘텐츠가 아닌 추가 정보 aside 태그 __페이지 하부의 푸터 부분을 만드는 footer 태그 __의미를 가지지 않는 블록 요소를 만드는 div 태그 2-14 자주 사용하는 HTML 태그 목록 ▣ CHAPTER 3: 웹 디자인 만들기 : CSS 기본 3-1 CSS란? __HTML을 장식하는 언어인 CSS 3-2 CSS를 적용하는 방법 __CSS 파일을 읽어 들여 적용하기 __HTML 파일의 head 내부에 style 태그를 넣어 지정하기 __HTML 태그 내부에 style 속성 지정하기 3-3 CSS 파일 만들기 __텍스트 에디터 실행하기 __CSS 코드 작성하기 __CSS 파일 저장하기 __HTML 파일의 head 내부에서 CSS 파일 읽어 들이기 __웹 브라우저에서 열기 __CSS 파일의 이름 규칙 3-4 CSS 기본 작성 방법 익히기 __CSS 기본 문법 __CSS를 작성할 때의 규칙 3-5 문자와 문장 장식하기 __문자의 크기를 변경하는 “font-size 속성” __폰트의 종류를 지정하는 “font-family 속성” __문자의 두께를 바꾸는 “font-weight 속성” __줄 높이를 바꾸는 “line-height 속성” __문장 맞춤을 지정하는 “text-align 속성” 3-6 웹 폰트 사용하기 __웹 폰트란? __웹 폰트 사용하기 3-7 색 넣기 __색 지정 방법 __문자색을 지정하는 “color 속성” __배경에 색을 지정하는 “background-color” 속성 __배색 잘하기 __각 색을 메인으로 사용한 참고 사이트 3-8 배경 넣기 __배경에 이미지를 설치하는 “background-image 속성” __배경 이미지의 반복 출력 “background-repeat 속성” __배경 이미지를 출력하는 위치를 지정하는 “background-position 속성” __배경 관련 속성을 한꺼번에 지정하는 “background 속성” __사진을 내려받을 수 있는 웹 사이트 3-9 너비와 높이 지정하기 __크기를 지정하는 “width 속성”, “height 속성” __웹 사이트에서 사용하는 단위 3-10 여백 조정하기 __여백의 개념 __요소 밖의 여백 “margin 속성” __요소 내부의 여백 “padding 속성” __여백을 사용해 그룹 만들기 __테두리와 문자 사이에 여백 만들기 3-11 선 긋기 __선의 두께 “border-width 속성” __선의 종류 “border-style 속성” __선 색 “border-color 속성” __요소 주변에 선을 긋는 “border 속성” __선 디자인을 효과적으로 사용하기 3-12 리스트 장식하기 __리스트 마커의 종류 “list-style-type 속성” __리스트 마커의 출력 위치 “list-style-position 속성” __리스트 마커로 사용할 이미지 “list-style-image 속성” __리스트 마커와 관련된 장식을 한꺼번에 지정하는 “list-style 속성” __리스트 마커를 효과적으로 사용하기 3-13 클래스와 ID를 사용한 지정 방법 __클래스와 ID __클래스를 사용한 작성 방법 __ID를 사용한 작성 방법 __태그 이름과 함께 클래스와 ID를 사용하는 작성 방법 __클래스 이름과 ID 이름 규칙 __한 태그에 여러 개의 ID와 클래스 붙이기 __클래스와 ID의 차이 3-14 레이아웃 만들기 __Flexbox로 수평 정렬하기 __CSS 그리드로 타일 형태로 정렬하기 __보기 쉬운 레이아웃이란? __레이아웃별 참고 사이트 목록 3-15 디폴트 CSS 리셋하기 __CSS 리셋이란 __브라우저에 따른 외관 차이 __리셋 CSS 사용하기 3-16 자주 사용하는 CSS 속성 목록 ▣ CHAPTER 4: 풀 스크린 웹 사이트 제작하기 4-1 풀 스크린이란 __풀 스크린 레이아웃의 장점과 구성 요소 4-2 풀 스크린 페이지의 제작 흐름 __작성할 페이지 __제작 흐름 4-3 “head” 작성하기 __파일 준비하기 __HTML 골격 만들기 __ “meta” 정보와 “title” 작성하기 __필요한 CSS 파일 읽어 들이기 4-4 “header” 부분 만들기 __HTML에 “header” 부분 작성하기 __CSS 파일 준비하기 __공통 부분 작성하기 __로고 크기와 여백 조정하기 __내비게이션 메뉴 장식하기 __콘텐츠의 최대 출력 너비 설정하기 4-5 콘텐츠 부분 만들기 __문장과 버튼 설치하기 __화면을 꽉 채우는 배경 이미지 배치하기 4-6 파비콘 설정하기 __파비콘이란 __어떤 디자인이 좋을까? __파비콘 전용 이미지 준비하기 __HTML의 “head” 내부에서 파비콘 읽어 들이기 __파비콘을 만들어주는 서비스 사용하기 4-7 풀스크린 페이지 변경해보기 __블랜드 모드로 배경 이미지에 색 겹치기 __배경을 그레이디언트 색상으로 설정하기 __배경 이미지에 블랜드 모드를 사용해서 그레이디언트 색상 섞기 ▣ CHAPTER 5: 2-칼럼 웹 사이트 제작하기 5-1 2-칼럼 레이아웃이란 __2-칼럼 레이아웃의 장점과 구성 요소 __2-칼럼의 너비 비율 __반응형 웹에서의 배치 5-2 2-칼럼 페이지의 제작 흐름 __제작 흐름 5-3 페이지 전체의 제목 만들기 __파일 준비하기 __HTML 편집하기 __CSS로 장식하기 5-4 푸터 부분 만들기 __푸터 콘텐츠 작성하기 __CSS로 장식하기 5-5 수평 정렬 설정하기 __레이아웃 골격 만들기 __레이아웃 구성하기 5-6 메인 콘텐츠 영역 만들기 __기사 정보 부분 만들기 __이미지와 본문 작성하기 5-7 사이드바 만들기 __제목과 문장 장식하기 __카테고리 리스트 장식하기 5-8 반응형 웹 지원하기 __반응형 웹 디자인이란? __반응형 웹을 지원하는 방법 __문자 크기와 여백 조정하기 __콘텐츠를 수직 정렬하기 __브레이크 포인트 생각해보기 5-9 칼럼 페이지를 변경해보기 __3-칼럼 레이아웃으로 설정하기 __출력할 칼럼의 순서 변경하기 ▣ CHAPTER 6: 타일 형태의 웹 사이트 제작하기 6-1 타일 형태의 레이아웃이란 __타일형 레이아웃의 장점과 구성 요소 6-2 타일형 레이아웃의 제작 흐름 __제작 흐름 6-3 페이지 상부의 소개문 만들기 __파일 준비하기 __HTML 준비하기 __CSS로 장식하기 6-4 타일형 레이아웃 설정하기 __콘텐츠 준비하기 __CSS 그리드 사용하기 6-5 반응형 웹 지원하기 __요소를 반복 정렬하는 “repeat” __요소 너비에 최솟값과 최댓값을 지정하는 “minmax” __화면의 너비에 맞게 출력하는 “auto-fit” 6-6 타일형 레이아웃 변경 예 __크기가 다른 요소 배치하기 __큰 크기의 그리드 아이템 지정하기 __이미지의 높이 맞추기 __이미지 자르기 __반응형 웹 지원하기 ▣ CHAPTER 7: 외부 미디어 사용하기 7-1 문의 페이지의 제작 흐름 __작성할 페이지 __제작 흐름 7-2 입력 양식 배치하기 __파일 준비하기 __HTML 편집하기 __CSS로 장식하기 __입력 양식 서비스 사용하기 7-3 지도 출력하기 __가게 정보 작성하기 __구글 지도 출력하기 __외관 조정하기 7-4 페이스북 플러그인 삽입하기 __SNS 부분의 레이아웃 잡기 __페이스북 플러그인 코드 받기 7-5 트위터 플러그인 삽입하기 __트위터 플러그인 코드 얻기 7-6 유튜브 영상 삽입하기 __유튜브 퍼가기 코드 추출하기 7-7 반응형 웹 지원하기 __미디어 쿼리로 수직 정렬하기 7-8 OGP 설정하기 __OGP란? __OGP 설정하기 __페이스북에서 확인해보기 __트위터에서 확인해보기 7-9 외부 미디어 변경해보기 __구글 지도 변경하기