웹 표준
📜 웹에서 표준적으로 사용되는 기술이나 규칙
🔉 W3C의 토론을 통해 나온 권고안을 말함
🔉 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정
웹 표준 관련 기술
- 구조 : (X)HTML
- 표현 : CSS
- 동작 : Script
구조 언어 (X)HTML & XML
HTML
- ‘HyperText Markup Language’의 약자로, 하이퍼텍스트를 표현하기 위한 마크업 언어라고 정의할 수 있다. HTML은 SGM(Standard Generalizes Markup Language)을 모체로 하여 국제 표준 기구인 ISO가 1986년에 채택한, 웹에서 사용하는 표준 마크업 언어이다.
- HTML은 매우 느슨한 언어이기 때문에 코드의 일관성이 떨어졌다. 태그의 운용법이나 오류의 처리 방법 등이 일반적인 언어들에 비해서 매우 느슨하다.
- 예를 들어 <body>태그가 <Body>또는 <BODY>가 다 동일한 코드인걸로 인식하는 경우가 있다고 생각하면 된다.
XML(eXtensible Markup Language)
- 1996년 W3C(World Wide Web Consortium)에서 제안한 것으로, 웹에서 구조화된 문서를 전송할 수 있도록 설계된 표준화된 텍스트 형식이다. 이것은 인터넷에서 기존에 사용하던 HTML의 한계를 극복하고 SGML의 복잡함을 해결하는 방안으로 HTML에 담겨져 있는 형식적 요소를 완전히 배제하고 순수 데이터 포맷으로 작성됐다. 또 HTML과는 달리 태그의 운용 방법이나 오류에 매우 엄격하다.
XHTML(eXtensible Hypertext Markup Language)
- XML 응용으로써의 HTML4를 다시 공식화한 것
- XHTML은 HTML과 같은 요소로 구성되었지만, 엄밀하게 말하면 XML이므로 XML과 같이 엄격하게 태그를 운용해야 한다.
HTML5
- 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어
- HTML의 다음 버전으로, HTML4를 업그레이드한 것.
- 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표.
- Firefox, Opera, Safari, Chrome 등 최신의 웹 브라우저에서 기본적으로 HTML5를 지원한다.
표현 언어 CSS
- HTML(가장 일반적인 마크업 방식) 등을 표시하는 방법을 지정하는 방식이다.
- 스타일이나 레이아웃을 지정한다.
동작 및 제어를 위한 DOM & ECMA Script
DOM(Document Object Model)
- 웹 페이지 구성 체계
- HTML을 작성하면서 생성되는 논리적 규칙
- HTML과 XML 문서에 대한 프로그래밍 인터페이스
- 문서를 구성하는 객체에 어떻게 접근할 것인가를 정의하는 API
- 웹 브라우저는 DOM을 해석해 페이지를 표시하거나 ECMA Script 등의 기술을 통해 DOM의 구조를 변경
ECMA Script
- Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어. 자바스크립트를 표준화하기 위해 만들어짐
웹 표준의 장점
🎈웹 접근성 수준의 향상
웹 표준을 준수하게 되면 자연스럽게 웹 접근성이 향상된다. 웹에 접근할 수 있는 환경은 다양하다(스크린 리더, 모바일, 다양한 웹 브라우저 등). 이러한 다양한 웹 환경때문에 개발이 어려워지게 된다. 하지만 웹 표준을 준수하면 다양한 웹 환경에서 올바르게 동일한 웹을 사용할 수 있게 된다.
🎈검색 친화적인 웹 사이트 구현
적절한 태그 사용, 의미에 알맞은 마크업은 검색 결과 시 SEO를 향상시킨다.
🎈구조와 표현의 분리
마크업 언어와 스타일 표현정보를 따로 분리해서 사용하므로 독립적인 구현이 가능하다.
🎈손쉬운 유지 보수 및 비용 절감 효과
구조와 표현을 분리해서 개발하면 추후 유지 보수 시 비용측면에서 많은 절감을 할 수 있다. 소스의 경량화로 인해 서버의 트래픽이 감소하는 부수적인 효과도 얻을 수 있다.
🎈호환성 확보
웹 표준을 준수하면 오래된 버전의 웹 브라우저에서도 콘텐츠가 적절하게 표시되고 웹 표준을 지원하는 최신 기기나 웹 환경에서도 항상 동일한 결과를 기대할 수 있다. 따라서 하위 호환성이나 상위 호환성을 확보할 수 있다.
'HTML&CSS' 카테고리의 다른 글
| [HTML] WAI-ARIA : aria-hidden (0) | 2022.07.13 |
|---|---|
| [CSS] 배치관련 속성 (0) | 2022.07.13 |
| [HTML] 제목 요소 (h1 ~ h6) (0) | 2022.07.12 |
| [HTML] WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications) (0) | 2022.07.11 |
| [CSS] 가상 선택자 (hover, active, focus) (1) | 2022.06.03 |
