반응형
크로스 브라우징이란, 표준 웹 기술을 사용하여 다른 기종 혹은 플랫폼에 따라 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다.
크로스 브라우징은 브라우저마다 렌더링 엔진이 다르기 때문이다.
- 작동되지 않는 HTML5, Javascript 코드 존재
- 해석하지 못하는 CSS 코드 존재
- 브라우저 버그들이 존재
- 브라우저마다 자체적인 CSS 스타일
IE를 버전마다 크로스 브라우징하는 이유는, 최신 버전으로 자동업데이트가 되는 브라우저가 많으나 IE는 해당되지 않는다. IE는 사용자가 직접 업데이트를 진행해야 하며, 윈도우 버전에 따라 최대 버전이 한정되어 있다.
크로스 브라우징 작업
- 점유율의 입각한 사이트를 이용하여 브라우저에 맞게 작업한다.
- 초기화 작업 (CSS 초기화 작업) - 브라우저마다 차이가 나는 기본 스타일 값들을 초기화 시킨다.
- 핵(Hack) 스타일을 줄 때 특수문자를 넣어서 다른 브라우저들에서는 인식이 안되지만 IE특정 버전에서는 인신되도록 하는 방법이다. 하지만 IE 8 이상에서는 브라우저에서 구분하기 어려우며 CSS 유지 보수가 어렵다.
- IE용 주석을 이용한다.
- if (less than) - 미만
- lte (less than or equal to) - 이하
- gt(greater than) - 초과
- gte(greater than or equal to) - 이상
- 메타 태그를 이용한 IE 모드
- <head> 요소 안에 넣어두며 IE가 문서를 읽고 렌더링 할 때 원하는 모드로 렌더링하게 해준다.
반응형
'Frontend' 카테고리의 다른 글
| State Hook과 Effect Hook이란? (0) | 2022.04.17 |
|---|---|
| 클래스 생명주기와 함수형 생명주기 (0) | 2022.04.16 |
| 리덕스란? + 다른 상태관리 라이브러리들 (0) | 2022.04.06 |
| REST API란? (0) | 2022.04.06 |
| 자바스크립트가 싱글스레드인가? (+이벤트루프) (0) | 2022.04.06 |