HTML을 적용하기 위해서는 웹브라우저마다 따로 정의를 해줘야한다.
하지만 prefix라는 자바스크립트를 이용하여 자동으로 적용해줄 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div</title>
<script src="../js/prefixfree.min.js"></script>
<style>
.box {
border: solid 5px #005500;
width: 40%;
}
/*prefix.min.js를 이용하여 일일이 나열해 줄 필요 없음*/
/*
.box:hover {
-webkit-transform: rotate(15deg); 크롬, 사파리
-moz-transform: rotate(15deg); 파이어폭스
-o-transform: rotate(15deg); 오페라
-ms-transform: rotate(15deg); 인터넷 익스플로러
transform: rotate(15deg);
}*/
.box:hover {
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="box">Mouse Over</div>
</body>
</html>
728x90
반응형
'HTML > CSS 기초' 카테고리의 다른 글
| [CSS] margin 설정하기 (0) | 2020.07.28 |
|---|---|
| [CSS] 문단마다 스타일 설정하기 (0) | 2020.07.28 |
| [CSS] 글자 스타일 (0) | 2020.07.28 |
| [CSS] 외부 스타일 (0) | 2020.07.28 |
| [CSS] 인라인 스타일, 임베디드 스타일 (0) | 2020.07.28 |
