크로스 브라우징(cross browsing)
우선 아래 사진을 살펴보자.
위 사진은 동일한 리액트 파일을 크롬으로 실행한 화면, 아래는 사파리로 실행한 화면이다.
아래 사진과 달리, 위 카테고리 안의 글자가 text-align:center가 적용되지 않아, 중앙이 아닌 왼쪽으로 치우쳐진 모습을 볼 수 있다.
이것이 바로 크로스 브라우징을 고려하지 않은 사례이다.
여기서 크로스 브라우징 (cross-browsing)이란, 웹 페이지 제작 시, 다양한 브라우저에서 개발자가 의도한 대로 올바르게 나타나는 것을 말한다.
그렇다면 크로스 브라우징을 위해 어떻게 설정을 해야할까?
1. CSS Reset
css reset이란, 브라우저마다 기본적으로 제공되는 고유 css를 초기화하는 작업을 말한다.
이를 통해, 각 브라우저마다 공통의 기본 값을 제공할 수 있다.
(깨끗한 상태로 만든다고 보면 된다.)
1. CDN 이용하기
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
/>2. 사이트를 통해 이용하기
아래 사이트에 들어가서 코드 복사
그 다음, reset.css 생성 후 복사했던 코드를 붙여 넣기 후
app.css에 import해주면 된다.
@import "./reset.css"2. 벤더 프리픽스 (Vendor Prefix)
벤더 프리픽스는 각 브라우저별 접두사를 이용하여 css를 동일하게 하는 방법을 말한다.
| 벤더 | 프리픽스 | 사용하는 브라우저 |
|---|---|---|
| -webkit- | -webkit- | Chrome, Safari |
| -moz- | -moz- | Firefox |
| -ms- | -ms- | Internet Explorer |
| -o- | -o- | Opera |
3. 브라우저 테스트 사이트 이용
사이트를 이용하여 브라우저 테스트를 하는 방법이다.
이를 이용하여 다양한 브라우저 및 버전 그리고 운영체제에서 웹사이트가 어떻게 보이는지 확인할 수 있다.
사이트는 다음과 같다.
🍡 힙하게 개발하고 싶은 사람 💻