아무리 디자인을 잘해도 자바스크립트를 제대로 활용하지 못한다면 표현하고자 하는 웹사이트를 만들기 어렵습니다. 사용자와 전하고자 하는 콘텐츠에 따라 그에 맞는 디자인과 기능을 더해야 하는데 이때 필요한 것이 바로 자바스크립트이기 때문입니다. 하지만 자바스크립트를 이론부터 배우기 시작하면 어렵고 막막할 수 있습니다. 프로그래밍을 하다 보면 어떤 기능을 어떻게 구현해야 하는지 잘 떠오르지 않기도 합니다. 이 책에서는 이미 완성된 웹사이트를 기반으로 자바스크립트의 중요한 개념과 기능을 차근차근 설명합니다. 따라서 어떤 기능이 어떻게 활용되는지 쉽게 익히고 오늘 당장 나만의 웹사이트를 만드는 데 활용할 수도 있습니다. 자바스크립트를 처음 배운다면, 배우다가 포기했다면 이 책으로 시작해보세요!
저자(글) Mana
인물정보
웹디자이너
일본에서 2년간 그래픽 디자이너로 일한 뒤 캐나다 밴쿠버에 있는 웹 제작 학교를 졸업했다. 캐나다, 호주, 영국 회사에서 웹 디자이너로 근무했으며 현재는 웹 사이트 제작에 대해 강의하고 있다. 블로그 ‘Webクリエイターボックス(웹 크리에이터 박스)’는 2010년 일본 알파 블로거 어워드를 수상했다. 저서인 『러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문』 『완성된 웹사이트로 배우는 HTML&CSS 웹 디자인』으로 각각 2019년, 2021년 CPU 대상 서적 부문 대상을 수상했다.
번역 신은화
인물정보
컴퓨터공학자 번역가/통역사＞일본어
이화여자대학교에서 컴퓨터학을 전공했으며 일본 미에대학교에서 교환학생으로 정보공학을 공부했다. LG CNS에서 15년째 근무하며 프로그램 개발, 기획, 사업 개발 등 다양한 업무를 거쳐 현재는 클라우드 빌링 업무를 담당하고 있다. 옮긴 책으로는 『가장 쉬운 네트워크 가상화 입문 책』 『인프라 디자인 패턴』 『완벽한 IT 인프라 구축을 위한 Docker』 『완성된 웹사이트로 배우는 HTML&CSS 웹 디자인』이 있다.
목차
CHAPTER 1 자바스크립트로 할 수 있는 것
1.1 자바스크립트란
1.2 자바스크립트로 할 수 있는 것
1.3 자바스크립트를 사용한 여러 웹사이트
CHAPTER 2 자바스크립트 맛보기
2.1 자바스크립트는 어디에 작성할까
2.2 자바스크립트를 작성하는 환경을 준비해보자
2.3 첫 자바스크립트를 작성해보자
2.4 자바스크립트를 작성할 때의 기본 규칙
2.5 콘솔을 사용해보자
CHAPTER 3 자바스크립트 기초 배우기
3.1 작성할 컬러 피커 소개
3.2 필요한 파일 준비하기
3.3 컬러 피커의 컬러값 가져오기
3.4 텍스트 바꿔보기
3.5 DOM 이해하기
3.6 템플릿 문자열로 표시하기
3.7 상수로 깔끔하게 코드 정리하기
3.8 컬러 코드를 표시하는 ‘계기’ 만들기
3.9 함수로 선택한 색 가져오기
3.10 페이지 배경색 바꾸기
3.11 조건을 붙여서 색상명 표시하기
CHAPTER 4 이벤트로 처리하기
4.1 이벤트란
4.2 로딩 중인 이미지 만들기
4.3 로딩 중인 이미지 만들기 - CSS 클래스 추가하기
4.4 버튼을 클릭하여 다크 모드로 바꾸기
4.5 버튼을 클릭하여 다크 모드로 바꾸기 - CSS 클래스 바꾸기
4.6 버튼을 클릭하면 다크 모드로 바꾸기 - 버튼 텍스트 바꾸기
4.7 입력한 글자 수 세어보기
4.8 입력한 글자 수 세어보기 - length로 카운트하기
4.9 입력한 글자 수 세어보기 - 글자 수에 따라 다르게 표시하기
4.10 버튼 상태 변경
4.11 버튼 상태 변경 - 체크하면 버튼 활성화시키기
4.12 버튼 상태 변경 - 더욱 효율적인 구현 방법 생각하기
4.13 페이지의 스크롤 양 표시
4.14 페이지의 스크롤 양 표시 - 스크롤 양 가져오기
4.15 페이지의 스크롤 양 표시 - 페이지 사이즈 가져오기
4.16 페이지의 스크롤 양 표시 - 계산식 작성
CHAPTER 5 여러 데이터 사용해보기
5.1 이미지 목록 페이지 소개
5.2 insertAdjacentHTML로 HTML 태그 삽입하기
5.3 배열로 여러 이미지 파일명 모으기
5.4 배열 안에 있는 이미지 표시하기
5.5 for 문의 반복 처리 개념 이해하기
5.6 for 문으로 이미지 목록 표시하기
5.7 변수 let과 상수 const의 차이점
5.8 객체로 이미지, 메뉴명, 가격 정리
5.9 객체 정보 가져오기
5.10 배열과 객체를 조합하여 데이터를 하나로 정리하기
5.11 목록 표시하기
5.12 분할 대입으로 깔끔한 코드 만들기
CHAPTER 6 애니메이션 추가하기
6.1 움직임이 있는 웹사이트 예시 보기
6.2 움직임이 있을 때 효과적인 이유
6.3 안정감을 주는 움직임이란
6.4 제목이 밑에서부터 떠오르는 것처럼 나타내기
6.5 제목이 밑에서부터 떠오르는 것처럼 나타내기 - 애니메이션 기본 작성법
6.6 제목이 밑에서부터 떠오르는 것처럼 나타내기 - 여러 애니메이션 추가하기
6.7 제목이 밑에서부터 떠오르는 것처럼 나타내기 - 움직임에 상세 설정 더하기
6.8 제목에 사용할 수 있는 다양한 애니메이션
6.9 여러 이미지를 순서대로 표시하기
6.10 여러 이미지를 순서대로 표시하기 - 모든 클래스 가져오기
6.11 여러 이미지를 순서대로 표시하기 - 하나씩 늦추기
6.12 이미지에 사용할 수 있는 여러 애니메이션
6.13 스크롤과 애니메이션 조합하기
6.14 스크롤과 애니메이션 조합하기 - Intersection Observer 조합
6.15 스크롤과 애니메이션 조합하기 - 교차 상태 정보 살펴보기
6.16 스크롤과 애니메이션 조합하기 - 움직임 추가하기
CHAPTER 7 웹 페이지 만들기
7.1 작성할 웹 페이지 소개
7.2 로딩에서 화면 바뀜
7.3 로딩에서 화면 바뀜 - 화면이 바뀌는 스크린 만들기
7.4 로딩에서 화면 바뀜 - 애니메이션 타이밍 조절
7.5 이미지 갤러리
7.6 이미지 갤러리 - 커서를 갖다 댔을 때의 애니메이션
7.7 이미지 갤러리 - 커서를 갖다 댔을 때 크게 표시
7.8 이미지 갤러리 - 여러 요소를 forEach로 작성하기
7.9 슬라이드 메뉴
7.10 슬라이드 메뉴 - 클릭해서 메뉴 열기
7.11 슬라이드 메뉴 - 위에서부터 순서대로 표시하기
7.12 스크롤로 요소 표시
7.13 스크롤로 요소 표시 - fadein 클래스의 HTML 요소 가져오기
7.14 스크롤로 요소 표시 - 부드럽게 표시하는 애니메이션 설정
7.15 스크롤로 요소 표시 - 여러 번 실행되지 않도록 제어
CHAPTER 8 오류와 해결 방법
8.1 오류 확인 방법
8.2 자주 발생하는 오류 리스트
출판사 서평
누구나 재미있게 배울 수 있는 자바스크립트 입문서!
웹 디자인 인플루언서 저자 Mana가 알려주는
오늘 당장 적용 가능한 자바스크립트 기초의 모든 것
자바스크립트는 웹사이트에 생명을 불어넣는 프로그래밍 언어입니다. 단지 웹사이트를 더 편리하게, 예쁘게 만들어보고 싶을 뿐인데 복잡한 자바스크립트 문법 때문에 포기했다면 이 책으로 시작해보세요. 자바스크립트 기초 프로그래밍을 중심으로 이벤트, 데이터 활용, 애니메이션까지 누구나 재미있게 배울 수 있도록 구성했습니다.
★완성된 웹사이트로 배울 수 있는 자바스크립트 효과
● 로딩 화면
자바스크립트 이벤트, 애니메이션 타이밍 조절을 이용하여 사용자의 기대감을 높일 수 있는 화면을 만듭니다.
★ 진짜 초보자도 자신 있게 끝낼 수 있도록 투머치 설명러 얄코가 다 알려 주는 웹 개발 가이드
명쾌한 설명과 전달력 높은 강의로 입문자들의 찬사를 받고 있는 얄코(얄팍한코딩사전)의 「제대로 파는 HTML+CSS」와 「뉴비를 위한 자바스크립트」 온라인 강의를 한 권의 책으로 담아냈습니다. 코딩이 처음인 사람도 어렵지 않게 프로그래밍과 웹 개발에 접근할 수 있도록 최대한 친절하고 쉬운 비유로 설명합니다. 한두 줄로 끝날 수 있는 기능 설명을 수많은 경우의 수의 화면을 보여 주며 비교하는 얄코 특유의 투머치 친절한 설명은 초보자뿐만 아니라 현업에 있는 개발자들도 놓치고 넘어가던 개념까지 세세하게 짚어 줍니다.
『얄코의 TOO MUCH 친절한 HTML+CSS+자바스크립트』는 웹 페이지 제작에 필요한 세 가지 기술을 서로 연계해서 공부하는 데 최적화된 상태로 구성되어 있습니다. 또한 개발물을 단지 시각적으로만 구현하는 것을 넘어 다양한 사람을 배려하고 타 개발자와도 협업하기 좋은 '착한' 웹사이트를 만드는 법까지 놓치지 않습니다. 총 15시간에 이르는 동영상 강의와 함께 하면서 바쁜 독자들이 쉽고 편리하게 코딩의 즐거움을 느끼게 하는 것이 이 책의 최우선 목표입니다.
‘얄코의 TOO MUCH 친절한’ 시리즈는
친절하다고 하지만 세상 불친절한 것이 많아 ‘TOO MUCH 친절한’으로 탄생하였습니다.
저자(글) 고현민
인물정보
컴퓨터공학자
두 아이를 키우는 아빠이자, 유튜브 채널 「얄팍한 코딩사전」을 방송하는 유튜버입니다.
풀스택 개발자로 일하며 쌓아 온 지식과 경험을 바탕으로, 어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽게 설명해 주는 콘텐츠들을 만들고 있습니다.
저서로는 『얄코의 TOO MUCH 친절한 깃&깃허브』(2023, 리코멘드) 『혼자 공부하는 얄팍한 코딩 지식』(2022, 한빛미디어)이 있습니다.
목차
PART 01 갖다 놓는 HTML
CHAPTER 01 시작하기 전에
_LESSON 01 HTML, CSS, 자바스크립트가 뭔가요?
__갖다 놓는 HTML, 꾸며 주는 CSS, 일을 시키는 자바스크립트
__왜 HTML, CSS 등으로 작성한 것은 ‘문서’라고 하나요?
_LESSON 02 환경 설정하기
__웹 브라우저 설치하기
__VS Code 설치하기
__VS Code에서 프로그래밍이 쉬워지는 옵션 설정하기
__VS Code에서 유용한 플러그인 설치하기
__얄코의 친절한 HTML 노트
CHAPTER 02 기본 태그로 첫 웹 페이지 만들기
_LESSON 03 첫 웹 페이지 만들기
__index.html 파일 만들기
__첫 웹 페이지 요소 입력하기
__페이지 소스 보기
_LESSON 04 첫 태그 사용하기
__태그 알아보기
__제목 태그와 문단 태그
__텍스트 관련 태그
__태그 속성 사용하기
_LESSON 05 태그로 여러 요소 나열하기
__목록을 표현하는 태그
__용어와 정의를 나열하는 태그
__얄코의 친절한 HTML 노트
CHAPTER 03 웹 페이지에 다양한 요소 넣기
_LESSON 06 이미지 태그 사용하기
__절대 경로와 상대 경로로 이미지 넣기
__이미지 크기 조절하기
_LESSON 07 표 사용하기
__기본 테이블 태그
__테이블 영역 태그
__셀 병합 태그
__열 그룹 태그
_LESSON 08 다른 곳으로 링크하기
__a 태그로 링크 이동하기
__id 값으로 원하는 위치로 이동하기
__태그로 연락처 연결하기
__얄코의 친절한 HTML 노트
CHAPTER 04 사용자로부터 입력받기
_LESSON 09 form 태그 사용하기
__form 태그의 속성
__form 태그 안 요소 그룹화하기
_LESSON 10 input 태그 사용하기
__텍스트 관련 input 태그
__숫자 관련 input 태그
__체크 관련 input 태그
__기타 input 태그
__input 태그 공통 속성
_LESSON 11 기타 다른 태그 사용하기
__textarea 태그
__옵션 선택 관련 태그
__정도를 표현하는 태그
__pre 태그
__iframe 태그
__알아두면 좋을 태그들
__아무것도 하지 않는 태그
__얄코의 친절한 HTML 노트
PART 02 꾸미는 CSS
CHAPTER 05 CSS 기본 지식 알기
_LESSON 12 CSS 적용 방법과 선택자
__CSS를 적용하는 세 가지 방법
__기본 선택자
__태그 선택자
__클래스 선택자
__id 선택자
__그룹 선택자
_LESSON 13 결합자와 가상 클래스
__자손 결합자
__동생 결합자
__가상 클래스
__얄코의 친절한 CSS 노트
CHAPTER 06 글자와 텍스트 스타일 적용하기
_LESSON 14 글자 스타일
__기울임과 굵기
__글자 크기
__글자 꾸미기
_LESSON 15 문단과 목록 스타일
__정렬과 간격
__목록 스타일
__얄코의 친절한 CSS 노트
CHAPTER 07 인라인과 블록 및 박스 모델 이해하기
_LESSON 16 인라인 요소와 블록 요소
__기본 너비와 개념
__너비와 높이 조절하기
__가로 공간 차지하기
__여백 적용하기
_LESSON 17 박스 모델
__요소의 크기
__바깥쪽 여백과 안쪽 여백
__테두리 속성
__박스 그림자 속성
__얄코의 친절한 CSS 노트
CHAPTER 08 색과 이미지로 웹 페이지 꾸미기
_LESSON 18 색 표현하기
__색을 표현하는 네 가지 방법
_LESSON 19 배경 꾸미기
__이미지를 배경에 사용하기
__배경에 그라데이션 넣기
__얄코의 친절한 CSS 노트
CHAPTER 09 포지셔닝과 레이아웃
_LESSON 20 포지셔닝
__position 속성
__z-index 속성
_LESSON 21 Flex 레이아웃
__부모에 적용하는 Flex
__자식에 적용하는 Flex
_LESSON 22 요소를 감추는 방법들
__CSS에서 요소를 숨기는 세 가지 방법
__마우스 커서 모양 바꾸기
__얄코의 친절한 CSS 노트
PART 03 HTML 더 깊이 알아보기
CHAPTER 10 용도에 따른 태그 사용하기
_LESSON 23 상단의 태그들
__DOCTYPE
__head 태그
_LESSON 24 시맨틱 태그
__시맨틱 태그 사용의 장점
__시맨틱 태그의 종류
_LESSON 25 기타 미디어 삽입하기
__SVG 이미지
__오디오와 동영상
__얄코의 친절한 HTML 노트
CHAPTER 11 모두가 이용할 수 있는 웹사이트 만들기
_LESSON 26 웹 접근성
__alt 속성으로 이미지 설명하기
__숨겨 놓은 요소 설명하기
__aria-label 속성
__aria-hidden 속성과 role 속성
__figure 태그와 figcaption 태그
_LESSON 27 가독성을 위한 이름 짓기
__태그 위주로 이름 짓기
__클래스 위주로 이름 짓기
__BEM으로 이름 짓기
__얄코의 친절한 HTML 노트
PART 04 CSS 더 깊이 알아보기
CHAPTER 12 요소를 지정하는 세련된 방법
_LESSON 28 반복 및 공통되는 스타일
__다른 CSS 파일 임포트하기
__CSS 변수 사용하기
_LESSON 29 선택자 심화
__특성 선택자
__가상 클래스
_LESSON 30 상속과 리셋
__상속되는 속성, 상속되지 않는 속성
__모든 속성 리셋하기
_LESSON 31 벤더 프리픽스
__벤더 프리픽스 사용하기
__얄코의 친절한 CSS 노트
CHAPTER 13 서체와 테이블 스타일링하기
_LESSON 32 서체와 웹 폰트
__font-family 속성
__웹 폰트 적용하기
_LESSON 33 텍스트 심화
__vertical-align 속성
__white-space 속성
__text-overflow 속성
_LESSON 34 테이블 스타일링
__테이블 스타일 속성
__테이블 요소의 display 속성
__얄코의 친절한 CSS 노트
CHAPTER 14 레이아웃 변형과 애니메이션으로 효과 주기
_LESSON 35 float 속성
__float 속성과 clear 속성
__부모의 크기 문제 해결하기
_LESSON 36 Grid 레이아웃
__부모에 적용하는 Grid
__자식에 적용하는 Grid
_LESSON 37 변형과 애니메이션
__transform 속성
__transition 속성
__animation 속성
__얄코의 친절한 CSS 노트
CHAPTER 15 반응형 웹과 CSS 추가 지식 알아보기
_LESSON 38 반응형 웹
__적응형 웹 vs 반응형 웹
__반응형 웹 만들기
_LESSON 39 기타 알아두면 좋을 속성들
__clip 속성과 clip-path 속성
__scroll-snap 속성
__aspect-ratio 속성
__backdrop-filter 속성
_LESSON 40 프레임워크와 라이브러리
__프론트엔드 프레임워크
__아이콘 라이브러리
__얄코의 친절한 CSS 노트
PART 05 HTML과 CSS를 활용한 파이널 프로젝트
CHAPTER 16 코딩 강좌 웹사이트 제작하기
_LESSON 41 프로젝트 설치 및 환경 설정
__프로젝트 설치하기
__style.css 파일 완성하기
_LESSON 42 상단 인트로
__intro.css
_LESSON 43 헤더와 메뉴
__header.css
_LESSON 44 메인과 about
__main.css
__about.css
_LESSON 45 HTML & CSS 섹션
__html-css.css
_LESSON 46 커리큘럼
__curriculum.css
_LESSON 47 문의하기와 푸터
__contact.css
__footer.css
PART 05 시키는 자바스크립트
CHAPTER 17 시작하기 전에
_LESSON 48 실습 환경 구축하기
__실습 도구
_LESSON 49 콘솔과 주석 활용하기
__콘솔
__주석
__얄코의 친절한 JavaScript 노트
CHAPTER 18 자바스크립트 기본 지식 알기
_LESSON 50 변수와 상수에 데이터 담기
__변수와 상수
__식별자 명명 규칙
_LESSON 51 기본 자료형과 연산자
__자료형
__연산자
_LESSON 52 객체와 배열
__객체
__배열
_LESSON 53 조건문
__if / else 문
__switch 문
_LESSON 54 반복문
__for 문
__while 문
_LESSON 55 함수
__함수의 정의
__함수의 활용
__얄코의 친절한 JavaScript 노트
CHAPTER 19 HTML과 CSS에 자바스크립트 더하기
_LESSON 56 HTML 요소 선택 및 조작하기
__DOM의 개념
__요소를 선택하는 방법
__선택된 요소를 조작하는 방법
_LESSON 57 이벤트 추가하기
__이벤트
__이벤트 객체
__얄코의 친절한 JavaScript 노트
CHAPTER 20 파이널 프로젝트 보완하기
_LESSON 58 기존 데이터에 요소 만들기
__내비게이션
__about
_LESSON 59 이벤트 애니메이션 만들기
__커리큘럼
__문의하기
__모바일 메뉴 버튼
__찾아보기
추천사
김빛나 (유튜버 코딩 알려주는 누나(@user-yu8so2ck1z))
이 책에서 제가 가장 좋아하는 부분은 ‘얄코의 친절한 노트’입니다. 본문에서 길게 설명한 개념을 핵심만 뽑아 한 페이지로 정리하여 배운 내용을 간편하게 숙지할 수 있도록 독자를 배려한 것은 ‘얄코 님다운' 특징이 아닌가 생각합니다. 또한 많은 내용에도 불구하고 다른 책에 비해 읽기 쉽다고 느꼈는데, 이는 핵심이 되는 개념을 중간중간 강조해 준 덕분입니다. 또한 실제 프로젝트 수준의 예제를 경험하는 과정이 체계적으로 구성되어 있어 입문자가 부담 없이 따라갈 수 있습니다.
이건희 (유튜버 코딩하는거니(@gunnycoding))
인프런에서 인기 있는 얄코 님의 ‘제대로 파는 HTML CSS’ 강의를 바탕으로 더 깊은 내용을 추가한 책입니다. 저도 강의를 기반으로 책을 쓴 적이 있는데, 요즘은 긴 영상보다는 짧은 영상을 선호하기 때문에 길게 풀어서 이야기하고 싶어도 그렇게 할 수 없었던 적이 많았습니다. 영상이 주는 다이내믹함도 있지만 책은 언제 어디서든지 다시 펴서 차분하게 생각할 수 있는 장점이 있으므로 강의를 이미 들으신 분들도 책을 보면 강의와는 또 다른 느낌을 받을 수 있을 거라고 생각합니다.
전병우 (유튜버 투더제이(@ttj))
이 책은 ‘TOO MUCH 친절한’이라는 제목과 같이 그동안 접해 온 어떤 학습 자료 중 가장 친절하고 쉬운 접근법을 제공합니다. 단순히 쉬운 내용만이 아니라 복잡하고 이해하기 힘든 개념까지 이미지, 요약 정리, 영상, 플레이그라운드 등의 다양한 보조 자료와 함께 쉽고 재미있게 익히도록 체계적으로 구성되어 있어 감탄하지 않을 수 없었습니다. 이 책은 최소한의 의지만으로 뛰어든 분들에게 지루할 틈 없이 진짜 코딩의 즐거움으로 친절하고 확실하게 안내할 것입니다.
정우현 (유튜버 컴공선배(@comgongbro))
이 책은 웹 개발의 개념 설명부터 실제 활용 방법, 마지막으로 파이널 프로젝트까지 철저히 다루며 완성도 높은 프로젝트 경험을 선사합니다. 특히 플레이그라운드라는 실습 환경과 온라인 강의가 있다는 두 가지 장점은 개발 입문자에게 가장 매력적인 포인트입니다. 자신이 프론트엔드 개발에 적성이 있는지 알아 보고 싶거나 이미 백엔드 개발에 종사하고 있는데 프론트엔드 이해가 부족하다면 이 책을 통해 기초를 탄탄히 다져 보는 것을 추천합니다.
책 속으로
★ 저자 인터뷰 ★
Q. 코딩을 쉽게 설명하기 위해 특별히 어떤 노력을 하셨나요?
A. 저는 원래 디자이너 출신이었어요. 비전공자로서 낯선 IT 개념들을 당혹스럽게 바라보던 때를 기 억하며, 가능한 한 일상적이고 직관적인 비유로 쉽게 개념을 설명하고자 꾸준히 연구해 왔습니다. 그 고민을 녹여 낸 결과물이 유튜브 강의와 책입니다.
Q. HTML, CSS, 자바스크립트를 한 번에 배워야 하는 이유는 무엇일까요?
A. 자전거를 배울 때 페달 밟는 법, 핸들 방향을 바꾸는 법, 브레이크 잡는 법을 따로따로 배우지는않죠. HTML과 CSS, 자바스크립트 역시 함께 사용되도록 만들어진 것이므로 서로 연계해서 공부해야 합니다. 그중에서도 HTML과 CSS는 한 쌍의 젓가락처럼 밀접하게 작용하며 웹사이트를구성합니다. 이 둘은 반드시 함께 공부하고 실습해야 각각을 더더욱 제대로 공부할 수 있습니다.
Q. 코딩을 사람보다 AI가 더 잘한다는데, 이런 AI 시대에 이 책을 꼭 봐야 하는 이유는 뭘까요?
A. 앞으로 사람이 직접 코드를 입력하는 일은 크게 줄어드는 대신 AI가 작성해 주는 코드를 적재적소에 활용하는 빈도가 높아질 것입니다. 그러려면 컴퓨터가 짠 코드를 이해하고 판단할 수 있는 지식이 필요합니다. 이때는 직접 코드를 짤 때보다 근본적이고 깊이 있는 지식이 필요합니다. 따라서 AI 시대에는 당연히 이 책과 같이 프로그래밍 언어의 기본기부터 심화까지 파고드는 공부를 해 둘 필요가 있습니다.
출판사 서평
★ 유튜브와 인프런 인기 강의가 책으로 업그레이드되어 돌아왔다!
★ 웹 페이지 제작에 필요한 세 가지 기술을 연계 학습할 수 있는 최적의 구성
★ 현업 개발자도 놓치기 쉬운 CSS 최신 기술 총망라
코딩을 처음 접하는 코알못도 이해하는 친절하고 쉬운 설명
코딩을 아예 모르는 사람이 가장 먼저 배우기 쉬운 기술이 바로 HTML과 CSS입니다. 직관적인 구조를 통해 결과물을 빠른 시간에 확인할 수 있어 프로그래밍 원리를 이해하는 데 제격이기 때문입니다. 하지만 이를 깊이 있게 공부하여 ‘제대로’ 활용하는 개발자는 흔하지 않죠. 이 책은 프로그래밍 초입문자를 위한 기초 지식부터 어려운 개념과 세세한 속성들까지 파고 들어가 현업 개발자 및 퍼블리셔도 큰 도움을 얻어갈 수 있도록 체계적으로 구성했습니다.
단계별로 따라가다 보면 HTML과 CSS, 자바스크립트까지 이 책 한 권으로 끝!
이 책은 난이도에 따라 파트별로 구성되어 있습니다. 먼저 PART 01~02에서 HTML과 CSS 기초 지식을 배웁니다. 여기에 만족하지 않고 더 다양한 기능을 배우려면 PART 03~04에서 HTML과 CSS 심화 지식을 이어서 학습합니다. PART 05에서는 지금까지 배운 HTML과 CSS 지식만을 활용해 코딩 강좌 웹사이트를 뚝딱 만들어 봅니다. 두 가지 언어만으로도 충분히 웹사이트를 구현할 수 있지만, 자바스크립트를 추가하면 한 단계 높은 차원으로 나아갈 수 있습니다. 따라서 PART 06에서 웹 페이지 제작에 필요한 자바스크립트 기초 지식을 활용해 앞에서 만든 코딩 강좌 웹사이트를 업그레이드시켜 최종 결과물을 완성합니다.
[이 책이 필요한 독자]
- 코딩을 이제 막 배우기 시작하는 사람
- 퍼블리싱을 직접 해내고 싶은 웹 디자이너
- HTML, CSS, 자바스크립트를 보다 잘 다루고 싶은 개발자
- HTML, CSS, 자바스크립트의 깊은 원리까지 공부해 보고 싶은 개발자
- 웹 표준에 부합하는 ‘착한 웹사이트’를 만들고 싶은 개발자
[강의를 먼저 들은 사람들의 한마디]
▶ 코딩 환경 셋팅 방법, 여러 가지 유용한 팁, 그리고 혼자 어떻게 더 나아가서 공부할 수 있는지 알려 주는 것이 좋았다. - H** -
▶ 파이널 프로젝트가 너무 좋았습니다. 웹사이트를 직접 만들어 볼 기회가 많지 않은데, 배운 내용들을 사용해서 웹사이트를 만들어 보니 학습에 많은 도움이 되었습니다. - 강** -
▶ 세심하고 꼼꼼한 구성으로 기능과 속성에 대해 많이 알려 주고 이해하기 쉽게 알려 주려고 정성을 다 한 모습에 감동했습니다. - k** -
▶ 내용을 효과적으로 전달하려고 노력한 게 느껴져서 잘 배운 것은 물론 기분 좋은 학습이었습니다. 여러 요소의 사용법을 충분히 연습할 수 있어서도 좋았지만, 간단 입력 팁 덕분에 직접 입력하면서 태그를 외울 수 있어서 아주 유용했습니다. - m** -
▶ HTML과 CSS의 핵심 지식을 잡는 데 많은 도움이 되었습니다. CSS에 이렇게 많은 기능이 있는지 몰랐습니다. - 김** -
▶ 감으로만 사용하던 것들의 작동 원리를 익히고 정리할 수 있어 아깝지 않은 시간이었습니다. - Ky** -
▶ 웹 개발에 있어 HTML CSS를 겉핥기 수준으로 그때 그때 찾아보는 것이 여간 불편하지 않았는데, 전체적인 흐름은 물론 기본기를 확실하게 다지고 최신 트렌드까지 이해할 수 있어 좋았습니다. - 조** -
그럼 이상으로 얄코의 Too Much 친절한 HTML+CSS+자바스크립트 책소개 포스팅을 마치겠습니다.
얄코의 Too Much 친절한 HTML+CSS+자바스크립트 책소 포스팅은 제휴마케팅이 포함되어있습니다.
