신간보도자료	(주)도서출판 길벗 서울시 마포구 월드컵로 10길 56(서교동) 대표전화 (02)332-0931/팩스 (02)323-0586 홈페이지 www.gilbut.co.kr 담당자 : 신유진(backdoosan@gilbut.co.kr)

신간안내	모던 프론트엔드 입문자를 위한 HTML+CSS+JavaScript 기본부터 프로젝트 완성까지

모던 프론트엔드 입문자를 위한

HTML+CSS+JavaScript

기본부터 프로젝트 완성까지

▶ 출판사 : 길벗캠퍼스
▶ 매입처 : ㈜도서출판 길벗

▶ 발행일 : 2026년 8월 31일

▶ 지은이 : 이창현

▶ 쪽수 : 400

▶ 판형 : 188 * 257(mm)

▶ 높이(두께) : 16.5(mm)

▶ 정가 : 27,000원

▶ ISBN : 979-11-407-2009-5 93000

*분야

<교보문고> 국내도서 > 컴퓨터/IT > 웹프로그래밍 > HTML/CSS3
국내도서 > 컴퓨터/IT > 웹프로그래밍 > JavaScript

국내도서 > 대학교재 > 컴퓨터

<예스24>  국내도서 > IT 모바일 > 웹사이트 > HTML/JavaScript/CSS/jQuery

국내도서 > IT 모바일 > 웹사이트 > 웹디자인
국내도서 > IT 모바일 > 프로그래밍 언어 > JavaScript/CGI

국내도서 > 대학교재 > 공학계열 > 컴퓨터공학

<알라딘>  국내도서 > 컴퓨터/모바일 > 웹디자인/홈페이지 > HTML/JavaScript

국내도서 > 컴퓨터/모바일 > 프로그래밍 개발/방법론 > 웹 서비스/웹 프로그래밍

국내도서 > 대학교재 > 공학계열 > 컴퓨터공학 > 프로그래밍 언어

<영풍문고> 국내도서 > 컴퓨터/IT > 인터넷 > 소프트웨어공학

국내도서 > 기술/공학 > 정보/통신공학 > 정보통신일반

[간단한 책 소개]

지루한 코드 따라 치기는 이제 그만,

원리를 이해하고 화면으로 증명하는 모던 웹 개발

개발의 진짜 재미는 내가 작성한 코드의 논리를 이해하고, 그 결과물을 눈으로 확인할 때 느끼는 성취감에 있습니다. 특히 프론트엔드는 코드를 통해 화면이 세련되게 변화하는 결과물을 즉각적으로 확인할 수 있기에, 그 성취감이 더욱 클 수밖에 없습니다. 오늘날의 웹은 다양한 디바이스에 맞추어 유연하게 움직이는 반응형 레이아웃과, 페이지 새로 고침 없이 매끄럽게 동작하는 SPA(Single Page Application) 기반의 구조를 기본으로 합니다.

《모던 프론트엔드 입문자를 위한 HTML+CSS+JavaScript 기본부터 프로젝트 완성까지》는 바로 이 지점에서 출발했습니다. 가장 주안점을 둔 것은 기계적인 따라 치기를 넘어, 원리를 이해하고 결과 중심으로 주도적으로 학습하는 것입니다. 학습 과정에서 지루함을 느끼지 않도록 복잡한 이론 설명은 최소화하고, 대신 코드를 작성하면 UI(사용자 인터페이스)의 본질에 맞게 화면이 어떻게 직관적으로 반응하는지 바로 확인하며, 그 속에 담긴 핵심 구동 원리를 자연스럽게 체득할 수 있도록 설계했습니다. 우리가 일상에서 늘 접하고, 내 손으로 직접 만들어보고 싶었던 친숙하고 실용적인 예제들을 중심으로 커리큘럼을 구성한 것이 특징입니다.

[출판사 리뷰]

탄탄한 기본기에서 시작하는

웹 개발자의 첫걸음!

웹 프론트엔드 개발에 입문하는 초보자들을 위한 가장 체계적이고 실무적인 안내서입니다. 글로벌 표준 개발 도구인 Visual Studio Code(비주얼 스튜디오 코드)의 설치부터, 코딩 속도를 획기적으로 높여줄 Prettier(프리티어), Live Server(라이브 서버) 확장 프로그램 설정법까지 따라 할 수 있도록 구성했습니다.

단순히 코드를 타이핑하는 것을 넘어 클라이언트와 서버의 관계를 통해 웹의 동작 원리를 직관적으로 이해하고, 웹을 지탱하는 3총사인 HTML, CSS, JavaScript의 핵심 역할을 명확히 정립합니다. 나아가 올바른 프로젝트 폴더 구성 규칙과 필수 브라우저 개발자 도구 활용법까지 담아, 실제 현업에서도 통하는 실무적 기초와 이론적 배경을 이 한 권으로 완벽하게 마스터할 수 있습니다.

STEP1: 개발 환경 세팅

VS Code 설치부터 필수 확장 프로그램(Prettier, Live Server)까지 실습 준비 완료

STEP2: 웹의 작동 원리

클라이언트와 서버의 관계를 쉬운 비유로 풀어내어 이해하는 웹의 구조

STEP3: 웹 3총사 완전 정복

HTML, CSS, JavaScript의 고유한 역할과 존재 이유 완벽 정리

STEP4: 실무형 기초 다지기

올바른 폴더 구조 규칙과 브라우저 개발자 도구로 익히는 실무 습관

[저자 소개]

이창현 | jamsuham75@naver.com

컴퓨터공학을 전공하고 현업에서 20여 년 동안 다양한 분야의 소프트웨어(SW) 개발자로 활동했다. 현재는 이창현 코딩연구소의 대표이자 IT 전문 교육자로 활동하고 있다. 단순한 문법 암기가 아닌 ‘핵심 원리와 논리적 사고’ 중심의 교육 철학을 바탕으로 학습자가 스스로 생각하고 결과물을 만들어내는 자기 주도적 성장을 지향한다. AI 활용 솔루션 및 데이터 보

안 연구에 깊은 관심이 있으며, 연구한 기술을 정리하고 집필과 강의 등을 통해 독자 및 학생들과 소통하는 것을 즐긴다.

대표 저서

• 「처음 만나는 C#」 혜지원, 2026

• 「리액트의 정석」 길벗캠퍼스, 2025

• 「모던 자바스크립트 & Node.js」 길벗캠퍼스, 2023

• 「나혼자 C언어」 디지털북스, 2021

• 「나혼자 파이썬」 디지털북스, 2020

번역서

• 「스파크 기반의 자연어 처리」 한빛미디어, 2021

• 「데이터 익명화를 위한 파이프라인」 한빛미디어, 2022

블로그: https://blog.naver.com/jamsuham75

유튜브: https://www.youtube.com/@jamsuham75

인스타그램: https://www.instagram.com/jamsuham75/

[목차 소개]

머리말

목차

0장 | 웹 개발 환경 준비하기

0.1 VS Code 설치와 기본 설정

1. VS Code란?

2. VS Code 설치 방법

3. 기본 설정 - 한국어 적용

0.2 필수 확장 프로그램 설치

1. Prettier - 코드 자동 정렬

2. Live Server - 실시간 미리 보기

3. 그 외 추천 확장 프로그램

0.3 Live Server로 실시간 미리 보기 체험

0.4 프로젝트 폴더 구성 방식 및 관리

1. 권장 폴더 구조

2. VS Code에서 폴더 열기

0.5 HTML / CSS / JS 파일 생성 기본 규칙과 주의 사항

1. 파일명 규칙

2. 인코딩 확인

3. Emmet - HTML 자동 완성의 마법

0.6 환경 설정 최종 확인

첫째 마당. 웹 개발 시작하기

1장 | 웹 개발의 첫걸음 - 브라우저 속의 마법

1.1 웹이 움직이는 원리: 손님(클라이언트)과 요리사(서버)

1. 클라이언트(Client) - 주문하는 손님

2. 서버(Server) - 음식을 만드는 요리사

3. 요청(Request)과 응답(Response) - 주문서와 서빙

1.2 웹 3총사: HTML, CSS, JavaScript

1. HTML(HyperText Markup Language) - 뼈대와 내용

2. CSS(Cascading Style Sheets) - 디자인과 옷

3. JavaScript - 근육과 신경

1.3 개발자 도구: 브라우저의 뒷면 훔쳐보기

1. 개발자의 마법 안경

2. 개발자 도구 사용하기

3. 주요 메뉴 살펴보기

1.4 첫 웹 페이지 출력하기 - Hello, Web

1. 워크스페이스 준비하기(폴더 만들기)

2. 새 HTML 파일 만들기

3. 마법의 명령어 “!” 입력하기

4. 실행 및 확인하기

둘째 마당. HTML 완전 정복

2장 | HTML 기본기 다지기

2.1 HTML 문서의 기본 구조

2.2 HTML의 기본 문법 - 태그, 요소, 속성

1. 태그(Tag) - HTML의 기본 명령어

2. 요소(Element) - 태그가 품은 전체

3. 중첩(Nesting) - 요소 안에 요소 넣기

4. 속성(Attribute) - 태그에 추가 정보 주기

2.3 구조를 잡아주는 시맨틱 태그

1. 주요 시맨틱 태그 정리

2. 시맨틱 태그로 페이지 레이아웃 잡기

3. 시맨틱 태그 사용의 장점

2.4 텍스트 관련 태그 완전 정복

1. 제목 태그 - <h1>~<h6>

2. 단락과 줄 바꿈 - <p>, <br>, <hr>

3. 텍스트 강조 태그

2.5 이미지 태그 - <img>

1. src 속성 - 파일 경로 이해하기

2. alt 속성 - 반드시 작성해야 하는 이유

2.6 링크 태그 - <a>

1. target 속성 - 링크를 어디서 열 것인가?

2. 이미지에 링크 걸기

2.7 리스트 태그 - ul, ol, dl

1. 순서 없는 목록 - ul(Unordered List)

2. 순서 있는 목록 - ol(Ordered List)

3. 중첩 리스트

4. 정의 목록 - dl, dt, dd

2.8 표 만들기 - <table>

1. 테이블의 기본 구조

2. 셀 병합 - colspan, rowspan

2.9 HTML 특수 문자(엔티티)

2.10 주석 - 코드에 메모 남기기

미니 프로젝트: 나만의 프로필 페이지 만들기

3장 | 사용자와 소통하는 HTML - 입력 폼

3.1 폼(Form)이란 무엇인가?

1. <form> 태그의 기본 구조

2. GET vs POST - 두 가지 전송 방식

3. name 속성 - 서버가 데이터를 구분하는 열쇠

3.2 <input> 태그 - 입력의 만능 선수

1. type 속성

2. 텍스트 계열 input

3. 날짜/시간 input

4. 선택 계열 input - checkbox와 radio

5. 특수 목적 input

3.3 input 공통 속성 완전 정리

3.4 <textarea> - 여러 줄 텍스트 입력

3.5 <select> - 드롭다운 선택 목록

1. 기본 사용법

2. optgroup - 옵션 그룹 나누기

3. multiple - 다중 선택

3.6 <button> - 동작을 실행하는 버튼

3.7 폼 구조화 - fieldset과 legend

3.8 웹 접근성과 <label> 태그

1. label 없이 작성한 경우의 문제

2. label 연결 방법

3. label 클릭 효과

3.9 HTML5 내장 유효성 검사

1. 유효성 검사 속성 활용

2. 유효성 검사 비활성화

3.10 폼의 기본 동작과 preventDefault( )

미니 프로젝트: 로그인 & 회원 가입 폼 제작

셋째 마당. CSS 스타일링

4장 | 디자인 기본기 - CSS의 모든 것

4.1 CSS를 HTML에 연결하는 세 가지 방법

1. 외부 스타일시트(External Stylesheet)

2. 내부 스타일시트(Internal Stylesheet)

3. 인라인 스타일(Inline Style)

4. 세 가지 스타일 정리

4.2 CSS 기본 문법 구조

4.3 선택자(Selector) - 어떤 요소에 스타일을 입힐까?

1. 기본 선택자

2. 조합 선택자

3. 가상 클래스 선택자

4.4 특이성(Specificity)과 상속(Inheritance)

1. 특이성 계산법

2. 상속(Inheritance)

4.5 박스 모델(Box Model) - CSS 레이아웃의 핵심

1. box - sizing: border - box

2. margin 주요 패턴

4.6 색상 표현 방법

4.7 폰트와 텍스트 스타일링

1. 폰트(font) 관련 속성

2. 구글 폰트(Google Fonts) 활용

4.8 배경(Background) 스타일링

4.9 Font Awesome 아이콘 활용

미니 프로젝트: 나만의 카드형 명함 만들기

5장 | 레이아웃 시스템 - Flexbox & Grid

5.1 Flexbox - 1차원 레이아웃 시스템

1. Flex 컨테이너와 Flex 아이템

2. 주축(Main Axis)과 교차축(Cross Axis)

5.2 Flex 컨테이너 속성

1. justify - content: 주축 정렬

2. align - items: 교차축 정렬

3. flex - wrap과 gap

5.3 Flex 아이템 속성

1. flex - grow / flex - shrink / flex - basis

2. align - self와 order

5.4 Flexbox 실전 패턴

5.5 CSS Grid - 2차원 레이아웃 시스템

5.6 Grid 컨테이너 속성

1. grid - template - columns / rows: 열과 행 정의

2. fr 단위와 minmax( ) - 반응형 그리드의 핵심

3. grid - template - areas: 시각적 레이아웃 설계

5.7 Grid 아이템 속성 - 셀 병합과 배치

1. grid - column / grid - row: 셀 병합

5.8 Flexbox vs Grid - 무엇을 언제 쓸까?

5.9 미디어 쿼리 - 반응형 웹 디자인

1. 미디어 쿼리 기본 문법

2. 브레이크포인트

3. 모바일 퍼스트(Mobile First) 전략

4. viewport meta 태그

미니 프로젝트: 반응형 카드 갤러리 만들기

넷째 마당. JavaScrip로 웹에 생명 불어넣기

6장 | JavaScript 핵심 문법

6.1 JavaScript 시작하기

1. JavaScript를 HTML에 연결하는 방법

2. 개발자 도구 콘솔 활용

6.2 변수

1. let과 const

2. 변수 선언 모범 사례

6.3 자료형 – 데이터 타입

1. 기본 자료형(Primitive Type)

2. typeof 연산자 - 자료형 확인

3. 참조 자료형 - 배열과 객체

6.4 연산자(Operator)

1. 산술 연산자

2. 할당 연산자

3. 비교 연산자 - 결과는 항상 Boolean

4. 논리 연산자

5. 삼항 연산자

6.5 조건문 - 상황에 따라 다르게 실행

1. if / else if / else

2. Falsy와 Truthy - JS가 false로 취급하는 값들

3. switch 문

6.6 반복문 - 같은 작업을 여러 번 실행

1. for 반복문

2. 배열 고차 함수 - forEach, map, filter, find, reduce

3. while 반복문

6.7 함수 - 코드를 묶는 단위

1. 함수 선언식

2. 기본값 매개변수와 나머지 매개변수

3. 함수 표현식과 호이스팅

6.8 모던 JavaScript 문법

1. 화살표 함수(Arrow Function)

2. 템플릿 리터럴(Template Literal)

3. 구조 분해 할당(Destructuring)

4. 스프레드 연산자(Spread Operator)

6.9 자주 쓰는 내장 함수와 메서드

1. 숫자 관련

2. 문자열 메서드

미니 프로젝트: 버튼 클릭으로 배경색 변경하기

7장 | 이벤트와 DOM 조작

7.1 DOM이란?

7.2 요소 선택

7.3 요소 조작

1. 텍스트와 HTML 내용 변경

2. 속성(Attribute) 및 CSS 클래스 조작

7.4 요소 생성, 추가, 삭제

1. 기본 사용법

7.5 이벤트 리스너 - 사용자 행동에 반응하기

1. addEventListener 기본 사용법

2. 자주 사용하는 이벤트 종류

3. 이벤트 객체(Event Object)

7.6 이벤트 전파

1. 이벤트 버블링과 캡처링

2. 이벤트 위임(Event Delegation)

미니 프로젝트: To -Do 리스트 만들기

8장 | 애니메이션 & 게임

8.1 setTimeout - 일정 시간 후 한 번 실행

1. 기본 사용법

2. 토스트 알림

3. 디바운스(Debounce) 패턴

8.2 setInterval - 일정 간격으로 반복 실행

1. 기본 사용법

2. 디지털 시계

3. 카운트다운 타이머

8.3 requestAnimationFrame - 부드러운 애니메이션

1. rAF 기본 사용법

2. 프로그레스 바 애니메이션

8.4 마우스 이벤트 심화

1. 마우스 이벤트 기본 사용법

2. 마우스 좌표 추적

8.5 키보드 이벤트 심화

1. 키 이벤트 기본 사용법

2. 키 입력으로 박스 이동

미니 프로젝트: 가위바위보 게임 만들기

다섯째 마당. 데이터 & 웹 기능 확장

9장 | JSON과 웹 API

9.1 동기와 비동기

1. 비동기가 왜 필요한가?

2. 콜백 지옥(Callback Hell)

9.2 Promise

1. Promise의 세 가지 상태

2. Promise 생성과 사용

9.3 async/await - 동기처럼 읽히는 비동기 코드

9.4 fetch API - HTTP 요청 보내기

1. GET 방식과 POST 방식

2. HTTP 메서드

9.5 JSON - 클라이언트와 서버의 공통 언어

1. JSON 규칙

2. JSON 활용

미니 프로젝트: 실시간 날씨 앱 만들기

10장 | 로컬 저장소

10.1 브라우저 저장소의 종류

10.2 localStorage와 sessionStorage

10.3 Web Storage API - 핵심 메서드

10.4 객체와 배열 저장하기 - JSON 변환의 핵심

10.5 실전 활용 패턴

1. 다크 모드 설정 저장

2. 폼 자동 저장(Draft)

10.6 storage 이벤트 - 다중 탭 동기화

10.7 보안 주의 사항

미니 프로젝트: 메모장 앱 만들기

여섯째 마당. 실전 프로젝트

11장 | 실전 프로젝트 A - 계산기 웹앱

11.1 프로젝트 설계

1. 화면 흐름 설계

2. 요구 사항 분석

3. 앱 상태 설계

4. 파일 구조

11.2 HTML - 계산기 레이아웃

11.3 CSS - iOS 스타일 계산기 디자인

11.4 JavaScript - 계산기 로직

1. 상태 객체와 화면 업데이트

2. 숫자 입력 처리

3. 연산자 처리

4. 계산 실행(= 버튼)

5. 기능 버튼 처리(AC, +/- , %)

6. 이벤트 연결 - 이벤트 위임

11.5 엣지 케이스 테스트

12장 | 실전 프로젝트 B - 퀴즈 웹앱

12.1 프로젝트 설계

1. 화면 흐름 설계

2. 앱 상태 설계

3. 파일 구조

12.2 JSON으로 퀴즈 데이터 구조화하기

1. questions.json 설계

12.3 HTML - 세 화면을 하나의 파일에

12.4 CSS - 화면 전환과 퀴즈 UI

1. 화면 전환 핵심 CSS

2. 스타일 전체

12.5 JavaScript - 퀴즈 로직 완성

1. 초기화와 데이터 로드

2. 배열 셔플: Fisher - Yates 알고리즘

3. 퀴즈 시작과 문제 렌더링

4. 타이머

5. 정답 체크

6. 결과 화면

7. 이벤트 연결

13장 | 실전 프로젝트 C - 미니 쇼핑몰

13.1 프로젝트 설계

1. 화면 흐름 설계

2. 앱 상태 설계

3. 파일 구조

13.2 상품 데이터 구조화하기

13.3 HTML - 쇼핑몰 구조

13.4 CSS - 쇼핑몰 스타일

13.5 JavaScript - 쇼핑몰 로직

1. 상태 객체와 유틸 함수

2. 필터, 검색, 정렬

3. 상품 카드 렌더링

4. 장바구니 CRUD 함수들

5. Toast 알림

6. 검색에 적용된 디바운스

7. 이벤트 위임

부록 | 모던 프론트엔드 실무 입문 가이드

부록 A. 초보자를 위한 Git & GitHub 기초

1. Git이란?

2. Git 설치

3. Git 핵심 명령어

4. GitHub에 코드 올리기 - 처음부터 끝까지

5. GitHub Pages로 무료 배포

부록 B. 무료 오픈소스 아이콘, 폰트, 이미지 추천 목록

1. 아이콘

2. 웹 폰트

3. 무료 이미지

4. CSS 도구 및 그 외 리소스

부록 C. 웹 접근성 체크리스트

1. 이미지 대체 텍스트

2. 키보드 접근성

3. 색상 및 대비

4. 폼 접근성

5. 구조와 의미

6. 미디어

7. 접근성 검사 도구

부록 D. 학습 후 확장 로드맵

1. 프론트엔드 개발자 로드맵

2. 백엔드 개발자 로드맵

3. 풀스택 개발자 로드맵

4. 추천 학습 자료

5. 포트폴리오 준비 가이드

찾아보기