표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분해야 합니다.
| 접두사 | 설명 |
| -webkit- | 웹키트 방식 브라우저용(사파리, 크롬 등) |
| -moz- | 개코 방식 브라우저용(모질라, 파이어폭스 등) |
| -o- | 오페라 브라우저 |
| -ms- | 마이크로소프트 인터넷 익스플로러 |
접두사를 일일이 작성한다면?
<style>
.box:hover{
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
-ms-transform:rotate(15deg);
transform:rotate(15deg);
}
</style>
</head>
<body>
<div class="box">Mouse Over</div>
</body>이와 같이 5줄이나 써야 합니다 OMG....
브라우저 접두사 자동으로 붙이기
위와 같이 번거러운 것을 피하고자 유능하신 선배님들께서 자바스크립트로 파일을 만들어 두셨습니다.
그래서 '-prefix-free'라는 자바스크립트 파일을 이용하여 CSS3를 편리하게 사용할 수 있습니다.
동그란 다운로드 버튼을 클릭했을 때, 아래와 같이 뜬다면 당황하지 말고 마우스 오른쪽 클릭으로 다른이름으로 저장해주자.
이제 자바스크립트를 사용하여 앞선 코드를 수정해보면
<script src="prefixfree.min.js"></script>
<style>
.box:hover{
transform:rotate(15deg);
}
</style>
</head>
<body>
<div class="box">Mouse Over</div>
</body>5줄이 한 줄이 되는 마법이 펼쳐진다. awesome!! 소리질러~~
알면 알수록 빠져드는 코딩의 세계 놀랍네요.
반응형
'코딩 | 개념 정리 > HTML & CSS' 카테고리의 다른 글
| WebFX Colorpicker 사이트 이용하기 (0) | 2020.04.26 |
|---|---|
| W3C CSS 검사기 (0) | 2020.04.26 |
| Web 코딩 간 기본 상식 (0) | 2020.04.24 |
| 구글 웹 폰트 사용하기 (0) | 2020.04.24 |
| [HTML] SVG 파일을 지원하지 않는 브라우저를 위해 (0) | 2020.04.23 |
