CSS - Safari 브라우저에서 크로스브라우징 하기

김두나·2023년 11월 6일

HTML/CSS

목록 보기

12/13

웹페이지가 다른 브라우저 및 기기에서 일관된 방식으로 표시되도록 하는 것

애플에서 개발한 웹 브라우저로, 현재 전 세계 웹 브라우저 점유율 2위에 올랐을 정도로 크롬 다음으로 인기가 많다.
애플 MAC OS나 IOS전용으로 출시되어 사실상 애플 전용 브라우저라고 보는게 맞다.

해상도 관리: 모바일 디바이스는 다양한 크기와 해상도를 가지고 있어서 개발할 때 해상도를 고려해 뷰포트 설정을 조정해야 함
CSS문제: 다른 브라우저에서 동일 CSS코드가 작동하지 않을 수 있음. 그렇기 때문에 웹 사이트의 CSS 코드를 크로스 브라우징이 가능한 방식으로 작성해야 함.
예를 들어 CSS에서 지원하지 않는 속성을 사용하지 않는 것 등이 있다.
JavaScript문제: 브라우저별로 처리 속도가 다르기 때문에 다른 브라우저에서 예기치 않은 동작을 할 수 있음.
Safari에서도 다른 브라우저와 마찬가지로 js문제가 발생할 수 있기 때문에 크로스 브라우징을 위해 js코드를 신중하게 작성하고, 반드시 테스트를 수행해야 함.
폰트 문제: 모바일 서비스에서는 다양한 폰트를 사용할 수 있지만 모든 브라우저에서 모든 폰트를 지원하는 것은 아니기 때문에 크로스 브라우징을 위해 폰트 선택에 주의를 해야 한다.
이미지 문제: 이미지는 다른 브라우저에서 처리방식이 다를 수 있다. Safari에서 이미지가 제대로 나타나지 않을 수 있기 때문에 모든 이미제에 대한 적절한 크기와 형식을 사용해 줘야함

메타태그는 HTML 문서의 헤더부분에 위치한 태그로 웹 페이지에 정보를 제공하고 검색 엔진에서 검색 결과를 표시하는데 사용된다.
메타태그는 여러 속성을 가지는데 각 속성은 다른 설정 방법을 가지고 있기 때문에 크로스 브라우징에 사용될 수 있다.

charset: 이 속성은 문서의 문자 집합을 지정.
예를 들어 검색엔진에서 사용되는 검색어를 지정할 수 있음

<meta charset="UTF-8">
name: 메타 데이터의 이름을 지정, 예를 들어 검색엔진에서 사용되는 검색어릴 지정할 수 있음

<meta name="keywords" content="웹디자인, 프로그래밍, SEO">

-http-equiv: HTTP헤더와 관련된 정보를 지정, 예를들어 캐시 관련 정보를 지정할 수 있음

<meta http-equiv="cache-control" content="no-cache">

viewport: 모바일 장치에서 웹페이지를 보여줄 때 사용되는 뷰포트 설정을 지원. 예를 들어 초기 축소 비율과 최대 축소 비율을 지정할 수 있음.

<meta nema="viewport" content="width=device-width, initial-scale=1.0">
content: 메타 데이터 내용을 지정, 예를들어 검색엔진에서 사용되는 검색어의 내용을 지정할 수 있음

<meta name="keywords" content="웹디자인, 프로그래밍, SEO">

Hi!