생활코딩! HTML+CSS+자바스크립트

이고잉 지음

러닝스쿨 시리즈_003
ISBN: 9791158391331
27,000원 | 2019년 01월 15일 발행 | 500쪽

난생 처음으로 프로그래밍을 시작하는 분들이라면 생활코딩 강의로 시작하세요!

이고잉 님의 HTML/CSS/자바스크립트 강의는 이미 많은 분들에 의해 검증받은 독창적인 강의로 손꼽히고 있습니다. 단순히 HTML/CSS/자바스크립트 기술을 알려주는 데서 그치는 것이 아니라 무엇을 모르는지 모르는 상태에서조차 무언가를 배울 수 있는 학습 방법까지도 습득할 수 있습니다. 초심자를 배려하는 상세한 설명과 통계를 기반으로 하는 실용적인 학습 내용 구성까지, 이 책을 통해 HTML/CSS/자바스크립트를 배운다면 기본은 물론 응용력까지도 금세 키울 수 있을 것입니다.

★ 이 책에서 다루는 내용 ★

코딩이란 무엇인가?
HTML, CSS, 자바스크립트 기초
HTML, CSS, 자바스크립트를 이용한 웹페이지 제작
웹과 웹 서버의 동작 원리
자바스크립트를 통해 배우는 프로그래밍의 원리

도서 상세 이미지

이고잉

생활코딩 운영자

오픈튜토리얼스(https://opentutorials.org/) 운영진

[1부] HTML 편
- _1. 수업 소개
- _2. 프로젝트의 동기
- _3. 기획
- _4. 코딩과 HTML
- _5. HTML 코딩과 실습 환경 준비
- _6. 기본 문법과 태그
- _7. 혁명적인 변화
- _8. 통계에 기반한 학습
- _9. 줄바꿈: <br> vs. <p>
- _10. HTML이 중요한 이유
- _11. 최후의 문법 속성과 <img> 태그
- _12. 부모 자식과 목록
- _13. 문서의 구조와 슈퍼스타들
- _14. HTML 태그의 제왕
- _15. 웹 사이트 완성
- _16. 원시 웹
- _17. 인터넷을 여는 열쇠: 서버와 클라이언트
- _18. 웹 호스팅: 깃허브 페이지
- _19. 웹 서버 운영하기
  - _19.1 웹 호스팅: 웹 서버 설치(윈도우)
  - _19.2 웹 호스팅: 웹 서버와 HTTP(윈도우)
  - _19.3 웹 서버와 웹 브라우저의 통신(윈도우)
  - _19.4 웹 서버 설치(macOS)
  - _19.5 웹 서버와 HTTP(macOS)
  - _19.6 웹 브라우저와 웹 서버의 통신(macOS)
  - _19.7 웹 브라우저와 웹 서버의 통신(리눅스)
- _20. 수업을 마치며 1/3
- _21. 수업을 마치며 2/3
- _22. 수업을 마치며 3/3
[2부] CSS 편
- _1. 수업 소개
- _2. CSS가 등장하기 전의 상황
- _3. CSS의 등장
- _4. CSS의 기본 문법
- _5. 혁명적 변화
- _6. CSS 속성을 스스로 알아내기
- _7. CSS 선택자의 기본
- _8. 박스 모델
- _9. 박스 모델 써먹기
- _10. 그리드 소개
- _11. 그리드 써먹기
- _12. 미디어 쿼리 소개
- _13. 미디어 쿼리 써먹기
- _14. CSS 코드의 재사용
- _15. 수업을 마치며
[3부] 자바스크립트 편
- _1. 수업 소개
- _2. 수업의 목적
- _3. HTML과 JS의 만남: <script> 태그
- _4. HTML과 JS의 만남: 이벤트
- _5. HTML과 JS의 만남: 콘솔
- _6. 데이터 타입 - 문자열과 숫자
- _7. 변수와 대입 연산자
- _8. 웹 브라우저 제어
- _9. CSS 기초: style 속성
- _10. CSS 기초: <style> 태그
- _11. CSS 기초: 선택자
- _12. 제어할 태그 선택하기
- _13. 프로그램, 프로그래밍, 프로그래머
- _14. 조건문 예고
- _15. 비교 연산자와 불리언
- _16. 조건문
- _17. 조건문의 활용
- _18. 중복의 제거를 위한 리팩터링
- _19. 반복문 예고
- _20. 배열
- _21. 반복문
- _22. 배열과 반복문
- _23. 배열과 반복문의 활용
- _24. 함수 예고
- _25. 함수
- _26. 매개변수와 인자
- _27. 함수(return 문)
- _28. 함수의 활용
- _29. 객체 예고
- _30. 객체 쓰기와 읽기
- _31. 객체와 반복문
- _32. 객체 프로퍼티와 메서드
- _33. 객체의 활용
- _34. 파일로 쪼개서 정리 정돈하기
- _35. 라이브러리와 프레임워크
- _36. UI vs. API
- _37. 수업을 마치며

201쪽, 밑에서 5번째 줄

혹은 delaration이라고 부릅니다.

==>

혹은 declaration이라고 부릅니다.
385쪽, 아래에서 4번째 줄

var trget=Document.querySelector('body');

==>

var target=Document.querySelector('body');

405쪽, 예제 3-22-6과 하단 그림을 각각 다음 예제와 그림으로 교체

... 생략 ...
<script type="text/javascript">
    var i = 0;
    while(i < coworkers.length) {
        document.write('<li><a href="http://a.com/' + coworkers[i] + '">' + coworkers[i] + '</a></li>');
        i = i + 1;
    }
</script>
... 생략 ...

417쪽, 본문 마지막 줄(문장 추가)

그리고 왜 그런지는 지금 당장 중요하지 않지만 function nightDayHandler(self)라고 바꾸겠습니다.

==>

그리고 왜 그런지는 지금 당장 중요하지 않지만 function nightDayHandler(self)라고 바꾸겠습니다. 그리고 nightDayHandler 함수 안에서도 this라고 돼 있던 부분을 모두 self로 바꿉니다.

417쪽, 예제 3-24-3을 다음 코드로 교체(this를 self로 수정)

    ... 생략 ...
    <script>
        function nightDayHandler(self) {
            var target = document.querySelector('body');
            if(self.value === 'night') {
                target.style.backgroundColor = 'black';
                target.style.color = 'white';
                self.value = 'day';
                ... 생략 ...
            } else {
                target.style.backgroundColor = 'white';
                target.style.color = 'black';
                self.value = 'night';
                ... 생략 ...
            }
        }
    </script>
    ... 생략 ...

428쪽, 페이지 상단 그림을 아래 그림으로 교체

429쪽, 예제 3-27-1과 하단 그림을 각각 다음 예제와 그림으로 교체

... 생략 ...
    ... 생략 ...
    <script>
        ... 생략 ...
        function sum(left, right) {
            document.write(left + right + '<br>');
        }
        function sumColorRed(left, right) {
            document.write('<div style="color: red">' + (left + right) + '</div><br>');
        }
        sum(2,3);  // 5
        sumColorRed(2,3);   // 5
        sum(3,4);  // 7
    </script>
    ... 생략 ...

동영상, 예제 링크 페이지

https://wikibook.github.io/html-css-js/