웹 표준, 웹 접근성

웹 표준

웹 표준이란

W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 말한다.

사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.

 

웹 표준을 따르면 뭐가 좋은가

1. 유지 보수의 용이성: HTML, CSS, JavaScript의 영역이 서로 분리되면서 유지 보수가 용이해지고 코드가 경량화된다.
2. 웹 호환성 확보: 사용자의 운영체제나 웹 브라우저 종류에 관계없이 항상 동일한 결과가 나온다.
3. 검색 효율성 증대: 적절한 HTML 요소를 사용하고 웹 페이지에 대한 정확한 정보를 작성하면 검색 효율성이 올라간다.
4. 웹 접근성 향상: 웹을 사용하는 다양한 사람과 환경에 일일이 맞춰서 개발하지 않아도 접근성을 향상시킬 수 있다.

 

시맨틱 태그 사용하기

시맨틱 태그를 사용하면 요소들의 중요성과 역할을 명시적으로 밝힘으로써 검색 효율성도 좋아지고 웹 접근성도 향상시킬 수 있다.

요소 종류	설명
<header>	페이지나 요소의 최상단에 위치하는 머리말 역할의 요소.
<nav>	메뉴, 목차 등에 사용되는 요소.
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소.
<main>	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소.
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용한다.
<section>	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용한다. 제목(<hgroup>)을 포함하는 경우가 많다.
<hgroup>	제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 포함된다.
<footer>	페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소.

 

마크업 제대로 사용하기

1. 인라인 요소 안에 블록 요소를 넣지 않는다.

2. <b>, <i> 요소 대신 콘텐츠에 의미를 부여하는 <strong>요소와 <em> 요소를 사용한다.

3. <hgroup> 을 단지 글씨 크기를 구분하는 용도로 쓰지 않는다.

4. <br /> 요소를 간격 만드는 용도로 연속으로 사용하지 않기

5. 인라인 스타일링 사용은 최소화

 

SEO

SEO(Search Engine Optimization)은 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업을 말한다.

SEO 최적화가 잘 돼 있다면 검색 엔진에서 웹 페이지를 상위에 노출시킬 수 있다.

 

On-Page SEO: 제목과 콘텐츠, 핵심 키워드 배치, 효율적인 HTML 요소 등을 사용하는 방법

Off-Page SEO: 소셜 미디어 홍보, 백링크 등을 이용하는 방법

 

SEO에 영향을 미치는 요소

• <title> 요소
• <meta> 요소
• <hgroup> 요소
• 콘텐츠 : 개성 있는 브랜딩, 복사・붙여넣기 금지, 간결한 제목과 설명글, 최대한 글자로 작성하기