HTML+CSS+자바스크립트

직관적인 그림과 이해하기 쉬운 예제로 탄탄하게 익히는 웹 개발 기초

임지영 지음

위키북스 2025년 10월 24일 출간 국내도서 : 2025년 09월 10일 출간

작품소개

책소개

웹 개발을 처음 배우려고 할 때 가장 먼저 드는 생각은 “대체 어디서부터 시작해야 하지?”입니다. 낯선 용어, 익숙하지 않은 코드, 구조를 이해하기 어려운 화면 구성 등 초보자 입장에서 웹 개발을 배우는 일은 쉽지 않습니다.

『그림으로 쉽게 배우는 HTML+CSS+자바스크립트』는 이러한 고민을 가진 분들을 위해 만들어진 책입니다. 웹 페이지의 뼈대를 구성하는 HTML, 스타일을 담당하는 CSS, 동적인 기능을 구현하는 자바스크립트까지, 웹 개발의 핵심 기술을 그림과 실생활 비유를 활용해 누구나 이해하기 쉽게 풀어냈습니다.

처음 개발 도구를 설치하는 것부터 시작해, 직접 따라 해보는 실습을 통해 기초 개념을 자연스럽게 익히고, 나만의 웹 페이지를 완성해보는 실전 프로젝트로 실력을 탄탄히 다질 수 있습니다. 각 단원마다 핵심 용어 정리와 간단한 연습 문제가 함께 구성돼 있어 앞에서 배운 내용을 다시 한번 확인하며 익힐 수 있습니다. 또한 마지막 장에서는 웹 접근성, API, 프런트엔드 라이브러리 등 한 단계 더 성장할 수 있는 학습 방향도 제시합니다.

웹 개발을 처음 시작했거나 이제 막 흥미를 느끼기 시작한 예비 개발자에게 이 책은 가장 든든한 첫걸음이 되어 줄 것입니다.

목차

▣ 01장: 처음 만나는 웹
1.1 웹은 어떻게 동작하나요?
__전 세계를 하나로, 웹
__웹은 어떻게 동작할까?
__사용자의 화면을 담당하는 프런트엔드
1.2 간단하게 살펴보는 웹 개발
__서비스의 이면을 담당하는 백엔드와 데이터베이스

▣ 02장: 개발 도구와 친해지기
2.1 코드 편집기로 더 편리하게 개발하기
__코드 편집기란?
__VS Code 맛보기
__구글 홈페이지로 알아보는 개발자 도구
2.2 개발자 도구로 웹 브라우저 200% 활용하기
__HTML과 CSS를 확인하는 Elements 탭
__Console 탭으로 자바스크립트 코드 작성하기
__서비스의 모든 파일이 있는 Source 탭

▣ 03장: 웹 페이지의 뼈대를 구성하는 HTML
3.1 든든한 뼈대 HTML
__하이퍼텍스트로 알아보는 HTML
__HTML4와 HTML5는 무엇이 다를까?
__HTML의 기본, 태그
3.2 태그와 속성
__태그를 풍성하게 만드는 속성
3.3 HTML의 기본 구조
__HTML의 기본 구조 살펴보기
__VS Code로 간편하게 HTML 문서 만들기

▣ 04장: 자주 쓰이는 기본 HTML 태그
4.1 텍스트와 구조
__제목을 표현하는 〈h1〉 ~ 〈h6〉 태그
__단락을 표현하는 〈p〉 태그
__공백을 추가하는 〈br〉 태그
__선으로 내용을 구분하는 〈hr〉 태그
__텍스트를 강조하는 태그: 〈strong〉, 〈em〉
__이미지를 삽입하는 〈img〉 태그
4.2 이미지와 링크
__웹 페이지를 자유롭게 이동하는 〈a〉 태그
__〈ul〉로 순서가 없는 목록 만들기
4.3 목록 만들기
__〈ol〉로 순서가 있는 목록 만들기
__설명 목록을 만드는 〈dl〉, 〈dt〉, 〈dd〉
__〈table〉과 〈caption〉으로 표 정의하기
4.4 표 만들기
__행과 열을 만드는 〈tr〉, 〈th〉, 〈td〉 태그
__셀 영역을 확장하는 rowspan, colspan
__〈audio〉, 〈video〉 태그로 멀티미디어 삽입하기
4.5 멀티미디어 요소
__〈source〉 태그로 다양한 형식의 콘텐츠 추가하기
__블록 요소와 인라인 요소
4.6 레이아웃 이해하기
__〈div〉와 〈span〉으로 레이아웃 만들기
__HTML5에서 새로 등장한 시맨틱 태그
__폼을 정의하는 〈form〉 태그
4.7 폼과 사용자 입력
__〈input〉 태그로 다양한 내용 입력받기
__〈label〉 태그로 폼 요소에 라벨 추가하기
__radio와 checkbox로 원하는 옵션 선택하기
__여러 줄의 텍스트를 입력할 수 있는 〈textarea〉
__선택 상자를 만드는 〈select〉
__버튼을 생성하는 〈button〉
__회원 가입 폼 완성하기

▣ 05장: 웹 페이지를 풍성하게 만드는 CSS
5.1 CSS로 화려하게 꾸미기
__스타일을 담당하는 CSS
__CSS는 왜 중요할까?
__CSS의 기본 구문
5.2 기본 작성 방식과 주석
__CSS에서 주석 사용하기
5.2 CSS는 어디에 작성해야 할까?
__요소에 직접 적용하는 인라인 스타일
__여러 요소에 적용하는 내부 스타일시트
__파일을 넘나드는 외부 스타일시트
__모든 요소를 선택하는 전체 선택자
5.3 CSS 기본 선택자
__특정 요소만 선택하는 타입 선택자
__클래스로 동일한 스타일 적용하기
__하나의 요소에만 스타일을 적용하는 ID 선택자
__요소의 속성을 선택하는 속성 선택자
__그룹 선택자로 여러 요소에 스타일 적용하기
5.4 더 많은 선택자 활용하기
__결합자로 하위 요소 선택하기
__상태에 따라 적용하는 가상 클래스 선택자

▣ 06장: 꼭 알아야 할 CSS 기본 속성
6.1 텍스트 스타일을 바꾸는 속성
__폰트를 지정하는 font-family
__크기를 지정하는 font-size
__스타일을 정의하는 font-style
__두께를 정의하는 font-weight
__색상을 지정하는 color
__줄 간격을 설정하는 line-height
6.2 텍스트 레이아웃 속성
__text-align으로 텍스트 정렬하기
__텍스트에 선을 추가하는 text-decoration
__글자 사이 간격을 담당하는 letter-spacing
__단어 사이 간격을 담당하는 word-spacing
__배경색을 설정하는 background-color
6.3 화면을 더욱 다채롭게, 배경 속성
__배경에 이미지를 적용하는 다양한 속성
__배경에 그러데이션 적용하기
__background 단축 속성으로 간편하게 선언하기
__박스 모델 이해하기
6.4 박스 모델 이해하기
__개발자 도구로 박스 모델 확인하기
__width, height로 요소의 크기 정하기
__margin과 padding으로 여백 만들기
__border로 테두리 만들기
__border-radius로 테두리 둥글게 만들기
__박스 모델 범위를 정하는 box-sizing
6.5 기본 레이아웃 속성
__요소를 어떻게 보여줄지 정하는 display
__요소의 배치 방식을 정하는 position
__z-index로 순서 정하기
__어디에 띄울까? float

▣ 07장: 웹 페이지의 완성도를 높이는 CSS 고급 속성
7.1 복잡한 레이아웃 간단히 구현하기
__플렉스박스로 질서 있게 정렬하기
__플렉스박스 컨테이너의 속성
__플렉스박스 아이템의 속성
__가로세로 그리드
__그리드 컨테이너의 속성
__그리드 아이템의 속성
__템플릿으로 그리드 쉽게 사용하기
7.2 반응형 디자인 구현하기
__뷰포트로 다양한 기기에서 표시하기
__크기에 따라 스타일이 달라지는 미디어 쿼리
__유튜브 카드 레이아웃 따라 하기
7.3 다양한 효과와 애니메이션 적용하기
__요소의 스타일 변화를 부드럽게 만드는 transition
__animation 속성으로 애니메이션 효과 적용하기
__자유자재로 변형하는 transform
__그림자를 추가하는 box-shadow
__불투명도를 설정하는 opacity
__다양한 그래픽 효과를 적용하는 filter 속성
7.4 웹 폰트 사용하기
__간편하게 사용하는 외부 웹 폰트
__내부 웹 폰트로 빠르게 폰트 불러오기

▣ 08장: 웹 페이지에 생동감을 불어넣는 자바스크립트
8.1 웹 페이지에 생명을 불어넣는 자바스크립트
__자바스크립트로 웹 페이지를 동적으로 바꾸기
__프로그래밍 언어란?
__HTML 문서 내부에 자바스크립트 코드 추가하기
8.2 자바스크립트 코드는 어디에 작성해야 할까?
__HTML 문서와 외부 자바스크립트 파일 연결하기
__자바스크립트 코드는 결과를 어떻게 확인할까?
8.3 미리 알아두면 좋은 자바스크립트 개념
__콘솔로 빠르게 오류 해결하기
__컨벤션과 주석으로 깔끔하게 코딩하기

▣ 09장: 자바스크립트의 기본 문법 익히기
9.1 무엇이든 담을 수 있는 변수
__변수란?
__변수 만들기
__let, const, var?
__숫자
__문자열
9.2 변수의 자료형
__불리언
__%00;과 undefined
__객체
__배열
9.3 더하고 빼고 연산자
__산술 연산자
__비교 연산자
__논리 연산자
__만약 이랬다면? 조건문
9.4 제어 흐름(조건문, 반복문)
__if, else if, else 문
__삼항 연산자
__switch 문
__반복문으로 원하는 만큼 반복하기
__for 문
__for...of
__while 문
__do...while 문
__함수란?
9.5 함수
__매개변수 사용하기
__반환값 활용하기
__화살표 함수로 더 쉽게 표현하기

▣ 10장: 자바스크립트로 동적인 웹 페이지 만들기
10.1 DOM으로 요소에 접근하기
__웹 페이지의 구조, DOM
__HTML 요소에 접근하는 다양한 방법
__텍스트를 조작하는 textContent
10.2 HTML 콘텐츠 조작하기
__innerHTML로 콘텐츠 수정하기
__HTML 요소의 속성 변경하기
__인라인 스타일 추가하기
10.3 CSS 스타일 수정하기
__클래스 목록 조작하기
__이벤트란?
10.4 이벤트와 이벤트 리스너
__이벤트를 감지하는 이벤트 리스너
__이벤트 객체로 더 다양하게 처리하기
10.5 폼 요소 조작하기
__폼 항목 데이터 가져오기
__폼 이벤트 관리하기

▣ 11장: 처음 만드는 웹 페이지
11.1 프로젝트 소개 및 작업 준비
__프로젝트 미리보기
__작업 폴더 준비하기
__기본 레이아웃 구현하기
11.2 메인 페이지 구현하기
__헤더 구현하기
__본문 구현하기
__푸터 구현하기
__레이아웃 구현하기
11.3 팝업 창 구현하기
__팝업 본문 태그 구현하기
__팝업 본문 스타일 구현하기
__자바스크립트로 동적 기능 추가하기
__깃허브란?
11.4 깃허브 페이지로 웹사이트 배포하기
__웹사이트 배포하기

▣ 12장: 더 나아가기
12.1 모두를 위한 웹 접근성
__웹 접근성이란?
__음성으로 모든 내용을 확인할 수 있도록
__시각적으로 인지가 어려워도 사용할 수 있도록
__신체에 제한이 있어도 사용할 수 있도록
12.2 API와 데이터 사용
__API란?
__자바스크립트에서 API 사용하기
__프런트엔드 라이브러리는 왜 필요할까?
12.3 프런트엔드 라이브러리 사용하기
__나에게 맞는 라이브러리 선택하기

출판사 서평

★ 이런 분들께 추천합니다! ★

◎ 처음 웹 개발을 배우는 입문자
◎ HTML, CSS, 자바스크립트 기초를 한 번에 익히고 싶은 분
◎ 그림과 실습 예제로 이해하는 것을 좋아하는 학습자

인물정보

저자(글) 임지영

깊게 이해하고 쉽게 설명하는 것이 목표인 개발자다. 비전공자로 혼자 개발을 배우며 쌓은 경험을 바탕으로, 입문자에게 도움이 되는 책을 쓰고 외부 강의를 진행하고 있다. 현재는 크래프톤에서 근무 중이며, 데이터 기반의 사내 서비스 개발 경험을 바탕으로 지금은 언어 모델을 활용한 기업 내 AI 에이전트·챗봇 프로젝트에 참여하고 있다.