나라디자인

드림위버를 이용한 ‘Markup+CSS’ 브라우저 호환성 검사

KWCAG 4

구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.

삽입메뉴에 위치한 ‘Check Browser Support’ 기능을 이용하면 ‘Markup’과  ‘CSS’에 대한 다양한 브라우저의 지원여부를 확인할 수 있습니다. 다만, 현존하는 최신의 브라우저에 대한 지원확인은 불가능하다는 단점이 존재 합니다. 검사가 가능한 가장 최신의 주요 브라우저 버전별 기준은 다음과 같습니다. (드림위버는 CSS 에 대한 표준문법 검사기능을 따로 지원하지 않고 이것으로 대체(통합)하고 있는데 그 이유는 사용자가 CSS 표준을 지킨다고 하더라도 이를 브라우저에서 지원하지 않으면 말짱 도루묵이 되기 때문입니다. 비 표준 문법을 사용하는 경우 모든 브라우저에서 이를 지원하지 않기 때문에 드림위버는 그냥 이것을 브라우저 미지원 오류로만 표시해 버립니다. 따라서 사용자는 비표준 코드에 대하여 정말 ‘비표준 코드’ 인지 아니면 ‘브라우저 미지원 오류’ 인지 정확하게 알 수 없게되는 문제가 존재 합니다.)

• Internet Explorer : 6.0
• Internet Explorer for Macintosh : 5.2
• Firefox : 1.0
• Opera : 8.0
• Safari : 2.0

1. 우선 정확한 검사를 위하여 브라우저 버전 셋팅을 해보겠습니다.

   삽입막대에 위치한 ‘Check Browser Support’ 버튼을 누릅니다.

2. ‘Settings…’ 메뉴를 선택 합니다.

   

3. 브라우저별로 버전을 설정하고 검사기준이 되는 브라우저에 체크 합니다.

   저같은 경우 각각 ‘FF 1.0, IE for Mac 5.2, IE 6.0, Opera 8.0, Safari 2.0′ 버전을 기준으로 브라우저 지원 검사를 하기 때문에 아래와 같이 설정 하였습니다. 보통 Mac 환경에서 테스트를 해볼 수 없기 때문에 검사 기준으로 ‘IE for Macintosh’  브라우저를 포함하는 것은 상당히 유용 합니다. 오래전에 인쇄업에 종사하는 하는 친구 사무실에 놀러갔다가 Mac PC 를 이용하여 인터넷 동호회 활동을 하는것을 보고 놀란적이 있습니다. 지금은 놀랄일도 아니지만요.
   

4. 실제로 브라우저 지원 여부를 검사해 보겠습니다.

   위에서 설정한 대로 다기종 브라우저 버전에 대응하는 현재문서의 ‘Markup+CSS’ 지원여부를 확인하려면 삽입막대의 ‘Check Browser Support > Show All Errors’ 메뉴를 클릭 합니다.
   

5. ‘Result’ 패널이 열리면서 현재문서에 대한 브라우저 미지원 목록이 나타납니다.

   오류 항목을 더블클릭 하면 해당 문서가 열리면서 오류코드가 반전 됩니다. ‘Result’ 패널은 단축키 ‘F7′ 으로 닫거나 다시 열 수 있습니다.
   

6. ‘문서 전체’ 또는 ‘파일/폴더’ 를 대상으로 브라우저 지원확인을 할 수 있습니다.

   브라우저 지원확인 결과 목록 위에서 마우스 오른쪽 버튼을 누르면 다음과 같은 콘텍스트 메뉴가 나타납니다. ‘Check Target Browsers For Entire Current Local Site’ 항목을 클릭하면 ‘현재 로컬 사이트 전체에 대한 브라우저 지원확인’ 결과를 볼 수 있습니다.
   

   • 현재 문서만 검사
   • 현재 로컬 사이트 전체 검사
   • 선택된 파일/폴더만 검사