소득공제
이미 소장하고 있다면 판매해 보세요.
- 해외배송 가능?
- 문화비소득공제 가능
에이콘- 웹 프로페셔널 시리즈
-
WordPress: The Missing Manual 워드프레스 사용자 가이드 이동WordPress: The Missing Manual 워드프레스 사용자 가이드10% 31,500원 -
Adobe Edge Animate Classroom in a Book 한국어판 이동Adobe Edge Animate Classroom in a Book 한국어판10% 31,500원
책소개
목차
|
1부. 웹킷의 기초
1장 웹킷이란? ___웹킷의 역사 ___웹킷은 어디에 쓰이는가? ______웹 브라우저 ______모바일 디바이스 ______리치 인터넷 애플리케이션 ______여러 종류의 디바이스 ___웹킷이 제공하는 것은 무엇인가? ______CSS3 ______HTML5와 SVG ___웹킷을 사용했더라도 기능이 모두 같진 않다 ______다양한 버전의 웹킷 사용 ______코어 수정 ___요약 2장 웹킷 개발 시작하기 ___테스팅 환경 설정 ______테스트하는 방법 ______맥이나 PC냐 ___크롬과 사파리 환경 ______구 버전의 브라우저 테스트 ______크롬과 사파리 문제 디버깅 ___iOS와 안드로이드 환경 ______에뮬레이터 선택 ______iOS 시뮬레이터 ______안드로이드 에뮬레이터 ______iOS와 안드로이드 문제 디버깅 ___웹킷 브라우저 그 이상 ______파이어폭스 ______인터넷 익스플로러 ______오페라 ______다른 모바일 브라우저 ___결론 2부. 웹킷에서 지원하는 CSS3 3장 CSS3의 고급 스타일링 ___CSS3를 사용해 이미지 없이 그래픽 그리기 ______기본 설정 ______둥근 모서리 ______그라디언트 ______활자체 ______텍스트와 박스 섀도우 ______RGBa 투명도 ___CSS3 애니메이션 ______전환하기 ______키프레임의 사용 ___CSS3 변형 ______2D 변형 ______3D 변형 ___다른 CSS3 프로퍼티 ______테두리 이미지 ______마스크 ______글자 테두리 ______사각형 반사 ______웹킷의 움직이는 텍스트 ______배경 클립 ______데이터 URI ___요약 4장 CSS3의 개선된 선택자 기능 ___CSS3 선택자와 유사 클래스 ______선택자 속성 ______구조적인 선택자 ______구조적인 유사 클래스 ______다른 유사 클래스 ______유사 요소에 기반을 둔 텍스트와 콘텐츠 ___미디어 쿼리 ______미디어 쿼리의 사용 ______미디어 쿼리를 이용해 유연한 레이아웃 만들기 ______특정 디바이스 감지 ___요약 5장 CSS3로 다중 브라우저 지원 ___모든 브라우저에서 동작하는 기본 CSS3 스타일 ______크로스-브라우저에서의 둥근 모서리 ______크로스-브라우저에서의 그라디언트 ______크로스 브라우저의 폰트 페이스 ______크로스 브라우저의 텍스트와 박스 섀도우 ______크로스 브라우저의 RGBa 투명도 ______크로스 브라우저에서의 테두리 이미지 ______크로스 브라우저의 배경 클립 ______크로스 브라우저의 데이터 URI ___모든 브라우저에서의 CSS3 애니메이션 ______전환을 지원하지 않는 브라우저에서의 전환 ______지원하지 않는 브라우저에서 키프레임 애니메이션 ___모든 브라우저에서의 CSS3 변형 ______IE 구 버전에서의 변형 지원 ______크로스 브라우저의 3D 변형 지원 ___크로스 브라우저의 CSS3 선택자와 유사 클래스 지원 ______크로스 브라우저의 선택자 지원 ______크로스 브라우저의 유사 클래스와 유사 요소 지원 ______CSS3 선택자 지원을 위한 제이쿼리 ___크로스 브라우저의 미디어 쿼리 지원 ___모더나이저를 사용한 기능 감지 ___요약 3부. 웹킷에서의 HTML5 지원 6장 HTML5 미디어 태그 ___왜 HTML5를 사용하는가? ___HTML5 VIDEO ______HTML5 비디오 옵션 ______HTML5 비디오 포맷 ______다른 포맷 인코딩 ______HTML5 비디오 인코딩 테스트 ___HTML5 오디오 ______HTML5 오디오 포맷 ______HTML5 오디오 인코딩 ___HTML5 미디어 태그와 자바스크립트의 상호 작용 ______기본 자바스크립트 명령어 ___HTML5 미디어 태그 대안으로 플래시 사용 ______대안용 플래시 추가 ______플래시 파일 생성 ___요약 7장 캔버스 요소 ___캔버스의 기본 ______기본적인 모양 그리기 ______복잡한 모양 그리기 ___캔버스 꾸미기 ______이미지 사용하기 ______채우기와 획 스타일 ______선 스타일 ______그림자 ______텍스트의 사용 ___변형 ______위치 이동 ______회전 ______크기 변경 ______변형 ______캔버스 상태의 저장과 복구 ______다양한 상태의 저장과 복구 ___구성하기와 범위 자르기 ______구성하기 ______범위 자르기 ___반응형 캔버스 ______기본적인 애니메이션 ______마우스의 상호 작용 ______물리학 라이브러리 사용하기 ___3D 캔버스 ______웹지엘과 오픈지엘 ______3D 캔버스 라이브러리 ___캔버스의 영감 ______게임 ______오디오/비디오 ______그리기와 만드는 툴 ______수학/물리학 ______시각 효과 ______더 많은 캔버스 영감 ___요약 8장 HTML5 폼 ___특별 입력 형식 ______숫자 ______슬라이더 ______색과 날짜 선택기 ______상황에 따른 키보드 ______검색 박스 ___상호 작용 기능 ______플레이스홀더 텍스트 ______오토포커스 ______폼 검사 ___크로스 브라우저 지원 ______특별한 입력 형식의 크로스 브라우저 지원 ______상호 작용 기능용 크로스 브라우저 지원 ___요약 9장 확장가능한 벡터 그래픽 SVG ___SVG를 사용할 때의 장점 ______벡터화된 이미지 형식 ______완전한 상호 작용 ______검색 엔진 최적화(SEO, Search Engine Optimization) ______파일 크기 ___자동으로 SVG 생성하기 ______SVG 파일 생성하기 ______SVG 라이브러리 ___SVG 이미지 손으로 직접 작성하기 ______SVG 마크업 포함하기 ______선과 모양 그리기 ______텍스트와 링크, 이미지 추가하기 ______그라디언트 추가하기 ______HTML 속성 대신에 CSS 사용하기 ______자바스크립트 상호 작용 ___요약 4부. 모바일 웹킷 10장 iOS와 안드로이드로 개발하기 ___뷰포트와 회전 방향 ______뷰포트의 조정 ______미디어 쿼리를 이용한 CSS 조정 ______자바스크립트를 통한 뷰포트와 방향, 해상도 액세스 ___모바일 감지하기 ______유저 에이전트 확인 ______미디어 쿼리 ______자바스크립트를 이용한 감지 ______감지하지 않기 ___모바일용 스타일링 ______실제 화면 영역의 최대화 ______파일 크기의 감소 ______여러 가지 변경 ___디바이스 기능의 접근 ______터치 이벤트 ______위치 정보 ______자이로스코프와 가속도계 ______전화 걸기 ______문자 메시지 ______상황에 따른 키보드 ______자동 수정 기능의 비활성화 ______미디어 캡처 ___IOS를 위한 특별히 고려해야 할 점 ______플래시 대신 HTML5 이용하기 ______그 밖의 고려사항 ___요약 11장 웹 앱 만들기 ___웹 앱과 네이티브 앱 비교 ______웹 앱의 장점 ______네이티브 앱의 장점 ___북마크 아이콘의 생성 ______북마크와 다운로드 비교 ______맞춤형 아이콘의 생성 ______북마크 스크립트 ___전체 화면 모드 ______전체 화면 모드의 활성화 ______브라우저 바 숨기기 ___자바스크립트 라이브러리 선택 ______센차 터치 ______제이쿼리 모바일 ______jQTOUCH ______Zepto.js ___CSS3를 사용한 iOS UI의 렌더링 ______iOS 스타일링의 재현 ______iOS UI 기능의 재현 ___CSS3를 이용한 안드로이드 UI의 랜더링 ___오프라인의 진입 ______앱이 오프라인인지 확인하기 ______HTML5 캐시 매니페스트 ______로컬 스토리지 ______오프라인 SQL 데이터베이스 ___폰갭을 사용한 네이티브 앱 개발 ______폰갭의 장점 ______폰갭의 단점 ______폰갭 시작하기 ______폰갭 사용하기 ______폰갭 API ___요약 5부. 웹킷 파고들기 12장 웹킷의 성능 ___최적화 방법 ______균형감 유지하기 ______프로파일링 툴 ______인지 성능 대 실제 성능 ___애니메이션의 최적화 ______CSS 애니메이션의 이용 ______리플로우 피하기 ______하드웨어 가속 ___자바스크립트의 최적화 ______자바스크립트의 로딩 ______순환문 ______스코프 체인 ______돔의 조작 ___CSS의 최적화 ______더 빠른 선택자 ______피해야 하는 프로퍼티 ___이미지 최적화 ______웹용 이미지 저장 ______웹피 ______쿠키 없는 도메인 사용 ___웹 소켓 ______웹 소켓의 장점 ______브라우저에서 지원 ______웹 소켓을 사용하는 방법 ___요약 13장 웹킷의 미래 ___웹킷 나이틀리 버전 ___웹킷을 지원하는 방법 ______오류 리포트 작성 ______웹킷 코어에 기여하기 ______문서 작성 ___웹킷의 나아갈 방향은 어디인가? ______개발 중인 기능 ______일반적인 개선 사항 ___웹킷의 미래 |
저자 소개
저자 : 존 라쉬 (Jon Raasch)
15년간 웹 프로그래밍에 몸담아 왔으며 HTML4와 CSS3, 자바스크립트에 능숙한 프론트엔드 웹 개발자이자 UX 디자이너다. Smashingmagazine.com에 정기적으로 기고하며, http://jonraasch.com에 개인 블로그를 운영한다.
존 라쉬는 14살에 처음으로 지오시티(GeoCities)에 웹 사이트를 만들어 올렸다. 물론 당시에는 형편없는 수준이었지만, 지금은 아주 멋진 웹 사이트와 최신 기술을 사용하는 웹 기반 애플리케이션을 만들고 있다. 웹 표준과 프론트엔드 성능, UX 디자인에 열정을 갖고 활동 중이다.
예전에는 포틀랜드에 살았지만 이제는 원격으로 일하면서 세계를 여행한다(특히 독일 베를린을 아주 좋아한다).
존의 트위터(http://twitter.com/jonraasch)에서 그를 팔로우할 수 있다.
존 라쉬는 14살에 처음으로 지오시티(GeoCities)에 웹 사이트를 만들어 올렸다. 물론 당시에는 형편없는 수준이었지만, 지금은 아주 멋진 웹 사이트와 최신 기술을 사용하는 웹 기반 애플리케이션을 만들고 있다. 웹 표준과 프론트엔드 성능, UX 디자인에 열정을 갖고 활동 중이다.
예전에는 포틀랜드에 살았지만 이제는 원격으로 일하면서 세계를 여행한다(특히 독일 베를린을 아주 좋아한다).
존의 트위터(http://twitter.com/jonraasch)에서 그를 팔로우할 수 있다.
관련 분류
- 카테고리 분류
품목정보
- 발행일
- 2013년 04월 30일
- 쪽수, 무게, 크기
- 448쪽 | 850g | 188*235*30mm
- ISBN13
- 9788960774261
책 속으로
|
출판사에서 웹킷에 대한 책을 내게 부탁했을 때, 처음에는 주제가 조금 이상하다고 생각했다. 웹킷에서 지원하는 고급 기능을 사용해서 개발하는 작업을 특히 좋아하지만, 웹 사이트는 단일 환경에 거의 국한되지 않고, 또 웹킷 브라우저에 맞춰 설계된 프로젝트를 해본 적도 없었기 때문이다.
하지만 내가 생각했던 것 이상으로 웹킷에 대한 책은 매우 유용할 수 있다는 사실을 깨달았다. 웹킷 엔진에 대해 배운다고 해서 웹킷에 기반을 둔 브라우저만 지원한다는 의미는 아니었기 때문이다. 그보다는 웹킷을 배우는 것은 웹 표준을 배운다는 의미가 강했다. 몇 년 전에 둥근 모서리와 그라디언트 같은 CSS3 기능은 웹킷에 기반을 둔 사파리에서만 지원했다. 당시 이런 기능이 있는 사이트를 만드는 과정은 흥미로운 작업이었지만, 분명히 생산적인 웹 사이트에는 맞지 않았다. 인터넷 환경이 급변하는 요즘, 웹 표준과 관련한 CSS3 기능 대부분은 모든 주요 브라우저에서 지원된다. CSS3는 사파리 마니아들의 취미에서 벗어나 주요 웹 사이트에서 사용되는 주요한 접근 방법으로 자리잡았다. 웹킷에 한 번 적용된 기능은 모든 웹 개발 전반에 걸쳐 표준이 돼 유용하다는 사실이 증명됐기 때문이다. 오늘날 웹킷은 차별화된 렌더링과 혁신적인 새로운 기능, 웹 개발의 미래를 만드는 일을 주도하고 있다. 웹킷의 다양한 CSS3와 HTML5 기술은 이미 다른 브라우저에까지도 적용됐고, 몇 개월 혹은 몇 년 안에 더 많은 기능이 반영될 것으로 예상한다. 따라서 웹킷을 배우는 것은 웹 개발의 미래를 보는 창을 제공하는 것이다. 이렇게 빠르게 발전하는 분야에서 최신 동향을 알고 꾸준히 실천하는 일은 개발자들을 위해 매우 중요하다. 웹킷에 집중하는 것은 오늘날 사용되는 기술뿐만 아니라 미래에 사용될 기술을 배우는 것으로서, 당신이 남들보다 한발 앞설 수 있게 만들어준다. 그러면 웹 사이트를 만들 때 웹킷용으로만 만들어야 하는가? 물론 아니다. 이 책이 웹킷 기반 브라우저 기술에 집중하지만, 그렇다고 해서 결코 웹킷만을 따로 떼어내어 다루지는 않는다. 보편적인 웹 표준 기술을 지원하는지 혹은과 ‘단계적 기능 축소’를 채택할 수 있는 대안 해결책이 있는지 등 브라우저 호환성 문제에 대해서도 설명한다. ---「저자서문」 중에서 애플의 아이폰이 촉매가 돼 시작된 스마트폰으로의 대변혁은 모바일 업계를 뒤흔들기에 충분했다. 너무도 급작스럽게 스마트폰이 대세가 되면서 휴대기기에서 사용하는 브라우저도 WAP 브라우저에서 웹킷 기반의 모바일 웹 브라우저로 변경됐다. 기존 WAP 브라우저를 답답해하던 사용자들은 모바일 기기에서 PC 기반의 브라우저 수준으로 지원되기를 원했으며, 모바일 웹 브라우저의 선두에 있던 웹킷 기반의 브라우저인 iOS 사파리와 구글의 크롬 브라우저가 이런 사용자 요구를 만족시키며 모바일 브라우저 시장을 양분해 WAP 브라우저 시장을 빠른 속도로 잠식했다. 이들 웹킷 기반의 브라우저를 개발하는 오픈 소스 프로젝트는 웹 표준화 작업에 적극 참여하고 있을 뿐만 아니라, 표준으로 아직 확정되진 않았지만 HTML5와 CSS3 같은 새로운 시도들을 웹 표준 사양으로 제안하고, 먼저 웹킷에 적용함으로써 웹 표준에 관해서는 가장 선두에 서 있다. 이 글을 쓰는 지금 이 순간에도 새로운 시도들이 추가되고 있다. 그렇기 때문에 최신 브라우저와 해당 기능을 원하는 많은 기업의 요구 사항을 만족시키기 위해 무료 오픈 소스인 웹킷을 사용하지 않으면서 최신 웹킷 브라우저 수준의 모바일 브라우저를 개발하는 것은 비용 측면에서도 더 이상 경쟁이 될 수 없다. 이제 웹킷 브라우저 기능을 사용하려는 사람은 누구나 오픈 소스를 가져와서 브라우저 기능을 제공할 수 있게 됐기 때문이다. 그렇다고 단점이 없는 것은 아니다. 웹킷은 매일 개발자 버전을 만들고 있으며, 길지 않은 주기로 릴리스 버전을 찍어내고 있으며, 한 번 내려받은 버전으로 작업하더라도 금세 새로운 버전이 나오기 때문에 새 버전과 이전 버전을 맞춰야 하는 단편화 문제가 발생한다. 검증 측면에서도 이전 버전을 검수했다 하더라도 새로운 버전이 나오면 모든 검수를 다시 해야 하기 때문에 개발 비용보다는 검수 비용이 많이 들어가는 구조가 될 수 있다. 따라서 웹킷을 사용할 때 어느 버전의 어느 기능을 특히 중요하게 볼지, 업그레이드 계획에 대해서 어떤 정책을 가지고 접근할지를 미리 정해놓고 진행하는 것이 최소한의 개발 비용으로 웹킷 브라우저를 사용할 수 있게 하는 방안이 될 것이다. 앞에서 말했듯이 웹킷에 대한 지식을 얻는 것은 비단 특정(웹킷) 브라우저에 대해 공부하는 개념이 아니다. 웹킷은 웹 표준을 선도하고 있으며, 여러 표준 협의회와 소통하면서 새로운 표준을 정의하고 그것을 웹킷에서 지원하게 한다. 따라서 웹킷에 대해 안다는 것은 세계적으로 제일 앞선 웹 표준을 따라간다는 것과 같은 의미다. ---「옮긴이의 말」 중에서 |
출판사 리뷰
|
HTML5+CSS3 반응형 웹 표준 사이트를 만들고 검증하는 가장 손쉬운 방법!
구글 크롬, 애플 사파리가 선택한 오픈소스 웹브라우저 렌더링 엔진, 웹킷 가이드 웹킷을 알면 웹의 미래가 보인다. 구글 크롬과 애플 사파리의 핵심 기술이자 사실상 표준인 가장 강력한 웹브라우저 렌더링 엔진인 오픈소스 프로젝트 웹킷(WebKit)에 관한 국내 최초 개론서. 웹킷이 무엇이며, 어떻게 활용되는지를 살펴보고, HTML5와 CSS3로 만드는 반응형 웹 표준 사이트를 만들고 검증하는 방법을 배운다. 또한 캔버스와 SVG의 개념, iOS와 안드로이드용 모바일 웹앱을 만드는 방법도 익힐 수 있다. 웹표준과 반응형 웹 사이트를 만들어야 하는 웹 개발자와 디자이너는 물론이고 웹사이트와 브라우저 품질을 검증하고 테스트하는 담당자까지, 미래형 웹을 지향하는 일을 하는 이라면 모두 읽어야 한다. 웹킷과 웹킷 기반 브라우저의 기능, 웹표준 사이트 제작과 검증 방법, 그리고 웹의 미래까지를 꿰뚫는 책이다. 이 책에서 다루는 내용 ■ 외부 이미지 대신 CSS3 속성을 이용한 스타일링 옵션 확장 ■ 마크업에 클래스와 아이디의 필요성을 줄이는 고급 CSS3 선택자 사용 ■ 비디오와 오디오 태그 마크업을 이용한 미디어 임베드 ■ 캔버스와 SVG로 만드는 놀라운 2D와 3D 그래픽 작업 ■ 풍부한 웹 폼 생성을 위한 HTML5 폼 요소 사용법 ■ iOS와 안드로이드 앱의 룩앤필을 흉내 낼 수 있는 웹 앱 만들기 ■ 가속도계와 지오로케이션 지원 같은 모바일 디바이스 하드웨어 기능 활용 ■ 브라우저 간 호환성 문제의 쉽고 빠른 해결법 ■ 웹킷의 최적화 기술을 통한 성능 개선 이 책의 구성 1부: 웹킷의 기초 1부에서는 엔진이 어떻게 발전했는지뿐만 아니라 어떤 플랫폼과 디바이스에서 웹킷을 사용하는지를 살펴보고, 웹킷의 간단한 역사부터 설명한다. 그리고 웹킷 개발에 필요한 다양한 브라우저와 모바일 디바이스 에뮬레이터 설치 등 컴퓨터 환경 설정 방법도 배운다. 각각 이런 환경 안에서 자바스크립트 버그를 해결하고 찾아내기 위한 툴 사용법도 설명한다. 실시간 스타일링 옵션을 테스트하고, 웹 사이트의 성능을 확인한다. 마지막으로 인터넷 익스플로러와 파이어폭스처럼 비 웹킷 브라우저용 테스트 환경을 설정하는 방법에 대해서도 살펴본다. 2부: 웹킷에서 지원하는 CSS3 2부에서는 스타일 능력을 확장하고 외부 이미지에 대한 의존성을 줄이기 위해 다양한 CSS3 프로퍼티를 사용하는 법을 알아본다. 웹킷은 현대 브라우저에서 다양한 CSS3 프로퍼티를 지원하도록 혁신했고, 다양한 실험적인 스타일 옵션을 꾸준히 개발하고 있다. 고급 CSS3 선택자가 마크업에서 id와 클래스가 필요한 상황을 줄이고 어떻게 요소를 더 잘 선택하게 하는지도 알아본다. 마지막으로 필요한 곳에서 어떻게 네이티브 지원을 사용할 수 있는지, 그리고 구 버전 브라우저용으로 대안을 사용하는 법을 포함, CSS3 프로퍼티와 선택자를 지원하는 브라우저 간 호환성에 대해 배운다. 3부: 웹킷에서 지원하는 HTML5 3부에서는 다양한 HTML5 기능을 배운다. 먼저 오디오와 비디오 태그를 이용해서 브라우저에 직접 미디어를 임베드하는 방법을 알아본다. 쉽게 사용할 수 있고, 더 많은 상호 작용을 하는 풍부한 웹 폼을 만들기 위해 HTML5 form 요소를 사용하는 방법을 배운다. 마지막으로 HTML5 canvas와 SVG를 써서 복잡한 모양을 그리는 방법도 알아본다. 이런 고급 요소를 통해 2D와 3D 장면을 그리고, 플래시처럼 멋진 애플리케이션을 만들 수 있다. 4부: 모바일 웹킷 4부에서는 다양한 안드로이드폰과 태블릿, 아이폰, 아이패드용 웹 앱을 개발하는 다양한 기술을 논의하는 웹킷의 모바일 버전에 대해 설명한다. 가속도계와 터치 스크린, 지리 정보 같은 디바이스의 독특한 기능을 활용하는 방법에 대해서도 알려준다. 또한 어떻게 네이티브 iOS와 안드로이드 앱의 UI를 흉내 내는지 설명한다. 센차 터치 같은 자바스트립트로 인터넷에 연결하지 않고도 웹 앱이 오프라인으로 접속될 수 있는지에 대해서도 살펴본다. 마지막으로 폰갭 프레임워크와 이미 잘 알고 있는 HTML, CSS, 자바스크립트를 써서 완벽한 기능을 하는 네이티브 앱을 만드는 방법을 배운다. 5부: 웹킷 파고들기 1~4부와 마찬가지로 중요한 5부에서는 속도 향상을 다룬다. 최적화뿐만 아니라 모든 브라우저에서 성능을 개선할 수 있는 일반적인 방식의 좋은 예제를 검토한다. 또한 웹킷이 페이지를 그리는 방법에서 가질 수 있는 장점을 사용해 웹킷에 특화된 최적화 기술을 배운다. 마지막으로 웹과 웹킷의 미래와 전망을 살펴보고, 웹킷 코어에 패치와 버그 리포트를 올림으로써 웹킷 프로젝트에 기여를 할 수 있는 방법도 알아본다. |
