웹 표준
정의
웹 표준은 하나의 소스로 모든 브라우저나 플랫폼에 상관없이 동일한 컨텐츠가 동작할 수 있도록 하는 웹 개발자들간의 약속이다. W3C World Wide Web Consortium 의 조직의 토론에 의해 결정된다.
등장배경
초창기 대비 현재 웹은 단순히 PC 뿐만 아니라 다양한 곳에서 사용하고 있다. 스마트폰, 태블릿, 임베디드의 플랫폼과 윈도우, 맥, 리눅스 등의 다양한 OS 또한 크롬, 파이어폭스, 오페라 등 다양한 브라우저들이 나타면서 이러한 모든 환경에서도 적용될 수 있는 웹사이트를 구축할 수 있는 웹 개발 표준안이 대두되기 시작했다.
사례
CSS
-
<head>섹션에 있는<link>요소를 사용하여 스타일시트에 연결해서 사용하라. -
CSS선택자로HTML요소를 선택하고 속성 : 값을 통해HTML엘리먼트의 스타일을 정의하라.p { color: blue; font-size: 16px; } -
cascading및inherit의 특징을 파악하여 웹 사이트 전체가 최대한 일관된 스타일을 이룰 수 있도록 제작하라. -
media-query를 사용하여 다양한 장치와 화면 크기에 적응하는 스타일을 만들어라. -
W3C CSS validatation Service 를 통해 현재 코드가
CSS표준을 따르고 있는지 확인하라. -
CSS코드를 향상시키기 위해SASS또는LESS와 같은CSS preprocessors를 사용하는 것을 고려해봐라. -
빠른 개발과 일관적인 설계를 원한다면 부트스트랩이나 테일윈드와 같은
CSS프레임워크와 라이브러리를 사용해라. -
다른 브라우저와 다양한 플랫폼에서 제작한 코드를 모두 테스트하여 의도한 대로 표시되고 작동하는지 확인하라.
HTML
-
태그를 올바른 구조에 맞게 사용하라 : 올바른
HTML태그 구조는<!DOCTYPE html >선언 다음에<html>요소, 그 다음에<head>요소, 마지막으로<body>요소가 차례로 표시된다. -
시맨틱 태그를 사용하라 :
HTML요소를 사용하여 페이지 구성에<header>,<nav>,<main>,<section>,<article>,<side>및<footer>를 적절히 사용하여 의미를 전달하라. -
태그의 적절하게 중첩하고 열고 닫아라 : 요소가 서로 적절하게 열리고 올바르게 닫혔는지 확인하라.
-
속성을 사용하여 의미를 전달하라 :
<head>태그의title속성이나img태그의alt속성 등을 활용하여 해당 태그에 대한 명확한 의미를 전달하라. -
올바른 형식의 유효한
HTML사용하라 : W3C HTML Validation service 를 사용하여HTML코드가 최신 표준 및 모범 사례를 준수하는지 확인하라. -
접근성을 위해
HTML5와ARIA를 사용하는 것을 고려하라 :ARIA속성을 사용하여 장애 혹은 접근성이 떨어지는 사용자에게 웹 사이트에 더 쉽게 액세스할 수 있도록 하라. -
반응형 디자인 및 사이트의 성능 유지 보수 및 향상을 위해
CSS,JavaScript의 기술을 적용하라 :CSS미디어 쿼리와JavaScript를 사용하여 다양한 장치와 화면 크기에서 작동하는 반응형 디자인 및 다양한 유저 상호작용 기술들을 적용시켜라.
이점
-
개발 시간을 덜어준다. 웹표준을 따르면 어떠한 플랫폼, 어떠한 브라우저, 어떠한 기기에도 다 작동되는 하나의 사이트가 만들어지게 된다. 각각의 브라우저마다 각각 다른 사이트를 만드는 것 보다 훨씬 시간소모가 적다.
-
검색엔진을 최적화 시켜준다. heading과 같은 시멘틱 태그를 잘 활용한다면, 검색 엔진이 페이지를 리딩하기 쉬워지고 이는 사용자 검색에 긍정적인 영향은 준다.
-
접근성을 향상시켜 준다. alt, lang 속성, 배경음 자동재생 등 HTML 의 편의사항을 잘 사용할 수 있다면, 사회적 약자, 문외한 등 웹 서비스를 사용하기 어려운 유저에게도 사이트에 보다 쉽게 접근할 수 있도록 도와준다.
