Cross Browser_웹표준교과서

XHTMlEditorBody">

하위페이지

• Cross Browser_웹표준교과서

  • CSS핵

브라우저의 구현과 호환성

1. 문서형식선언(DTD)이 중요

   • 각 브라우저 별로 표현방식을 전환하는 장치가 통일되어있지 않기 때문에 '표준방식'이 표현 될 수 있도록

      

2. 웹표준에 정식으로 정의되어 있지 않은 '독자확장요소' 구현은 지양할 것

   • ex) IE의 marquee, bgsound, comment, Net-scape의blink, layer, spACEr

      

3. 하위호환성과 상위호환성

   • 과도기적 상위호환성

     • 올바른 XHTML을 이용한 마크업 사용
     • 올바른 CSS를 이용한 폰트/텍스트, 색생, 여백 등의 제어
     • 레이아웃을 구성하기 위해 테이블 요소를 조금만 사용하며, 중첩 테이블을 사용하지 않고 CSS로 동일한 효과를 구현

   • 엄격한 상위호환성

     • 올바른 XHTML 1.0 Strict 나 TranSITIonal을 마크업으로 사용
     • 올바른 CSS를 레이아웃에 사용. 테이블은 그 본래의 의미인 표 형식의 데이터, 주소록, 수식시세표, 행사목록 등에만 사용
     • 시각표현에서 구조를 완전히 분리
     • 구조의 강조, 시각표현을 위한 기법을 마크업으로 사용하지 않던지(Strict) 최소한으로 사용

 

브라우저별 주의점

1. Win IE 6

   • Strict DTD에서는 기본적으로 '표준방식'이 적용
   • 어떤 문서형식에서 시스템식별자가 있으면 기본적으로 '표준방식'이 적용
   • XHTML은 기본적으로 '표준방식'이 적용
   • XHTML은 XML선언이 있으면 '호환방식'이 채용. 문서형식선언 앞에 공백문자 이외의 문자가 있으면 '호환방식' 적용
2. Mozilla 0.6+ , Netscape 6
3. Opera 7/8
4. MAC IE 5
5. Mozilla 1.1+ , Firefox, Netscape 7/8, Safari

 

잠정적 해결책

1. 모든 브라우저에 같은 표현방식이 채용되게 노력해야한다. 

   • 'full standards-표준방식' 적용법

     • HTML

       • HTML 4.0 Strict를 준수. 시스템식별자 유무와 관계없음
       • HTML 4.01 Strcit 준수. 시스템식별자 유무와 관계없음

     • XHTML

       • XHTML1.0 strict 준수, XML선언 하지않음
       • XHTML1.1에서는 XML선언 하지않음

   • 'full standards-표준방식' 또는 'almost standards-거의표준방식(<-요거 번역이 살짝 웃김)' 적용법

   • 'quirks-호환방식' 적용법
2. 브라우저별로 다른 표현방식이 적용되는 것을 전제로 디자인한다. CSS핵을 이용하여 크로스브라우징을 목표로 한다.

 

이 글은 스프링노트에서 작성되었습니다.

이글루스 가든 - IT분야 전문가 되기!!