CSS 완벽 가이드 - CSS의 바이블 책 이야기


CSS 완벽 가이드 - 10점
에릭 마이어 지음, 남덕현 외 옮김/위키북스

가히 CSS의 바이블이라 불리울만 한 책이다.
"완벽 가이드"라는 책 제목에 걸맞게 완벽한 해설을 목표로 한 책이다.
다른 책들이 대충 다루거나 혹은 모호하게 다루는 CSS 개념을 이렇게 명쾌하게 풀어낸 책은 이것이 유일하지 않나 싶다.

허나, 치명적 단점이 있는데, "재미없고, 불친절하다"는 점이다.
CSS 입문자가 읽을 책은 결코 아니므로 입문은 얇고 쉽고 재미있는 책으로 하되 결국엔 이 책을 꼭 보길 권한다.

아래는 내 유저스토리북 CSS 완벽 가이드에 정리하던 내용을 가져왔다.

62page 가상 class와 가상 요소(pseudo element) 선택자를 이용하면 매우 흥미로운 일들이 벌어진다. 이 선택자는 문서 내에 반드시 존재하지 않아도 되는 구조에 스타일을 부여하거나, 특정 요소 또는 문서 자체의 상태를 추정해서 만들어진 유령(phantom) class에 스타일을 지정할 수 있게 해준다.
--> pseudo class 를 이렇게 명쾌하게 설명한 책을 처음 보았다. 에릭 마이어를 괜히 CSS의 구루로 칭하는게 아닌가 보다. 그 외에도 다른 책들에서는 애매모호하게 다루는 개념들을 이 책에서는 명쾌하게 설명하는 경우가 꽤 있다.

79page 특성 값 0,0,1,0은 0,0,0,13 보다도 구체성이 높다.
--> 다른 책들(CSS 비밀 매뉴얼 포함)은 선택자의 우선순위를 100,10,1 의 총 합인 것 처럼 설명하고 있다. 그러나 이 책 "CSS 완벽 가이드"에 따르면 그것은 잘못된 설명이다.
0,0,1,0 은 다른 책의 설명에서는 10이고 0,0,0,13은 13으로 나타내지므로 후자가 구체성이 더 높아서 그것이 선택될 것 같다. 하지만 아니다!
이 책을 보지 않았다면 완전히 착각하고 있었을 듯하다.

204page 양쪽 마진의 길이가 같도록 설정하는 것은 요소를 가운데로 정렬시키는 방법인데, 이는 text-align을 사용하는 것과 대조된다(text-align은 블록 레벨 요소 안에 있는 인라인 콘텐츠에만 적용되기 때문에 요소의 text-align을 center로 지정해도 가운데로 정렬시키지는 못한다).
--> margin을 auto로 지정했을 때 왜 가운데로 정렬이 되는지에 관해 설명하는 부분이 이 앞에 나온다. 지금까지 이렇게 명쾌하게 설명한 책을 본적이 없다.
또한 블록 레벨 요소을 가운데 정렬할 때 왜 text-align을 사용할 수 없는지에 대해서도 가장 간결하게 설명했다

348page 플로트된 요소는 display: block; 을 선언한 것과 동일해지지만 이를 굳이 선언해줄 필요는 없다.
--> 이 책을 읽고 처음 알았다. float 하면 block으로 변환된다는 것을.


덧글

  • 미자 2011/10/16 21:59 #

    헤...
    (...)
    좋은 책이네요 ㅎㅎㅎ
  • 몽몽이 2011/10/16 22:23 #

    하... CSS 공부하긴 해야 하는데~
    근데 뭔 말인지 어렵네요~
  • 권남 2011/10/17 08:03 #

    쉬운 책 먼저 보고 이 책 보세요~
  • Gloridea 2011/10/22 03:07 # 삭제

    CSS 우선 순위에 대해 다른 사람에게 설명을 하다가, 수강생이 "아, 올림픽의 금,은,동메달 같은 거군요!" 라고 해서 저도 매우 적절한 비유라고 감탄했습니다. 그 비유가 딱 이해하기 쉽고 좋은 것 같아요. : )
  • 권남 2011/10/22 08:49 #

    오, 괜찮은 비유네요!
※ 로그인 사용자만 덧글을 남길 수 있습니다.