본문 바로가기
css

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기

by 지구별에 2014. 12. 22.

 

 

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기


 

지난 시간엔, ie6-8에서 html5 요소 적용하는 방법과, ie6-8을 ie9처럼 행동하게 만들기를 배웠습니다.

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

 

오늘 역시 여기에 이어지는 글입니다.

 

css3 속성들 중 박스를 꾸미는 속성 일부를 ie6-8에서 적용하는 방법입니다.

 

여러 가지 방법이 있겠지만, 가장 잘 알려진 것으로 CSS3 Pie가 있습니다..

 

http://css3pie.com

 

 

CSS3 PIE란?

 

PIE란  Progressive Internet Explorer(진보적 인터넷 익스프롤러)의 약자입니다.

 

PIE는 구 ie가 css3 속성을 표시하게 하는  IE 에 결부된 behavior 입니다.(크로스 브라우징이 아님)

 

현재 IE6부터 8까지 다음 CSS3 특징들을  일부 또는 전부 지원 합니다.

 

border-radius (축약 속성만 지원. border-top-left-radius 등은 지원하지 않음.)


box-shadow(현재 inset 키워드를 지원하지 않음)


border-image(IE6-8에서 'streth' 만 지원/ie9에서는 'repeat'와  'round' 또한 지원함)                  

 

multiple background images (여러 개의 배경 이미지 넣기)


linear-gradient as background image (배경 이미지에서 linear-gradient 적용)

 

 

IE7.js  VS  CSS3 Pie

 

IE7.js 파일(IE8/IE9.js 포함)은 IE 레이아웃 버그를 교정하고, 몇 가지 CSS3 선택자를 실행할 수 있도록 합니다.

 

하지만 CSS3 박스를 꾸미는 속성에 관한 부분은 포함돼 있지 않습니다. 

 

CSS3 PIE는 CSS3 선택자에 관한 부분은 없고, css3 속성 중 박스를 꾸미는 속성 지원이 핵심입니다.

 

그러니까 두 파일은 서로 겹치지 않게 다른 부분을 지원합니다.

 



CSS3 PIE 사용법

 

1. 아래 사이트로 이동 후 가장 최신 버전인 Download PIE 2.0 beta 1 파일을 다운받습니다.

 

http://css3pie.com/download/

 

 

 

 

2. 압축 풀기

 

압축을 풀면, pie의 세 파일이 있고(htc, php. js)

 

uncompressed가 있는데 uncompressed는  압축되지 않은 버전으로 용량이 조금 큽니다. 

 

htc 파일 vs javascrip 파일

 

 

우리가 사용할 파일은 2kb로 된 pie.htc 파일입니다.

 

 

3. pie.htc 파일을  본인 사이트에서 원하는 폴더에  업로드 합니다.

 

 

4. 적용방법 

 

우선 다음과 같은 css가 있다고 했을 때

 

div {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
     border-radius: 1em;
}

 

아래 빨간 색 코드를 추가합니다. 

div {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
     border-radius: 1em;

     behavior: url(PIE.htc);
}

 

*url() 안에 PIE.htc 파일이 있는 경로를 적습니다.

경로는 html 파일에 상대적인 주소여야 함(css 파일이 아니라)

 

 

 

 

5. css3 pie가 적용되지 않을 때

 

아래 링크  Known Issues(알려진 문제들)을 참조해 주세요.

 

http://css3pie.com/documentation/known-issues/

 

 

 

반응형

'css' 카테고리의 다른 글

[css3] gradient (linear-gradient) 사용법  (1) 2015.01.27
[CSS] @viewport rule  (2) 2015.01.15
css 길이 단위  (0) 2014.12.11
[css] height 속성  (0) 2014.12.10
[css] width 속성  (0) 2014.12.09

댓글