ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 웹표준과 크로스브라우징
    퍼블리싱/공통 2021. 3. 12. 23:50
    반응형

    웹표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어입니다.

    수많은 상호 연결이 이루어지는 웹환경에서 표준과 규격들이 있어야 하며, 관리 측면에서도 표준이 필요합니다.
    이러한 표준들은 웹사이트, 웹서비스 개발과 관리에 영향을 주고 있으며, 사용자의 사용성과 접근성에 직접적인 영향을 미치고 있어서 좀 더 높은 수준의 표준에 초점을 두는 경향도 있습니다.

    일반적으로 웹페이지가 웹 표준을 지키고 있다는 것은 html, css, javascript를 가지고 페이지를 만들고 html의 접근성과 시맨틱 html의 가이드라인을 충족해야 합니다.

    - HTML, XHTML, SVG, XForms와 같은 마크업 언어의 W3C 권고
    - 스타일시트, 특히 CSS의 W3C 권고
    - 흔히 자바스크립트나 ECMA스크립트로 불리는 Ecma 인터내셔널 표준
    - 문서 객체 모델의 W3C 권고

    우리의 웹 호환성

    우리나라의 많은 사이트는 마이크로소프트의 인터넷익스플로러에서만 작동하는 비표준 기술이 많아서 크롬, 파이어폭스와 같은 브라우저, 모바일(아이폰, 안드로이드) 등 다른 플랫폼에서 제대로 작동하지 않는 경우가 많습니다.
    인터넷 익스플로러에서 제대로 작동하지만 다른 브라우저에서 다음과 같은 현상이 나타날 수 있습니다.

    - 레이아웃 파괴: 페이지 레이아웃이 흐트러지거나 특정 부분이 표시되지 않음.
    - 클릭 무반응: 웹사이트 안의 단추를 눌러도 반응하지 않음.
    - 로그인 불가: 로그인을 해도 로그인을 하지 않은 상태로 되돌아감.

    공공기관, 대기업 등의 웹페이지는 웹표준을 지키고 있으며, 그러한 변화가 나타나고 있습니다. 하지만 작은 규모의 웹페이지에서는 아직 웹 표준을 지키지 않아 익스플로러를 제외한 웹 브라우저, 모바일 등의 다른 플랫폼에서 제대로 작동하지 않는 경우가 아직 존재하고 있습니다.

     

    웹표준 확인 방법

    기본적으로 w3c에서 제공하는 markup 검증서비스를 비롯해서 '네이버 웹마스터도구', '구글 서치콘솔' 등을 활용할 수 있습니다.

     

    크로스브라우징

    크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 운용체계나 HTML 렌더링 기술로 웹페이지를 제작하는 방법론입니다.

    크로스 브라우징은 다양한 컴퓨터 환경이나 브라우저에서 정보를 동일하게 표현하기 위해 필요합니다. 대부분 인터넷 익스플로러, 오페라(Opera), 파이어폭스(FireFox), 그리고 매킨토시 운용체계의 사파리(Safari)에서 동일한 웹이 다르게 표현될 수 있습니다. 크로스 브라우징을 통하여 어떠한 플랫폼을 이용하든 같은 결과물을 보여주기 위해 필요합니다.

    크로스 브라우징 적용방법

    css 속성에 따라서 각 브라우저에서 지원하는 것이 다르며, 때론 지원하지 않아 다른 css를 활용해야 하는 상황이 발생할 수 있습니다. 최근에 나온 css일수록 각 브라우저마다 체크하는 크라스브라우징이 필요합니다.
    브라우저 버전별로 지원하는 속성과 하지 않는 속성 그리고 접두사를 사용하여 구현되는 속성을 파악하고 적용해야 합니다.

    - -ms- : Edge / Internet Explorer에서 지원
    - -moz- : Firefox 지원
    - -webkit- : Google 크롬, Safari에서 지원
    - -o- : Opera에서 지원

    728x90
    반응형

    '퍼블리싱 > 공통' 카테고리의 다른 글

    SEO(검색엔진 최적화)  (0) 2021.03.13
    웹접근성이란  (0) 2021.03.12
    반응형 웹이란  (0) 2021.03.12
    웹기획이란  (0) 2021.03.12
    css의 간략한 설명과 속성, 속성값  (0) 2021.03.12

    댓글

Designed by Tistory.