CSS3와 CSS모듈

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

CSS3
1) CSS3와 브라우저 접두사(prefix)
2) 브라우저 접두사 자동으로 붙이기

CSS3

CSS는 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.
CSS을 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.

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

CSS3 표준 규약이 완성되지 않아 브라우저들이 새로운 CSS3속성을 부분적으로만 구현할 수 있기 때문에, 대부분의 CSS3 속성을 사용하려면 속성 이름 앞에 브라우저를 식별할 수 있는 접두사를 붙여서 사용해야한다.

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

2) 브라우저 접두사 자동으로 붙이기

[파일 사이트]에 들어가 'only 2KB gzipped'를 클릭해 파일을 다운받고 웹문서 파일로 돌아와 <script>태그를 이요해 다음과 같이 웹 문서에 연결만 하면 브라우저 접두사를 붙이지 않아도 된다.

<!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>

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

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

텍스트 관련 스타일- 목록 (0)	2020.07.09
텍스트 관련 스타일- 문단 (0)	2020.07.09
텍스트 관련 스타일- 텍스트 (0)	2020.07.09
텍스트 관련 스타일- 글꼴 (0)	2020.07.09
CSS기초 (0)	2020.07.08

winnih_B

LINKS

CATEGORY

CSS3와 CSS모듈

CSS3

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

티스토리툴바

CSS3와 CSS모듈

CSS3

'💻WEB FrontEnd > CSS3' 카테고리의 다른 글

'💻WEB FrontEnd/CSS3' Related Articles

티스토리툴바