프로그래밍/HTML&CSS
벤더 프리픽스(vender prefix)
하와이블루
2022. 9. 18. 11:05
728x90
벤더 프리픽스는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미한다. 아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자할때 사용한다.
벤더 프리픽스의 중요한 특징 중 하나로 순서에 유의해야한다.
1. 속성을 지원하지 않는 브라우저를 위한 코드
background: red;
2. 접두어 사용 가능 브라우저를 위한 코드
background : -webkit-linear-gradient(right, yellow, blue);
3. 브라우저 오페라를 위한 코드
background : -o-linear-gradient(right, yellow, blue);
4. 브라우저 익스플로어를 위한 코드
background : -ms-linear-gradient(right, yellow, blue);
5. 브라우저 파이어폭스를 위한 코드
background : -moz-linear-gradient(right, yellow, blue);
6. CSS 표준 문법을 위한 코드
background : linear-gradient(right, yellow, blue);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vender prefix</title>
<style>
body{
margin-left: 100px;
}
p{
width: 600px;
padding: 15px;
border: 3px solid rgba(0, 0, 0, 0.500);
}
#gradient{
background: yellow;
background: -webkit-linear-gradient(left, pink,yellow);
background: linear-gradient(left, pink,yellow);
}
</style>
</head>
<body>
<p id="gradient">gradient</p>
</body>
</html>
728x90