2021. 4. 28. 15:05ㆍCSS
스타일 시트 CSS 접두어 webkit, moz, ms, o 의미
스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 환경: Eclipse Mars 웹에서 CSS 를 적용할 때 webkit, moz, ms, o 접두어가 속성앞에 붙은 것을 종종 보실 수 있을 겁니다. 크로싱 브라우저를 위해서 필요하기..
mainia.tistory.com
웹에서 CSS 를 적용할 때 webkit, moz, ms, o 접두어가 속성앞에 붙은 것을 종종 보실 수 있을 겁니다. 크로싱 브라우저를 위해서 필요하기 때문입니다. 주로 쓰이는 브라우저는 IE, 크롬, 파이어폭스, 오페라, 사파리가 있는데, 우리나라에서는 크롬과 파이어폭스만 적용하면 무난하게 처리가 가능합니다.
▼ CSS 속성 중에 접두어를 붙어야 되는 경우가 있습니다. 각 접두어의 의미를 알아 보겠습니다. 쓰는 방법은 속성 앞에 붙이면 됩니다.
l -webkit- : 구글, 사파리 브라우저에 적용
l -moz- : 파이어폭스 브라우저에 적용
l -ms- : 익스플로러에 적용, 보통 생략합니다.
l -o- : 오페라 브라우저에 적용
▼ 아래 샘플은 그라데이션 속성을 브라우저 별로 나눈 것입니다. 접두어를 써야 되는 대표적인 속성입니다. 참고로 webkit 은 크롬과 사파리가 채용한 웹 브라우저 엔진 이름입니다.
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 200px; /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(left, red , blue); /* For Opera 11.1 to 12.0 */ background: -o-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */ background: -moz-linear-gradient(right, red, blue); /* Standard */ background: linear-gradient(to right, red , blue); } </style> </head> <body> <div id="grad1"></div> </body> </html>
'CSS' 카테고리의 다른 글
| [CSS] OL 리스트 두번째 줄 정렬 맞추기 (0) | 2021.05.07 |
|---|---|
| hr 태그 초기화 (0) | 2021.05.06 |
| [css 응용] 이미지 세로 중앙 정렬 (0) | 2021.05.04 |
| 요소가 absolute일 때 가로 세로 가운데로 오게 하기 (0) | 2021.04.30 |
| 요소 숨김 처리 (웹접근성 IR 기법) (0) | 2021.04.27 |