그림으로 쉽게 배우는 HTML+CSS+자바스크립트

임지영

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

• ▣ 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 프런트엔드 라이브러리 사용하기
• __나에게 맞는 라이브러리 선택하기

• GitHub 저장소: https://github.com/wikibook/hcj
• ZIP 형식으로 다운로드: https://github.com/wikibook/hcj/archive/refs/heads/main.zip

• 211쪽, 예제 7.7의 9번째 줄

  grid-template-rows: 50px 150px 100px;

  ==>

  grid-template-rows: 100px 150px 200px;

• 212쪽, 본문 5번째 줄

  fr은 faction의 약자로,

  ==>

  fr은 fraction의 약자로,