HTML5 Boilerpate가 탄생 1주년을 맞아 2.0으로 갱신되었다.

눈에 띄게 바뀐 점이라면 모든 스타일을 기본적으로 밋밋하게 밀어버리는 CSS의 불도저라고 볼 수도 있는 일반 CSS Reset 스타일시트를 버리고 normalize.css로 갈아탄 것. 브라우저별 공통분모는 건드리지 않고 차이를 보이는 놈들만 꼭 집어서 일관성 있게 바꿔준다.
다음 링크로 가면 예전 Reset CSS 스타일을 쓴 것과 새로운 nomalize 스타일을 입힌 후 바뀐 각 element의 차이점을 확인해 볼 수 있다. – HTML5 Boilerpate CSS 변화로 각 엘르먼트의 기본 스타일 차이점

또, Build Script에는 offline 앱을 위한 appcache manifest 파일 자동 생성 기능도 새로 추가되었는데, 빌드 스크립트를 쓰지 못할 상황이라면 사이트 주소만 입력해주면 자동으로 해당 사이트의 appcache 파일을 생성해주는 Cache Manifest Validator도 유용할 것이다. 이 사이트에선 Textmate Bundle도 함께 제공하고 있음.

그리고 이미 예상된 것이지만, 이제 기본적으로 IE6 사용자에겐 Chrome Frame 설치를 권고하게 된다.

더불어 Modernizr 2 안에 respond.js도 함께 추가되면서 요즘 새로 시작되는 웹 프로젝트에는 거의 필수가 되어버린 Responsive Web Design과 'Mobile First' 디자인을 적용해 볼 수 있는 기본 밑바탕도 마련되었다.

보통 Safari(WebKit)에서 "View Source"로 열린 창은 syntax highlighting을 지원하지 않고 line numbers도 표시되지 않는다. 물론 Web Inspector가 보여주는 소스를 훑어볼 수도 있지만, 중첩된 DOM tree를 일일이 열어서 확인하는 것도 가끔은 귀찮은 일.

이런 "View Source" 기능의 단점을 만회하려고 BetterSource Safari extension도 설치해 놨지만, 가끔 열린 페이지의 소스를 복사해놓고 수정 작업까지 하려면 글자 편집기에 바로 보여주는 기능도 요긴할 것이다. 여기에 안성맞춤으로 Safari에서 웹 페이지의 소스를 TextMate에 보여주는 요령을 발견. 글 마저 읽기 »

새로 문을 연 TextMate 팁 소개 사이트에 소개된 요령으로, 터미널에서 다음과 같은 명령으로 시작 언어(Syntax)를 원하는 것으로 바꿀 수 있다.

defaults write com.macromates.textmate OakDefaultLanguage [UUID]

UUID 부분은 번들마다 고유의 것을 가지고 있는데, 해당 번들을 "패키지 내용 보기"로 열고 Syntaxes 폴더 안에 있는 plist 파일을 열면 UUID 값을 알아낼 수 있다.

개인적으로 HTML5 번들의 것을 기본으로 지정해 두었는데, 해당 명령은 다음과 같다.

defaults write com.macromates.textmate OakDefaultLanguage 6F87DAE1-56E0-4193-A940-8D68BC76874C

Change Textmate startup syntax 요령 설명 동영상

TextMate에서 CSS 코딩을 하다 보면, HTML5에서 새로 소개된 elements를 인식하지 못해서, syntax coloring을 제대로 안 해주는 아주 사소한 문제가 있다.

이 문제를 수정하려면, TextMate.app/Contents/SharedSupport/Bundles/CSS.tmbundle/Syntaxes/CSS.plist 파일을 열고 Root>patterns>Item 0>patterns>Item 1 속에 있는 match 정규식을 다음처럼 수정해주면 된다.

\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|menu|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|source|span|strike|strong|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video|wbr)\b

각 브라우저별 CSS3 properties의 사용 용법이 서로 다르고, 그래서 모두한테 적용하기가 번거롭다는 점 때문에 CSS3 사용을 주저할 이유가 없어졌다. CSS3 Please TextMate bundle만 설치해놓고, tab trigger만 당기면 너무나 간단할 일이 되어버렸기 때문이다.

snippets은 CSS3, Please! The Cross-Browser CSS3 Rule Generator에서 따온 것으로, 현재 다음과 같은 CSS3 snippets을 제공한다:

• border-radius (borderrad)
• box-shadow (boxshadow)
• rgba (rgba)
• background-gradient (bggradient)
• transition (transition)
• rotate (rotate)
• font-face (fontface)

앞으로, background-gradient에 방향 옵션(linear/radial)을 지정할 수 있는 기능도 추가될 예정.

CSS3 Please!

아무래도, 이렇게 놓고 보면 WebKit 엔진을 사용하고 있는 브라우저들(Safari, Google Chrome)에서 보는 것이 제일 예쁘고 CSS3 지원도 가장 앞서 있음을 알 수 있다. 다른 브라우저들의 지원 상황에도 가속도가 붙길 바라며, CSS3 많이 사용해 주세요!