[CSS3] 크로스브라우징(Cross Browsing)

---

알고있으면 좋은 CSS3 Tip✨

---

크로스브라우징이란 무엇인가?

• 웹 페이지 또는 웹 어플리케이션이 다양한 브라우저와 버전에서 개발자의 의도대로 올바르게 작동하도록 하는 기술이다. 쉽게 말해, 특정 브라우저/기기 환경에 최적화되지 않고 공통 요소를 사용하여 웹 페이지를 제작하는 기법이다.

 

(1) 크로스브라우징의 중요성

• 각 브라우저마다 HTML, CSS, JavaScript 구현 방식, 즉 렌더링 엔진이 다르기 때문에 특정 브라우저에서는 의도와 다른 동작이 나타날 수 있다. 브라우저와 상관없이 웹 페이지/애플리케이션 서비스를 이용하는 사용자에게는 동등한 서비스를 제공해야하므로 크로스브라우징은 웹 페이지 개발시 고려해야하는 중요 사항 중 하나이다.

 

(2) 크로스브라우징 확인 방법

• Can I Use : 기능을 검색하면 브라우저 호환성을 표로 정리해준다.
• Mozilla MDN : 검색한 키워드 내용을 확인할 수 있다.

 

(3) 브라우저간 호환성 보장 방법

• DOCTYPE 정의 : HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다.
• 코드 유효성 검사 : W3C 유효성 검사기를 사용하여 HTML 및 CSS의 유효성을 검사한다.
• Vender Prefix : 크로스 브라우저를 개발하기 위해 CSS 속성 앞에 브라우저 별 접두사를 붙인다.