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

웹 개발자의 첫걸음!

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

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

STEP1: 개발 환경 세팅

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

STEP2: 웹의 작동 원리

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

STEP3: 웹 3총사 완전 정복

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

STEP4: 실무형 기초 다지기

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

머리말

목차

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. 포트폴리오 준비 가이드

찾아보기