스타일 시트 CSS 접두어 webkit, moz, ms, o 의미

스타일시트 CSS

스타일 시트 CSS 접두어 webkit, moz, ms, o 의미

 

환경: Eclipse Mars

 

웹에서 CSS 를 적용할 때 webkit, moz, ms, o 접두어가 속성앞에 붙은 것을 종종 보실 수 있을 겁니다. 크로싱 브라우저에 맞춰서 작업하려면 이것이 필요합니다. 주로 쓰이는 브라우저는 IE, 크롬, 파이어폭스, 오페라, 사파리가 있는데 우리나라에서는 크롬과 파이어폭스만 적용하면 무난하게 처리가 가능합니다.

 

CSS 속성 중에 접두어를 붙어야 되는 경우가 있습니다. 각 접두어의 의미를 알아 보겠습니다. 쓰는 방법은 속성 앞에 붙이면 됩니다.

 

l  -webkit- : 구글, 사파리 브라우저에 적용

l  -moz- : 파이어폭스 브라우저에 적용

l  -ms- : 익스플로러에 적용, 보통 생략합니다.

l  -o- : 오페라 브라우저에 적용

 

아래 샘플은 그라데이션 속성을 브라우저 별로 나눈 것입니다. 접두어를 써야 되는 대표적인 속성입니다. 참고로 webkit 은 크롬과 사파리가 채용한 웹 브라우저 엔진 이름입니다.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
     /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, red , blue);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(right, red, blue); 
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(right, red, blue);
    /* Standard */ 
    background: linear-gradient(to right, red , blue); 
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

 

스타일 시트 CSS 접두어 webkit, moz, ms, o 의미

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군