CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법
CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다.
하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다.
PIE 다운로드
다음 링크에서 PIE를 다운로드 받습니다.
업로드
압축을 풀면 여러 개의 파일이 있는데, 그 중 PIE.htc를 서버에 업로드합니다.
코드 추가
예제로 원을 만들어 보겠습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>PIE</title> <style type="text/css"> #circ { width: 600px; height: 600px; margin: 20px auto; border: 5px solid #444444; border-radius: 50%; } </style> </head> <body> <div id="circ"></div> </body> </html>
IE8에서는 boder-radius를 인식하지 못해서 다음처럼 사각형으로 나옵니다.
다음처럼 behavior: url( "PIE.htc" );를 추가합니다. (경로는 업로드한 폴더에 맞게 적절히 수정하세요.)
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>PIE</title> <style type="text/css"> #circ { width: 600px; height: 600px; margin: 20px auto; border: 5px solid #444444; border-radius: 50%; behavior: url( "PIE.htc" ); } </style> </head> <body> <div id="circ"></div> </body> </html>
이제 IE8에서도 원을 볼 수 있습니다.
지원되는 속성
PIE는 border-radius만을 위한 것은 아닙니다. PIE가 지원하는 CSS3 속성은 다음과 같습니다.
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
자바스크립트 사용
PIE.js 파일을 이용하여 스크립트 방식으로 적용시킬 수도 있습니다.
이렇게 하면 CSS 파일에 일일이 코드를 넣을 필요가 없어 편하지만, 다음과 같은 단점이 있다고 합니다.
- Invoking it requires writing some JavaScript, which means your styling is scattered between CSS and JS code.
- The .js file blocks the parsing of the page while it is loading, whereas the .htc file loads asynchronously.
- You have to wait until the page's DOM has completely loaded before applying PIE.js to elements, whereas the .htc behavior applies itself while the page is still loading. This means the "flash of unstyled content" problem is much greater with PIE.js.
- PIE.js cannot automatically attach and detach itself from elements which are dynamically added to/removed from the page's DOM, so you have to write code to handle that yourself.