웹에서 사용되는 표준 기술이나 규칙

표준화 단체인 W3C의 권고안에 따라 웹페이지를 만들 때 사용하는 HTML, CSS, Javascript 등에 대한 규정을 담고 있다.

웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동해야 함을 의미한다. 따라서 웹 표준의 준수는 웹 접근성 준수를 위한 핵심이라고 할 수 있다.

웹 표준의 장점

1) 손쉬운 유지보수

하나의 소스로 여러 웹에 대응하므로 개발 및 운영의 효율성 증가한다.

2) 웹 접근성 향상

인터넷을 사용할 수 있다면 공간에 제약 없이 웹 페이지에 접속할 수 있어 접근성이 뛰어나다.

3) 검색엔진 최적화

검색 봇을 통한 효율적 노출과 같은 검색엔진 최적화가 가능하다.

4) 저장 공간 절약

표준을 지키며 작성된 웹 문서는 불필요한 코드의 양이 줄어 파일의 크기가 줄고 서버 부담의 감소로 이어질 수 있다

5) 효율적인 마크업

CSS와 HTML이 분리되었기 때문에 불필요한 마크업이 최소화되어 페이지 로딩 속도가 향상된다.

6) 호환성 확보

오래된 브라우저에서도 콘텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.

자주 틀리는 마크업

1) 인라인 요소 안에 블록 요소 넣기

h1, div 요소는 블록 요소 ( 가로 넓게 영역)
a, span 요소는 인라인 요소 (컨텐츠 내용 만큼)

나쁜 예

<a href=“#"> <h1> 이렇게 쓰면 </h1> </a>
<span> <div> 안됨 </div> </span>

2) 인라인 스타일링 사용하기

나쁜 예

<h3 style="color: blue"> 이렇게 금지</h3>

좋은 예

<h3 class=“blue"> 이렇게 사용</h3>
//CSS 파일
. blue {color=“blue”};

3) hgroup 마구잡이로 사용하기

좋은 예

h1 -> h2-> h3 순서대로 써야함

<h1>제목</h1>
	<h2>큰 목차</h2>
		<h3>작은 목차</h3>
		<h3>작은 목차</h3>

4) br/ 연속으로 사용하기

나쁜 예

<p> 이렇게 쓰고 <br/>이렇게 쓴다</p>

좋은 예

<p> 줄 바꿈을 하고 싶을땐 </p>
<p>아예 별도의 단락으로 구별</p>

결론

웹 표준 - 사용성 및 접근성 보장

웹 호환성 - 버전, 종류 상관없이 접근 가능

웹 접근성 - 인적, 환경적 요인 제약 없는 웹 접근

아래 웹 접근성도 확인해주세요!

https://velog.io/@d-x-eg/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B8%B0%EB%B3%B8-%EC%82%AC%ED%95%AD