책소개
처음 배우는 웹 개발, 그림과 예제로 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장: 웹 페이지의 뼈대를 구성하는 HTML3.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장: 웹 페이지를 풍성하게 만드는 CSS5.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-height6.2 텍스트 레이아웃 속성__text-align으로 텍스트 정렬하기__텍스트에 선을 추가하는 text-decoration__글자 사이 간격을 담당하는 letter-spacing__단어 사이 간격을 담당하는 word-spacing__배경색을 설정하는 background-color6.3 화면을 더욱 다채롭게, 배경 속성__배경에 이미지를 적용하는 다양한 속성__배경에 그러데이션 적용하기__background 단축 속성으로 간편하게 선언하기__박스 모델 이해하기6.4 박스 모델 이해하기__개발자 도구로 박스 모델 확인하기__width, height로 요소의 크기 정하기__margin과 padding으로 여백 만들기__border로 테두리 만들기__border-radius로 테두리 둥글게 만들기__박스 모델 범위를 정하는 box-sizing6.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 요소에 접근하는 다양한 방법__텍스트를 조작하는 textContent10.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 프런트엔드 라이브러리 사용하기__나에게 맞는 라이브러리 선택하기
