CSS3PIE - CSS3 속성 크로스브라우징

둥근 모서리, 부드러운 그림자, 그라데이션을 구형 브라우저에서 구현해주는 PIE에 대하여 알아봅니다.

CSS3PIE 소개

PIE는 몇가지 유용한 CSS 장식 속성들을 IE6~9에서 렌더링 될 수 있게 만든다.

HOME

http://css3pie.com

DOWN

Download the PIE distribution

PIE가 지원하는 속성

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

또한, PIE는 이미 기본적으로 다른 기능을 지원하는 IE9에 border-image 속성과 linear-gradient 속성에 대한 지원을 추가한다.

CSS3PIE 사용법

위의 다운로드를 이용하여 파일을 다운로드받고 압축을 해제후 웹서버에 업로드한다.

아래에서는 둥근 모서리를 적용하는 방법을 알아본다. 우선은 일반적인 방법으로 border-radius 속성을 적용시킨다.

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

PIE를 적용시킨다.

behavior: url(path/to/pie_files/PIE.htc);

위의 경로부분은 CSS 파일을 호출한 경로가 아닌 보고 있는 HTML 파일에 상대적인 경로이다.

데모와 예제들를 확인하도록 하자.

서버에서 .htc 파일에 대한 content-type 에 대한 설정이 되어있어야 한다.

AddType text/x-component .htc