HTML/CSS 입문 예제 중심

HTML/CSS 기초에서 반응형 웹까지

황재호 지음

인포앤북 2021년 03월 08일 출간 종이책 : 2020년 11월 25일 출간

작품소개

책소개

예제 중심으로 재미있게 HTML과 CSS 익히기!
실전 웹 페이지 제작과 반응형 웹 마스터!

2016년 출간한 『HTML & CSS for Beginner』의 후속 버전으로 HTML과 CSS를 처음 접하는 초보자를 대상으로 하였다. 다양한 예제를 통하여 쉽고 재미있게 HTML과 CSS의 기초를 확립할 수 있게 한다. 책의 내용은 네 개의 파트(HTML 편, 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.

출판사 서평

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

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

작가정보

저자(글) 황재호

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