CSS 정리 4

11447 단어 CSSCSS

1. 벤더프리픽스 (vender prefix)

아직 css 권고안에 포함되지 못한 기능이나, 포함 되어 있지만 아직 완벽하게 제정 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용합니다. 해당 기능이 포함되지 않은 이전 버전의 웹 브라우저에도 그 기능을 사용할 수 있습니다.

linear-gradient(시작색상, 끝색상)

.gradient {
   background : yellow; /*속성을 지원하지 않는 모든 브라우저를 위한 코드*/
   /*크롬과 사파리를 위한 코드*/
   background : -webkit-linear-gradient(yellow, blue ); 
   /*파이어폭스를 위한 코드*/
   background : -moz0-linear-gradient(yellow, blue );
   /*오페라를 위한 코드*/
   background : -0-linear-gradient(yellow, blue );
   /*익스플로러를 위한 코드*/
   background :-ms-linear-gradient(yellow, blue );
   background : linear-gradient(yellow, blue);

}

*벤더 프리픽스를 사용하는 방법은 해당 속성이 적용되지 않았을 경우 표현해야 한느 코드를 가장 먼저 작성해야 하면. 표준 문봅 코드는 가장 마지막에 사용해야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tranasform</title>
    <style>
        body { margin-left:  100px;}
        p {
            width: 600px;
            padding: 15px;
            background-color: gold;
            border: 3px solid rgba(0, 0,0, 5);
        }
        #trans1 {
            /* 벤터 프리픽스*/
            -ms-transform: translate(30px, 30px);
            -moz-transform: translate(30px, 30px);
            -o-transform: translate(30px, 30px);
            -webkit-transform: translate(30px, 30px);
            transform:  translate(30px,30px);
            background-color: deeppink;
        }
            /* 벤터 프리픽스 생략*/
        #trans2 {
            transform: rotate(60deg);
            background-color: deepskyblue;

        }

        #trans3 {
            transform: scale(0.7, 1.3);
            background-color: orange;
        }

        #trans4 {
            transform: skew(15deg,10deg);
            background-color: greenyellow;
        }

    </style>
</head>
<body>
    <h2>tranasform</h2>
    <p>orginal</p>
    <p id="trans1">translate</p>
    <p id="trans2">rotate</p>
    <p id="trans3">scale</p>
    <p id="trans4">skew</p>

</body>
</html>

<!DOCTYPE html>
tranasform
Java 화면 캡처 및 자르기
TIL 15. Position 과 z-index

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage