크로스 브라우징(Cross Browsing)이란?

▶️ 크로스 브라우징(Cross Browsing)이란?

웹 페이지 제작시, 모든 브라우저에서 깨지지 않고 의도한대로 올바르게(=호환성) 나오게 하는 작업 (=브라우저 간 웹 페이지의 상호 호환성)

(다양한 웹브라우저에서 깨지지 않게 보이는 웹페이지 제작 기술)
(HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법)

모든 브라우저에서 화면이 동일하게 표시되게 하는 것을 의미하지는 않습니다. 동일하게 보이는 것이 아니라, 동등한 수준의 정보, 기능 제공이 우선입니다.

▶️ 크로스 브라우징(Cross Browsing) 작업이 필요한 원인 ? 

브라우저마다 사용하는 OS가 다르고, 렌더링 엔진이 다르기 때문에 웹브라우저 별로 표현하는 것에는 차이가 있다.

- 작동되지 않는 HTML5, JS코드가 존재 / 해석하지 못하는 CSS코드가 존재 / 브라우저 버그들이 존재 / 브라우저마다 자체적인 CSS스타일

동일한 웹사이트라 하더라도 어떤 웹브라우저로 보느냐에 따라 다르게 보일 수 있다.

'모든 브라우저에서 동일하게 보여준다'는 현실적으로 불가능한 얘기입니다.
다만, '크로스 브라우징'은 최대한 다양한 브라우저에서 제작자가 의도한 내용을 이상 없이 동작하게 해줍니다.

▶️ 렌더링 엔진

페이지를 렌더링 할 때 실질적으로 작업을 하게되는 엔진이다. 같은 엔진을 사용하면 다른 브라우저여도 비슷하게 출력됨

트라이던트(Trident)	마이크로 소프트	IE, 아웃룩 이메일 클라이언트나 윈도우 프로그램의 미니 브라우저등에 사용된다.
게코(Gecko)	모질라	파이어 폭스, 모질라 재단의 이메일 클라이언트인 선더버드에 사용된다.
웹킷(Webkit)	애플사	- 초기 애플사가 사파리 엔진으로 사용하기 위해 차용했으나 현재는 웹킷 프로젝트로 분리되어 개발되고 있다. - 크롬에서도 사용되었던 엔진이며 iOS나 안드로이드의 기본 브라우저들이 이 웹킷 엔진을 사용한다. - 점유율이 높은 엔진
프레스토(Presto)	오페라	오페라 15버전부터 더이상 사용하지 않는다.
블링크(Blink)	구글	- 웹킷 엔진을 사용하던 구글이 크롬이 개발, 사용하고 있는 엔진이다.  - 웹킷에서 줄기를 가져 왔기 때문에 웹킷엔지과 비슷한 모습이 보여진다.  - 프레스토 엔진을 버린 오페라가 블링크 엔진을 사용하고 있다.
듀얼 엔진		- 국내 이스트소프트의 스윙(Swing) 브라우저를 예로 들면 크롬과 같은면서도 액티브X를 지원하는데, 독자적인 엔진이 아닌 두가지 엔진을 번갈아 사용하는 방식이기 때문에 가능하다.  - 보통 트라이던트와 웹킷or블링크 엔진을 사용한다.

▶️ 브라우저 대응순서, 어떤 브라우저에 초점을 맞춰야하는지?

가장 점유율이 높은 브라우저부터 맞추는것이 좋다 

점유율 조사하는 사이트 : https://gs.statcounter.com/

 - 크롬 > 사파리 > Edge

 

▶️ 크로스 브라우징(Cross Browsing) 작업

1. 도움이 되는 사이트를 이용하여 브라우저에 맞게 작업한다.  (https://caniuse.com)

2. 초기화 작업(CSS초기화 작업) : 브라우저마다 차이가 나는 기본 스타일 값들을 초기화 시킨다
'웹 브라우저'마다 default 값으로 스타일이 적용되어 있기 때문에 우리는 브라우저마다의 기본 디폴트 스타일 값이 아니라 동일한 CSS 스타일을 보여주기 위해 default 디폴트 값을 초기화 해주어야 한다.