Wednesday, May 17, 2006
HTML CSS : 브라우저가 파이어폭스(Gecko 게코 엔진)인지, 오페라인지 확인하는 자바스크립트
프로그래밍 언어인 '자바스크립트' 관련 포스트입니다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
브라우저 종류에 따라, 같은 HTML/CSS 코드라도 웹페이지에 나타나는 결과가 상당한 차이가 납니다. 이때는, 그리 바람직한 방법은 아니지만 어쩔 수 없이, 자바스크립트로 브라우저 종류를 판별하여 각 브라우저에 맞게 HTML/CSS 코드를 동적으로 수정해 주어야 합니다.
파이어폭스에서는 게코(Gecko) 엔진을 사용해 웹페이지를 렌더링합니다. 그런데 넷스케이프에서도 게코 엔진을 쓰는 모양입니다. 렌더링 엔진만 같다면 웹페이지의 출력 결과도 (이론적으로) 같기 때문에,
'IE'와 '파폭'으로, 브라우저를 구분하는 것보다는
'Gecko 엔진'과 'Gecko 엔진이 아닌 것'으로 구분하는 것이 더 이상적일 것 같습니다.
위의 IsGecko() 함수는, 게코 엔진을 사용하는 브라우저에서는 참(true), 그렇지 않은 경우 즉 IE 등을 사용하는 경우에는 거짓(false)을 반환합니다.
한편, IsOpera() 는 오페라 브라우저인지를 알아내는 것입니다. 오페라 브라우저에서는 참(true), 그렇지 않은 경우에는 거짓(false)을 반환합니다.
오페라와 파이어폭스는 렌더링 결과가 비슷했습니다. 그런데 오페라는 게코 엔진을 사용하지 않기 때문에 IsGecko() 함수만으로는 IE와 오페라가 구분이 되지 않는 문제가 있습니다. 그래서 IsOpera() 함수를 사용해 오페라인지를 더 확실히 해두어야 하는 경우가 있었습니다.
위의 함수들은 제가 예전에 홈페이지를 만들 때 쓰던 것인데 정확하게 작동했습니다.
IE인지 아닌지 구분하는 함수 즉 IsIE() 함수를 만들려고도 했는데, IE는 navigator.userAgent 의 값이 좀 모호해서 포기한 적이 있습니다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
위의 코드 박스에 있는 코드를 foo.html 등의 이름으로 여러분의 하드에 저장하고, 그런 후 foo.html 을 IE 즉 인터넷 익스플로러로 보시면 그냥 평범하게,
파이어폭스 등으로 보시면 바탕색이 오렌지색으로 변하고 그 오렌지색 상자 안쪽으로 많은 여백(padding)이 주어져 있을 것입니다.
물론 가장 좋은 방법은 이런 스크립트를 쓰지 않고도, 모든 브라우저에서 동일한 결과가 나오도록 하는 것입니다.
가령 div 태그로 사각형 영역을 만들면 여백 등의 차이가 심한 경우가 있었는데, table 태그로 사각형 영역을 만들면 차이가 거의 없고 안정적이더군요.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
<script type="text/javascript">
function IsGecko() {
if (navigator.userAgent.toLowerCase().indexOf('gecko') != -1) return true;
return false;
}
function IsOpera() {
if (navigator.userAgent.toLowerCase().indexOf('opera') != -1) return true;
return false;
}
</script>
function IsGecko() {
if (navigator.userAgent.toLowerCase().indexOf('gecko') != -1) return true;
return false;
}
function IsOpera() {
if (navigator.userAgent.toLowerCase().indexOf('opera') != -1) return true;
return false;
}
</script>
브라우저 종류에 따라, 같은 HTML/CSS 코드라도 웹페이지에 나타나는 결과가 상당한 차이가 납니다. 이때는, 그리 바람직한 방법은 아니지만 어쩔 수 없이, 자바스크립트로 브라우저 종류를 판별하여 각 브라우저에 맞게 HTML/CSS 코드를 동적으로 수정해 주어야 합니다.
파이어폭스에서는 게코(Gecko) 엔진을 사용해 웹페이지를 렌더링합니다. 그런데 넷스케이프에서도 게코 엔진을 쓰는 모양입니다. 렌더링 엔진만 같다면 웹페이지의 출력 결과도 (이론적으로) 같기 때문에,
'IE'와 '파폭'으로, 브라우저를 구분하는 것보다는
'Gecko 엔진'과 'Gecko 엔진이 아닌 것'으로 구분하는 것이 더 이상적일 것 같습니다.
위의 IsGecko() 함수는, 게코 엔진을 사용하는 브라우저에서는 참(true), 그렇지 않은 경우 즉 IE 등을 사용하는 경우에는 거짓(false)을 반환합니다.
한편, IsOpera() 는 오페라 브라우저인지를 알아내는 것입니다. 오페라 브라우저에서는 참(true), 그렇지 않은 경우에는 거짓(false)을 반환합니다.
오페라와 파이어폭스는 렌더링 결과가 비슷했습니다. 그런데 오페라는 게코 엔진을 사용하지 않기 때문에 IsGecko() 함수만으로는 IE와 오페라가 구분이 되지 않는 문제가 있습니다. 그래서 IsOpera() 함수를 사용해 오페라인지를 더 확실히 해두어야 하는 경우가 있었습니다.
위의 함수들은 제가 예전에 홈페이지를 만들 때 쓰던 것인데 정확하게 작동했습니다.
IE인지 아닌지 구분하는 함수 즉 IsIE() 함수를 만들려고도 했는데, IE는 navigator.userAgent 의 값이 좀 모호해서 포기한 적이 있습니다.
IsGecko() 함수 사용의 쉬운 예제
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
<html>
<head>
<script type="text/javascript">
function IsGecko() {
if (navigator.userAgent.toLowerCase().indexOf('gecko') != -1) return true;
return false;
}
</script>
</head>
<body>
<div id="wasabi_IsGecko_test">
이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들...
</div>
<script type="text/javascript">
if (IsGecko()) document.getElementById('wasabi_IsGecko_test').style.padding = '16%';
if (IsGecko()) document.getElementById('wasabi_IsGecko_test').style.backgroundColor = 'orange';
</script>
</body>
</html>
<head>
<script type="text/javascript">
function IsGecko() {
if (navigator.userAgent.toLowerCase().indexOf('gecko') != -1) return true;
return false;
}
</script>
</head>
<body>
<div id="wasabi_IsGecko_test">
이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들... 이런저런 내용들...
</div>
<script type="text/javascript">
if (IsGecko()) document.getElementById('wasabi_IsGecko_test').style.padding = '16%';
if (IsGecko()) document.getElementById('wasabi_IsGecko_test').style.backgroundColor = 'orange';
</script>
</body>
</html>
위의 코드 박스에 있는 코드를 foo.html 등의 이름으로 여러분의 하드에 저장하고, 그런 후 foo.html 을 IE 즉 인터넷 익스플로러로 보시면 그냥 평범하게,
파이어폭스 등으로 보시면 바탕색이 오렌지색으로 변하고 그 오렌지색 상자 안쪽으로 많은 여백(padding)이 주어져 있을 것입니다.
물론 가장 좋은 방법은 이런 스크립트를 쓰지 않고도, 모든 브라우저에서 동일한 결과가 나오도록 하는 것입니다.
가령 div 태그로 사각형 영역을 만들면 여백 등의 차이가 심한 경우가 있었는데, table 태그로 사각형 영역을 만들면 차이가 거의 없고 안정적이더군요.
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home