이 글에서는 각 브라우저 별로 CSS 스타일을 다르게 적용하는 방법을 설명해 보겠습니다.

브라우저 별 CSS 다르게 적용하기

현재 우리나라에서 웹 사이트를 디자인할 때 고려해야 할 브라우저는 3가지 정도입니다. 점유율이 어느 정도 이상인 인터넷 익스플로러와 구글 크롬, 그리고 파이어폭스 정도까지는 고려해서 디자인을 해야 합니다. 물론 최근 스마트 폰이 급격히 보급되면서 스마트 폰 환경에 최적화된 모바일 스킨도 필요합니다.

그런데 문제는 같은 내용의 HTML 및 CSS 소스로 디자인 된 페이지도 브라우저에 따라 다르게 보일 수가 있다는 점입니다. 특히 CSS 스타일 부분에서는 각 브라우저 별로 위치 지정시의 기준점이 다르다는 점 등 고려해야 할 점이 많습니다. 이 문제의 해결을 위해서 CSS 소스 내에서 각 브라우저마다 적용할 부분에 차이를 둘 수도 있겠지만 여기서는 아예 브라우저별로 CSS 소스 전체, 즉 CSS 파일 자체를 다르게 적용하는 방법을 설명해 보려고 합니다.

먼저 이 방법은 CSS가 아닌 HTML 소스를 수정하는 방법입니다. 일반적으로 웹 페이지의 개체 및 전체적인 디자인은 HTML에 의해 만들어집니다. 그리고 필요한 경우 HTML 소스에 CSS 스타일을 사용한다는 내용을 추가해 좀 더 세부적인 디자인을 편리하게 할 수 있습니다. 즉 HTML 소스에서 각 브라우저 별로 다른 CSS 파일을 불러오게 하면 됩니다.

<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />

위 소스는 티스토리에서 CSS 소스를 불러오는 소스입니다. 여기서는 계속해서 티스토리의 경우를 예를 들어 설명하게습니다. 주위에 아무런 조건이 없으므로 모든 브라우저에서 같은 CSS 소스를 불러오게 되죠.

그런데 위 소스 주위에 다른 조건을 붙여 주면 이야기가 달라집니다.

<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> 
<![endif]-->

위와 같은 상황에서는 인터넷 익스플로러에서만 CSS 소스를 불어오게 됩니다.  즉 if 조건을 이용해 브라우저 별로 다른 CSS 파일을 불러오게 하는 것입니다. 세부적인 if 명령어는 간단한 검색으로도 찾으실 수 있습니다. 간단하죠?

마지막으로 한 가지 예를 들어보겠습니다.

<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> 
<![endif]-->
<!--[if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="./images/style2nd.css" /> 
<![endif]--> 

위 소스는 인터넷 익스플로러 환경에서는 기본적인 style.css 파일을 불러오고 인터넷 익스플로러 외의 브라우저에서는 images 폴더에 업로드 된 style2nd.css 파일을 불러온다는 소스입니다.

굉장히 유용하게 쓰일 수 있는 방법인 것 같아 소개해 보았습니다. 
신고
  1. 2015.10.16 15:55

    비밀댓글입니다

+ Recent posts