이 글에서는 각 브라우저 별로 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

    비밀댓글입니다

구글의 크롬[Chrome] OS 를 가상머신에서 구동하는 방법에 대해 알아보겠습니다.

그 전에 크롬 OS 라는 것에 대해 알아야 하는데요, 크롬 OS 란 오픈 소스, 그러니까 모든 사람에게 공개되는 OS 로, 구글에서 개발됬으며 웹 어플리케이션들에 의존하는 OS 입니다. 구글 크롬 OS 는 2010 2분기 경에 일반인들에게 공개될 예정이며, 리눅스 기반으로 제작된 OS 로, 특정한 하드웨어에서만 작동합니다.

중요한 부분은 특정한 하드웨어에서만 작동하기 때문에 일반적인 컴퓨터에서는 크롬 OS 를 사용하기 힘들다는 것입니다. 그래서 생겨난 대안이 바로 가상머신 입니다. 가상머신이란, 하나의 OS 속에 또 다른 OS를 만들어주는 프로그램인데요, 본래 OS에 영향을 주기 않고, 하드웨어적 제한이 비교적 적으므로 테스트에 많이 사용됩니다. 가상머신은 주로 WMWare 와 VIrtualBox 가 알려져 있는데요, 가상머신 이용해서 크롬 OS 를 구동하는 방법을 집중적으로 살펴보겠습니다.

크롬 OS 를 구동하기 위해서는 먼저 크롬 OS 기반 파일이 필요합니다. 이곳에서 크롬 OS 가 설치된 기반 파일을 다운로드 할 수 있습니다. VMWare 와 VirtualBox 용 모두 존재하나, 회원가입을 해야 하고, 속도도 느립니다. 때문에 이곳 보다는 다른 곳에서 다운로드 하시는 것이 좋습니다. Torrent 파일로도 구하실 수 있고, 1번, 2번, 3번 파일을 모두 받으셔서 압축을 해제하시면 VMWare 용 기반 파일이 있습니다. 기반 파일의 이름은 "chrome-os-0.4.22.8-gdgtvm.vmdk" 입니다.

기반 파일을 준비하셨으면 가상 머신을 준비할 차례입니다. 저는 VMWare Player 를 사용할텐데요, 이 프로그램은 무료이며, 이곳에서 다운로드 하실 수 있습니다. 이메일과 기타 간단한 정보들을 입력 후, 무료로 다운로드 하실 수 있습니다. 그 밖에 VMWare 나 VirtualBox 를 사용하셔도 됩니다.

지금부터 저는 VMWare Player 를 기준으로 설명하겠습니다. 하지만, 다른 가상 머신 프로그램들의 구조도 매우 유사하므로 다른 가상머신 사용자님들께서도 별 문제 없이 따라오실 수 있으실 것입니다.

미리 준비한 크롬 OS 기반 파일입니다. 한번 확인해 보시기 바랍니다.

먼저, VMWare Player 를 실행 하신 후 "Create..." 를 클릭합니다.

OS 설치 디스크를 선택하라는 항목입니다. 가장 하단에 나중에 설치하겠다는 옵션을 선택하세요.

OS 의 종류 선택 항목입니다. Other-Otehr 은 선택하시면 됩니다.

가상 머신의 이름과 위치 지정 항목입니다.

가상 머신의 하드 디스크 설정 항목입니다. 어짜피 나중에 삭제할 것이므로 그냥 넘어가세요.

이제 가상 머신 생성이 완료되었습니다. 이때 Customize... 를 클릭합니다.

여기서 RAM 의 여유가 좀 있으신 분들은 512MB 를 선택하세요.

설정을 완료하신 후 가상 머신 탭으로 들어가셔서 Edit... 를 클릭합니다.

여기서 Hard Disk 를 선택하신 후, 하단의 Remove 버튼을 클릭해 삭제합니다. 다시 Add 버튼을 클릭합니다.

Hard Disk 를 선택합니다.

두번째 항목을 선택합니다.

여기서 미리 준비했던 크롬 OS 의 기반 파일을 선택합니다.

만약, 이런 창을 보시면 그냥 기본값으로 넘어갑니다.

이제 부팅을 하시면 크롬 OS의 모습을 보실 수 있습니다. 이때는 GMail 계정이 필요합니다.

안타깝게도 현재 일반 사용자들은 웹 서핑만을 할 수 있습니다. 올해 2분기를 기대해 봅니다. 그래도, 속도나 용량 편에서 매우 우수한 모습을 보여주고 있습니다.

마지막으로, 크롬 OS 의 시연 동영상을 첨부합니다.




신고
  1. Jaeyun Aiden 2010.01.09 03:22 신고

    이제 VMware를 만지고 있는데요. 알면 알수록 재밌는 프로그램인것 같습니다.ㅎ
    구글의 크롬은 어떤 특징이 있는 OS인가요?
    맥이랑 비슷한가요?

    • 초록 날개 2010.01.09 08:57 신고

      안녕하세요?
      무료인 VMWarePlayer 보다 유료인 VMWare 에 여러가지 기능들이 더 많으니까 참고해 보시고요,
      구글의 크롬으로는 아직 웹 서핑밖에 할 수 없는 듯 합니다. 하지만 하단의 시연동영상에서 보셨듯이, 여러가지 기능들도 포함되어 있는 듯 합니다.
      제 개인적인 생각으로는 리눅스를 기반으로 해서 약간 맥 스타일을 띄게 되지 않을까...합니다.

  2. LuckySh 2011.01.14 22:44 신고

    이런게 있었군요...

  3. 안나푸르나 2011.01.19 00:31 신고

    잘읽고 갑니다.^^

  4. 새장속새 2011.01.19 17:55 신고

    뱀웨어는 소프트웨어 테스트 용도로 많이 사용하는데 다른 OS 체험도 해봐야겠네요.

  5. 2011.01.21 14:14

    비밀댓글입니다

이 글에서는 구글 크롬 플러스[Google Chrome Plus]에 대해 설명해 보겠습니다.

작년 10월에 크롬 플러스에 대해 소개를 했었는데요, 새로운 업데이트가 생겨 새로 소개를 하게 됩니다. 자세한 설명은 지난번 글에 자세히 설명했으니 읽어보세요. 이 글에서는 새로운 업데이트 부분만 소개하겠습니다.
2009/11/08 - [Useful Programs] - Google Chrome Plus 1.2.6 <구글 크롬 플러스>-최고의 브라우져

1. IE 모드에서 사용할 수 없었던 링크들의 오류를 고쳤습니다.
2. 보스키가 활성화 되었을 때, 시스템 트레이에 크롬 플러스 아이콘이 생성되는 오류를 고쳤습니다.
3. "지난 탭 복구" 버튼을 클릭 시, 지난 자료가 없는 상황에서 그 버튼이 표시되는 오류를 고쳤습니다.
4. 설정 저장 페이지를 추가했습니다. :/plusconfig page.

다운로드는 이곳에서 가능합니다.

신고

+ Recent posts