HTML 마크업 | 웹접근성과 웹표준 관련 사이트

웹표준은 W3C에서 지정한 웹에서 표준적으로 사용되는 기술과 규칙을 말함

웹 표준에 호환성과 접근성도 포함 

• 호환성: 다양한 디바이스, 브라우저에서 일관성있게 보이고 같은 기능을 제공하는 것
• 접근성: 호환성과 함께 웹사이트에서 제공하는 정보를 차별없이 누구나 다양한 환경에서 일관성 있게 볼 수 있도록 보장하는 것
• 아래의 사이트를 통해 HTML 코드 오류나 전체적인 문법 검사를 할 수 있습니다.  ->이후에 그 아래에 있는 CSS 마크업 검사를 하면 됩니다. 

https://validator.w3.org/

The W3C Markup Validation Service

https://jigsaw.w3.org/css-validator/

W3C CSS 검사 서비스

 

 

웹 표준 관련 기술 (크게 3가지)

1. 구조(언어) - (X)HTML(느슨한 구조) & XML(엄격한 구조, HTML에 담겨져있는 형식적 요소를 완전히 배제하고 순수 데이터 포맷으로 작성됨)
2. 표현(언어) - CSS
3. 동작(언어) - DOM(웹 페이지의 구성체, HTML을 작성하면서 생성되는 논리적 규칙) & ECMA Script 

 웹 브라우저는 이 논리적 구성 체계인 DOM을 해석하여 페이지를 표시하거나 ECMA Script 등의 기술을 통하여 DOM의 구조를 변경할 수 있습니다. 즉, 사용자 측에서 작동하는 많은 동적 요소들이 DOM을 이용하여 객체 모델에 접근한 후, 스크립트 언어인 ECMA Script를 이용하여 웹 페이지의 요소의 동작을 제어하는 방법으로 작성한 것입니다. DOM과 ECMA Script를 이용하면 웹 페이지에 동적인 효과를 적용할 수 있습니다.

테이블을 레이아웃의 용도로 활용하여 사용하던 과거의 방식은 구조와 표현이 뒤섞여 접근 및 사용을 어렵게하는 원인으로 작용했으나 웹표준 방법론에서 구조와 표현이 분리된 독립적인 구현이 가능해졌다. (중략) 구조와 표현을 분리했을 경우, 유지보수가 쉽고 소스의 경량화로 인해 서버의 트래픽 비용이 감소하는 부수적인 효과도 얻을 수 있습니다.

HTML5: 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표 -> 파이어폭스, 오페라, 사파리, 크롬 등 최신의 웹브라우저에서 기본적으로 HTML5를 지원, MS의 IE9부터 HTML5의 새로운 요소를 지원하고 있음

• 기존 div 요소 외에 다양한 구조 요소를 지원하는데, 새로운 구조 요소에는 header, footer, aside, figure, section, article 등이 있다.

웹브라우저

 

구글의 크롬(google Chrome)

• 오픈 소스 웹 브라우저 
• 간단하고 효율적인 사용자 인터페이스 제공
• 현존하는 다른 웹 브라우저보다 안정적이고, 속도가 빠르며, 높은 보안성을 목표

 

최근에는 식스 리비전(sixrevisions.com) 사이트에서 최신의 웹 브라우저들의 성능을 비교해 볼 수 있는 통계를 발표

 

▶자바스크립트의 실행 속도

-Ajax로 구현된 웹사이트들이나 지메일과 같은 웹 어플리케이션 등이 사용자의 요구에 더 빠르게 응답할 수 있게됨을 의미 

- 크롬>사파리>파이어폭스>오페라>IE

▶DOM 객체 선택 

-jQuery가 엘리먼트를 얼마나 빨리 선택하는지 측정

-크롬보다 오페라의 싱크율이 가장 높음

-웹 브라우저가 웹 페이지에서 엘리먼트를 더 빨리 선택할수록 갱신정보를 더 빠르게 업데이트할 수 있음

 

▶CPU 사용률

-웹 브라우저들이 실행될 때 어느 정도의 CPU자원이 요구되는지를 나타낸 지표

-크롬 3.0%로 우세

 

▶CSS 렌더링 속도

-CSS 렌더링 속도가 빠른 웹 브라우저들은 페이지 응답 속도가 빠르다는 것을 의미 

-table을 div로 변환하는데 걸리는 시간을 측정

-크롬이 91ms로 가장 빠른 속도

 

▶페이지 로딩 시간 

-초기화면을 로딩하는데 필요한 시간을 측정한 결과 

-로딩 테스트는 순간의 네트워크 트래픽과 서버 로딩 시 발생하는 지연 시간의 차이 때문에 결과에 오차가 있을 수 있음

-결과는 균일한 편이지만 파이어폭스가 가장 빠름

 

▶웹 브라우저 캐시의 성능 

-이미 방문했던 웹 사이트를 재방문했을 때 웹 브라우저가 얼마나 잘 수행하는 지 측정한 결과

-웹 브라우저 캐시의 성능 측정은 페이지 로딩 시간 측정 때와 마찬가지로 지연 시간의 차이로 인한 오차가 있을 수 있음

-균일한 결과, 크롬 우세

 

▶전체 성능(위의 결과를 토대로 웹 브라우저들의 성능 평가)

크롬 > 파이어폭스> 사파리> 오페라> 인터넷 익스플로러 

 

 

all ref:

https://seulbinim.github.io/WSA/html-basic.html#%EB%A7%88%ED%81%AC%EC%97%85-%EC%96%B8%EC%96%B4%EC%9D%98-%EB%B6%84%EB%A5%98

HTML 마크업 | 웹접근성과 웹표준

 

+추가로 참고하면 좋을 사이트

https://velog.io/@sgyoon/2020-04-12

웹표준: HTML5 알아보기