반응형
웹에서 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>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 ▶ 스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법 ▶ 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 ▶ 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 ▶ 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 |
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬 (0) | 2024.04.16 |
|---|---|
| 스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성 (0) | 2024.02.18 |
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
