최신 웹 사이트 제작에 필요한 모든 지식을 이 책 한 권으로 배워보자!
이 책은 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 제작을 시작하기 전에
- 텍스트 에디터 설치
- 브라우저 설치
- 구글 크롬 설치 방법
- 그래픽 도구 확인
- 1-1 좋은 웹 디자인이란?
- ▣ 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 태그 목록
- 2-1 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 속성 목록
- 3-1 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 풀스크린 페이지 변경해보기
- 블랜드 모드로 배경 이미지에 색 겹치기
- 배경을 그레이디언트 색상으로 설정하기
- 배경 이미지에 블랜드 모드를 사용해서 그레이디언트 색상 섞기
- 4-1 풀 스크린이란
- ▣ 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-칼럼 레이아웃으로 설정하기
- 출력할 칼럼의 순서 변경하기
- 5-1 2-칼럼 레이아웃이란
- ▣ CHAPTER 6: 타일 형태의 웹 사이트 제작하기
- 6-1 타일 형태의 레이아웃이란
- 타일형 레이아웃의 장점과 구성 요소
- 6-2 타일형 레이아웃의 제작 흐름
- 제작 흐름
- 6-3 페이지 상부의 소개문 만들기
- 파일 준비하기
- HTML 준비하기
- CSS로 장식하기
- 6-4 타일형 레이아웃 설정하기
- 콘텐츠 준비하기
- CSS 그리드 사용하기
- 6-5 반응형 웹 지원하기
- 요소를 반복 정렬하는 “repeat”
- 요소 너비에 최솟값과 최댓값을 지정하는 “minmax”
- 화면의 너비에 맞게 출력하는 “auto-fit”
- 6-6 타일형 레이아웃 변경 예
- 크기가 다른 요소 배치하기
- 큰 크기의 그리드 아이템 지정하기
- 이미지의 높이 맞추기
- 이미지 자르기
- 반응형 웹 지원하기
- 6-1 타일 형태의 레이아웃이란
- ▣ 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 외부 미디어 변경해보기
- 구글 지도 변경하기
- 7-1 문의 페이지의 제작 흐름
- GitHub 저장소: https://github.com/wikibook/html-css
- ZIP 형식으로 다운로드: https://github.com/wikibook/html-css/archive/master.zip
38쪽, 페이지 중간의 그림을 다음 그림으로 교체
86쪽, chapter3/c3-03-1/style.css 파일의 첫 번째 줄
@charset "utf-8"
==>
@charset "utf-8";
128쪽, 페이지 상단 제목 아래의 첫 번째 줄
요소들을 그룹화해야
합니다다.
==>
요소들을 그룹화해야
합니다.
275쪽, 4번째 줄
"Step 2"
의 코드를==>
"Step 1"
의 코드를275쪽, 5번째 줄
"Step 3"
의 코드를==>
"Step 2"
의 코드를