처음 배우는 웹 개발, 그림과 예제로 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 변수의 자료형 __불리언 __%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, 자바스크립트 기초를 한 번에 익히고 싶은 분 ◎ 그림과 실습 예제로 이해하는 것을 좋아하는 학습자