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

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

이고잉 님의 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. 수업을 마치며

  • 101쪽, 밑에서 5번째 줄

    27개국에서 모인 12,000여 명의 천재적인 과학자와 엔지니어가 모인 곳입니다.

    ==>

    127개국에서 모인 12,000여 명의 천재적인 과학자와 엔지니어가 모인 곳입니다.

  • 201쪽, 밑에서 5번째 줄

    혹은 delaration이라고 부릅니다.

    ==>

    혹은 declaration이라고 부릅니다.

  • 334쪽, 본문 첫 번째 줄

    그중 w3school.com에 있는

    ==>

    그중 w3schools.com에 있는

  • 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>
... 생략 ...

    html-css-js-405.png

 

  • 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쪽, 페이지 상단 그림을 아래 그림으로 교체

    html-css-js-428.png

 

  • 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>
    ... 생략 ...

    html-css-js-429.png

동영상, 예제 링크 페이지