난생 처음으로 프로그래밍을 시작하는 분들이라면 생활코딩 강의로 시작하세요!
이고잉 님의 HTML/CSS/자바스크립트 강의는 이미 많은 분들에 의해 검증받은 독창적인 강의로 손꼽히고 있습니다. 단순히 HTML/CSS/자바스크립트 기술을 알려주는 데서 그치는 것이 아니라 무엇을 모르는지 모르는 상태에서조차 무언가를 배울 수 있는 학습 방법까지도 습득할 수 있습니다. 초심자를 배려하는 상세한 설명과 통계를 기반으로 하는 실용적인 학습 내용 구성까지, 이 책을 통해 HTML/CSS/자바스크립트를 배운다면 기본은 물론 응용력까지도 금세 키울 수 있을 것입니다.
★ 이 책에서 다루는 내용 ★
- 코딩이란 무엇인가?
- HTML, CSS, 자바스크립트 기초
- HTML, CSS, 자바스크립트를 이용한 웹페이지 제작
- 웹과 웹 서버의 동작 원리
- 자바스크립트를 통해 배우는 프로그래밍의 원리
도서 상세 이미지
- [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이라고 부릅니다.228쪽, 페이지 상단 2번째 코드
display: inline;==>
display: none;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> ... 생략 ...
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> ... 생략 ...
