HTML/CSS 입문 예제 중심

이 책은 2016년 11월 한빛 아카데미에서 출간한 『HTML & CSS for Beginner』의 후속 버전으로 집필 되었습니다. HTML/CSS의 기초와 반응형 웹을 예제 중심으로 재미있게 공부할 수 있는 독학 및 강의 교재입니다. 단계 별로 제시되는 예제들을 따라하기 식으로 실습하다 보면 자연스럽게 HTML/CSS의 지식을 습득하고 최신 반응형 웹 기술을 익힐 수 있도록 하였습니다.



이 책의 내용은 HTML, CSS, 웹 페이지 제작, 반응형 웹의 네 개의 파트로 구성됩니다. HTML 편에서는 HTML 문서의 기본 구조, 웹의 동작 원리, HTML 태그 등에 대해 학습하고, CSS 편에서는 CSS를 이용하여 웹 페이지를 멋지게 꾸미는 방법을 익힙니다. 그리고 웹 페이지 제작 편을 통해 앞에서 배운 HTML/CSS 기초를 바탕으로 실제 웹 사이트를 제작하는 방법을 배웁니다. 마지막으로 반응형 웹 편에서는 최신 반응형 웹 기술을 이용하여 실전에서 활용 가능한 반응형 웹 사이트를 제작하는 기법을 익힙니다.

PART 1 HTML 편

CHAPTER 01 HTML 소개

1.1 웹의 개요

__1.1.1 웹이란?

__1.1.2 웹의 동작 원리

1.2 실습 환경 구축

1.3 HTML의 개요

__1.3.1 HTML 문서의 구조

__1.3.2 웹 페이지의 제목

1.4 HTML의 주석문

[연습문제]



CHAPTER 02 HTML의 기본 태그

2.1 텍스트

__2.1.1 글 제목 - 〈h1〉 ~ 〈h6〉

__2.1.2 단락 - 〈p〉

__2.1.3 줄바꿈 - 〈br〉

__2.1.4 HTML 특수 문자

2.2 이미지

__2.2.1 이미지 삽입 - 〈img〉

__2.2.2 URL 주소와 경로

2.3 오디오와 비디오

__2.3.1 오디오 - 〈audio〉

__2.3.2 비디오 - 〈vidio〉

2.4 목록

__2.4.1 순서없는 목록 - 〈ul〉 〈li〉

__2.4.2 순서 목록 - 〈ol〉 〈li〉

2.5 하이퍼링크

프로젝트 2-1 : 데이터 센터 소개 페이지 만들기

프로젝트 2-2 : 랙돌 고양이 소개 페이지 만들기

프로젝트 2-3 : 에버랜드 이용 안내 페이지 만들기

[연습문제]



CHAPTER 03. 폼 양식과 테이블

3.1 폼 양식이란?

3.2 입력 요소 - 〈input〉

__3.2.1 텍스트 입력 창

__3.2.2 비밀번호 입력 창

__3.2.3 라디오 버튼

__3.2.4 체크 박스

__3.2.5 파일

__3.2.6 버튼

__3.2.7 〈input〉 태그의 속성

3.3 선택 박스 - 〈select〉 〈option〉

3.4 다중 입력 창 - 〈textarea〉

3.5 표

__3.5.1 표 삽입 - 〈table〈tr〉 〈th〉 〈td〉

__3.5.2 셀의 병합

프로젝트 3-1 : 열차 시간표 만들기

프로젝트 3-2 : 기상청 일기예보 표 만들기

프로젝트 3-3 : 회원가입 폼 만들기

프로젝트 3-4 : 답글쓰기 폼 만들기

[연습문제]



Part 2. CSS 편

CHAPER 04 CSS의 기본 문법

4.1 CSS의 개요

__4.1.1 CSS의 기본 구조

__4.1.2 CSS의 삽입 방법

4.2 CSS의 주석문

4.3 웹의 색상

__4.3.1 배경 색상

__4.3.2 글자 색상

__4.3.3 색상 코드

4.4 글자 스타일 지정

__4.4.1 글자 정렬과 줄 간격

__4.4.2 폰트 설정

__4.4.3 글자 그림자

__4.4.4 링크 글자 꾸미기

4.5 웹 폰트

__4.5.1 웹 폰트 사용 방법

__4.5.2 웹 폰트 사용 예

프로젝트 4-1 : 생태 공원 이용 안내 페이지 만들기

프로젝트 4-2 : 고양이 기르기 페이지 만들기

프로젝트 4-3 : 링크걸린 텍스트 메뉴 꾸미기

[연습문제]



CHAPTER 05. 박스 모델

5.1 박스 모델이란?

5.2 경계선

__5.2.1 경계선 그리기

__5.2.2 상하좌우 경계선

5.3 마진과 패딩

__5.3.1 마진 - margin

__5.3.2 패딩 - padding

5.4 박스 관련 속성

__5.4.1 둥근 모서리 - border-radius

__5.4.2 박스 그림자 - box-shadow

프로젝트 5-1 : 웹 소개 페이지 만들기

프로젝트 5-2 : HTML/CSS 강좌 배너 만들기

프로젝트 5-3 : 우대 정보 페이지 만들기

[연습문제]



CHAPTER 06. CSS 선택자

6.1 선택자란?

6.2 선택자의 기본

__6.2.1 전체 선택자

__6.2.2 태그 선택자

__6.2.3 그룹 선택자

6.3 아이디와 클래스

6.4 클래스 선택자

6.5 하위 선택자

프로젝트 6-1 : 고양이 프로필 만들기

프로젝트 6-2 : 해수욕장 안내 페이지 만들기

프로젝트 6-3 : 책 홍보용 상세 페이지 만들기

[연습문제]



CHAPTER 07. CSS 활용

7.1 배경 이미지

__7.1.1 배경 이미지 삽입

__7.1.2 배경 이미지 반복

7.2 테이블 꾸미기

7.3 디스플레이 방식 - display

__7.3.1 display 속성

__7.3.2 인라인과 블록

7.4 목록 꾸미기

__7.4.1 글머리 기호 - list-style-type

__7.4.2 글머리 이미지 - list-style-image

__7.4.3 수평 목록 만들기

7.5 폼 꾸미기

__7.5.1 로그인 폼

__7.5.2 회원가입 폼

프로젝트 7-1 : 과일 쇼핑몰 상품 목록 만들기

프로젝트 7-2 : 드레스 샵 배너 만들기

프로젝트 7-3 : 게시판 글쓰기 폼 만들기

[연습문제]



Part 3. 레이아웃 편

CHAPTER 08. 레이아웃 기초

8.1 박스 요소의 중앙 배치

8.2 float 속성을 이용한 레이아웃

__8.2.1 float 속성

__8.2.2 clear 속성

8.3 웹 페이지 레이아웃

__8.3.1 div 요소 레이아웃

__8.3.2 HTML 레이아웃 요소

8.4 요소의 위치 지정 - position

8.5 레이아웃 활용 예

__8.5.1 사이트 맵 레이아웃

__8.5.2 배너 목록 레이아웃

프로젝트 8-1 기업 연혁 만들기

프로젝트 8-2 메뉴를 비정형으로 배치하기

[연습문제]



CHAPTER 09. 실전! 웹 페이지 제작

9.1 베이킹 사이트의 메인 레이아웃

9.2 상단 헤더와 메인 이미지

__9.2.1 상단 헤더 만들기

__9.2.2 메인 이미지 만들기

9.3 사이드바 만들기

9.4 메인 섹션 만들기

9.5 하단 푸터 만들기

9.6 웹 페이지 완성하기

프로젝트 9-1 포털 사이트 메인 페이지 레이아웃 잡기

프로젝트 9-2 쇼핑몰 상풍 진열 페이지 레이아웃 잡기

[연습문제]



Part 4. 반응형 웹 편

CHAPTER 10. 반응형 웹 기초

10.1 반응형 웹이란?

10.2 뷰포트

__10.2.1 뷰포트 미설정

__10.2.2 뷰포트 설정

10.3 그리드 뷰

__10.3.1 가변 그리드

__10.3.2 px와 % 동시 사용하기

10.4 반응형 웹의 폰트

__10.4.1 em 단위

__10.4.2 rem 단위

10.5 12열 그리드 시스템

[연습문제]



CHAPTER 11. 반응형 웹 기술

11.1 미디어 쿼리

11.2 가변 이미지

__11.2.1 이미지의 너비

__11.2.2 반응형 이미지 만들기

11.3 플렉서블 박스

__11.3.1 플렉서블 박스란?

__11.3.2 플렉스박스 방향 설정하기

__11.3.3 아이템 배치하기

__11.3.4 플렉스박스로 상품 목록 만들기

[연습문제]



CHAPTER 12. 반응형 웹 사이트 제작

12.1 반응형 포토 스튜디오 사이트

12.2 메인 페이지 만들기

__12.2.1 상단 헤더와 메인 이미지

__12.2.2 메인 콘텐츠

__12.2.3 하단 푸터

12.3 스튜디오 소개 페이지 만들기

12.4 스튜디오 예약 페이지 만들기

[연습문제]

황재호 경희대학교 전자공학과를 졸업하고 동 대학원에서 석ㆍ박사를 취득했다. KT 연구개발본부에서 연구원으로 근무하며 MPEG-2 비디오 코덱 시스템의 소프트웨어와 하드웨어를 개발하였다. 현재는 대학에서 파이썬, PHP, 자바스크립트, 데이터베이스, HTML/CSS, 웹 콘텐츠 제작 등을 강의하면서 관련 서적 집필과 온라인 콘텐츠 개발에 힘쓰고 있다.