CSS Vendor Prefix 벤더 프리픽스 : -webkit-, -moz- 이게 도대체 뭐지?

CSS Vendor Prefix 벤더 프리픽스 : -webkit-, -moz- 이게 도대체 뭐지?

  CSS는 지금까지 무수한 발전을 해왔습니다. 그리고 지금도 계속 발전하고 있습니다. 현재는 CSS1을 거쳐 CSS3를 개발 중에 있습니다. 그런데 CSS3는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들고 있습니다. 이 주제별 규약을 'CSS 모듈'이라고 부릅니다. 모듈들은 개발 속도가 다르기 때문에 일부는 완성되었고 아직 개발 중인 것도 있습니다. 따라서 HTML과는 다르게 CSS는 아직 '웹 표준'이 정해지지 않았습니다.

  CSS는 웹 표준이 정해지지 않았기 때문에 브라우저에 따라 다른 방식으로 지원됩니다. 그래서 우리는 CSS를 모든 브라우저에서 원활히 사용하기 위해, 스타일 속성 앞에 Prefix 프리픽스(접두사)를 붙여주어야 합니다.

  브라우저별 프리픽스는 아래와 같습니다.

 

   - 사파리, 크롬: -webkit-

   - 모질라, 파이어폭스: -moz-

   - 오페라: -o-

   - 익스플로러: -ms-

 

  이렇게 스타일 속성 앞에 프리픽스를 넣어주면 브라우저별로 균일하게 스타일 속성을 표현해낼 수 있습니다. 예를들어 아래와 같이 사용하면 됩니다. 참고로 border-radius는 테두리를 둥그렇게 만들어주는 속성입니다.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

  프리픽스를 사용할 때는 각 브라우저 접두사를 붙인 속성을 먼저 쓰고, 표준이 정해진 후 사용할 속성을 가장 아래에 써주어야합니다. 그래야만 지정한 스타일 속성이 정상적으로 동작할 수 있습니다. 위 예시에서 가장 아래 쓰여있는 border-radius가 표준이 정해진 후 사용할 속성입니다.

  브라우저별 지원 스타일 속성을 확인하기 위해서는 Can I Use를 확인하면 됩니다. Can I Use를 활용하면 특정 스타일 속성이 브라우저 버전별로 사용가능한지 손쉽게 확인할 수 있습니다.

 

-Prefix-free 프리픽스 프리 : 조금더 쉬운 방법

  그럼 스타일 속성을 사용할 때마다 일일이 Can I Use에서 확인하고, 저렇게 길게 스타일을 타이핑 해주어야 할까요?

  만약 그렇게 해야한다면 많이 번거롭겠지요. 그리고 스타일 코드의 양도 정말 어마무시하게 많아지겠지요. 다행히 좋은 방법이 있습니다. -Prefix-free라는 자바스크립트 파일을 이용하면 프리픽스를 입력하는 번거로움을 해결할 수 있습니다. 사용 방법은 아래와 같습니다.

 

   1. -Prefix-free에 접속합니다.

   2. Only 2KB gzipped를 우클릭하여 '다른 이름으로 링크 저장'을 클릭합니다.

   3. prefixfree.min.js를 저장할 폴더를 지정해 저장해줍니다(폴더 경로를 잘 기억해두세요).

   4. head 태그 안쪽에 <script src="prefixfree.min.js 파일 경로"></script> 를 입력해줍니다

 

  만약 index.html 파일과 같은 위치에 prefixfree.min.js 파일을 저장했다면, <script src="prefixfree.min.js"></script> 라고쓰면됩니다.

  유익한 정보가 되었기를 바랍니다.

  그럼 이만 :D

 

※ 혹시 파일 경로 설정을 어떻게 해야할지 모르는 분들은 아래 글을 참고해주세요. 

2020/10/11 - [홈페이지 만들기/1단계. HTML] - HTML 이미지(img) 태그: 태그와 경로 설정(src / ..)