러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문

HTML, CSS 기초부터 반응형 웹 디자인, 실전 웹 사이트 제작까지

최신 웹 사이트 제작에 필요한 모든 지식을 이 책 한 권으로 배워보자!

이 책은 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 외부 미디어 변경해보기
      • 구글 지도 변경하기

  • 38쪽, 페이지 중간의 그림을 다음 그림으로 교체

    html-css-p38.png