책 소개
요약
웹 애플리케이션 개발에 있어 필요한 기본 요소를 빠짐 없이 소개한다. 웹 기술의 기본이라고 할 수 있는 HTML과 CSS를 시작으로 동적인 요소를 추가할 자바스크립트와 이를 활용한 서버 관련 기술인 NodeJS, 웹 애플리케이션을 개발하기 위한 기본적인 기술에 대해 상세하게 소개한다. 그리고 부트스트랩이나 jQuery, 앵귤러JS와 같은 웹 프레임워크를 활용해 웹 애플리케이션을 더 효율적이고 멋지게 만드는 방법을 설명한다. 모바일 기기를 통해 웹에 접속하는 사용자가 많아지면서 반응형 웹의 인기가 높아졌다. 이런 추세에 맞춰 웹 개발용 프론트엔드 프레임워크인 부트스트랩에 대해서도 설명한다.
이 책에서 다루는 내용
■ 주요 HTML 요소 및 속성에 관한 설명과 예제
■ CSS 프로퍼티 및 함수의 개념과 사용법
■ 자바스크립트 문법과 표현식
■ 다양한 자바스크립트 패턴과 자바스크립트 객체 지향 프로그래밍의 기본
■ 웹 애플리케이션의 클라이언트 단 스크립팅을 위한 최신 ECMASCript 6 구현
■ 신속한 웹사이트 프론트엔드 개발을 위한 새로운 방법과 부트스트랩
■ jQuery를 이용한 자바스크립트 확장
■ 자바스크립트 서버 단 프로그래밍을 위한 핵심 Node.js 모듈
■ AngularJS의 중요 모듈, 컨트롤러, 지시자, 서비스
이 책의 대상 독자
고급 웹 개발자뿐 아니라 초보자도 유용하게 읽을 수 있도록 작성됐다. 웹 개발자라면 누구나 소중한 리소스를 얻을 수 있을 것이다. HTML, CSS, 자바스크립트, NodeJS, 부트스트랩, jQuery, Angular에 대한 콘셉트를 찾아볼 수 있다.
이 책의 구성
1장, ‘HTML 요소’에서는 웹페이지를 만들 때 필요한 모든 요소를 살펴본다. HTML5을 집중적으로 다룬다.
2 장, ‘HTML 속성’에서는 HTML 요소와 같이 사용할 수 있는 속성을 살펴본다.
3장, ‘CSS 개념과 애플리케이션’에서는 선택자(selector)에 대해 주로 설명한다. 선택자는 CSS 속성이 어떤 요소에 적용될지를 결정한다.
4장, ‘CSS 프로퍼티: 파트I’에서는 애니메이션, 백그라운드, 박스 모델, CSS 유닛, 칼럼, 플렉스박스(Flexbox)의 프로퍼티를 다룬다.
5장, ‘CSS 프로퍼티: 파트2’에서는 폰트, 트랜스폼(transform), 전환(transition), 포지션(position), 텍스트, 테이블, 단어(word,) 단락(paragraph), 페이징(paging)을 다룬다.
6장, ‘CSS 프로퍼티: 파트3’에서는 페이지 박스, 리스트, 카운터, 드롭 섀도우(drop shadow), 디스플레이(display)와 가시성(visibility), 마스킹(masking)과 크리핑(clipping), 사용자 인터페이스 및 3D의 프로퍼티를 다룬다.
7장, ‘CSS 함수’에서는 필터, 트랜스폼, 색상, 그래디언트, 값을 다룬다. at-규칙, 전역 키워드 값, 기타 항목 등의 별도 개념도 다뤘다.
8장, ‘자바스크립트 구현, 기본 문법, 변수 타입’에서는 문법과 변수, 그리고 타입을 포함한 자바스크립트의 구현과 기본적인 언어 사항을 다뤘다. 이 장에서는 기본적인 스크립팅을 이해하고 시작할 수 있도록 해준다.
9장, ‘자바스크립트 표현식, 연산자, 문장, 배열’에서는 기본적인 자바스크립트 언어를 이해하고 더불어 고급 내용으로 나아간다. 자바스크립트 표현식, 기본 연산자, 문장, 배열을 소개하고, 더 나은 이해를 돕기 위해 예제를 포함한다.
10장, ‘자바스크립트 객체 지향 프로그래밍’에서는 객체 지향 프로그래밍의 기본 개념을 설명한다. 상속(inheritance), 다형성(polymorphism), 추상화(abstraction), 캡슐화(encapsulation)를 다룬다. 그리고 오브젝트, 클래스, 관련 메소드를 사용하는 방법을 배운다. 더 나은 이해를 돕기 위해 다양한 예제를 포함한다.
11장, ‘자바스크립트와 ECMAScript 6의 확장’에서는 2015년에 출시된 ECMAScript 6의 모든 새로운 기능을 다룬다. 오브젝트, 패턴, 문법적인 변경 사항, 기존 오브젝트의 새로운 메소드 등까지 모든 기능을 상세히 다룬다.
12장, '서버 단 자바스크립트: NodeJS’에서는 클라이언트 단이 아닌 서버 단에서의 자바스크립트를 작성하는 방법을 배운다. 특별한 NodeJS 오브젝트와 패러다임을 배우며, 자바스크립트와 관련된 다른 장의 개념도 다시 사용한다.
13장, '부트스트랩: 스타일리시 CSS 프론트엔드 프레임워크’에서는 반응형 웹사이트를 만들기 위한 직관적인 프레임워크인 부트스트랩에 대해 이야기한다. 부트스트랩은 자바 스크립트, HTML, CSS를 포함한다. 부트스트랩 프레임워크에 대한 자세한 내용을 제공하며, 반응형 레이아웃과 웹페이지를 만들 수 있게 해준다. 각 토픽은 관련 예제를 포함한다.
14장, ‘jQuery: 유명한 자바스크립트 라이브러리’에서는 HTML의 다양한 내용을 지원하는 자바스크립트 라이브러리인 jQuery를 집중적으로 설명한다. 신속한 개발을 위한 HTML 문서의 요소, 메소드, 이벤트 핸들링, 애니메이션, AJAX에 대해 배운다.
15장, ‘AngularJS: 구글의 맞춤형 프레임워크’에서는 외부 라이브러리를 다루는 내용 중 마지막 부분이다. 구글에 의해 소개된 가장 유명한 프레임워크인 Angular를 사용해 애플리케이션을 개발할 때 필요한 주요 콘셉트를 설명한다.
목차
목차
- 1장. HTML 요소
- DOCTYPE
- 속성
- 설명
- html
- 속성
- 설명
- 문서 메타데이터
- head
- title
- link
- meta
- style
- base
- script
- noscript
- 시맨틱 콘텐츠
- body
- section
- nav
- article
- Heading
- header
- footer
- address
- aside 64
- p
- content 섹션
- hr
- pre
- blockquote
- ol
- ul
- li
- dl
- dt
- dd
- figure
- figcaption
- div
- main
- 인라인 요소
- a
- abbr
- bdo
- br
- cite
- code
- dfn
- em
- kbd
- mark
- q
- s
- samp
- small
- span
- strong
- sub
- sup
- time
- var
- wbr
- 삽입된 콘텐츠
- img
- iframe
- embed
- object
- param
- video
- audio
- source
- track
- 테이블
- table
- caption
- tbody
- thead
- tfoot
- tr
- td
- th
- 폼
- form
- fieldset
- legend
- label
- input
- button
- select
- optgroup
- option
- textarea
- 드로잉 요소
- canvas
- svg
- DOCTYPE
- 2장. HTML 속성
- 전역 속성
- accesskey
- class
- contenteditable
- data-*
- dir
- draggable
- hidden
- id
- lang
- spellcheck
- style
- tabindex
- title
- 그 외 속성
- accept
- accept-charset
- action
- alt
- async
- autocomplete
- autofocus
- autoplay
- autosave
- cite
- cols
- colspan
- datetime
- disabled
- download
- content
- controls
- for
- form
- formaction
- height
- href
- hreflang
- label
- list
- loop
- max
- maxlength
- media
- method
- min
- multiple
- name
- novalidate
- pattern
- placeholder
- poster
- readonly
- rel
- required
- reversed
- rows
- rowspan
- scope
- selected
- size
- src
- start
- step
- type
- value
- width
- wrap
- 전역 속성
- 3장. CSS 개념과 애플리케이션
- 기본 선택자
- 단순 선택자
- 연결자
- 자손 연결자
- 자식 연결자
- 인접 형제 연결자
- 일반 형제 연결자
- 선택자 명시도
- 가상 클래스
- 링크 가상 클래스
- 사용자 액션 가상 클래스
- 구조적 선택자
- 상태 선택자
- :checked
- :default
- :disabled과 :enabled
- :empty
- :in-range와 :out-of-range
- :invalid와 :valid
- :not 또는 부정
- :optional과 :required
- :lang()
- 가상 요소
- ::before와 ::after
- ::first-letter
- ::first-line
- ::selection
- 생성된 콘텐츠
- content
- 인용 부호
- 기본 선택자
- 4장. CSS 프로퍼티: 파트 1
- 애니메이션
- 기본 마크업과 CSS
- 최종 CSS 코드
- 백그라운드
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- background
- 박스 모델
- width
- height
- padding
- margin
- Border
- box-sizing
- max-height
- max-width
- min-height
- min-width
- object-fit
- object-position
- Border radius
- border-radius
- Unit
- 상대적 길이 단위
- 뷰포트: 상대 길이 단위
- 절대 길이 단위
- 각도 데이터 타입
- 해상도 단위
- 시간 단위
- 칼럼
- 플렉스박스
- flex-grow
- flex-shrink
- flex-basis
- flex-direction
- flex-wrap
- flex-flow
- align-content
- align-items
- align-self
- order
- justify-content
- flex
- 요약
- 애니메이션
- 5장. CSS 프로퍼티: 파트 2
- 폰트
- font-family
- font-feature-settings
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-variant-ligatures
- font-weight
- font
- 트랜스폼
- transform
- transform-origin
- transform-style
- Transition
- 포지셔닝
- position
- top
- bottom
- left
- right
- vertical-align
- 텍스트
- color
- text-align
- text-decoration
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-indent
- text-overflow
- text-rendering
- text-shadow
- text-transform
- text-underline-position
- direction
- 테이블
- table-layout
- border-collapse
- border-spacing
- empty-cells
- caption-side
- 단어와 단락
- hyphens
- word-break
- word-spacing
- word-wrap
- line-height
- orphans
- quotes
- widows
- writing-mode
- letter-spacing
- white-space
- tab-size
- 페이징
- page-break-after
- page-break-before
- page-break-inside
- 폰트
- 6장. CSS 프로퍼티: 파트 3
- 페이지 박스
- bleed
- 설명
- marks
- 리스트
- list-style
- list-style-type
- list-style-position
- list-style-image
- 카운터
- counter-reset
- counter-increment
- 드롭 섀도우
- box-shadow
- 디스플레이와 가시성 속성
- all
- clear
- display
- opacity
- filter
- overflow
- overflow-x
- overflow-y
- visibility
- z-index
- 마스킹과 클리핑
- mask
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- mask-border
- mask-border-source
- mask-border-mode
- mask-border-slice
- mask-border-width
- mask-border-outset
- mask-border-repeat
- clip-path
- 이미지 렌더링과 오리엔테이션(방향)
- image-orientation
- image-rendering
- 사용자 인터페이스
- cursor
- pointer-events
- outline
- 3차원
- perspective
- perspective-origin
- backface-visibility
- 요약
- 페이지 박스
- 7장. CSS 함수
- 필터
- brightness()
- contrast()
- grayscale()
- invert()
- hue-rotate()
- blur()
- saturate()
- sepia()
- 트랜스폼
- matrix()
- matrix3d()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- steps()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- 색상
- hsl()와 hsla()
- rgb()와 rgba()
- 그래디언트
- linear-gradient()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- 값
- attr()
- 반응형 테이블
- calc()
- url()
- cubic-bezier()
- 기타
- drop-shadow()
- element()
- image()
- 설명
- opacity()
- perspective()
- rect()
- at-규칙
- @charset
- @document()
- @font-face
- 구글 폰트
- @import
- @keyframes
- @media
- @namespace
- @page
- @supports
- 전역 CSS 키워드 값
- auto
- inherit
- initial
- none
- normal
- unset
- revert
- 요약
- 필터
- 8장. 자바스크립트 구현, 기본 문법, 변수 타입
- 자바스크립트의 역사
- 자바스크립트의 발전
- 자바스크립트 구현
- 코어 자바스크립트(ECMAScript)
- DOM
- BOM
- 클라이언트 단의 자바스크립트(Client-side JavaScript)
- 외부 자바스크립트 파일 로딩하기
- 자바스크립트로 첫 번째 프로그램 만들기
- 서버 단의 자바스크립트
- Rhino를 사용해 스크립트 만들기
- Node.js
- 설명
- 언어적 문법
- Language
- Type
- 문자 세트
- 대소문자 구별
- 화이트스페이스와 줄 바꿈
- 유니코드 이스케이프 시퀀스
- 정규화
- 식별자
- 예약 키워드
- 주석
- 리터럴
- 문장
- 세미콜론
- 데이터 타입
- 연산자 타입
- undefined 타입
- 널 타입
- 숫자 타입
- 불린 타입
- 문자열 타입
- 오브젝트 타입
- 변수, 범위, 메모리
- 변수 선언
- 변수 범위
- 프리미티브와 레퍼런스 값
- 실행 컨텍스트와 범위
- 가비지 컬렉션
- 자바스크립트의 역사
- 9장. 자바스크립트 표현식, 연산자, 문장, 배열
- 표현식
- 기본 표현식
- 오브젝트 초기화
- 함수 정의 표현식
- 프로퍼티 액세스 표현식
- 호출 표현식
- 오브젝트 생성 표현식
- 평가 표현식
- 연산자
- 개요
- 산술 연산자
- 논리 연산자
- 지정 연산자
- 누승 지정자 (**=)
- 관계 연산자
- 문장
- 표현문
- 복합 빈 문장(Compound empty statement)
- 선언문
- 조건문
- 루프
- 점프와 라벨 문장
- 배열
- 배열 타입
- 배열 타입 오브젝트
- 배열 만들기
- 배열 요소에 읽고 쓰기
- 자바스크립트의 다차원 배열
- 배열 내 프로퍼티
- 배열 메소드
- ECMA 배열 메소드
- 표현식
- 10장. 자바스크립트 객체 지향 프로그래밍
- 다형성
- 캡슐화
- 상속
- 추상화
- 오브젝트
- 오브젝트 만들기
- 디자인 패턴
- 프로퍼티 getter와 setter
- 프로퍼티 삭제
- 테스팅 프로퍼티
- 프로퍼티 열거
- 프로퍼티 속성
- 오브젝트 속성
- 객체 직렬화
- 오브젝트 메소드
- 함수와 메소드
- 함수 invoke하기
- 함수 정의하기
- 함수의 인수와 파라미터
- 파라미터와 반환 값
- 네임스페이스로서 함수
- 클로저
- 함수 프로퍼티
- 메소드
- 함수 생성자
- 클래스와 모듈
- 클래스와 프로토타입
- 생성자
- 클래스 정의하기
- ECMA5 스크립트 내의 클래스
- 모듈
- 상속
- 프로토타입 체인
- 생성자 훔치기
- 조합 상속
- 프로토타입 상속
- 기생 상속
- 기생 조합 상속
- 서브클래스
- 빌트인 오브젝트
- 전역 오브젝트
- 날짜 오브젝트
- getTime()
- getMilliseconds()
- getMinutes()
- getHours()
- getDate()
- getDay()
- getMonth()
- getFullYear()
- 날짜 설정 메소드
- 수학 오브젝트
- RegExp 오브젝트
- 문자열 오브젝트
- 배열 오브젝트
- 다형성
- 11장. 자바스크립트와 ECMAScript 6의 확장
- 호환성과 목표 사항
- 자바스크립트의 서브셋과 확장
- 자바스크립트 서브셋
- 자바스크립트 확장
- const
- let
- 비구조화 할당
- for each
- 반복자
- 생성기
- 변수
- 생성자 표현식
- 범위 지정 변수와 상수
- 단축 함수
- 다중 catch절
- E4X - XML을 위한 ECMAScript
- ECMAScript 6의 주요 기능
- 화살표 함수
- 클래스
- 향상된 오브젝트 리터럴
- 템플릿 문자열
- 비구조화된 할당
- 바인딩
- 반복자와 for...of 연산자
- 제너레이터
- 유니코드 지원
- 모듈
- 모듈 로더
- 컬렉션
- 프록시
- 심볼
- 서브클래스로 만들 수 있는 빌트인
- 프라미스
- 코어 수학 라이브러리 API
- 2진과 8진 리터럴
- Reflect API
- 꼬리 호출
- 12장. 서버 단 자바스크립트: NodeJS
- 파일과 프로세스 관리
- 모듈
- OS 모듈
- process 모듈
- 파일 함수
- 파일 모듈
- path 모듈
- REPL
- node
- 에러 처리
- 유틸리티
- 이벤트
- 암호화
- 버퍼
- 콘솔
- npm
- 스트림
- setEncoding
- net 모듈
- createServer
- net.Server
- net.Socket
- HTTP 모듈
- createServer
- http.Server
- IncomingMessage
- ServerResponse
- http.clientRequest
- 파일과 프로세스 관리
- 13장. 부트스트랩: 스타일리시CSS 프론트엔드 프레임워크
- 부트스트랩 기본 소개
- HTML5 doctype
- 모바일 우선
- 반응형 이미지
- 컨테이너
- 시작하기
- 깃허브 프로젝트
- Bootstrap 다운로드
- bower로 설치하기
- npm으로 설치하기
- composer로 설치하기
- 레이아웃
- 고정 레이아웃
- 유동 레이아웃
- 반응형 레이아웃
- 지원되는 장치
- 그리드 시스템
- 그리드 옵션 요약표
- 미디어 쿼리
- 반응형 열 재설정
- 열 오프셋
- 열 중첩
- 열 배치
- LESS 변수와 믹스인
- 믹스인
- 변수
- 타이포그래피
- 제목
- 본문
- 리드 본문
- 강조
- 작은 텍스트
- 굵은 텍스트
- 기울임 텍스트
- 정렬
- 약어
- 기본
- 두문자어
- 주소
- 인용구
- 표
- 기본
- 줄무늬 행
- 경계선 있는 표
- 행 호버링
- 좁은 폭 행
- 맥락적인 클래스
- 반응형 표
- 목록
- 순서 없는 목록
- 순서 있는 목록
- 스타일 없는 목록
- 인라인 목록
- 설명 목록
- 수평 설명
- 부트스트랩의 폼
- 수직 폼
- 인라인 폼
- 수평 폼
- 부트스트랩의 폼 입력
- 텍스트 영역
- 도움말 텍스트
- 체크박스
- 선택 목록
- 라디오 버튼
- 정적 컨트롤
- 입력 포커스
- 비활성화 입력
- 유효 상태
- 컨트롤 크기 조절
- 이미지
- 보조 아이콘
- 내비게이션 요소
- 탭
- 필
- 양쪽 정렬
- 비활성화 링크
- 내비게이션 바
- 기본 설정
- 폼
- 버튼
- 텍스트
- 일반 링크
- 상단에 고정
- 하단에 고정
- 정적 상단
- 반전된 내비게이션 바
- 패널
- 기본
- 제목
- 꼬리말
- 그룹
- 경로
- 라벨과 배지
- 라벨
- 배지
- 페이지네이션
- 기본 설정
- 페이저
- 프로그레스 바
- 고급 부트스트랩/자바스크립트 플러그인
- 버튼
- 기본
- 버튼 툴바
- 크기 조절
- 중첩
- 수직형
- 양쪽 정렬 링크형
- 드롭다운
- 단일 버튼
- 분할 버튼
- 툴팁
- 위치 설정
- 팝오버
- 기본 생성
- 위치 설정
- 닫기
- 경보
- 탭
- 아코디언
- 모달
- 모달 크기
- 미디어 객체
- 캐러셀
- 자동 완성
- 자동 완성 만들기
- 자바스크립트를 통한 자동 완성 사용하기
- 스크롤스파이
- 데이터 속성을 통한 스크롤스파이 활성화
- 자바스크립트를 통한 스크롤스파이 활성화
- 애픽스
- 데이터 속성을 통한 애픽스 활성화
- 자바스크립트를 통한 애픽스 활성화
- 사용자 정의 부트스트랩
- 부트스트랩으로 만든 웹사이트
- 부트스트랩 관련 참고 자료
- 부트스트랩 기본 소개
- 14장. jQuery: 유명한 자바스크립트 라이브러리
- jQuery의 발전
- 시작하기
- JQuery 설치하기
- jQuery 사용하기
- 선택자
- 요소 선택자
- ID 선택자
- 클래스 선택자
- 이벤트
- 마우스 이벤트
- 키보드 이벤트
- 폼 이벤트
- 브라우저 이벤트
- 효과와 애니메이션
- animate()
- stop()
- 숨김, 나타냄, 토글
- 페이드 효과
- 슬라이드 효과
- 콜백
- callbacks.add()
- callbacks.fire()
- callbacks.remove()
- callbacks.disable()
- 체이닝
- jQuery와 문서 객체 모델
- jQuery 순회
- 조상
- parent()
- parents():
- parentsUntil():
- 자손
- find()
- 형제
- 반환
- 필터링
- jQuery에서 AJAX 사용하기
- jQuery의 Ajax Load
- jQuery의 Ajax Get
- jQuery의 Ajax Post
- 다양한 jQuery 함수
- noConflict()
- param()
- index()
- each()
- data()
- removeData()
- jQuery 플러그인
- jQuery 참고 자료
- 15장. AngularJS: 구글의 맞춤형 프레임워크
- 모듈(ngApp)
- module
- config
- run
- 라우팅(ngRoute)
- ngView
- $routeProvider
- $route
- $routeParams
- 의존성 주입
- 앵귤러에서의 의존성 주입
- injector
- $injector
- 컨트롤러
- ngController
- $scope
- 데이터 바인딩과 템플릿
- 이벤트 바인딩
- 범위
- 다이제스트 사이클
- $watch
- $apply
- 계층
- 서비스
- 팩토리
- 서비스
- 제공자
- 값
- 상수
- $http
- 유용한 메소드
- 중요한 서비스
- 프라미스
- $q
- 표현식
- 자바스크립트의 표현식
- 지시자
- 정규화
- 범위
- DOM 변경
- 이벤트 바인딩
- 지시자 정의 객체
- 주요 지시자
- 전역
- extend
- noop
- isUndefined
- copy
- bind
- 폼
- ngModel
- 검증
- 테스트
- Jasmine과 Karma로 단위 테스트하기
- ngMock
- 단위 테스트 컨트롤러
- 단위 테스트 지시자
- 단위 테스트 서비스
- 모듈(ngApp)