Cross Browsing 가이드 : 목차 | 참고 문헌

3. 올바른 코딩 방법

3.1 HTML

표준 HTML을 담은 웹페이지를 만든 다는 것은 어떤 의미인가? 먼저는 비표준적인 HTML과 자바스크립트 코드를 표준 코드로 바꾸는 것을 의미한다. 또한 웹페이지를 완벽한 형태(well-formed)를 갖춘 코딩 방 식을 사용하는 것이다. 즉, HTML의 기본인 열기와 닫기를 완벽하게 구성하는 것이 중요하다. 특히 <img>. <br>. <p> 같은 태그들을 예외적으 로 제외하고 모든 태그들은 이 규정을 지켜야 한다. 은 이것들을 빼먹기 쉽다. 특히 열고 닫는 위치는 정확해야 한다. 다음은 틀린 방식이다.

<b><i>These tags are not nested correctly.</b></i>

대신 아래의 표현이 정확한 방식이다.

<b><i>This text will be bolded and italicized.</i></b>

또는, <i><b>This text will also be bolded and italicized.</b></i>

가끔 <blockquote> </blockquote> 를 들여쓰기를 하기 위해 사 용하는 경우가 가끔 있는데, 이것은 문장의 인용에 사용하는 태그이다. 또한, <p> 를 한줄 바꿈으로 오해하고 있으나 이는 문단을 바꿀 때 사용하며, 한줄 바꿈은 <br>을 사용해야 한다.

또한, <!DOCTYPE> 태그 역시 제대로 알지 못하고 사용하는 경우가 많다. 이것은 HTML 파일 처음에 적는 것으로 이 페이지에서 사용하는 HTML 버전을 브라우저에게 알려주는 역할을 한 다. HTML 버전에 따라 해석되는 방식이 브라우저에 따라서도 다르기 때문에 이를 지정해 주는 것은 매 우 중요하다. 브라우저가 정확히 HTML을 해석하고 표시할 수 있도록 이 태그의 여러 가지 사용 방법을 알아야 할 필요가 있다. HTML4.01에서는 <font>. <b>, <frame>와 같은 태그를 사용하지 못하도록 하기 때문에 DOCTYPE에 대한 사용상 이 해를 가져야 한다.

가장 흔히 사용되는 코드는 일반 형식과 엄격한 형식으로 나누어 지게 된다. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">은 HTML 4.01에서 예전에 있었거나 없어 진 태그도 지원하며, <font>에 지정된 스타일도 제대로 표현하여 준다. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">은 HTML 4.01을 엄격 하게 적용한다. <font> 태그에 적용된 스타일 보다는 CSS파일에서 지정된 스타일을 지켜 표현한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">은 HTML 4.01에서 Frames을 포함하는 웹 페이지에서 사용한다.

이러한 표현 방식에는 W3C <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">처럼 W3C에서 제공하는 DTD파일을 포함하기도 한 다. 이는 HTML 4.01을 일반적으로 적용하는 경우이고, 엄격하게 적용하는 경우, <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html401/strict.dtd">, 그리고 앞서 언급한 대로 HTML4.01에서 프레임을 사용 하는 경우 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html401/frameset.dtd">를 사용한다.

이러한 DOCTYPE 선언에 차이는 다음과 같다. 만약 웹사이트에 body {font-family: Helvetica, sans-serif; font-size: 200%;}와 같은 스타일을 지정한 다음 서로 다른 DOCTYPE을 지정한 경우 아래와 같이 표현된다.

a) Transitional 형식으로 규정한 경우 b) Strict 형식으로 규정한 경우

[그림. 8 DOCTYPE에 따른 HTML 표시 방법]

유사한 예로서, font-size에 대해서도 IE와 NN은 다르게 표현한다. 이러한 차이는 옛날 브라우저일수록 더욱 심하며, 최근에는 브라우저 개발자들이 표준을 지키고 있기 때문에 많이 사라졌다. DOCTYPE을 규 정하는 가장 좋은 방법은 Strict 형식을 사용하는 것이다. 이것은 CSS를 통해 모든 HTML 태그의 속성을 자유자재로 규정할 수 있기 때문이다. 즉, b {font-weight: normal;} 라고 적는 다면 더 이상 <b>는 굵은체로 표시되지 않는다. 이것은 CSS를 통해 웹브라우저에 통일된 스타일 적용을 가능하게 한다.

통상적인 웹브라우저는 meta 태그를 통해 선언되어 있지 않더라도 문자코딩을 자동적으로 감별하여 표 시하지만 Mozilla는 그렇게 하지 않는다. 따라서 meta태그의 charset을 euc-kr 등으로 아래와 같이 지정해 주어야 한다. 만약 이것을 빠뜨리면 모질라에서 한글이 깨지는 상황이 생겨 마치 오류처럼 보일 수 있는 가장 첫번째 요소이다.

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

또한, form에서 post 후에 통상적으로 이전 문자셋 코드를 그대로 사용하는 데 모질라는 데이터를POST 로 송신한 후 페이지에 대해 자동 판별을 하지 않는다. 단, POST후에 표시되는 페이지에 문자 코드 선 언이 있는 경우 (HTTP헤더 혹은HTML안에서의 meta) Mozilla는 그 지정된 문자 코드로 페이지를 표시한 다.

<table>을 사용할 때도 흔히 <tr>, <td>로 만 행과 열을 표현하고 있는데, 제목행에 대해서는 <th>를 데이터행에 대해서는 <td>를 사용하는 것이 필요하다. 두 개 이상의 논리적인 제목행이나 제목열을 갖는 데이터가 들어있는 표에서는 데이터 칸끼리 또는 제목 칸끼리 관련 짓는 마크업을 사용한다. 예를 들면, HTML에서 행을 모둠 지으려면 THEAD, TFOOT, TBODY와 같은 마크업을 사용하고, 열을 모둠 지으려면 COL, COLGROUP을 사용한다. IE에서는 table내에 bordercolorlight 속성과 bordercolordark 속성을 통해 음영 을 주고 있지만, 다른 브라우저는 이를 사용하지 않기 때문에 사용하지 않는 것이 좋다.

<표2>는 HTML에서 필수적으로 바꾸거나 사용하지 말아야 하는 표현들을 정리하였다. 비 권장 요소들은 대체할 수 있는 제안들이 이미 나와 있는 경우이다.

바르지 않는 표현추천하는 표현
NN4 <layer> HTML 4.0 <div>
NN4 <nolayer> >HTML 4.0 <div>
NN4 <ilayer> HTML 4.0 <iframe>
NN4 <blink> CSS1 문자 표시 요소 text-decoration: blink;
NN4 <div>, <layer> 에서 src=HTML 4.0 <iframe> 의 src=
IE3/4/5 <marquee>HTML 4.0 <div> DOM1의 Javascript로 표현.
IE3/4/5 <bgsound>HTML 3.2 NN4-에서는 <embed> 기타 웹 브라우저에서는 <object> 를 사용.

[표.2 HTML에서 필수 변경항목]

NN4에서는 iframe이나 div가 지원되지 않는다. 따라서 iframe이나 div를 사용할 때 아래와같이 layer나 nolayer를 같이 사용하면 NN4를 지원 할 수 있다. 단 div에서 src를 지정하여 외부 파일을 읽어 오는 것은 표준적인 방법이 아니므로 이때는 iframe을 사용해야 한다.

<IFRAME ID="foo" SRC=foo.html> <LAYER NAME="foo" SRC=foo.html>
</LAYER> </IFRAME>

<LAYER NAME="NN4content" SRC=foo.html></LAYER>
<NOLAYER><DIV ID="nav6content">…. </DIV></NOLAYER>

HTML4.01에서 권장되어 있지 않으면서 가장 널리 쓰이는 것이 <font>이다. 이것은 이미CSS로 옮겨지고 있으므로 이는 <div>나 <span>으로 옮기는 것이 좋다.

<FONT color="blue" face="Helvetica">Real
<FONT size="+1">Fun</FONT> Ficture</FONT>

는 다음과 같이 표현한다. SPAN에 사용하는 id를 통해 CSS를 지정할 수도 있다.

<SPAN style="color:blue; font:Helvetica">Real
<SPAN style="font:larger">Fun </SPAN> Books</SPAN>

Frame은 이미 HTML4.01에서 권장하지 않는 방법이다. 이것은 iframe이나 div의 대체안들이 이미 나와 있기 때문이다. 될 수 있으면 frame을 쓰지 않는 것이 좋으나 만약 써야 한다면, frame 비 지원 브라우 저를 위해 noframes 항목을 통해 설명을 넣어 주는 것이 좋다.

<FRAMESET ROWS="30,*">
<FRAME SRC="foo.html">
<FRAME SRC="bar.html">
<NOFRAMES>
This page requires frames. See <a href="noframes.html">sitemap</a>. </NOFRAMES>
</FRAMESET>

<img>요소의 alt속성에 값을 설정해 두면 그림 위에 마우스 커서를 놓았을때, pop- up에 의해 alt의 설명이 나온다고 생각하는 것은 잘못된 것이다. 그러한 기능을 하는 것은 title이다. title속성은 모든 HTML 태그에 공통적으로 사용하여 설명을 나타내는 것이다. alt가 하는 역할은 단지 그림에 대한 설명뿐임을 기억해야 한다. 아래 예제는 그것을 설명해 준다.

<p title="예제입니다.">
만약 Mozilla에 버그를 찾아냈을 경우 <a HREF="http://www.mozilla.or.kr/"
title="한글 모 질라"> 한글 모질라</a>에 보고하세요. <img src="?.gif"
alt="(?)" title="질문하기">
</p>

<form>은 HTML사양에서 내부 요소이지 자식 요소가 아니다. IE는 <form>태그를 닫지 않은 경우, 자동으로 닫아 주는 경향이 있는데 이것도 잘못된 것이다. 따라서 <form>은 정확히 열고, 닫기를 하는 것이 중요하다.

3.2 CSS

CSS을 사용할 때 우리가 가장 잊어버리기 쉬운 사실은 CSS를 지원하지 않는 예전 웹브라우저가 있다는 점이다. 대개 IE3.0과 NN4등이 CSS를 지원하지 못하며, 이들 버전은 전체 웹브라우저의 1%도 채 되지 않는다. 그러나, 이들 웹브라우저를 위해서 아래와 같이 각 HTML 태그에 대해서 간단한 속성을 부여하 거나, BODY의 속성을 미리 선언해 주는 것이 좋다.

<BODY alink="#xxxxxx" bgcolor="#xxxxxx" link="#xxxxxx"
text="#xxxxxx" vlink="#xxxxxx">
<H1><FONT face="Courier" size=+4>Test Title</FONT></H1>

그러나, 대부분의 웹브라우저가 CSS를 지원해 주기 때문에 다양한 웹브라우저에서 잘 작동할 수 있도록 하는 CSS에 대한 방법을 알아보기로 한다. 먼저 CSS를 특정 레이아웃을 만들어 별도로 사용한다는 생각 을 버리고 기존의 HTML 태그에 스타일을 선언하여 잘 활용할 필요가 있다. 대부분의 웹디자이너들은 CSS 를 새로운 class로 선언하고 사용하는 경우가 많다.

<STYLE type="text/css">
<!-- .title { font-size:12pt;
font-color: red
} -->
</STYLE>
<font face=title>Red Title</font>

이러한 CSS 사용은 별로 바람직하지 못하다. 기존의 <h1>, <b>, <p> 등의 HTML 태그에 CSS를 적용하면 HTML코드도 간단하고, 웹브라우저 간 다르게 지정된 HTML 태그에 대한 표현도 통일될 수 있다.

<STYLE type="text/css">
<!- h2 { font-size:12pt, font-color: red } -->
</STYLE>
<h1>Red Title</h1>

margin-top은 될 수 있는 한 사용하지 않고, 폰트 크기나 사이즈 단위에서도 %, em 등을 사용하지 않는 대신 pixel만 사용하는 것이 좋다. 또한, line-height는 쓰지 않는 것이 좋으며, class명에 일반 키워드 같은 것은 혼돈되므로 쓰지 않는 것이 좋다. BODY에는 margin-left. margin-right만 설정하고 LI, DD, DT 등에는 스타일을 설정하지 않는 것이 좋다. 또한, <h1>, <h2> 같은 태그를 사용하여 문서의 구조의 역할을 부여할 필요가 있다. 단순히 글꼴이나 글자의 크기를 배치하기 위해 사용하는 것이 아니라 HTML 태그의 쓰임새에 따라 CSS를 설정해야 한다는 의미이다.

스타일 시트를 표시하는 방식은 HTML상에 고정으로 표시하는 방법고 link속성을 통해 스타일 시트 파일 을 읽어 들이는 방법이 있다. 만약 최신 브라우저에서 지원하는 @import라는 속성으로 스타일 시트를 읽어온다면 NN4를 위해 다음과 같이 고정 스타일 시트를 지정해 줄 필요가 있다.

<STYLE type="text/css">
/* Navigator 4 CSS rules */
</STYLE>

<STYLE type="text/css">
/* Advanced CSS rules ignored by Navigator 4 */
@import "advanced.css";
</STYLE>

link속성에서 스타일 시트를 읽어 오는 경우, 아래와 같이 title을 통해 여러 대체 스타일 시트를 사용 할 수 있다. title이 없는 스타일 시트가 표시의 기본 형식이 되고 title속성에 따라 또는 rel의 속성 에 따라 대체 스타일 시트를 표시할 수 있다. 그러나, IE의 경우 모든 스타일 시트를 다 읽어 오기 때 문에 주위를 요한다. Mozilla의 경우 각 스타일 시트를 통해 텍스트의 레이아웃을 변경할 수 있기 때문 에, 기본모드, 텍스트모드, 인쇄모드 등으로 레이아웃을 간편하게 바꿀 수 있는 장점이 있다. 모질라의 방식이 표준에 부합하는 지는 논쟁의 여지가 있다.

<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="stylesheet" href="bar.css" type="text/css" title="그룹1">
<link rel="stylesheet" href="hge.css" type="text/css" title="그룹2">
<link rel="alternate stylesheet" href="alt.css" type="text/css" title="그룹 2">

link를 통해 style파일을 불러오는 경우, 이미 불러온 HTML과 다른 파일이므로 문자코드가 선언되지 않았다면, 스타일 시트에 문자코드를 선언해 주어야 한다. 이는 font-family에서 한글 글꼴을 사용한다 면 더더욱 필요한 것이다.

@charset "euc-kr"; /* charset */

아래는 HTML에서 표현되고 있는 것들 중 CSS로 옮겨서 표현 해야 되는 내용들에 대해 정리한 것이므로 숙지할 필요가 있다.

바르지 않는 표현추천하는 표현
HTML3 <center>CSS1 text-align:center
HTML3 <strike>CSS1 text-decoration:line-through
HTML3 <u>CSS1 text-decoration:underline
HTML3 <dir>, <menu>HTML4 <ul>

[표.3 CSS에서 필수 변경항목]

CSS에 의한 Length값은 0의 경우를 제외하고 항상 단위를 적어주어야 한다. border-width, width, height등에 0 이외의 값에 단위가 없으면 표준 웹브라우저에서는 부정한 구문이 되어 속성 설정이 무효 화 된다. 그러나, IE에서는 이러한 값을 px로서 보완하게 되어 있으므로 가능하면 px로서 단위를 꼭 사 용하는 것이 좋다.

색상을 표시할 때도 #3399ff과 같에 번호 앞에 #을 꼭 붙이도록 한다. 이를 붙이지 않아도 색상을 표현 하는 브라우저가 있으나 이것은 바람직한 렌더링 결과가 아니며, 이러한 차이로 다른 브라우저 간에 다 른 색이 표현되기도 한다.

또한, 스타일을 선언할 때 어떤 것은 순서에 유의해야 하는 것이 있다. :hover의 경우, 마우스를 특정 링크에 올렸을 때 나타나는 색상을 지정할 때 사용하는 데, 아래의 경우는 IE와 Mozilla가 다른 결과를 나타낸다.

a:hover{ color:red; } a:link{ color:black;} a:visited{ color:green;}

위의 CSS를 사용한 경우, 마우스를 올렸을 때 visited 속성에는 붉은색이 표시되지 않고 link에만 붉은 색이 표시된다. 이것은 CSS 단계화 규칙이라는 것이 있어 어느 조건에 대해서 값을 여러 차례 지정하면 마지막에 지정된 것이 유효하게 되기 때문이다. 반면, hover를 제일 나중에 두면 제대로 동작하게 된다. 따라서, link, visited, hover, active, focus의 순서대로 CSS를 정해야 한다.

우리가 문장의 스타일을 제어할 때 사용하는 text-decoration의 경우에도 브라우저에 따라 많은 차이가 난다. CSS속성에도 트리 구조가 있어 상위에서 실행된 내용이 하위에서 취소되거나 할 수 없게 되어 있다. IE에서는 확대해석을 통해 허용해 주고 있다.

<span style="color:black;text-decoration:underline;">
검은 텍스트 <span style="color:red;text-decoration:inherit;">붉은 텍스트 </span>
검은 텍스트 </span>

text-decoration은 표준 사양에 비하면 Opera와 IE가 버그가 있는 것으로 보이므로, 이것을 사용할 때 는 최대한 여러 브라우저를 통해 살펴 볼 필요 가 있다.

Windows, Mac 그리고 Unix에 따라 사용되는 글꼴은 모두 다르다, 따라서 같은 내용도 글꼴에 따라 매우 다른 모양을 나타낼 수 있다. font-family 속성을 정할 때 고려해야 할 점은 각 OS플랫폼에서 유사한 글꼴을 집합하여 보여 줌으로서 최대한 통일 성을 유지 하게 하는 것이다. [표.4]는 맥킨토시와 윈도우에서 유사한 글꼴 형태를 나열한 것이다.


[표.4] 매킨토시와 윈도우에서 유사 글꼴]

border 속성에서 border-color의 경우는 IE, Mozilla와 Opera 모두 다른 결과를 낼 수 있는 속성이므로 주의해서 사용해야 한다. 특히 Opera는 거의 이 속성을 지원하지 못한다. 또한 아래의 경우 처럼, 세로 사이즈가 내용보다 적은 경우, IE6.0는 전체를 포함하고 그 밖에 브라우저는 넣을 수 있는 단락까지만 넣는 오류가 있다. 표준 적인 방법으로는 후자가 옳다.

<div style="font-size:12px;height:18px;border:1px red solid;">
이것은 12px 테스트입니다. <br>
이행은 18px행에 들어갈까. </div>

한가지 예를 더 들면, 두 개의 박스간의 상하의 거리는 margin특성에 의해 결정되는데 내용이 초과한 구역이 다음에 계속되는 요소와 배치 하게 될 때 후속 내용과 초과해 버리는 상태가 되어 레이아웃에 문제가 생길 가능성이 있다.

<p style="color:blue;font-size:12px;height:12px;border:blue solid 1px;">
Text.<br> Text.<br> Text.<br> Text.<br> <p>
<p style="color:red;font-size:12px;border:red solid 1px;">
Text.<br> Text.<br> Text.<br> </p>

따라서 상당히 이유가 없으며 텍스트를 내용에 가지는 구역에 대해서 height 값을 지정하는 것은 피하고, 브라우저의 해석에 맡기는 것이 기본적이다. 그러나 이것도 overflow라는 CSS2 사양에 따라 IE의 버그로 해석되는 경향이 있다.

목록을 만들기 위한 요소로서 <ul>과 <ol>이 있는데, 공통적으 로 <li>요소를 가진다. 이 태그는 너무 고전적이어서 각 브라우저에서 차이가 없을 것 같으나 실제로 그 차이는 브라우저에 따라 매우 심하다. 이런 것들을 무시하거나 정확한 크기를 정 하는 것이 주효한 방법이다.

ul,ol{
margin: 18px 0 18px 40px;
padding: 0; }
li{ margin: 0; }

CSS에서 height: n%에 대해서 살펴 보면, 흔히 블록의 height: 300px;의 중간에 height: 50%;인 경우 산출치는150px로 생각된다. table이나 iframe같은 요소의 경우 height는 모두 auto로 지정되어 텍스트 의 양만큼 표시하게 된다. 그러나 <doctype>이 transitional인 경우, 이를 전체 요 소로 살펴 화면 모두를 채우는 결과가 나타날 수 있다. 이런 경우를 대비하여 가장 상위인 body나 html 에 height:100%를 지정해 줄 필요가 있다.

마지막으로 가로선을 표시하는 <hr>의 스타일 지정의 경우 좀 복잡한 경향이 있다. <hr>의 경우 브라우저 마다 모두 다른 표시 양식을 가지고 있어 이것을 정하기 어 렵다. 아래와 같이 세가지 방식으로 color를 지정했을 때 각 브라우저 모두 다른 결과를 내기 때문이다.

<hr style="color:red;">
<hr style="background-color:red;">
<hr style="background-color:red;border:none;">

그나마 다음과 같은 방법이라면 Opera6과NS4.8에서는 안되지만 IE, Mozilla, Opera7에서는 그럼 같은 표시를 얻을 수 있다. 따라서 <hr>을 사용하지 않거나 기대하지 않는 편이 좋 다.

<hr style="color:red; background-color:red; border:none;
width:100%; height:0.3em;">

CSS는 웹브라우저에 따라 구현되어 있거나, 또는 덜 구현되어 있거나 지원하지 않는 경우가 있다. 또한, 구현되어 있더라도 문법에 따라 버그로서 존재하는 것이 있기 때문에 부록에 나타난 표를 참고 하여 그 구현 정도를 확인해 볼 필요가 있다. (이 차트도 수시로 업데이트 되므로 참고문헌의 링크를 참조하여 야 한다.)

3.3 DOM과 Javascript

Javascript는 HTML내에서 여러 가지 기능을 실현할 수 있도록하는 스크립트 언어로서 Microsoft의 VBScript에 대별 된다. VBscript는 윈도우 환경의 IE에서만 동작하므로 대부분의 스크립트 기능을 사용 할 때는 Javascript를 사용한다. Javascript는 어떤 표준안이 아니므로, 사용에 대한 강제적인 요소는 없다. 그러나 Netscape과 Microsoft의 Javascript 실행 방법과 코드 방법이 약간 달라 Cross browsing 에 문제를 일으키기도 한다.

W3C 문서 객체 모델(DOM)은 HTML내의 거의 모든 요소를 스크립트 처리 가능한 객체로서 활용하여 만들 어 Javascript 같은 스크립트에서 활용하거나 CSS에서 스타일을 지정해 줄 수도 있다. 일반적으로 DOM 의 메소드와 모든 객체 모델은 DHTML 프로그래밍으로 사용되고 있던 독자적인 객체 모델보다 꽤 세련 되어 있다. 예를 들어 document 객체는 브라우저에 따라서는 요소의 배열이나 각종의 요소에 액세스하 기 위한 속성을 가지고 있다. 예를 들어 NN4 에서는 객체 모델 안의 특정의 요소에 액세스 하는데 document.tags 가 사용되며 IE문서 객체 모델(DOM)에서는 document.all[]이 사용된다. 이러한 차이로 인해 상당수가 W3C의 표준 DOM 의 사양에 포함되지 않아 Mozilla나 Netscape6/7 와 같은 표준에 준거한 브라우저에서는 JavaScript 에러의 요인이 된다.

자바스크립트를 사용할 때는 script 태그에 LANGUAGE="JavaScript"를 선언해 주거나 type="text/javascript"를 사용해 준다. JScript, VBscript 등은 IE에서만 사용하므로 사용하지 않도록 한다. 또한, 텍스트 브라우저나 비 스크립트 브라우저를 위해 NOSCRIPT라는 요소를 사용하여 대체 텍스 트나 링크를 제공하거나, 클라이언트측 스크립트 대신에 서버측 스크립트를 사용해 호환성을 높여 주는 것이 좋다.

<SCRIPT LANGUAGE="JavaScript">
<!-- //
// -->
</SCRIPT>
<NOSCRIPT>
<UL>
<LI><A HREF="choice1.html">Choice1</A></LI>
<LI><A HREF="choice2.html">Choice2</A></LI>
</UL>
</NOSCRIPT>

또한, 내용은 꼭 코멘트를 사용하여 텍스트 브라우저에서도 잘 표현 되도록 해야한다. 코멘트를 사용할 때는 <!----Comment----> 로 쓰는 것은 잘못된 방법으로 <!--로 시작 하여 -->로 끝내고, 주석 내용 안에는 하이폰(-)이 두개 이상 들어가지 않도록 한다.

즉, <!--==Comment==-->, <!-- Comment --> 방식이 바른 표현 이다.

스크립트나 애플릿, 또는 다른 프로그램 객체를 사용하지 않거나 지원하지 않는 경우에도 페이지의 내 용을 이해할 수 있어야 한다. 그것이 불가능하다면, 대안적으로 접근 가능한 페이지에 그들을 대체할만 한 정보를 제공하는 것이 좋다. 예를 들면, 스크립트 기능이 꺼져 있거나 지원되지 않을 경우에도 스크 립트를 활성화하는 링크가 작동하도록 해야 한다. (예를 들어, 링크의 목적지 로 "javascript:"를 쓰지 않아야 한다. href 속성의 값으로 "javascript:"를 쓰는 것은 접근성 지침 위반일 뿐 아니라 HTML 표준 위반이기도 하다. 이런 경우, onClick 등을 사용해야 한다.

어떤 사용자 form에서 action을 받은 후 나온 결과에 자바스크립트 만을 제공해 자동 전환하는 결과는 될 수 있으면 사용하지 않는다. <script>href.location="test.html";</script> 같은 내용만 담는 것은 권장하지 않으며 만약 한다면, window.href.location="test.html" 이라고 정확하게 표현하거나, <meta> 태그의 refresh를 사용하거나 하는 것이 옳다.

특정 브라우저에서만 지원되는 태그를 사용하는 것은 추천하고 싶지는 않으나, 써야 한다면 그와 유사 한 기능을 Javascript로 구성하여 제공하는 것이 좋다. 예를 들어, 글자를 흐르게 하는 IE에서만 사용 되는 <marquee> 태그를 지원하기 위해서는 다음과 같이 한다.

<script type="text/javascript">
var msg = "이 텍스트가 MARQUEE태그 처럼 스크롤 합니다. ";

function JsMarquee(id){
if(document.getElementById){ // IE5, Mozilla
var msgarea = document.getElementById(id);
if (msgarea.firstChild && msgarea.firstChild.nodeName == "#text") {
msgarea.firstChild.nodeValue = msg;
} else if (document.all) {
msgarea.innerHTML = msg;
}
} else if(document.all) { // IE4
msgarea.innerHTML = msg;
} else if(document.layers){ //NN4
msg2=msg.substring(0,40);
document.layers[id].visibility="hidden";
document.layers[id].document.open();
document.layers[id].document.write(msg2);
document.layers[id].document.close();
document.layers[id].visibility="show";
}
msg=msg.substring(2,msg.length)+msg.substring(0,2);
var cmd = "JsMarquee("" + id + "")";
setTimeout(cmd,500);
}
</script>

IE와 다른 브라우저 사이에 흔하게 발생되는 에러는 W3C DOM이 아닌 MS DOM을 사용하는 경우 때문이다. 특히, 객체를 구별할 때 쓰이는 document.layers[] (Netscape4 사용), document.elementName (예를 들면 , 요소 <p name="yooneek" /> 에의 참조를 취득하는 경우 document.yooneek), document.all[] (IE에서 사용) 하는 방법은 W3C DOM이 모두 지원하지 않는다. 표준 방식은 document.getElementById("yoone")을 사용하여 구별한다.

아래 표는 웹페이지의 다양한 HTML 요소에 정의된 스타일 규정을 변경할 때, 표준에 의거한 메소드를 알려주고 있다. W3C의 DOM2 권고의 CSS2 확장 인터페이스에 제시되어 있다. DOM 레벨2 에서는 요소의 CSS 속성에 새로운 값을 설정하기 위해 element.style 객체의 참조를 사용한다. 스타일에 대응하는 요 소는 DOM 의 getElementById나 위의 DOM 액세스 시에로 설명한 메소드에 의해 얻을 수 있다.

바르지 않는 표현추천하는 표현
NN4 document.layers[]
document.tags[]
document.ids[]
document.classes[]
document.elementName
IE4/5 document.all		DOM1 document.getElementById()
<span id="test" >Test</span> 에서 test를 읽는 방법은
element = document.getElementById("test")
NN4 element.visibility = value; DOM2 element.style.visibility = value;
NN4 element.left
IE4/5 element.style.pixelLeft		 DOM2 parseInt (element.style.left)
NN4 element.top
IE4/5 element.style.pixelTop		 DOM2 parseInt (element.style.top)
NN4 element.moveTo(x, y);
IE4/5 element.style.pixelLeft = x;
IE4/5 element.style.pixelTop = y;		 DOM2 element.style.left = value + "px";
DOM2 element.style.top = value + "px";
NN4 handleEvent()DOM2 dispatchEvent()

[표.5 Javascript 및 DOM에서 유의해야할 표현]

W3C DOM2 의 것 style.left 이나 style.top 속성이 돌려주는 값은 CSS의 단위("px"등)를 포함한다. 그 러나, NN4의 element.left 나 IE4/5 의 element.style.pixelLeft는 정수치를 돌려준다. 요소의 왼쪽 혹 은 위의 내부 스타일 설정을 정수값으로 읽기 위해서는 parseInt() 을 사용해 문자 라인에서 정수값을 받는다. 반대로 설정하고자 하면 px과 같은 단위를 꼭 설정해야 한다.

<form id=testfrm><input type=text name="userid"></form>

흔히 위와 같은 FORM 객체를 사용할 때 document.forms("userid")으로 표현하는 실수를 할 때가 있 다. document.form은 메소드가 아니라 배열이기 때문에 document.forms[0]로 표현하는 것이 정확하다. 또는 document.form.userid로 표현한다.

특히, 우리가 흔히 사용하는 요소 사용 방법중 중에 구성요소의 내용을 바꾸거나 수정하는 element.innerText, element.innerHTML, element.outerText, element.outerHTML을 사용하는 것도 잘못 된 것이다. 통상적으로 document.getElementByID(element).innerHTML 형태로 사용하면 대부분 브라우저들이 지원하고 있지만 W3C의 DOM 표준은 조금 다르다고 할 수 있다. 지정된 dynatext라는 요소를 변경하는 작업에 대한 예를 보면,

<P>Papa got <SPAN id="dynatext">a lot of nerve</SPAN>!</P>

자바스크립트의 dynatext의 요소를 먼저 span_el에 담는다.

<script type="text/javascript">
var span_el = document.getElementById("dynatext");

각 요소의 컨텐트는 일련의 자식 노드(child note)로 분할되어 있으며, 각 노드는 단문과 그 자식요소 로 구성되어 있다. 즉, 텍스트를 변경하고자 요소의 노드를 조정하는 것이 표준적인 방법이다. (노드의 구조 및 지원 메소드는 W3C DOM 레벨1 권고로 정해져 있다.)

자식 노드의 이하 요소를 가지지 않고 텍스트 뿐이라면 (통상) element.childNodes[0] 으로서 접근할 수 있는 1차 노드를 가진다. 즉, 우리가 element.innerText을 대체할 방법으로서는 element.childNodes[0].nodeValue 가 사용할 수 있다.

즉, span_el.innerText = "a brand new bag"을 실현하려면, 다음과 같다.
var new_txt = document.createTextNode("a brand new bag");
span_el.replaceChild(new_txt, span_el.childNodes[0]);

span_el.innerHTML = "a brand <b>new</b> bag" 처럼 HTML 태그가 포함된 문장을 표준적으로 수용하는 방법은 새로운 요소를 만든 후, 이에 3개의 노드를 추가한다. 처음의 텍스트 노드, 자신의 텍스트 노드를 가지는 B 요소 , 마지막 텍스트 노드에 각각 내용을 넣은 다음 원래 요소에 치환하는 방법이다

var new_el = document.createElement(span_el.nodeName);
new_el.appendChild(document.createTextNode("a brand "));
var bold_el = document.createElement("B");
bold_el.appendChild(document.createTextNode("new"));
new_el.appendChild(bold_el);
new_el.appendChild(document.createTextNode(" bag"));
span_el.parentNode.replaceChild(new_el, span_el);
</script>

문서의 컨텐트를 변경하는 스크립트에 대해 표준적인 방법이 더 어렵다고 느낄 지 모르겠다. 그러나 이 를 통해 W3C DOM을 지원하는 Netscape6/7뿐 아니라 앞으로 제공될 브라우저에 동작한다고 생각한다면 꼭 필요하다고 생각하는 것이 좋다.

3.4 Plugin

Cross browsing에서 가장 난감한 문제에 봉착했다. 바로 Plugin이라는 문제이다. Plugin이란 HTML상에 특정 어플리케이션의 기능을 실행할 수 있도록 해주는 기술을 말하는 것으로 매크로미디어사의 Flash, 어도비의 Acrobat Reader, 리얼네트웍스의 Real Player, 마이크로소프트의 Windows Media Player 등이 여기에 속한다. 이들은 간단한 실행형 파일만으로도 웹브라우저 내에서 응용 프로그램을 실행할 수 있 다.

이는 브라우저 전쟁 당시에 넷스케이프와 마이크로소프트가 각각 NSplugin과 ActiveX라는 상호 배타적 인 기술을 브라우저에 탑재하면서부터 시작되었다. NSplugin은 OS와 관계없이 제작 실행될 수 있고 Opera나 Sapari 같은 웹브라우저에 채용되는 반면, ActiveX는 IE가 설치된 윈도우즈 환경에서만 실행된 다. 당시 넷스케이프는 <embed>, <applet>을 마이크로소프트는 <object>라는 별도의 태그를 만들면서 이 기능을 지원해 왔다. HTML 4.01에서는 object가 표준으로 제정되었기 때문에, object만 사용하면 되지만 예전 NN4버전과 표준 사용방법에 대 해 여전히 논란이 제기되고 있다.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/"-
swflash.cab#version=5,0,0,0" width="366" height="142" id="myFlash">
<param name="movie" value="test.swf">
<param name="quality" value="high">
<param name="swliveconnect" value="true">
</object>

위의 코드는 IE에서 ActiveX를 불러오기 위한 HTML로서 classid는 clsid로 Flash의 고유 프로그램 식별 자이고, codebase는 Flash ActiveX가 설치되지 않은 경우 설치 파일이 위치한 경로를 지정한다. param 은 문서 객체 모델에서 자식 노드로서 참고 할수 있는 값들을 의미한다. Netscape6이나 Opera4이상 부 터는 object를 표준으로 지원하기는 하나 윈도우 미디어 플레이어 등 몇 가지에 국한된다. 또한, classid 같은 식별자를 사용하는 것이 아니라 mime-type을 기반으로 하기 때문에 응용프로그램을 인식 하는 방법이 IE의 오브젝트 기술방법과 크게 다르다.

<object type="application/x-shockwave-flash"
data="test.swf" width="366" height="142" id="myFlash">
<param name="movie" value="test.swf">
<param name="quality" value="high">
<param name="swliveconnect" value="true">
<p>You need Flash -- get the latest version from
<a href="http://www.macromedia.com/downloads/">here.</a></p&g t;
</object>

위의 예제는 Mozilla 기반의 웹브라우저에서 flash를 찾아 실행하기 위한 object의 사용 방법이다. mime-type을 통해 프로그램을 인지하고, IE와 같이 codebase를 통해 자동 설치하는 기능을 넣고 있지 않다. 특히, param을 무시하는 웹브라우저가 있기 때문에 data="..swf" 파일 형식으로도 설정해 주고 있다. object를 사용하는데 있어, 모질라 기반 브라우저들이 더 표준에 가깝게 기술되고 있으나 워낙 논란이 많고 Plugin이 IE 기반이 많기 때문에 모두 같이 쓰는 것이 유리하다. 그러나 두 가지 코드를 동시에 사용하는 것은 불가능 하므로 위의 두가지 코드를 지원 여부에 따라 나누어 쓰거나 아예 두가지 정보를 함께 담는 방법도 있다.

if (window.ActiveXObject) {
// IE ActiveX Code
document.write("<object classid="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000">
} else {
// Mozilla based Plugin Code
document.write("<object type="application/x-shockwave-flash"..">
}

<embed>와 <applet>은 지금까지 널리 쓰이긴 하였으나, HTML4.01에서 권고하지 않는 방법으로 되어 될 수 있으면 사용하지 않는 것이 좋다. 그러나 NN4와 같은 브라우저의 버전 호환성 유지 차원에서 필요할 수도 있다. 따라서 자바 애플릿을 불러올 경우에도 object 태그를 사용해야 하며, 아래와 같은 예제를 사용하여 불러온다.

<object classid="java:NervousText.class" width="534" height="50">
<param name="text" value="Java 2 SDK, Standard Edition v1.4">
<p>You need the Java Plugin. Get it from
<a href="http://java.sun.com/products/plugin/index.html">here.</a>> </p>
</object>

최근 object와 plugin 사용과 관련하여 IE가 다른 업체의 특허를 침해했다는 법원 판결로 인터넷 사용 환경상 변화가 예상되는 가운데 인터넷 표준 언어인 HTML도 특허 논란에 휘말렸다. 2003년 9월 미국 시 카고 법원은 지난달 "MS의 IE가 에올라스의 플러그인 기술 관련 특허를 침해한 것이 인정된다"며 5억 2000만달러를 배상하라고 판결했다. 이 소송의 핵심은 HTML 플러그인 사용에 대한 특허를 UC가 92년도 에 받아서 발명만 전담으로 하는 회사인 이올라스에 94년에 팔았고, 이에 대해 소송을 제기해 W3C HTML 4.01의 object의 구동 방법에 대한 심각한 타격을 입힌 것으로 보인다. MS는 즉각 항소 의지를 밝히는 한편, W3C에 IE를 일부 수정할 뜻을 밝혔다. 이 문제는 IE 뿐만 아니라 모든 웹브라우저에 관련된 중 요한 사안으로 특허를 피해 나가는 방법으로 아래 제안된 방법을 사용하도록 권고 하고 있다.

objec사용을 HTML내에 넣지 않고 JS파일에 넣어 실행하는 방법으로 아래와 같다.

main.html 파일

<script src="aa.js" ...></script>
<script ...>test();</scirpt>
 ....
test.js 파일

function test() {
document.write("><object classid=xxx...");
document.write("</object>");
}

그리고 PARAM값을 DATA 객체로 사용할 때는 BASE64로 인코딩 하거나 js파일에 넣어 document.write를 해야 된다. 이와 관련된 사항은 http://msdn.microsoft.com/ieupdate를 참고하면 된다.

위와 같은 방법으로 object 태그의 호환성을 높일 수는 있으나 기본적으로 NSplugin과 ActiveX의 기술 적인 호환성 때문에 제일 중요한 목표인 응용프로그램 실행에는 문제가 있다. 이를 해결하기 위해서는 ActiveX 개발자가 NSPlugin API를 참조하여 같은 기능의 Plugin을 개발해 줄 필요가 있다. 또한, 윈도 우 환경에서는 ActiveX for Plugin, Plugin for ActiveX 등의 양쪽을 호환할 수 있는 plugin(http://www.iol.ie/~locka/mozilla/mozilla.htm)을 설치하거나, 리눅스 데스크탑 환경에서는 wine (http://www.winehq.org)같은 윈도우 에뮬레이터를 설치하여 상호 기술을 사용 가능하다.