CSS3는 모듈들이 많고 표준 규약이 아직 완성이 되지 않은 부분이 많이 있음.
따라서 현재도 계속적으로 개발이 되고 있는 상황임. 하지만 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원이 되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여서 브라우저 별로 구분을 해 주어야 함.
* -webkit- : 크롬, 사파리 브라우저
* -moz- : 모질라, 파이어폭스 브라우저
* -o- : 오페라 브라우저
* -ms- : 인터넷 익스플로러
브라우저 접두어를 사용하는 이유
css에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로 임시적으로 접두어를 사용하는 것
표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위한 것
사용 예)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.photo {
position: absolute;
left: 50px;
top: 100px;
transform: rotate(15deg); /* 회전을 시키는 속성 */
-ms-transform : rotate(15deg);
-webkit-transform : rotate(15deg);
-moz-transform : rotate(15deg);
-o-transform : rotate(15deg);
}
</style>
</head>
<body>
<img class="photo" src="images/img.jpg" alt="튤립 이미지">
</body>
</html>'Front-End > CSS' 카테고리의 다른 글
| [CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover) (0) | 2021.11.10 |
|---|---|
| [CSS] opacity 속성(요소를 투명하게 만드는 속성) (0) | 2021.11.10 |
| [CSS] list-style-type 속성 (0) | 2021.11.10 |
| [CSS] float 속성 (0) | 2021.10.31 |
| [CSS] shadow 속성 (text-shadow, box-shadow) (0) | 2021.10.31 |
댓글