기술 면접을 대비해 개념을 🍰 한입 크기로 잘라 정리합니다.
깃허브가 궁금하다면 놀러오세요!
👉 깃허브 보러가기 (Since 2023.05.10 ~ )
🖥️ 크로스 브라우징(Cross Browsing)이란?
Cross Browsing이란 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만들어 웹 페이지를 제작하는 기법을 말하는 것이다.
한국소프트웨어진흥원 공개S W지원센터 발간한 ‘Cross Browsing 가이드’ 중
크로스 브라우징은 W3C(World Wide Web Consortium)에서 채택한 표준 웹 기술을 적용해 어떤 브라우저 환경에서도 정상적으로 작동하는 웹 페이지를 만드는 방법론을 말합니다.
쉽게 설명하면, 크롬에서 이용할 수 있는 사이트가 익스플로러나 오페라 등 다른 브라우저에서도 정상적으로 사이트를 이용할 수 잇게 만드는 기술입니다.
크로스 브라우징을 고려하지 않으면 HTML, CSS, JS 등 코드가 원하는대로 작동되지 않을 수 있어, 각 브라우저의 렌더링 엔진에 따른 크로스 브라우징 설정을 해주어야 합니다.
⚠️ 크로스 브라우징은 동일성이 아니라 동등성을 의미합니다.
‘크로스 브라우징’은 모든 브라우저에서 화면이 동일하게 표시되는 것이 아닌 동등한 수준의 정보, 기능이 제공되는 것을 의미합니다.
크롬, 사파리 등 각 웹 브라우저는 각기 다른 속성과 렌더링엔진으로 이루어져 있기 때문에, 동일한 웹사이트에 접속하더라도 브라우저 종류에 따라 다르게 보일 수 있습니다. 즉, ‘모든 브라우저에서 동일한 화면을 보여주는 것’은 현실적으로 어려움이 있습니다.
대신 ‘크로스 브라우징’을 통해 최대한 다양한 브라우저에서 제작자가 의도한 내용을 이상없이 동작하도록 해주는 것입니다.
⚠️ 렌더링 엔진이란 무엇인가?
웹 렌더링 엔진(Web Rendering Engine) 또는 웹 브라우저 엔진(Web Browser Engine) 또는 웹 레이아웃 엔진(Web Layout Engine)이라고도 불립니다.
페이지를 렌더할 때 실질적으로 페이지를 작업해주는 브라우저 엔진을 의미합니다.
사용되는 브라우저 버전 혹은 지원 회사에 따라 렌더링 엔진은 다르게 사용됩니다.
| 브라우저 | 렌더링 엔진 | vendor prefix |
|---|---|---|
| 모질라, 파이어폭스 | Gecko | -moz- |
| 구글(크롬), 오페라 | Blink | -webkit-, -o- |
| 사파리 | Webkit | -webkit- |
| 익스플로러 | Trident | -ms- |
| 마이크로소프트 엣지 | EdgeHTML | -ms- |
⚠️ 벤더 프리픽스(Vendor Prefix)란?
CSS 호환성을 위해 웹 브라우저 별로 전용 CSS 속성을 부여할 수 있도록 제공되는 표준의 CSS 속성 기술 방법입니다.
같은 CSS 속성을 브라우저 종류에 따라 다르게 적용되도록 별도의 접두어를 속성명 앞에 붙여 해당 브라우저가 인식하고 사용할 수 있도록 합니다.
<style>
.button {
background: red; <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow); <!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow); <!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow); <!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow); <!-- CSS 표준 문법 코드 -->
}
</style>📎 참고문서
