공부 및 일상기록

크로스 브라우징이란? 본문

개발

크로스 브라우징이란?

낚시하고싶어요 2023. 1. 18. 00:13

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

크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로 비슷하게 만들어 어떤 환경에서도 이상없이 작동되게 하는 웹 페이지를 제작하는 방법론이다.

 

쉽게 말하자면 익스플로러에서 이용할 수 있던 사이트가 크롬이나 오페라에서는 보이지 않아 사용할 수 없게 되는 것을 크로스 브라우징을 이용하여 다양한 브라우저를 이용하더라도 사이트를 100% 이용할 수 있게 만드는 기술을 말한다.

 

여기서 착각하기 쉬운 부분은 모든 브라우저에서 똑같이 보이게 하는것이 아니라는 것이다. 

크로스 브라우징은 동일성이 아니라 동등성(등가성)을 의미한다.

 

 

크로스 브라우징이 작업마다 필요한 이유는?

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

다른 브라우저들은 아래와 같은 문제들을 일으킨다.

작동하지 않는 HTML5, Javascript 코드가 존재한다.

해석하지 못하는 CSS 코드가 존재한다.

브라우저 버그들이 존재한다.

브라우저 자체적인 CSS스타일이 존재한다.

 

렌더렝 엔진의 종류

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

 마이크로 소프트
게코(Gecko)
파이어 폭스, 모질라 재단의 이메일 클라이언트인 선더버드에 사용된다.

 모질라
웹킷(Webkit)
- 초기 애플사가 사파리 엔진으로 사용하기 위해 차용했으나 현재는 웹킷 프로젝트로 분리되어 개발되고 있다.

- 크롬에서도 사용되었던 엔진이며 iOS나 안드로이드의 기본 브라우저들이 이 웹킷 엔진을 사용한다.

- 점유율이 높은 엔진이다.

 애플사
프레스토(Presto)
오페라 15버전부터 더이상 사용하지 않는다.

 오페라 소프트웨어 
블링크(Blink)
- 웹킷 엔진을 사용하던 구글이 크롬이 개발, 사용하고 있는 엔진이다. 

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

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

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

  

 

 

IE는 사용자가 직접 업데이트를 진행하며, 윈도우 버전에 따라 지원되는 버전이 달라 크로스브라우징을 해야만 한다.

 

 

브라우징 대응 순서, 어떤 브라우저에 초점을 두고 작업해야 할까?

당연히 타겟이 되는 (점유율이 가장 높은) 브라우저에 맞추는 것이 좋다.

http://gs.statcounter.com/    👈👈점유율 조사 사이트

 

 

크로스 브라우징 작업

1. 브라우저에 맞게 작업한다.

브라우저 별 벤터프리픽스

크롬 : -webkit-

사파리 : -webkit-

파이어폭스 : moz-  (mozila에서 파이어폭스를 만들었음)

오페라 : -o-, -webkit-

익스플로러 : -ms-

 

2.초기화 작업 (CSS초기화작업)

웹 브라우저마다 default값으로 스타일이 적용되어 있기 때문에 브라우저마다의 기본 디폴트 값이 아니라 동일한 CSS 스타일을 보여주기 위해 default 값을 초기화 해주어야 한다.

* {margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	font-size: 100%; 
	font: inherit; 
	vertical-align: baseline; 
}

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block; 
} 

html {font-size:10px}

body { line-height: 1; font-family: 'Noto Sans KR', sans-serif; font-size : 1.4rem } 
body, input, button,select, textarea, th, td {color: #222;}

a {text-decoration: none;  color: inherit;}
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 

blockquote:before, blockquote:after,
q:before, q:after { 
	content: ''; 
    content: none; 
} 

table { border-collapse: collapse; border-spacing: 0; }

 

3.핵(Hack) 

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

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

 

크롬 핵
@media screen and (-webkit-min-device-pixel-ratio:0){
	여기에 css 작업
}

파이어폭스 핵
@-moz-document url-prefix() {
	여기다 쓸 css 넣기
}
==

선택자핵

/* IE 6 이상 */
* html #uno { }
 
/* IE 7 이상 */
*:first-child+html #dos { }
 
/* IE 7 과 현대 브라우저 */
html>body #tres { }
 
/* 현대 부라우저 (IE 7 빼고) */
html>/**/body #cuatro {}
 
/* 오페라 9.27 이상 */
html:first-child #cinco {}

/*사파리,크롬,오페라 다수브라우저핵*/

html[xmlns*=""] body:last-child #seis { }
 
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
html[xmlns*=""] body:last-child #seis { }
 
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:nth-of-type(1) #siete { }
 
/* 사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:first-of-type #ocho { }
 
/* 사파리 3, 크롬 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}

 

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

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

<head>요소 안에 넣어두며 IE가 문서를 읽고 렌더링 할 때 원하는 모드로 렌더링을 하게 해준다.

만약 content에 값이 IE=edge 라면 해당 브라우저가 할 수 있는 가장 최신의 모드로 렌더링 한다.

저작자표시

'개발' 카테고리의 다른 글

webpack, babel, polyfill 설명  (0) 2023.01.18
객체 지향 프로그래밍이란?  (0) 2023.01.18
서버사이드렌더링, 클라이언트사이드렌더링, 스태틱사이트제너레이터  (0) 2023.01.17
[NextJS] Next.JS 란 무엇인가?  (0) 2023.01.17
SPA, MPA에 대해  (0) 2023.01.13
'개발' Related Articles more