HTML CSS + 자바스크립트 입문 - 웹 기초에서 반응형 웹까지

이 책은 웹 개발을 처음 시작하는 입문자를 대상으로 HTML, CSS, 자바스크립트의 기초부터 반응형 웹까지 한 권으로 마스터할 수 있도록 구성되었습니다. 웹의 구조와 디자인, 반응형 기술, 동적 원리로 이어지는 단계별 학습 흐름을 따라가며 실습 위주로 공부하다 보면 자연스럽게 웹 제작 기술을 마스터할 수 있습니다. 웹 페이지의 뼈대를 만드는 HTML 태그와 디자인을 완성하는 CSS는 물론, 최신 반응형 웹 구현을 위한 뷰포트, 미디어 쿼리, 플렉스박스 및 그리드 레이아웃 기법까지 상세히 다루고 있습니다. 또한 자바스크립트의 변수, 연산자, 제어문, 함수 등 웹 프로그래밍 기초부터 핵심이 되는 문서 객체 모델(DOM)과 이벤트 처리까지 단계별 예제와 프로젝트를 통해 실습할 수 있습니다.

[목 차]
  

Part 1. HTML

Chapter 01. HTML과 실습 환경

__1.1 웹이란?

____1.1.1 웹의 개요

____1.1.2 HTML의 동작 원리

__1.2 실습 환경 구축

____1.2.1 비주얼 스튜디오 코드 설치

____1.2.2 크롬 브라우저 설치

____1.2.3 HTML 문서 작성과 실행

__1.3 HTML의 구조

____1.3.1 HTML 문서 구조

____1.3.2 웹 페이지 제목 설정

__1.4 주석문

__연습문제

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.3 멀티미디어

____2.3.1 오디오 : 〈audio〉

____2.3.2 비디오 : 〈video〉

____2.3.3 아이프레임 : 〈iframe〉

____2.3.4 유튜브 동영상 링크걸기

__2.4 링크

__2.5 상대 경로와 절대 경로

____2.5.1 상대 경로

____2.5.2 절대 경로

__2.6 목록

____2.6.1 순서없는 목록 : 〈ul〉, 〈li〉

____2.6.2 순서 목록 : 〈ol〉, 〈li〉

____2.6.3 정의 목록 : 〈dl〉, 〈dt〉, 〈dd〉

__PROJ 2-1. 데이터 센터 소개 페이지 만들기

__PROJ 2-2. 열대어 소개 페이지 만들기

__PROJ 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.3 〈input〉 태그의 속성

__3.4 선택 박스와 다중 입력 창

____3.4.1 선택 박스 : 〈select〉 〈option〉

____3.4.2 다중 입력 창 : 〈textarea〉

__3.5 테이블

____3.5.1 테이블 삽입 : 〈table〉, 〈tr〉, 〈th〉, 〈td〉

____3.5.2 테이블 열 병합

____ 3.5.3 테이블 행 병합

__3.6 회원가입 폼 양식

__PROJ 3-1. 열차 시간표 만들기

__PROJ 3-2. 일기예보 표 만들기

__PROJ 3-3. 게시판 답변 글쓰기 폼 만들기

__미니 프로젝트

__연습문제

Part 2. CSS

Chapter 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.3.4 글자 스타일

____4.3.5 글자 정렬

____4.3.6 줄 간격

____4.3.7 글자 그림자

____4.3.8 링크 글자

__4.4 배경 색상과 색상 코드

____4.4.1 배경 색상

____4.4.2 색상 코드

__4.5 웹 폰트

____4.5.1 웹 폰트 사용법

____4.5.2 웹 폰트 사용 예

__PROJ 4-1. 록 음악 소개 페이지 만들기

__PROJ 4-2. 강아지 품종 페이지 만들기

__PROJ 4-3. 웹 폰트 사용하기

__연습문제

Chapter 05. 박스 모델

__5.1 박스 모델이란?

__5.2 경계선

____5.2.1 경계선 그리기

____5.2.2 경계선 속성

__5.3 마진

____5.3.1 마진 초기화

____5.3.2 마진 속성

__5.4 패딩

__5.5 박스 속성

____5.5.1 둥근 모서리

____5.5.2 박스 그림자

__PROJ 5-1. 웹 소개 페이지 만들기

__PROJ 5-2. 강좌 배너 만들기

__PROJ 5-3. 우대 정보 페이지 만들기

__연습문제

Chapter 06. CSS 선택자

__6.1 선택자란?

__6.2 요소 선택자 : element

__6.3 아이디/클래스 선택자

____6.3.1 아이디 선택자 : #id

____6.3.2 클래스 선택자 : .class

__6.4 전체/그룹 선택자

____6.4.1 전체 선택자 : *

____6.4.2 그룹 선택자 : element, element

__6.5 자손/자식 선택자

____6.5.1 자손 선택자 : element element

____6.5.2 자식 선택자 : element 〉 element

__6.6 기타 선택자

____6.6.1 선택자 : element.class

____6.6.2 선택자 : element:first-child

____6.6.3 선택자 : element:last-child

____6.6.4 선택자 : element:nth-child(n)

__연습문제

Chapter 07. CSS 활용

__7.1 배경 이미지

____7.1.1 배경 이미지 삽입

____7.1.2 배경 이미지 반복과 배치

__7.2 표 꾸미기

__7.3 디스플레이 방식

____7.3.1 인라인과 블록

____7.3.2 display : inline

____7.3.3 display : block

____7.3.4 display : inline-block

__7.4 목록 꾸미기

____7.4.1 글머리 기호 설정

____ 7.4.2 글머리 이미지 삽입

____7.4.3 수평 목록 만들기

__7.5 폼 꾸미기

____7.5.1 로그인 폼 꾸미기

____7.5.2 회원가입 폼 꾸미기

__PROJ 7-1. 이미지 배너 만들기

__PROJ 7-2. 관람 시간 안내 표 만들기

__PROJ 7-3. 입장료 안내 표 만들기

연습문제

Chapter 08. 레이아웃

__8.1 박스 중앙 배치

__8.2 float 속성 레이아웃

____8.2.1 float 속성

____8.2.2 clear 속성

____8.2.3 이미지 갤러리

____8.2.4 사이트 맵

____8.2.5 상품 목록

__8.3 position 속성 레이아웃

____8.3.1 상대 위치 지정 - position : relative

____8.3.2 절대 위치 지정 - position : absolute

____8.3.3 위치 고정 - position : fixed

____ 8.3.4 기업 연혁

__8.4 웹 페이지 레이아웃

__8.5 페이지 레이아웃 패턴

____8.5.1 레이아웃 패턴 1

____8.5.2 레이아웃 패턴 2

____8.5.3 레이아웃 패턴 3

____8.5.4 레이아웃 패턴 4

__연습문제

Chapter 09. 웹 페이지 제작

__9.1 메인 페이지

____9.1.1 페이지 레이아웃

____9.1.2 상단 헤더

____9.1.3 메인 이미지

____9.1.4 메인 콘텐츠

____9.1.5 하단 푸터

____9.1.6 메인 페이지 완성

__9.2 회사 소개 페이지

__9.3 제품 소개 페이지

__9.4 이벤트 페이지

__9.5 FAQ 페이지

__연습문제

Part 3. 반응형 웹

Chapter 10. 반응형 웹 기초

__10.1 반응형 웹이란?

____10.1.1 반응형 웹의 특징

____10.1.2 반응형 웹의 장단점

__10.2 뷰포트

__10.3 반응형 단위

__10.3.1 px, %, em, rem 단위

__10.3.2 vh, vw 단위

10.4 미디어 쿼리

__10.4.1 미디어 쿼리 문법

__10.4.2 화면 크기에 따른 스타일 변경

__10.5 플렉스박스 레이아웃

____10.5.1 플렉스박스란?

____10.5.2 justify-content 속성

____10.5.3 align-items 속성

____10.5.4 flex-direction 속성

____10.5.5 플렉스박스 레이아웃 예

연습문제

Chapter 11. 실전! 반응형 웹 제작

__11.1 그리드 레이아웃 기초

____11.1.1 12열 그리드 시스템

____11.1.2 그리드 레이아웃

__11.2 반응형 내비게이션 바

____11.2.1 내비게이션 바 만들기

____11.2.2 햄버거 버튼 만들기

__11.3 반응형 메인 콘텐트 레이아웃

____11.3.1 12열 그리드 3단 레이아웃

____11.3.2 사이드바 위치 변경

__11.4 반응형 폼과 버튼

____11.4.1 반응형 입력 폼

____11.4.2 반응형 버튼

__11.5 반응형 카드 레이아웃

____11.5.1 카드형 콘텐트 배치

____11.5.2 카드 개수 조정하기

__연습문제

Part 4. 자바스크립트

Chapter 12. 자바스크립트 소개

__12.1 자바스크립트란?

____12.1.1 자바스크립트의 역할

____12.1.2 HTML과 CSS와의 관계

__12.2 자바스크립트 사용 방법

____12.2.1 〈script〉 태그

____12.2.2 외부 자바스크립트 파일

__12.3 콘솔 출력과 알림창

____12.3.1 콘솔 출력 - console.log()

____12.3.2 알림창 - alert()

__12.4. 주석문

Chapter 13. 기본 문법

__13.1 변수란?

____13.1.1 변수 선언 : let, const

____13.1.2 변수 이름 짓기

__13.2 기본 데이터 형

____13.2.1 숫자형

____13.2.2 문자열

____13.2.3 불리언

__13.3 기본 연산자

____13.3.1 산술 연산자

____13.3.2 대입 연산자

____13.3.3 문자열 연결 연산자

__13.4 키보드 입력과 화면 출력

____13.4.1 키보드 입력 값 받기

____13.4.2 HTML 요소 값 변경하기

____13.4.3 HTML 요소 스타일 변경하기

__13.5 활용 예제

____13.5.1 메시지 변경하기

____13.5.2 입력 값 화면 출력하기

____13.5.3 배경색 변경하기

__연습문제

Chapter 14. 조건문과 반복문

__14.1 조건문 if

____14.1.1 if~ 구문

____14.1.2 if ~ else 구문

____14.1.3 if~ else if~ else~ 구문

__14.2 비교 연산자와 논리 연산자

____14.2.1 비교 연산자

____14.2.2 논리 연산자

__14.3 조건문 활용

____14.3.1 짝수/홀수 판별하기

____14.3.2 로그인 성공/실패 판단하기

____14.3.3 양수/음수/0 판단하기

____14.3.4 입력 값이 비어 있으면 알림 창 띄우기

____14.3.5 배경색 번갈아 바꾸기

__14.4 반복문 for

____14.4.1 for문의 기본 구조

____14.4.2 for문 활용

__14.5 반복문 while

____14.5.1 while문의 기본 구조

____14.5.2 while문 활용

__연습문제

Chapter 15. 함수

__15.1 함수란?

____15.1.1 내장 함수와 사용자 함수

____15.1.2 함수 정의와 호출

____15.1.3 매개변수와 함수 값 반환

____15.1.4 섭씨/화씨 온도 변환하기

__15.2 익명 함수

____15.2.1 익명 함수란?

____15.2.2 화살표 함수

__15.3 두 숫자 합 구하기

__15.4 인사말 출력하기

__15.5 성인 판별하기

__연습문제

Chapter 16. 객체, DOM, 이벤트

__16.1 객체

__16.2 문서 객체 모델(DOM)

____16.2.1 DOM의 구조

____16.2.2 HTML 요소 접근하기

____16.2.3 HTML 요소 값 읽기/변경하기

____16.2.4 스타일 변경하기

____16.2.5 요소 생성/추가/삭제하기

__16.3 이벤트

____16.3.1 이벤트란?

____16.3.2 이벤트 등록 방법

____16.3.3 클릭 이벤트

____16.3.4 마우스 오버 이벤트

____16.3.5 입력 폼 이벤트

__연습문제