코드쓰는사람

CSS3가 많이 사용되고는 있지만 아직도 대부분은 브라우저 확장 스펙으로 구현해야 한다. 다시 말해 -webkit, -moz 등과 같은 성가신 접두어를 붙여야 하고 여러 브라우저를 지원할라치면 코드가 지저분해지는 것도 감수해야 한다는 뜻이다. 예를 들어 #444444 부터 #999999까지 선형적으로 변하는 그래디언트 색상은 다음과 같이 작성한다.

.box-gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(to bottom, #444444, #999999);
}

딱 보기에도 답답한데, 중간 값을 하나 바꾸려고 마음먹으면 굉장히 귀찮은 일이 되기도 한다. Paul Irish가 만든 CSS3 Please!  라는 사이트는 이런 문제를 해결할 수 있는 좋은 방법 중 하나이다(참고로 Paul Irish는 HTML5 Boilerplate와 Modernizr의 개발자이기도 하다). 사이트에 접속하면 "CSS3, please!"라는 커다란 사각형이 하나 보이고 웹 페이지 나머지 부분에는 CSS 처럼 보이는 코드가 가득하다.

이 사이트에 있는 웹 페이지라고는 이 화면이 전부이다. 이제 할 일은 CSS 효과를 끄거나 켜보고([toggle rules on] 또는[toggle rules off] 링크를 클릭하면 된다) 형광 녹색으로 된 값을 바꾸면서 오른쪽 상단의 상자가 어떻게 바뀌는지 보는 것이다. 값을 수정할 때 하나의 규칙에 대한 값만 바꾸면 나머지 값이 모두 자동으로 바뀐다. 사용한 효과가 마음에 들었다면 [to clipboad]를 클릭해서 값을 클립보드에 저장한 후 원하는 곳에 붙여넣으면 된다.

만약 직접 설치해서 사용해보고 싶다면 CSS3 please의 소스를 직접 GitHub에서 내려받으면 된다. GitHub에 있는 CSS3 please 프로젝트의 주소는 https://github.com/paulirish/css3please 이다.

[adsense]