Dog foot print

[css] 전문가를 위한 CSS3 리뷰 본문

리뷰/기술 서적

[css] 전문가를 위한 CSS3 리뷰

개 발자국 2019. 7. 19. 19:58

이 책을 구매할 당시는 2018년 한참 css와 바닐라 js로 여러가지 토이프로그램을 만들며 실험하던 참이였다. 그러던 중 집에 쟁여놓고 사용할 만한 좋은 css 예제 책이 필요했는데 생각보다 최신 css관련 서적이 없고 내용도 html + css + javascript 섞어 놓은 책이나 초급용 책들이 대부분 이였다. 2년 넘은 책은 구입하지말라고 했었는데 마땅히 성에 차는 구성이 없으니 당시 발매한지 4년된 책을 구입하였다.

 

그게 바로 전문가를 위한 css3이다.

 

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788994774725&orderClick=LAG&Kc=

 

CSS3

『전문가를 위한 CSS3』는 CSS3를 한 단계 더 발...

www.kyobobook.co.kr

 

책에 대한 정보를 작게나마 요약하자면 다음과 같다. 

 

저자 : 스테판 그레이그 (웹 개발자 겸 디자이너 http://tangledindesign.com/page/2/) 저자 블로그인데 2015년이 마지막 게시글이다. 

 

발행사 : 비제이 퍼블릭

 

대상 : 중고급이상 

 

목차

1부. 새로운 기능 

1장. 고급 선택자 
--자식과 형제 선택자 
--속성 선택자 
--의사-클래스 
--통합 예제  
--요약  
--참고 자료 

2장. 문자를 위한 새로운 툴 
--문자 제대로 꾸미기 
--글쓰기 방식 
--시각적인 효과가 전체의 반이다 
--요약 
--참고 자료 

3장. 배경과 보더를 위한 새로운 툴 
--CSS3의 뛰어난 배경 제어 능력  
--다수의 배경 이미지 활용 
--보더를 위한 새로운 툴 
--그라디언트 
--요약 
--참고 자료 

4장. CSS 필터와 블렌딩 모드를 적용한 브라우저 
--CSS3 필터 
--블렌딩 모드 
--요약 
--참고 자료 

2부. 전환, 전이, 그리고 애니메이션 

5장. CSS3 2D 전환 
--transform 속성 
--전환 원점 
--전환을 복합적으로 결합하기 
--브라우저 지원 상황 
--요약 
--참고 자료 

6장. 전이 기능으로 2D 전환에 생동감 부여하기 
--CSS 전이 소개 
--전이 활용 
--전이와 2D 전환의 결합 
--흩어져 있는 구조의 이미지 갤러리 만들기 
--요약 
--참고 자료 

7장. 3D 전환으로 열리는 새로운 세계 
--3D 전환이란? 
--관점(Perspective)에 관한 모든 것 
--기타 전환 속성들 
--3D 전환을 사용하여 정육면체 들기 
--전이로 정육면체 애니메이션 만들기 
--3D 전환에 대한 브라우저 지원 상황 
--요약 
--참고 자료 

8장. 애니메이션 만들기 
--CSS3 애니메이션에 대해 
--CSS3 애니메이션 활용 
--단계적 향상을 위해 애니메이션 최소화하기 
--애니메이션 결합 
--CSS 애니메이션에 대한 브라우저 지원 상황 
--요약 
--참고 자료 

3부. 새로운 레이아웃 툴에 대한 이해 

9장. 다단 레이아웃 
--레이아웃 툴의 진화 
--레이아웃 솔루션의 새로운 기능 
--다단 레이아웃 소개 
--다단 레이아웃 만들기 
--다단 레이아웃에 대한 브라우저 지원 상황 
--요약 
--참고 자료 

10장. 플렉스박스 레이아웃 
--플렉스박스란? 
--새로운 플렉스박스 속성 
--플렉스박스 레이아웃 만들기 
--플렉스박스에 대한 브라우저 지원 상황 
--요약 
--참고 자료 

11장. 격자 레이아웃, 그리고 리전과 익스클루전 
--CSS 격자 레이아웃 소개 
--CSS 리전 소개 
--CSS 익스클루전 소개 
--요약 
--참고 자료 

12장. CSS 미디어 쿼리와 반응형 웹 
--반응형 웹 디자인이란? 
--미디어 쿼리를 사용하여 기기별 디자인 만들기 
--뷰포트 meta 태그 활용 
--다단 레이아웃 반응형 웹 만들기 
--플렉스박스 레이아웃 반응형 웹 만들기 
--CSS 격자 레이아웃에 대한 한마디 
--RWD의 현재 
--요약 
--참고 자료 

4부. 한계를 넘어서 

13장. 의사-요소의 창의적 활용 
--의사-요소와 의사-클래스의 차이점 
--의사-요소의 범주 
--의사-요소로 서체 개선하기 
--의사-요소를 활용한 콘텐츠 생성 
--의사-요소 그 한계를 넘어서 
--요약 
--참고 자료 

14장. 전처리기와 CSS3의 활용 
--CSS 전처리기란? 
--CSS 전처리기가 할 수 있는 일은? 
--올바른 전처리기 선택 
--전처리기의 단점에 대한 이해 
--Mixin으로 CSS3 효과적으로 활용하기 
--간단한 수식으로 비례 레이아웃 만들기 
--함수로 다이내믹한 색상 팔레트 만들기 
--전처리기에서 주의할 점 
--요약 
--참고 자료 

15장. CSS3만을 이용한 실용적 솔루션 만들기 
--CSS3만을 이용한 탭 콘텐츠 만들기 
--CSS3만을 사용하여 라이트박스 기능 만들기 
--CSS3만을 이용하여 3D 이미지 캐러셀 만들기 
--요약 
--참고 자료 

16장. CSS의 미래 
--CSS 변수 
--CSS 선택자: 레벨 4 
--CSS의 조건 규칙을 사용한 브라우저 지원 
--의사-요소: 레벨 4 
--자신의 목소리를 내라! 
--요약 
--참고 자료

 

 

저렴한 가격의 책은 아니니 조금 기대가 컷다. 아름답고 다양한 레이아웃 예제와 apple product page같은 멋진 애니메이션 예제가 가득 할 거라 생각했는데 조금 과하게 기대했던 것 같다. 

 

2부를 제외한 나머지는 mdn사이트에서 볼 수 있는 내용을 짜집기 한 것 같고 플렉스 박스같은 경우 네이버 d2의 플렉스레이아웃에 관한 글이 도움이 더 되었던 것 같다. 

 

사실 2부도 마찬가지이다. 애니메이션을 잘 안 쓰고 복잡한 css애니메이션은 창문이 열리는 듯한 애니메이션 예제가 있는데 무슨 90년대 www 보는 줄 알았다. 

 

데모파일 다운로드 하는것이 압권인데, 비제이퍼블릭 사이트에 들어가서 관리자 계정 아이디 비밀번호를 치고 들어가서 다운로드 받아야 했다. (그런데 사이트가 없어져서 안된다. )

 

 요약 : 중고급 전문 예제를 기대하고 사면 안될 책 그저 css3에 새롭게 도입된 내용들 사용법 

반응형
Comments