반응형 웹디자인 Ethan Marcotte

이단마콧이 지은 반응형 웹디자인책에 대해서 이야기 하려 합니다.

저는 개인적으로 한달에 5권 ~ 15권의 책을 읽습니다.

그것도 순전이 웹디지인에 관련한 책만 봅니다. ㅎㅎㅎㅎ

요새 대세는 아무래도 html5, css3에 힘입어 반응형 웹디자인이라는 화두입니다.

좀 잘나간다 하는 사이트는 반응형 웹디자인으로 변형을 합니다. 그것도 그런것이 바로 제일 강력한 모바일때문입니다.

반응형 웹디자인 책은 재미있는 글로 꾸며졌습니다.

첫장을 넘기면서 출간에 앞서라는 곳을 읽다가 잠시 생각을 하게 됐습니다. 

바로 웹액츄얼리 북스팀 때문인데요....

이런 문구가 있습니다.

조직을 꾸려 웹사이트를 제작해왔습니다. 이책을 읽어보시면 어떻게 그리고 왜 이런 방법으로 웹사이트를 제작해야 하는지 분명한 이유를 알 수 있을 것입니다.....

이건 웹액츄얼리 북스팀이라는 곳입니다. 이곳에서 출판한 책은 제가 다 읽었습니다.

아마도 웹디자인을 하는 사람이라면 한 두권쯤은 읽었을거라 생각됩니다.

외국도서를 한국어로 번역한 것이 많이 있는데요. 웹디자인이라는 것이 신기술이 많이 필요합니다.

그 신기술이 외국인에 의해서 발견, 제작, ...되어서  우리나라에 들어오는 경우가 대부분입니다.

그에 한걸음을 걷고 있는 곳이 바로 웹액츄얼리 북스팀이 아닌가 개인적으로 생각해봅니다.

반응형 웹디자인 책에서 이야기 하느것은 반응형 디자인에는 가변적인 그리드 기반의 레이아웃, 가변적인 이미지와 미디어, 미디어쿼리 등입니다.

그중에서 가장 힘주어 말한것이 또는 제가 느낀것은 바로 target / context = result 입니다.

이 이야기는 뭐냐??

브라우져에서 기본으로 지원하는 폰트 사이즈는 font-size: 100% 라고 했을때 16px 입니다.

즉 16px 의 글꼴은 어느 브라우져에서나 동일한 크기라는 뜻입니다.

예를들어 h1의 폰트 크기가 24px 라고 햇을때 반응형에 반응하는 폰트 표기는 em 인데 , 이걸 수치로 표현하면,

24 / 16 = 1.5 라는 결론이 나옵니다.

즉 h1 { font-size: 1.5em; } 

이것이 바로 반응형에 맞는 계산법이자 표현법이라는 이야기 입니다.

폰트 크기는 바로 모든 곳에 영향을 미칩니다. 

바로 마진이나 패딩처럼요. 이는 곳 레이아웃을 잡는데도 영향을 미칩니다.

레이아웃을 잡을때 우리는 1024해상도에도 무리없이 보여지게 960px 를 잘 사용합니다. 스크롤바까지 계산해서 이렇게 사용합니다.

960px 를 100% 잡고 화면에서 잘보일려면 전체폭을 90%로 잡습니다. 이건 책에서는 대략 그렇다고 합니다.

이것이 중요한것이 아니라 그 다음이 중요합니다.

컨테이너의 크기가 이제 90%로 정햇고, 그 안에잇는 div 여기서는 .blog 라고 합니다.

.blog { width: 900px; } 입니다.

이걸 반응형으로 계산한다면 이렇습니다.

900 / 960 = 0.9375

여기서 960은 전체 컨테이너의 너비 입니다. 

그래서 그 안에 있는 .blog 의 너비를 위에서 말한 target / context = result 로 계산한것입니다.

즉,

반응형으로 .blog의 너비를 다시 표현한다면 .blog { width: 93.75%; } 로 나옵니다.

반응형 웹디자인이라는 책에서 말한 핵심은 이 계산법입니다.

그 다음이 바로 img 의 너비입니다.

이것도 간단이 말하자면 img { max-width: 100%; } 입니다.

웹엑츄얼리에서 발간한 반응형 웹디자인이라는 책은 꽤 가볍습니다. 그리고 앏습니다.

그래서 들고 다니면서 볼 수 있다는 장점이 있습니다.

단점은 그닥 많은 내용이 없다는 점입니다.

반응형 웹디자인 책은 18.000 원입니다.

그다지 싼것은 아니라고 생각이 드는군요.

하지만 웹디자인 하는 사람이라면, 그리고 반응형 웹디자인에 대해서 알고 싶은 분이라면 권합니다.

[일상/도서] - HTML5와 CSS3로 작성하는 반응형 웹 디자인