메뉴 건너뛰기

Dev tips

HTML / CSS 웹 표준과 크로스 브라우징을 위한 툴과 팁 소개

taknim 2008.10.08 10:44 조회 수 : 9650 추천:2097

http://mins01.com/web_work/doc/%C0%A5%C7%A5%C1%D8%C5%A9%B7%CE%BD%BA%BA%EA%B6%F3%BF%EC%C2%A1%C0%BB%C0%A7%C7%D1%C5%F8%BC%D2%B0%B3/index.html

웹 표준과 크로스 브라우징을 위한 툴과 팁 소개

발표자 : 이민수 (기술지원팀)
발표일 : 2008-09-23
작성일 : 2008-09-22
수정일 : 2008-09-23

  1. 웹사이트 문서란? 그리고 그것에 포함되는 기술 들
    • 일반 적으로 웹 사이트를 나타내는 문서는 HTML입니다.
    • 웹페이지용 스타일 시트
      • CSS : Cascading Style Sheet
      • CSS의 역활 : 웹페이지(HTML)의 내용에 스타일를 정의합니다.
      • 버전
        • CSS1 : 대부분의 브라우저에서 지원하는 버전입니다. (몇몇 스타일은 아직도 지원 안되는 것들이 있습니다.)
        • CSS2 : CSS1에서 확장되어 만들어졌습니다. 브라우저별로 지원되는 스타일에 차이가 있을 수 있습니다.( 현재 CSS 2.1이 최신버전입니다.)
        • CSS3 : 현재 개발중으로 몇몇 브라우저에서는 CSS3의 일부분을 지원하고 있습니다.
      • 브라우저별 지원
        • Opera 9.5: CSS 2 + CSS 3(일부분)
        • FF 3 : CSS 2 + CSS 3(일부분)
        • IE 7 : CSS 2 + CSS 3(일부분)
        • CSS 3 셀렉터 테스트 : LINK
      • 링크
        • CSS 개발현황 : LINK
    • 웹페이지 제어를 위한 JAVASCRIPT(JSCRIPT)
      • JAVASCRIPT : 네스케이프에서 만든 인터프리터 형 프로그래밍, 스크립트 언어
      • JSCRIPT : JAVASCRIPT와 호환되는 Microsoft에서 만든 스크립트 언어
      • JAVASCRIPT는 브라우저별로 차이가 있다
        • IE6 : JAVASCRIPT 1.5기반
        • IE7 : JSCRIPT 5.6(JAVASCRIPT 1.5 기반)
        • FF1.5 l JAVASCRIPT 1.6
        • FF2 ; JAVASCRIPT 1.7
        • FF3 : JAVASCRIPT 1.8
        • 최대한의 크로스 브라우징을 지워하기 위해서는 JAVASCRIPT 1.5 표준(비 IE 기준)을 기반으로 제작을 해야합니다.
  2. 웹 사이트가 브라우저별로 차이가 생기는 이유
    • 브라우저별 기본 DTD (Document Type Definition)의 차이
      • DTD란? : SGML 규칙을 따르는 문서에 대한 정의입니다. HTML도 DTD를 가지고있으며 그 DTD를 사용해서 어떻게 처리되고 보여져야할지 정해진 대로 처리하고 보여줍니다.
      • 보이는 것이 차이가 생기는 이유
        • DTD파일을 선언 안한 경우 : 브라우저별로 각각의 기본 DTD를 사용하게됩니다. 브라우저 별 DTD는 약간씩 다르기 때문에 보이는 것에 차이가 생깁니다.
      • 보이는 것의 차이를 줄이는 방법
        • DTD를 선언합니다.
          • HTML 문서의 맨 앞에
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            라고 적으면 그 HTML문서는 xHTML 1.0 transitional의 규칙에 따라 보여지게됩니다.
            브라우저는 지정된 DTD의 규칙을 준수해서 보여주게 됩니다
      • 주의점
        • DTD에 따라서 표현방식이 다를 수 있고, 구조, 문법에 제한이 될 수도 있습니다.
          EX> HTML에서는 <IMG>가 허용이 되지만, XHTML은 <img />처럼(소문자에 단일태그) 태그를 사용해야한다.
          EX> HTML에서는 링크에 &를 적을 수 있지만, XHTML에서는 &amp; 처럼 나타내야한다.
      • 한계
        • 아무리 DTD가 문서를 정의한다고 해도 브라우저 별로 어느정도의 차이는 있을 수 있습니다.
    • 브라우저 별 지원 CSS의 차이
      • 브라우저 별로 CSS의 지원에 차이가 조금씩 있으며, 지원을 안하거나 다른 방법으로 지원하는 경우도 있습니다.
      • ex > 비 IE에서는 opacity=0.4 를 지원하지만 IE에서는 filter:Alpha(opacity=40) 처럼 사용해야합니다.
        opacity는 CSS3 부터 지원되기 시작하였습니다. IE에서는 CSS3의 지원이 다른 브라우저보다도 더 불완전합니다. 하지만 IE전용인 filter 를 지원해서 사용할 수 있는 방법을 제시하고있습니다. LINK
      • ex > IE는 zoom 을 사용하여 화면의 확대, 축소를 할 수 있습니다. 하지만 다른 브라우저에서는 지원되지 않는 IE 전용입니다.(CSS에서도 정의되어있지 않습니다.) (TEST1 , TEST2)
      • ex > DTD가 지정되지 않은 IE는 border와 margin을 width 안에 포함합니다. 표준에 따르면 border와 margin은 width와 상관없이 너비를 가져야합니다. (참고 : DTD를 지정 안했을 경우의 div크기의 차이)
    • JAVASCRIPT와 JSCRIPT의 차이 (IE브라우저와 비 IE브라우저 차이)
      • 차이가 생기는 이유
        • Microsoft에서는 JAVASCRIPT와 호환되는 JSCRIPT를 개발해여 자체에서 제작한 인터넷익스플로어(IE)에서 사용하고 있습니다.
        • 국내 80%이상의 사용자는 IE를 사용하고있으며, 국내 웹사이트 개발쪽의 많은 곳이 IE전용으로 개발되고 있습니다.
        • IE는 JAVASCRIPT의 준수사항에 벗어나는 여러기능을 지원하고있습니다. 그래서 이 기능을 사용할 경우 IE외의 브라우저는 정상작동하지 안습니다..
      • 예
        • alert(document.all.test.value)
          IE에서는 test라는 id나 name를 가진 대상을 찾아서 그 대상의 value를 경고창에 나타나게하지만 비 IE의 경우 document.all 이라는 것이 존재하지 않으므로 에러가 발생하게 됩니다.
  3. 웹 사이트의 문법오류와 스크립트 오류를 쉽게 찾고, 고치게 도와주는 툴(확장기능)
  4. 예제
    • DTD를 지정 안했을 경우의 div크기의 차이
      • DTD가 지정안된 경우 : LINK
      • DTD가 지정된 경우 : LINK
      • 이미지 비교 : LINK
    • 문법에 어긋나는 태그들 (XHTML - Transitional기준)
      • LINK
      • DOM explorer , HTML Validator 사용예
Valid XHTML 1.0 Transitional

이 게시물을
목록
쓰기 태그