은빛소나기의 개발노트

1. 개요

2. 크로스 브라우징이란 ?

3. 크로스 브라우징 코딩법


1. 개  요

최근 웹 표준의 필요성이 대두되고 있는바, 웹 표준화를 위하여 크로스 브라우징에 대한 기본적인 개념과 지식을 익히기 위한 자료이다.

2. 크로스 브라우징이란?

▲ 크로스 브라우징의 정의

크로스 브라우징은 웹 표준 기술을 채용하여 다른 기종/플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 말한다. 흔히들 모든 브라우저에서 동일한 페이지가 출력되도록 하는 것을 크로스 브라우징이라고 하는데 사실상 그것은 불가능하다. 각각의 플랫폼의 글꼴이 다르며, 브라우저의 렌더링 엔진이 다르기 때문이다.

▲ 접근 호환성

접근 호환성은 크로스 브라우징에 포함되는 개념으로 다양한 종류의 브라우저간의 호환성 뿐만 아니라 일반인을 포함한 모든 사용자(시각 장애인, 저시력자, 노약자, 어린이 등)을 포함한 사용들에게 높은 접근성을 갖게 웹 페이지를 구축하는 것을 뜻한다. 예를 들자면 img 태그의 경우 브라우저나 볼 수 없는 사용자를 위해 대체 택스트(alt 속성) 작성해야 한다. 또한 글꼴 역시 크기가 고정되어 있는 고정 글꼴이 아닌 사용자가 수정할 할 수 있는 가변 글꼴을 선택하여 저 시력자들의 편의를 보호해야 한다.
이렇게 접근성을 고려하여 사이트를 제작하였다면 텍스트 전용 브라우저인 Lynx를 이용하여 확인해 보는 것이 좋다.

3. 크로스 브라우징 코딩 법

▲ HTML

크로스 브라우징을 고려한다면 HTML 작성시 가장 중요한 것은 표준의 준수이다. 대부분의 HTML의 경우(XHTML 1.0 혹은 1.1)을 준수한다면 상호 호환성(크로스 브라우징)의 경우 문제가 없다. 대부분 브라우저 사이간 독립된 태그를 사용했던 것은 넷스케이프와 익스플로러가 한창 싸우던 시절이다. 최근 개발되는 브라우저들은 대부분 웹 표준에 근거하여 브라우저를 개발하고 있기 때문에 웹 표준을 준수한다면 브라우저간의 해석 차이를 많이 줄일 수 있다.
그렇지만 몇 가지 주의할 점들이 있다.

- 메타 태그를 준수하라. 모질라의 경우 문자셋을 자동으로 해석하지 않아 텍스트가 깨져 보일 수 있다. 

    <meta http-equiv=”Content-Type” content=”text/html; charset=euc-kr”>

- frame태그는 HTML4.01에서 권장하지 않는 방법이다. frame 대신하여 iframe나 div등의 대체 안이 나와있으니 되도록이면 frame는 사용하지 말고 부득이하게 사용할 경우 frame 비 지원 브라우저를 위하여 noframes 항목으로 설명을 넣어주어야 한다.

- font태그 역시 HTML4.01에서부터 권장하지 않는다. 이는 모두 CSS로 대체될 수 있으며, 주요 부분마다 span 태그에 스타일 시트를 적용하는 방법으로 대체할 수 있다.

▲ CSS

웹 표준을 준수하여 웹 페이지를 제작할 때 가장 많은 부분 중 하나가 CSS다. 특히나 IE의 경우 CSS로 인한 버그가 많기 때문이 이 부분을 고려해야 한다.

- IE 박스모델
   IE의 경우 박스(div, span, p 등등)의 크기를 계산하는 모델이 다른 브라우저들과는 다르다.
 

<style type="text/css">
.box1 { height:200px; width:200px; border:1px solid #ff00ff; padding:20px;}
.box2 { height:158px; width:158px; border:1px solid #ff00ff; padding:20px;}
</style>
<div class="box1">IE Box Model1</div>
<div class="box2">Standard Box Model1</div>

  만약 넓이와 높이가 200px이며 안쪽 여백이 20px인 박스를 만들고자 한다면 표준 모델의 경우 넓이와 높이를 각각 158px을 주고 안쪽 여백을 20px로 그리고 테두리를 1px씩 주면 200px크기의 박스가 완성된다. 그러나 IE의 경우 padding과 border의 값이 박스의 크기에 영향을 미치지 않는다.
  



  다음이 IE의 박스모델을 해결하는 핵이다.

html .box2 { height:158px; width:158px; border:1px solid #ff00ff; padding:20px; }
* html .box2 { height:200px; width:200px; h\eight:158px; wi\dth:158px; }
 

 * 키워드는 IE에서만 인식이 되므로 우선순위에 따라서 나중에 선언된 * html .box2 가 적용이 되어 IE에서는 200px으로 지정이 되는 것이다. 그러나 Mac용 IE 5.x의 경우 박스모델이 표준 모델로 렌더링 되기 때문에 다시 150px으로 설정해야 하는데, 이럴 경우 이스케이프 문자(\)를 사용하면 Mac에서는 해당 이스케이프 문자가 인식되지 않기 때문에 다시 158px로 설정이 된다. 이 핵을 사용하면 박스모델의 문제는 해결할 수 있다.

    

  * 왼쪽부터 IE 7.0 Firefox, IE 5.01, IE 6.0, Google Chrome

- 더블마진 플로트 버그
   IE 6이하 버전에서 발생하는 버그로 플로트가 지정된 엘리먼트의 마진 값이 지정한 값의 두 배로 표시되는 버그이다. 이 버그는 엘리먼트의 display 속성을 inline으로 변경해주면 해결된다.

- 텍스트 주변의 공간이 생기는 버그
    IE 6이하 버전에서 발생하는 버그로 텍스트 주변에 플로트 속성을 가진 엘리먼트가 있을 때 해당 위치의 텍스트 앞에 3픽셀 정도의 마진이 생긴다. 
   




   이때는 플로트 되는 엘리먼트의 높이를 아주 작게(height:1%;) 하면 해결되는데 IE5이하 버전에서는 다른 방법으로 해야 한다. IE6이상 버전에서는 텍스트의 마진 값을 플로트 엘리먼트의 넓이만큼 지정하지 않을 시에 레이어가 겹치는 현상이 일어나기 때문에 텍스트의 왼쪽 마진을 주어 공간을 만드는데, IE5버전에서는 그 마진을 없애야 한다. 즉 p태그에 주어진 마진을 없애고 플로트 엘리먼트의 양쪽 마진에 -3px를 주면 문제가 해결된다.

이 외에도 많은 버그들이 존재하지만 말 그대로 너무나도 많기 때문에 더 이상 다루지 않도록 하겠다.

이것으로 웹 표준에 관련된 기본 강좌는 마치도록 하겠다.