<HTML5 & CSS3> 크로스브라우징

1. 크로스 브라우징 : 멀티브라우저 지원 ( 익스플로러, 크롬, 파이어폭스, 사파리, 오페라, 웨일 .. ) 

1) 크로스 브라우징의 목적 : 여러 브라우저에서 같은 화면과 같은 서비스를 제곰함에 있어서 사용자에게 차이를 보이지 않게 하기 

2) internet explorer의 버전 : 

- window xp : internet explorer 8 

- window 7 : internet explorer 11

- window 8 : - 

- window 10 : internet explorer edge

3) w3school 홈페이지에 들어가면 HTML5, CSS3의 코드 등 나온지 얼마 안된 코드들의 지원현황을 볼 수 있다. 

(w3school : https://www.w3schools.com/)

ex) CSS3에서 새로 등장한 border-radius

검색 -> w3School에 접속

border-radius 에 대한 설명을 볼 수 있다. 

Browser Support에서 브라우저별 사용할 수 있는 버전 나와있음 

< 크로스 브라우징 방법> 

1. 벤더프리픽스 

 - 위의 예시의 Browser Support을 보면 -webkit- , -moz- 와 같은 것들을 볼 수 있다. 이것을 사용하는 것이 벤더 프리픽스

- 코드를 작성할 때 기입해주면 사용할수 있는 버전보다 하위버전에서도 사용할 수 있게 함 

-브라우저별 벤터프리픽스 

1) 크롬 : -webkit-

2) 사파리 : -webkit-

3) 파이어폭스 : moz- (mozila 라는 단체가 파이어폭스를 만들었기 때문에)

4) 오페라 : -o-, -webkit-

5) 익스플로러 : -ms- 

- 사용방법 : 사용하는 속성이나 태그 앞에 달아준다. 

ex) 

border-radius : 10px의 경우 

-webkit-border-radius : 10px;

-moz-border-radius : 10px; 

-o-border-radius : 10px;

보통 모든 브라우저의 벤터프리픽스를 다 작성한다 

2. 초기화 (CSS의 RESET)

: HTML5의 태그를 인식하지 못하는 브라우저가 있다. 해당 태그의 기본 CSS를 초기화로 기입해 주는것. 

- 웹상에 크로스 브라우징을 위한 리셋파일들이 많다. 

ex) normalize :  검색해서 다운 - reser.css 파일 만들기 -> 헤더에 연결하기 

- 초기방법. 코딩하면서 계속 확인해 줘야함. 

3. 버전에 따라 CSS파일을 만들기 

( 인터넷 익스플로러) 

ex) internet explorer7일때 ie7.css 실행하기. 

ie7.css CSS 파일을 만들고 header에 

<!--[if IE 7]>

<link rel="stylesheet" href="css/ie7.css" />

<![endif]-->

{

4. CSS에 약간의 편법 쓰기 

.ex {

color : red;

*color : green; (<- IE7에서 인식하는 코드. 인식 못하면 그냥 지나감)

_color : blue; (-<-IE6에서 인식하는 코드) 

( IE6 에서 _  가 언제 지원이 안될지 모르기 때문에 약간은 불안정하다 )

5. meta를 이용한 익스플로러 버전 정하기. 

만든 사이트가 상위버전으로 업그레이드를 하고 나니 정상동작이 안될 경우에 html 파일의 head 부분에 

<meta http-equryv="X-UA-Compatible" content="  iE=edge"/>

: 가장 최종버전으로 맞추겠다는 뜻