오전의 밝은 미래

HTML+CSS+자바스크립트

초보자도 쉽게 접근 할 수 있는

HTML,CSS,자바스크립트에 관한 책을 소개해드릴게요.

http://app.ac/lbMwxkl63

 

얄코의 Too Much 친절한 HTML+CSS+자바스크립트 | 고현민 - 교보문고

얄코의 Too Much 친절한 HTML+CSS+자바스크립트 | ★ 진짜 초보자도 자신 있게 끝낼 수 있도록 투머치 설명러 얄코가 다 알려 주는 웹 개발 가이드 명쾌한 설명과 전달력 높은 강의로 입문자들의 찬사

product.kyobobook.co.kr

★ 진짜 초보자도 자신 있게 끝낼 수 있도록 투머치 설명러 얄코가 다 알려 주는 웹 개발 가이드

​

명쾌한 설명과 전달력 높은 강의로 입문자들의 찬사를 받고 있는 얄코(얄팍한코딩사전)의 「제대로 파는 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+자바스크립트 책소 포스팅은 제휴마케팅이 포함되어있습니다.

#html, #css, #자바스크립트, #얄코, #TooMuch, #javascript