HTML+CSS+JavaScript 기본부터 프로젝트 완성까지

이창현

이창현
컴퓨터공학을전공하고현업에서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.1VSCode설치와기본설정
1.VSCode란?
2.VSCode설치방법
3.기본설정-한국어적용
0.2필수확장프로그램설치
1.Prettier-코드자동정렬
2.LiveServer-실시간미리보기
3.그외추천확장프로그램
0.3LiveServer로실시간미리보기체험
0.4프로젝트폴더구성방식및관리
1.권장폴더구조
2.VSCode에서폴더열기
0.5HTML/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(HyperTextMarkupLanguage)-뼈대와내용
2.CSS(CascadingStyleSheets)-디자인과옷
3.JavaScript-근육과신경
1.3개발자도구:브라우저의뒷면훔쳐보기
1.개발자의마법안경
2.개발자도구사용하기
3.주요메뉴살펴보기
1.4첫웹페이지출력하기-Hello,Web
1.워크스페이스준비하기(폴더만들기)
2.새HTML파일만들기
3.마법의명령어“!”입력하기
4.실행및확인하기

둘째마당.HTML완전정복
2장|HTML기본기다지기
2.1HTML문서의기본구조
2.2HTML의기본문법-태그,요소,속성
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(UnorderedList)
2.순서있는목록-ol(OrderedList)
3.중첩리스트
4.정의목록-dl,dt,dd
2.8표만들기-〈table〉
1.테이블의기본구조
2.셀병합-colspan,rowspan
2.9HTML특수문자(엔티티)
2.10주석-코드에메모남기기
미니프로젝트:나만의프로필페이지만들기

3장|사용자와소통하는HTML-입력폼
3.1폼(Form)이란무엇인가?
1.〈form〉태그의기본구조
2.GETvsPOST-두가지전송방식
3.name속성-서버가데이터를구분하는열쇠
3.2〈input〉태그-입력의만능선수
1.type속성
2.텍스트계열input
3.날짜/시간input
4.선택계열input-checkbox와radio
5.특수목적input
3.3input공통속성완전정리
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.9HTML5내장유효성검사
1.유효성검사속성활용
2.유효성검사비활성화
3.10폼의기본동작과preventDefault()
미니프로젝트:로그인&회원가입폼제작

셋째마당.CSS스타일링
4장|디자인기본기-CSS의모든것
4.1CSS를HTML에연결하는세가지방법
1.외부스타일시트(ExternalStylesheet)
2.내부스타일시트(InternalStylesheet)
3.인라인스타일(InlineStyle)
4.세가지스타일정리
4.2CSS기본문법구조
4.3선택자(Selector)-어떤요소에스타일을입힐까?
1.기본선택자
2.조합선택자
3.가상클래스선택자
4.4특이성(Specificity)과상속(Inheritance)
1.특이성계산법
2.상속(Inheritance)
4.5박스모델(BoxModel)-CSS레이아웃의핵심
1.box-sizing:border-box
2.margin주요패턴
4.6색상표현방법
4.7폰트와텍스트스타일링
1.폰트(font)관련속성
2.구글폰트(GoogleFonts)활용
4.8배경(Background)스타일링
4.9FontAwesome아이콘활용
미니프로젝트:나만의카드형명함만들기

5장|레이아웃시스템-Flexbox&Grid
5.1Flexbox-1차원레이아웃시스템
1.Flex컨테이너와Flex아이템
2.주축(MainAxis)과교차축(CrossAxis)
5.2Flex컨테이너속성
1.justify-content:주축정렬
2.align-items:교차축정렬
3.flex-wrap과gap
5.3Flex아이템속성
1.flex-grow/flex-shrink/flex-basis
2.align-self와order
5.4Flexbox실전패턴
5.5CSSGrid-2차원레이아웃시스템
5.6Grid컨테이너속성
1.grid-template-columns/rows:열과행정의
2.fr단위와minmax()-반응형그리드의핵심
3.grid-template-areas:시각적레이아웃설계
5.7Grid아이템속성-셀병합과배치
1.grid-column/grid-row:셀병합
5.8FlexboxvsGrid-무엇을언제쓸까?
5.9미디어쿼리-반응형웹디자인
1.미디어쿼리기본문법
2.브레이크포인트
3.모바일퍼스트(MobileFirst)전략
4.viewportmeta태그
미니프로젝트:반응형카드갤러리만들기

넷째마당.JavaScrip로웹에생명불어넣기
6장|JavaScript핵심문법
6.1JavaScript시작하기
1.JavaScript를HTML에연결하는방법
2.개발자도구콘솔활용
6.2변수
1.let과const
2.변수선언모범사례
6.3자료형–데이터타입
1.기본자료형(PrimitiveType)
2.typeof연산자-자료형확인
3.참조자료형-배열과객체
6.4연산자(Operator)
1.산술연산자
2.할당연산자
3.비교연산자-결과는항상Boolean
4.논리연산자
5.삼항연산자
6.5조건문-상황에따라다르게실행
1.if/elseif/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.화살표함수(ArrowFunction)
2.템플릿리터럴(TemplateLiteral)
3.구조분해할당(Destructuring)
4.스프레드연산자(SpreadOperator)
6.9자주쓰는내장함수와메서드
1.숫자관련
2.문자열메서드
미니프로젝트:버튼클릭으로배경색변경하기

7장|이벤트와DOM조작
7.1DOM이란?
7.2요소선택
7.3요소조작
1.텍스트와HTML내용변경
2.속성(Attribute)및CSS클래스조작
7.4요소생성,추가,삭제
1.기본사용법
7.5이벤트리스너-사용자행동에반응하기
1.addEventListener기본사용법
2.자주사용하는이벤트종류
3.이벤트객체(EventObject)
7.6이벤트전파
1.이벤트버블링과캡처링
2.이벤트위임(EventDelegation)
미니프로젝트:To-Do리스트만들기

8장|애니메이션&게임
8.1setTimeout-일정시간후한번실행
1.기본사용법
2.토스트알림
3.디바운스(Debounce)패턴
8.2setInterval-일정간격으로반복실행
1.기본사용법
2.디지털시계
3.카운트다운타이머
8.3requestAnimationFrame-부드러운애니메이션
1.rAF기본사용법
2.프로그레스바애니메이션
8.4마우스이벤트심화
1.마우스이벤트기본사용법
2.마우스좌표추적
8.5키보드이벤트심화
1.키이벤트기본사용법
2.키입력으로박스이동
미니프로젝트:가위바위보게임만들기

다섯째마당.데이터&웹기능확장
9장|JSON과웹API
9.1동기와비동기
1.비동기가왜필요한가?
2.콜백지옥(CallbackHell)
9.2Promise
1.Promise의세가지상태
2.Promise생성과사용
9.3async/await-동기처럼읽히는비동기코드
9.4fetchAPI-HTTP요청보내기
1.GET방식과POST방식
2.HTTP메서드
9.5JSON-클라이언트와서버의공통언어
1.JSON규칙
2.JSON활용
미니프로젝트:실시간날씨앱만들기

10장|로컬저장소
10.1브라우저저장소의종류
10.2lo