티스토리 뷰

[개발]프로그래밍/css3

[css3] prefixfree.min.js - 브라우저 접두사 편하게 사용

좋은 블로그 2021. 3. 18. 11:09
1. 개념
prefixfree.min.js - CSS3에서 쓰이는 브라우저 접두사 자동 생성
CSS는 1,2,3까지 해서 지속적으로 발전해 왔고 지금도 새로운 규악을 기준으로 만들어지고 있음
그러다 보니 브라우저별 표준으로 지원이 되는 기능과 그렇지 않는 기능이 생김
그래서 표준으로 지원이 되지 않는 기능은 브라우저 접두사를 붙여서 사용해 주기도 해야 함
하지만 prefixfree.min.js라는 이용하면 브라우저 접두사를 붙이지 않고도 사용이 가능
다운로드 주소
위 사이트에 접속하여서 아래 그림과 같이 클릭해 주면 다운로드가 됨
2. 태그
prefixfree.min.js
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
1
<script src = "prefixfree.min.js" > </script>
<style>
.mouse_over:hover
{
transform : rotate(30deg) ;
}
</style>
</head>
<body>
<div class = "mouse_over" style =' width : 130px ; height : 130px ; background : red '; >
</div>
</body>
</html>
결과 화면
코드 설명
1
script src = prefixfree.min.js
예전에 웹페이지를 만들 때 -webkit-transform , -moz-transform , -o-transform , -ms-transform, transform .... 이런식으로 해서 작업을 했었거든요
이것을 왜 써야 하는지에 대한 생각도 없이 다른 곳에 있는 것을 복사해서 쓰다보니깐 정확한 이해가 없었습니다.
저도 이번 블로깅을 하면서 이것이 왜 나왔고.. 왜 써야하는지를 알게 되었습니다.
그리고 이것을 더 쉽고 편하게 작업해주는 prefixfree.min.js 라는 자바 스크립트 파일도 있음을 알게 되었습니다.
이 파일을 이용하면 브라우저별 접두사를 쓸 필요가 없습니다.
필요하신 분들 다운로드 받으셔서 사용해 주면 좋을 거 같습니다.
저작자표시 (새창열림)

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] font-size - 글자 크기 조절  (0) 2021.03.22
[css3] font-family - 텍스트 글꼴 지정  (0) 2021.03.19
[css3] !important - 높은 우선 순위 스타일 적용  (0) 2021.03.17
[css3] ID 선택자 - 한번만 스타일 적용  (0) 2021.03.16
[css3] 클래스 선택자 - 특정 부분에만 스타일 적용(.class명)  (0) 2021.03.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday