'브라우저'에 해당되는 글 4건

  1. 2015.10.20 자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~ (1)
  2. 2012.08.25 웹 브라우저 크기에 따라 내용 부분을 자동으로 늘리기~
  3. 2012.08.20 CSS 호환성을 위하여 MS의 인터넷익스플로러 브라우저 구분하는 방법
  4. 2008.03.13 IE8에 대한 기대와 우려 (2)

자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~

|



자바스크립트를 통해서 브라우저를 확대 축소하는 방법을 정리해 보려고 한다. 

<body> 태그의 style  속성 중 하나인 zoom을 활용하면 쉽게 구현할 수 있다. 


브라우저 확대 축소 자바스크립트 구현

20%씩 확대하고 축소하는 자바스크립트 구문은 다음과 같다. 


scale 값을 기본값인 1로 설정하고, 확대의 경우 20%를 곱하고 축소는 20%로 나누어서 계산하도록 했다. 

그리고 document.body.style.zoom 값을 변경해서 확대 축소를 구현할 수 있다. 



다양한 브라우저 지원

그러나 위 예제는 인터넷 익스플로러, 구글 크롬, 사파리에서만 동작한다. 

파이어폭스나 오페라 등을 지원하기 위해서는 CSS3의 Transform을 활용해야 한다. 

이 부분까지 적용한 전체 소스는 다음과 같다. 


실제로 적용한 화면은 http://www.word.pe.kr/zoom/zoom.html 에서 확인할 수 있다. 







Trackback 0 And Comment 1

웹 브라우저 크기에 따라 내용 부분을 자동으로 늘리기~

|



웹 브라우저의 높이에 따라 본문의 내용을 늘리고 싶은 경우가 종종 있을 수 있습니다. 

이런 경우, 먼저 브라우저의 높이를 가져올 수 있어야 하구요. 

이어서 동적으로 특정 영역의 높이를 지정할 수 있어야 합니다. 


브라우저 높이 가져오기

브라우저의 높이를 가져오는 것은 다음과 같이 매우 간단합니다. 


alert(document.body.scrollHeight);


이 값을 기반으로 하단의 영역을 빼고 본문 영역의 높이를 지정하면 되겠죠. 

참고로 브라우저의 높이와 관련된 자바스크립트 코드를 정리해 봅니다. 



동적으로 높이 지정하기

JQeury를 사용해서 다음과 같이 동적으로 높이를 지정할 수 있습니다. 

css 메소드에 height 값을 설정하는 형태로 했습니다. (바로 height 메소드를 사용할 수도 있습니다.)



이렇게 하면 문서가 로딩될 때 wrap 부분의 영역이 아래로부터 40px 윗부분까지 차지하게 되는 것이죠. 

다만, 이런 방식이 IE에서는 적용이 안되네요.. ㅠㅠ






Trackback 0 And Comment 0

CSS 호환성을 위하여 MS의 인터넷익스플로러 브라우저 구분하는 방법

|



웹 표준으로 개발하면서 CSS를 적용하다 보면 항상 IE가 문제가 됩니다. 

구글 크롬, 파이어폭스, 애플 사파리 모두 제대로 보이는데 IE만 이상하게 보이는 경우가 종종 있습니다. 

IE 8 버전 이후로 웹 표준을 많이 따르기 때문에 좋아졌다고는 하지만 아직도 안 맞는 부분들이 있네요. 


IE 브라우저의 CSS 구분

이런 경우, CSS Hack이라고 하는 특정 브라우저만 적용할 수 있는 편법들이 나오기도 하지요. 

이외에도 일반적으로 사용하는 방법이 브라우저를 파악해서 다른 CSS 파일을 링크하도록 구성하는 겁니다. 

다음 소스를 한번 보시죠.. 



이렇게 하면 IE에서는 common_ie.css 파일을 사용하게 되구요. 

다른 브라우저에서는 common.css 파일을 사용하게 됩니다. 


이게 가능한 이유는 IE 브라우저가 8버전을 내 놓으면서 

기존의 IE 7 이하와 호환성을 유지하기 위해 HTML에 <!--[if IE] 라는 구문을 주석 형태로 넣었기 때문입니다. 

다른 브라우저에서는 주석이므로 무시하게 되고, 오직 IE에서만 해당 구문을 읽어서 동작하게 되는 것이죠. 

(정말 편법은 대단합니다. ^^)


단순히 IE만 구분하는 것이 아니라 IE의 버전별로도 구분할 수 있습니다. 



Table width 문제 발생시 처리 

특히 IE의 경우, Table의 width가 제대로 처리되지 않는 문제가 많이 발생했었는데요. 

"IE table width problem"으로 구글 검색 해보면 상당히 많은 글들이 나옵니다. 


저의 경우에도 희한하게 IE에서만 Table 구조가 깨지는 경우가 있어서 다음과 같이 처리해 봤습니다. 


<table style="table-layout:fixed"> ... </table>


table-layout 속성은 CSS2부터 포함된 것인데요. 

fixed 값으로 설정되어 있으면 테이블의 넓이를 각 테이블이나 셀에서 설정한 대로 보여주라는 것입니다. 

그러므로 Table내에 width를 잘 설정했다면 IE가 임의대로 출력함으로써 Table 구조가 깨지는 것을 방지해 주는 것이죠.


CSS에서 IE 7과 IE 8, 9의 호환성 유지하는 방법

인터넷 익스플로러에서도 IE 7버전과 8, 9 버전의 호환성을 유지할 필요가 있습니다. 

특히 좌우 여백을 설정하는 경우에 주로 차이가 발생하는데요. 이런 경우 사용할 수 있는 팁은 다음과 같습니다. 


.pass { width:323px; height:44px; margin-left:56px;}
*:first-child+html .pass {margin-left:28px;}


위와 같이 설정하면, IE 7에서 margin-left:28px 가 적용되고 IE 8이나 9에서는 margin-left:56px가 적용되네요. 

이와 관련한 참고 사이트는 http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/ 를 보시면 됩니다. 

 




Trackback 0 And Comment 0

IE8에 대한 기대와 우려

|



몇달 전 IE 8 베타버전이 나오고 난 후, MS에서는 Acid2를 통과했다고 발표했습니다.
그러나 해외 블로거들 사이에서는 IE 8이 Acid2를 통과하는데 문제가 있다고 이야기들 하고 있습니다.

먼저 Acid가 무엇인지 잠깐 정리해 볼 필요가 있을 것 같습니다.
Acid란 쉽게 말하면 웹 브라우저가 얼만큼 웹 표준을 지키고 있는지 테스트하는 웹페이지입니다.

Acid1은 w3c에서 만든 테스트 버전으로 CSS1에 대한 표준을 준수하고 있는지 확인합니다.
Acid2는 HTML과 CSS2.1스펙을 중점적으로 테스트하는데요.. 테스트를 통과할 경우 스마일 이미지와 Hello World가 나타납니다.
Acid3는 가장 최근에 만들어졌는데요. 웹 2.0을 위한 동적인 웹 애플리케이션을 만드는데 필요한 스펙을 테스트합니다.

Acid에 대한 설명은 minicube님의 웹브라우저를 위한 웹표준 테스트 Acid Test를 참고하시기 바랍니다.
설명이 잘 되어 있네요..

어쨌든 MS가 말한대로 Acid2 테스트를 통과했다면 다음과 같은 그림이 나와야 하는데요..
사용자 삽입 이미지
실제로 테스트해보니 아래와 같이 완벽하게 통과가 안된다고 하는 겁니다.
사용자 삽입 이미지

아니.. 그럼 MS가 거짓말을 하고 있다는 건가요?
그건 아닌것 같구요.. MS가 IE 8을 테스트한 환경은 공식적인 Acid2 테스트인 http://www.webstandards.org/files/acid2/test.html 에서 진행을 했고 통과되었다고 합니다.
그런데 인터넷 상에는 이 사이트의 많은 복사 사이트들이 있습니다.
실제로 많이 사용하는 사이트로 http://acid2.acidtests.org/가 있죠..

이런 복사 사이트에서는 Acid2가 실패한다는 겁니다. IE 플랫폼이 ActiveX를 위해 cross domain security check 때문이라는 거죠..
잘은 모르겠지만, ActiveX 때문에 Object 태그를 처리하는데 있어 MS가 꼼수를 부린게 있는 듯 합니다.
그게 원래 테스트 사이트에서는 잘 돌아갔으나.. 다른 미러링 사이트에서는 크로스 도메인의 보안 문제로 통과되지 못하는 것 같구요..
(ActiveX는 이제 정말 없어져야 할 것 같아요.. -.- 도대체 우리나라는 왜 ActiveX를 고집하는지.. 쩝)

그리고 최근 발표된 Acid3 테스트에 있어서 IE 7은 100개중 14개를 통과했구요.
IE 8은 100개중 17개를 통과했다고 하네요.. Acid3는 아직 멀었나 봅니다.

또 한가지 사항은 MS가 XHTML 문서에서조차도 여전히 XHTML과 호환되지 않는 IE-HTML DOM을 사용하고 있다는 겁니다.
대표적으로 XHTML 표준에서는 모든 엘리먼트나 속성을 소문자로 사용해야 합니다.
XML 자체가 <li>와 <LI>를 구분하기 때문인데요. IE에서는 DOM 엘리먼트의 innerHTML을 사용할때 XHTML 표준과 관련된 문제가 좀 발생한다고 하네요..

사용자 삽입 이미지

이 글을 읽는 분들 중에.. 에이~ 웹사이트만 잘 나오면 되지 저런 표준이 뭐가 중요해 하고 생각할 수 있을 겁니다.
하지만 개발자 입장에서는 브라우저를 IE와 FF, 심지어 Safari까지 지원하려 할 때, 항상 문제가 되는 것이 IE 이라는 것을 느낄 겁니다.
간단한 Ajax 프로그래밍을 해도 예전에는 IE만 따로 체크하기도 했었잖아요..
물론 국내에서야 IE를 대부분 사용하니 IE만 지원하면 되겠지.. 하고 생각하면 어쩔 수 없지만, 이제 웹 사이트의 비즈니스도 국내만 대상으로 할 건 아니지 않나 싶습니다.

MS에서 IE 8에 대한 홍보사이트를 구성해서 운영하고 있습니다.
IE 8 Readiness Report 인데요~ 한번 들어가서 둘러보시면 IE 8에 대한 많은 정보를 얻을 수 있을 겁니다.

대표적으로 Ajax 관련 기능들을 대폭 개선했다는 정보들, cross domain  관련 기술들, HTML/CSS 표준 지원 등에 대해 이야기를 하고 있습니다.

물론 IE 8 부터는 좀 더 표준을 준수하는 형태로 발전해 갈 것 같습니다.
한때 넷스케이프를 제치고 웹브라우저 시장을 장악했던 MS 입장에서 새롭게 올라오고 있는 파이어폭스나 사파리등에 대처하기 위해서는 어쩔 수 없었겠죠..

이래서 모든 시장에서는 독점보다는 경쟁이 필요한 것 같습니다.

참고한 글은 다음과 같습니다.
IE 8 on Acid, Internal IE-HTML DOM still isn’t XHTML compliant, IE 8: Better Ajax, CSS, DOM, and new features - from Ajaxian

'리뷰' 카테고리의 다른 글

2009년 탁상달력 공모..  (0) 2008.11.27
소니 UMPC UX58LN  (4) 2008.06.16
IE8에 대한 기대와 우려  (2) 2008.03.13
XML DeveloperGroup 자료모음  (7) 2008.02.19
야후는 왜 관심을 받지 못할까?  (4) 2008.01.21
미니맵 매쉬업의 iframe 소스 활용  (2) 2008.01.15



Trackback 0 And Comment 2
prev | 1 | next