[CSS] 01-5 CSS3와 CSS 모듈

1. CSS3란?

① CSS가 스타일 시트의 기본이 되면서 CSS1과 CSS2를 거쳐 스타일 시트가 많이 알려졌고 널리 사용되고 있음

② HTML5가 개발되면서 CSS3 기술도 함께 개발되었으며 CSS2보다 정교하고 화려한 화면을 구성할 수 있고 애니메이션까지 지원 가능

③ CSS2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있어서 크고 복잡해하여 한 번에 업데이트하기 쉽지 않음

④ CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능에 대한 규약을 주제별로 따로 생성함. 이것을 CSS 모듈이라함

⑤ CSS 유효성 검사 https://jigsaw.w3.org/css-validator/

⑥ CSS 관련 뉴스 및 CSS 규약 확인 https://www.w3.org/Style/CSS/

2. CSS3와 브라우저 접두사(prefix)

① CSS3는 CSS 모듈들이 많고 표준 규약이 완성되지 않은 부분도 많지만 모던 브라우저에서 지원하기 위해 계속 개발중임.

② 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분

③ 주로 사용하는 브라우저 접두사(prefix)

<예제 – transform-001.html>

<!DOCTYPE html>
<html lang="ko">
<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>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;
        }
        /*hover: 마우스 커서 올렸을 때 동작*/
        .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.box-->
    <div class="box">Mouse Over</div>
</body>
</html>

3. 브라우저 접두사 자동으로 붙이기

① prefixfree.min.js 다운로드(http://leaverou.github.io/prefixfree/)

<예제 – transform-002.html>

<!DOCTYPE html>
<html lang="ko">
<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>Transform</title>
    <!--외부 자바스크립트 파일 링크-->
    <script src="js/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;
        }
        /*hover: 마우스 커서 올렸을 때 동작*/
        .box:hover {
            transform: rotate(15deg);
        }
    </style>
</head>
<body>
    <!--div.box-->
    <div class="box">Mouse Over</div>
</body>
</html>

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

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS]02-2 텍스트 스타일 (0)	2021.09.05
[CSS] 02-1 글꼴 관련 스타일 (0)	2021.09.05
[CSS] 01-4 캐스캐이딩 스타일 시트 (CSS : Cascading Style Sheet) (0)	2021.09.05
[CSS] 01-3 주요 선택자 (0)	2021.09.05
[CSS] 01-2. 스타일과 스타일 시트 (0)	2021.09.05