이 책은 웹 개발을 처음 시작하는 입문자를 대상으로 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 입력 폼 이벤트 __연습문제

웹 개발의 시작부터 완성까지 한 권으로 통합: HTML로 뼈대를 세우고, CSS로 디자인을 입히며, 자바스크립트로 동적 기능을 더하는 웹 개발의 전 과정을 단계별로 완벽하게 습득할 수 있습니다. 실전 예제 중심의 '만들어보는' 학습 경험: 단순 문법 암기를 넘어 실무에서 자주 쓰이는 풍부한 예제와 프로젝트(PROJ)를 직접 따라 하며 자연스럽게 마스터하는 실습 위주의 구성을 갖췄습니다. 현대 웹의 필수, 반응형 기술 완벽 반영: PC, 태블릿, 모바일까지 기기별 최적화된 화면을 구현하는 미디어 쿼리와 최신 플렉스박스, 그리드 레이아웃 기법을 상세히 다룹니다. 6년 연속 스테디셀러의 검증된 노하우: 웹 프로그래밍 분야에서 오랫동안 사랑받은 저자의 집필 경험을 바탕으로, 초보자가 궁금해하는 포인트와 핵심 기술을 명쾌하게 풀어냈습니다. 체계적인 16주 완성 커리큘럼 제공: 한 학기 강의 교재나 독학용으로 최적화된 주차별 학습 계획표를 수록하여, 누구나 계획적이고 탄탄하게 기초를 다질 수 있도록 돕습니다. 전용 홈페이지를 통한 완벽한 사후 지원: 학습에 필요한 모든 예제 소스 코드와 연습문제 정답 PDF를 제공하여, 공부 중 막히는 부분 없이 끝까지 완독할 수 있는 환경을 보장합니다.