웹표준의 모든것 : 웹디자인 2.0 고급 CSS

Posted by EveR™

이번엔 초보,고수 가리지 않고 웹표준 관련된 무언가를 하시는 분들은 꼭 한번쯤은 보셨으면 하는 괜찮은 책을 소개하려고 합니다. 바로 방탄웹을 출판한 에이콘 출판사에서 2008년 1월에 출판한 “웹디자인 2.0 고급 CSS”라는 책을 소개하고자 합니다. 이 책은 HTML5가 나오기 전에 출판된 책이지만 이 책을 제대로 공부하게 되면 추후에 HTML5를 공부할 때 HTML5에 대해 훨씬 쉽게 이해할 수 있다고 장담드릴 수 있습니다. 그리고 이 책을 공부하게 된다면 공부하기전 보다 훨씬 깔끔하게 코딩할 수 있는 능력이 생기게 된다고 장담드릴 수 있습니다. 저도 이 책을 공부하고 나서 비로소 div와 span의 사용을 극도로 축소한 “시멘틱“한 UI를 설계할 수 있게 되었으니깐요.

웹디자인 2.0 고급 CSS 스크린샷
웹표준의 모든것이 담겨 있는 “웹디자인 2.0 고급 CSS”

첫번째 파트에서는 고급CSS에 대한 간단한 소개가 나와있고 컨텐츠 중심의 디자인 및 시멘틱 마크업에 대한 설명이 나와 있으며 마지막엔 옳바른 li사용법에 대해 나와 있습니다. 첫파트만 제대로 공부해도 웹표준 코딩에 대한 옳바른 지식을 가질 수 있게 됩니다. 첫파트의 핵심부분은 컨텐츠 중심의 디자인 기법과 시멘틱 마크업에 대한 설명인거 같습니다. 이 두가지에 대해서는 반드시 여러분들이 직접 검색해보시거나 이 책을 통해 직접 공부하셔서 알아보시기 바랍니다. 여태껏 몰랐던 새로운 사실들을 알게 될 것입니다.

두번째 파트에서는 효율적인 레이아웃 설계방법 및 UI 설계방법이 나와있으며 위지윅 에디터의 문제점을 지적하고 있습니다. 그 밖에 효율적인 코딩방법 및 코드관리 방법에 대해 잘 나와 있습니다. 두번째 파트에 나와있는 예제들을 따라 해보시다 보면 웹표준과 웹접근성을 고려한 레이아웃을 제작하는데 있어서 정말 큰 도움이 되리라 생각합니다. 이 책의 전반적인 흐름 특성상 설명위주로 되어 있으나 도중에 나와 있는 예제들도 무심코 지나치지 마시고 꼭 따라 해보셨으면 좋겠습니다. 두번째 파트를 끝낼 쯤 무렵엔 이 책을 덥고 실전에 돌입하고 싶은 욕망이 들겠지만 효율적인 웹디자인을 하기 원한다면 인내심을 가지고 세번째 파트로 넘어가주셨으면 좋겠습니다.

세번째 파트에서는 그리그 기반의 웹디자인 기법, 일상생활에서 얻는 웹디자인에 대한 영감, 웹에서의 예술 활동, 마지막으로 웹디자이너들의 옳바른 발전 방향에 대해 잘 다루고 있습니다. 특히 화면해상도에 따른 효과적인 영역 분할에 대해 잘 나와 있으며 일상생활과 웹디자인을 접목시키는 방법도 흥미롭게 소개되었습니다. 그리고 웹디자인에 대한 옳바른 개념과 웹디자이너들의 옳바른 발전 방향에 대해 언급하고 있습니다. 세번째 파트가 끝날 때 쯤되면 여러분들은 웹표준 레이아웃을 설계함에 있어 절대적인 자신감을 갖게 될 것입니다. 첫번째 파트부터 세번째 파트까지 제대로 마스터 하게되면 어느세 자신도 모르게 UI작업만큼은 고수반열에 올라가 있지 않을까 조심스럽게 생각해봅니다.

마지막 파트인 네번째 파트에서는 float를 최소로한 CSS 레이아웃 기법과 CSS3에 대해 자세히 소개하고 있습니다만 저는 이 네번째 파트는 보지 않고 이 책을 덥허버렸습니다. 첫번째 이유는 이미 전에 공부했던 Head First HTML width CSS&XHTML을 통해 기본기를 제대로 다져놨기 때문에 float를 최소한으로 사용하는 방법을 알고 있었으며 CSS3같은 경우 2008년~2009년 당시엔 거의 지원이 되지 않았기에 나중에 잘 지원하기 시작했을 때 조금씩 공부해보겠다는 생각으로 그냥 넘겨버렸습니다. 하지만 HTML5와 CSS3의 지원이 확대되고 있는 지금은 이 네번째 파트도 이제 지나칠 수 없는 부분이 된거 같습니다. 여러분들은 마스터하는 수준이 아니더라도 꼭 한번 보시길 바랍니다.

웹퍼블리셔가 되겠다는 꿈이 있다면 이 책을 반드시 공부해시보시기 바랍니다. 이 책을 제대로 공부하게 되다면 진정한 웹퍼블리셔가 될 수 있는 발판이 마련된다고 자신있게 말씀드릴 수 있습니다. 이상 허접한 리뷰를 마치겠습니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다