코밍이의 하루

[CSS3] 브라우저 접두사 본문

웹언어 공부/CSS3

[CSS3] 브라우저 접두사

코밍이 2021. 8. 26. 14:36

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 주요 문법

1) 브라우저 접두사(prefix)

접두사 설명
-webkit- 웹키트 방식 브라우저용(사파리, 크롬 등)
-moz- 게코 방식 브라우저용(모질라, 파이어폭스 등)
-o- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로러

- 'prefix-free' 라는 자바스크립트 파일을 이용하면 브라우저 접두사를 붙이지 않고도 편리하게 CSS3 속성 사용 가능

(소스 transform-prefix-free.html 참고)

 

3. 소스 코드 및 실행 화면

- transform.html

<!DOCTYPE HTML>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>Transform</title>
		<style>
			.box{
				position:absolute;
				left:50px;
				top:70px;
				width:100px;
				height:60px;
				background:#fff;
				border:2px solid green;
				text-align:center;
				line-height:60px;
			}
			.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>
</html>

transform.html

- transform-prefix-free.html

prefixfree.min.js
0.01MB

 

 

<!DOCTYPE HTML>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>Transform</title>
		<script src="prefixfree.min.js"></script>
		<style>
			.box{
				position:absolute;
				left:50px;
				top:70px;
				width:100px;
				height:60px;
				background:#fff;
				border:2px solid green;
				text-align:center;
				line-height:60px;
			}
			.box:hover {
				transform: rotate(15deg);
			}
		</style>
	</head>
	<body>
	<div class="box">Mouse Over</div>
	</body>
</html>

transform-prefix-free.html

저작자표시 비영리 변경금지

'웹언어 공부 > CSS3' 카테고리의 다른 글

[CSS3] 스타일 우선순위와 상속  (0) 2021.08.26
[CSS3] 주요 선택자  (0) 2021.08.26
[CSS3] CSS(Cascading Style Sheets) 기초  (0) 2021.08.26
'웹언어 공부/CSS3' Related Articles more