CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다.

하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다.

PIE 다운로드

다음 링크에서 PIE를 다운로드 받습니다.

http://css3pie.com/download/

업로드

압축을 풀면 여러 개의 파일이 있는데, 그 중 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.

Related Posts

CSS / Flex / 정가운데 배치하기

CSS / Flex / 정가운데 배치하기

justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / radial-gradient - 원형 그라데이션 효과 만들기

CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 문법 radial-gradient( shape size at position, color1, color2, ..., color3 ) shape : 원 모양인지 타원 모양인지 정합니다. size : 크기를 정합니다. position : 중심의 위치를 정합니다. color : 색을 정합니다. 아래의 예제로 하나씩 알아보겠습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: ...

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...

CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...

CSS / Grid / grid-auto-rows

CSS / Grid / grid-auto-rows

그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...

CSS / table-layout / 표(table) 크기 고정시키기

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...

CSS 강좌