Smashing Magazine은 디자인관련 자료와 디자인 영감을 얻는데 최고의 사이트 입니다. 웹의 디자인적인관점(UX, UI, design 등)의 포스팅이 수시로 올라옵니다. 물론 프로그래밍 관련 자료도 올라옵니다(ajax 등) 디자이너라면 반드시 필수로 구독해야하는 블로그입니다. 물론 웹개발자들도 포함입니다.
javascript에 대한 모든 자료를 다룹니다. prototype, jquery, dojo, YUI, ext 등 자바스크립트 프레임워크에 관련된 자료도 발빠르게 올라옵니다. 하루에 5~10개의 포스팅이 올라오는데요. 자바스크립트 개발자라면 꼭 구독해야하는 블로그입니다.
A List Apart는 많은 범위에서의 주제를 다루고 있습니다. 물론 IT쪽 관련이지요. 물론 다른 어떠한 "이슈"에 관해서 토론되는 곳이기도 하지만 웹퍼블리셔, 웹표준에 관심이 많으신 분이라면 http://www.webstandards.org/ 와 함께 구독하셔야 할 블로그입니다.
웹퍼블리싱을 하시는 분들이라면 자신이 만들어 놓은 reset stylesheet는 모두들 가지고 계실겁니다.
그것을 기본으로해서 프로젝트 마다 적절하게 커스터마이징해서 사용하고들계시죠?
reset stylesheet란? 브라우저마다 해당 브라우저가 특정 엘리먼트를 브라우저를 통해서 보여지는것에 차이가 조금씩 있습니다. padding이나 margin값이 틀리기도 하고, text-style이 다르기도 합니다. 그렇기 때문에 좀더 편하게 크로스브라우징을 고려하여 웹퍼블리싱을 하기위해서는 가급적 많은 브라우저에서 비교적 동일한 VIEW를 나타낼수 있게끔 reset stylesheet를 작성하여, 엘리먼트들의 기본 표현속성값을 일치시키는 것을 말합니다.
이 reset stylesheet는 web statandard를 위해 왕성히 활동하고 계시는 eric meyer가 제시하는 것입니다.
eric meyer의 이런 포스팅이 올라올때마다 이에 대해 갑론을박하는 많은 코멘트들이 따르는 것을 보아도 알수 있듯이
reset stylesheet에 정답은 당연히 없다고 생각합니다.
웹퍼블리셔마다 자신이 프로젝트를 수행하면서 몸에 베인 자신의 마크업스타일, CSS작성 스타일에 따라 얼마든지 달라 질 수 있는 부분입니다.(물론 사내 CSS가이드 라인이 있는 회사도 있죠.)
eric meyer의 reset style에 대해 제 개인적인 경험에 비추어 말씀드리자면
제가 프로젝트를 하면서 다른분들의 reset style을 볼때
* 선택자에 line-height에 절대값(18px, 16px 등등) 을 적용하고 img 엘리먼트에 vertical-align:middle을 적용하시는 분들을 많이 보았습니다.
하지만 이런경우에는 이미지의 세로크기가 line-height보다 큰경우에 이미지가 완전히 보이지 않습니다.
그렇기 때문에 vertical-align 값을 다시 조정하거나 line-height의 수치를 조절해야 정상적으로 보이게 됩니다.
또한 글자크기가 line-height크기를 초과했을때 글자 역시 하단부분이 잘리는 현상이 나타납니다.
그래서 저는 vertical-align:middle이라는 universal한 속성을 사용하지 않고 vertical-align:baseline을 이용하고, line-height에는 상대크기값을 (대게 1또는 그 이상의 값 1.2, 1.4)을 디자인가이드라인에 맞춰서 사용하는 편입니다. 이렇게 하면 해당 엘리먼트에 수치를 곱한 값이 line-height가 되어 글자 하단 잘림현상이 나타나지 않습니다.
firebug가 나타나서 위상이 많이 떨어졌지만 그래도 유용한 web developer 입니다.
css를 끄거나 쿠키를 모두 삭제하거나 페이지의 그리드를 본다거나
페이지의 정보를 본다거나, 브라우저의 사이즈 조절, 이미지 모두 끄기
아무튼 잡다한 모든 기능이 다들어있습니다.
참고 : Ctrl + Shift + h 사뿐히 눌러주시면 해당페이지의 validation 을 체크합니다~ Ctrl + Shift + h는 url을 통해서 w3c validator로 페이지의 validation을 체크하는데요. 보안이 요구되어 외부의 w3c validator가 접속할수 없는 페이지의 HTML validation을 체크하려면 Ctrl + Shift + A 를 누르시면 해당 웹페이지의 HTML이 w3c validator로 전송이 되어 validation 체크를 하실수 있습니다.
모질라 개발라 레퍼런스에 2000년 4월 21자로 마지막 업데이트 된 문서입니다. 효과적인 CSS작성이라는 제목을 달고 있는 문서인데요.
CSS 작성 규칙을 크게 네가지
ID Rules, Class Rules, Tag Rules, Universal Rules
로 분류했습니다.
그리고 다음의 가이드라인을 제시했네요.
Avoid Universal Rules!
Don't qualify ID-categorized rules with tag names or classes
Don't qualify class-categorized rules with tag names
Try to put rules into the most specific category you can!
Avoid the descendant selector!
Tag-categorized rules should never contain a child selector!
Question all usages of the child selector!
Rely on inheritance!
Use -moz-image-region!
모든 가이드라인이 말하는 중심내용은 다음의 문장이 압축해서 말해주고 있습니다.
The fewer rules that you even have to check for a given element, the faster style resolution will be. - 해당 엘리먼트에 대해서 체크해야할 적은 규칙을 가지고 있을수록 더 빠르게 표현될것이다
그러니깐 복잡하게 여러뎁스를 거치는 하위선택자를 따라서 해당 엘리먼트에 대한 CSS를 적용시킨다거나 그렇게 하지말고 직접적으로 해당 엘리먼트의 ID 또는 class를 사용하여 직접 그 선택자를 활용하여 CSS를 작성하라는 말이네요.
1. 파이어폭스를 사용해라(파이어버그,웹디벨로퍼 플러그인 활용) 2. 호환성 3. 심플함 4. 자바스크립트를 원한다면 jquery를 사용해라 5. ajax는 적재적소에 사용 6. 검색엔진은 구조화된 코드를 좋아한다. 7. table 말고 div를 사용 8. 인라인스타일을 적게사용 9. 적당한 주석 10. 웹표준에 대한 인식
HTML과 CSS를 분리하여 사용한 사례에서도 얼마나 다양하고 멋진 디자인이 나오는지 알수 있다. 꼭 CSS 디자인이라는 점을 부각하지 않더라도 디자이너에게 충분히 디자인적 감성을 자극할만한 디자인들이다. 외국의 잘된 웹사이트디자인을 보자면 우리나라에서는 한글 폰트의 부재가 얼마나 안타까운지 다시한번 느끼게 된다.
10. 줄바꿈을 줄이기 9. 사소한 주석 피하기 8. 3글자로 표현할수 있는 컬러는 3글자로 쓰기 7. 속성값이 0 일때 px 단위 제거하기 6. margin과 padding 한줄로 작성하기 5. background 정의 한줄로 하기 4. font 정의 한줄로 하기 3. border 정의 한줄로 하기 2. 불필요한(사용하지 않는) CSS 제거하기 1. PHP를 사용하여 CSS 파일 압축전송하기
