크로스 브라우징 이란?

웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.
[HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법.]

크로스 브라우징 작업이 필요한 원인은 무엇일까?

브라우저 마다 랜더링 엔진이 다르기 때문이다.

  • 작동되지 않는 HTML5, Javascript 코드가 존재

  • 해석하지 못하는 CSS 코드 존재

  • 브라우저 버그들이 존재

  • 브라우저마다 자체적인 CSS 스타일

*IE를 버전마다 크로스 브라우징하는 이유.
최신 버전으로 자동 업데이트가 되는 브라우저가 많으나 IE는 해당되지 않는다.
IE는 사용자가 직접 업데이트를 진행해야 하며, 윈도우 버전에 따라 최대 버전이 한정되어 있다.

 

랜더링 엔진(or 레이아웃 엔진)

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

[레이아웃 엔진의 종류]트라이던트(Trident)게코(Gecko)웹킷(Webkit)프레스토(Presto)블링크(Blink)듀얼 엔진

트라이던트(Trident)

- IE, 아웃룩 이메일 클라이언트나 윈도우 프로그램의 미니 브라우저등에 사용된다.

마이크로 소프트

게코(Gecko)

- 파이어 폭스, 모질라 재단의 이메일 클라이언트인 선더버드에 사용된다.

모질라

웹킷(Webkit)

- 초기 애플사가 사파리 엔진으로 사용하기 위해 차용했으나 현재는 웹킷 프로젝트로 분리되어 개발되고 있다.
- 크롬에서도 사용되었던 엔진이며 iOS나 안드로이드의 기본 브라우저들이 이 웹킷 엔진을 사용한다.
- 점유율이 높은 엔진이다.

애플사

프레스토(Presto)

- 오페라 15버전부터 더이상 사용하지 않는다.

오페라 소프트웨어 

블링크(Blink)

- 웹킷 엔진을 사용하던 구글이 크롬이 개발, 사용하고 있는 엔진이다. 
- 웹킷에서 줄기를 가져 왔기 때문에 웹킷엔지과 비슷한 모습이 보여진다. 
- 프레스토 엔진을 버린 오페라가 블링크 엔진을 사용하고 있다.

구글

듀얼 엔진

- 국내 이스트소프트의 스윙(Swing) 브라우저를 예로 들면 크롬과 같은면서도 액티브X를 지원하는데, 독자적인 엔진이 아닌 두가지 엔진을 번갈아 사용하는 방식이기 때문에 가능하다. 

- 보통 트라이던트와 웹킷or블링크 엔진을 사용한다.

  

 

 

브라우저 대응 순서, 어떤 브라우저에 초점을 둬야하는가?

타겟이 되는 (가장 점유율이 높은) 브라우저부터 맞추는 것이 좋다.
보통 기준이 되는 %이하인 브라우저는 지원에서 제외하기도 한다. 


점유율 조사 사이트 : http://gs.statcounter.com/
세계 2019/4 ~2020/4

1위 크롬 2위 사파리 3위 파이어폭스 그외 비슷비슷

 

한국 2019/4 ~2020/4

크롬 1위, 2위-3위(엎치락뒤치락) 삼성인터넷, 사파리 4위 IE, 웨일 5위 파이어폭스 그외 비슷비슷

http://gs.statcounter.com/browser-market-share/desktop/south-korea/#monthly-201805-201903

 

확실히 세계랑 한국만 봤을때 다른 부분이 존재한다.

정책이나 타겟을 잘 잡아야한다.

 

크로스 브라우징 작업

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

2. 초기화 작업 (CSS 초기화 작업) - 브라우저마다 차이가 나는 기본 스타일 값들을 초기화 시킨다.

3. 핵(Hack)

스타일을 줄 때 특수문자를 넣어서 다른브라우저들에서는 인식이 안되지만 IE 특정 버전에서는 인식되도록 하는 방법이다. 이 방법은 추천하지 않는다.

IE8 이상의 브라우저에서 구분해내기가 어려우며 CSS 유지 보수를 어렵게 한다.

div{ 
  color:red; 
  
  /* IE7이하 대응 */ 
  *color:blue 
  
  /* IE6 대응 */ 
  _color:green 
}

4. IE용 주석을 이용한 방법 (Conditional comments)

HTML 문서 내에서 주석을 이용하여 구별한다.

lt (less than) 미만
lte(less than or equal to) 이하
gt(greater than) 초과
gte(greater than or equal to) 이상 
<!-- [if IE 7]> 
	<link href="ie7.css" type="text/css" rel="stylesheet"/> 
<![endif]--> 

<!-- [if IE 8]> 
	<p> 이 문구는 IE8이 포함되지 않은 하위 브라우저, 즉 IE7,6에서 보여지게 됩니다.</p> 
<![endif]-->

5. 메타 태그를 이용한 IE모드

<head>
	// ...
    
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    //...
</head>

<head> 요소 안에 넣어두며 IE가 문서를 읽고 랜더링 할 때 원하는 모드로 랜더링을 하게 해준다.
만약 content에 값이 "IE=edge"라면 해당브라우저가 할 수 있는 가장 최신의 모드로 랜더링한다.

 

 

크로스 브라우징 작업, 어느정도 맞춰야하나?

IE 하위버전에서 html5를 사용하려고 라이브러리를 사용하는 것은 성능을 저하시킬수 있다.

 

보통, IE의 버전이 낮을 수록 컴퓨터 성능도 최신이 아닐 가능성이 크다.

그러므로 성능 저하는 더 치명적일 가능성이 크다.
크로스 브라우징의 의미를 정확히 알고 작업해야 한다. (동일성이 아닌 동등성!)

 

 

 

참고 사이트
https://mulder21c.github.io/2019/01/30/what-is-cross-browsing/

 

 

저작자표시 비영리 변경금지

'~2022 > FE-개발 개념' 카테고리의 다른 글

AOS란?  (0) 2019.06.15
도메인(Domain) 또는 도메인 네임(Domain name), 네임서버 (Name server)  (0) 2019.06.05
웹 서버(Web Server)와 웹 호스팅(Web Hosting Service)  (0) 2019.06.05
동기(Sync), 비동기(Async)란?  (0) 2019.06.05
브라우저 쿠키(Cookie), 세션스토리지(Session Storage), 로컬스토리지(Local Storage)  (0) 2019.06.05
세션 스토리지(Session Storage)  (0) 2019.06.05
로컬 스토리지(Local Storage)  (0) 2019.06.05
쿠키(Cookie)  (0) 2019.06.05

+ Recent posts

티스토리툴바