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 정의에 있어서 각 웹사이트 공급사의 접두사에 대해 알아보는 시간이었습니다.