도서 소개

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

  출판사 리뷰

웹 개발의 시작부터 완성까지 한 권으로 통합 : HTML로 뼈대를 세우고, CSS로 디자인을 입히며, 자바스크립트로 동적 기능을 더하는 웹 개발의 전 과정을 단계별로 완벽하게 습득할 수 있습니다.

실전 예제 중심의 '만들어보는' 학습 경험 : 단순 문법 암기를 넘어 실무에서 자주 쓰이는 풍부한 예제와 프로젝트(PROJ)를 직접 따라 하며 자연스럽게 마스터하는 실습 위주의 구성을 갖췄습니다.

현대 웹의 필수, 반응형 기술 완벽 반영 : PC, 태블릿, 모바일까지 기기별 최적화된 화면을 구현하는 미디어 쿼리와 최신 플렉스박스, 그리드 레이아웃 기법을 상세히 다룹니다.

6년 연속 스테디셀러의 검증된 노하우 : 웹 프로그래밍 분야에서 오랫동안 사랑받은 저자의 집필 경험을 바탕으로, 초보자가 궁금해하는 포인트와 핵심 기술을 명쾌하게 풀어냈습니다.

체계적인 16주 완성 커리큘럼 제공 : 한 학기 강의 교재나 독학용으로 최적화된 주차별 학습 계획표를 수록하여, 누구나 계획적이고 탄탄하게 기초를 다질 수 있도록 돕습니다.

전용 홈페이지를 통한 완벽한 사후 지원 : 학습에 필요한 모든 예제 소스 코드와 연습문제 정답 PDF를 제공하여, 공부 중 막히는 부분 없이 끝까지 완독할 수 있는 환경을 보장합니다.

  작가 소개

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

  목차

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 입력 폼 이벤트
__연습문제

  회원리뷰