CSS Vendor Prefix 의미 이해하기

CSS(Cascading Style Sheets)에서 Vendor Prefix(브라우저 공급업체 접두사)의 의미에 대해 이해해 보는 시간입니다. 브라우저 프리픽스라고도 합니다.

Vendor Prefix

세상에는 많은 웹브라우저가 있습니다.
저는 크롬, 엣지, 또는 사파리를 사용하는데, 이 글을 보시는 여러분 또한 크롬을 사용할 수도 있고 파이어폭스나 오페라 등과 같이 각양각색의 브라우저를 이용하고 계실 것입니다.

이 웹브라우저를 공급하는 업체를 벤더(vendor)라고 표현합니다.
그리고 벤더 프리픽스는 각 웹브라우저별로 환경에서 각각 CSS를 정의하는 접두사입니다.
CSS 벤더 프리픽스는 다음과 같습니다.

-webkit-

크롬, 사파리, (신)오페라, 거의 대부분의 애플 iOS, 그외 웹킷 기반 브라우저

-moz-

(모질라)파이어폭스

-o-

(구)오페라

-ms-

마이크로소프트 엣지, 인터넷 익스플로러

Vendor Prefix 예시(CSS)

트랜지션(transition)은 애니메이션 변화에 대한 속성을 설정할 수 있는 기능을 제공합니다.
모든 벤더에서 트랜지션 스타일시트를 적용하려면 다음과 같이 프리픽스를 추가할 수 있습니다.
-webkit-transition: width 1s, height 1s, background-color 1s, transform 1s;
-moz-transition: width 1s, height 1s, background-color 1s, transform 1s;
-ms-transition: width 1s, height 1s, background-color 1s, transform 1s;
-o-transition: width 1s, height 1s, background-color 1s, transform 1s;
transition: width 1s, height 1s, background-color 1s, transform 1s;

CSS 이해하기

티스토리 블로그에서 스킨 편집을 눌러보신 적이 있나요? 편집하기를 눌러 보시면 우측상단의 버튼 구성이 HTML, CSS, 파일업로드 3가지인 것을 확인할 수 있습니다. 파일업로드는 문자 그대로 해석하면 될 것이고 HTML과 CSS에 대한 간단한 설명은 다음과 같습니다.

HTML(Hypertext Markup Language)은 게시물, 분류, 최근글/인기글, 태그 등과 같은 웹 컨텐츠를 이루고 있는 기본 구조 언어입니다.

CSS(Cascading Style Sheets)는 HTML과 같은 마크업 언어의 글씨, 배경, 크기, 여백, 위치와 같이 컨텐츠의 표시 방법에 대한 기술서입니다.
예를 들면 상기 그림과 같이 body { margin: 0; } 은 body 요소의 여백을 0으로 정의한다는 뜻이지요.

이상으로, CSS 정의에 있어서 각 웹사이트 공급사의 접두사에 대해 알아보는 시간이었습니다.