그림으로 쉽게 배우는 HTML+CSS+자바스크립트 - 직관적인 그림과 이해하기 쉬운 예제로 탄탄하게 익히는 웹 개발 기초(위키북스 오픈소스 & 웹 시리즈 123)

처음 배우는 웹 개발, 그림과 예제로 HTML부터 자바스크립트까지 탄탄하게 익히세요!

 

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

 

『그림으로 쉽게 배우는 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 변수의 자료형

__불리언

__null과 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 프런트엔드 라이브러리 사용하기

__나에게 맞는 라이브러리 선택하기