웹 표준 & 웹 접근성

웹 표준

웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.

웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다루며, 이 세 기술은 화면의 구조, 표현, 동작을 각각 담당한다.

웹 표준의 장점

1. 유지 보수의 용이성

2. 웹 호환성 확보

3. 검색 효율성 증대

4. 웹 접근성 향상

---

Semantic HTML의 정의와 필요성

시멘틱 HTML은 영단어인 semantic과 HTML의 합성어로 HTML이 구조를 만드는 것을 넘어 의미를 갖도록 만들겠다는 의도가 담겨있다.

1. 개발자 간 소통

2. 검색 효율성

3. 웹 접근성

시멘틱 요소의 종류

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

---

헷갈리기 쉬운 마크업

1. 인라인 요소 안에 블록 요소 넣기
   대표적인 인라인 요소로는 <span>, 블록 요소로는 <div> 가 있습니다. 인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안된다.
2. <b>, <i> 요소 사용하기
   <b> 요소와 <i> 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소입니다. 하지만 웹 표준을 준수하기 위해서는 이 요소들을 사용하지 않는 것이 좋다. 대신 <strong> 요소와 <em> 요소를 사용하는 것이 좋다.
3. <hgroup> 마구잡이로 사용하기
   <hgroup> 요소들은 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해서 사용한다. 하지만 글자에 스타일 속성을 적용하기 위한 목적으로 사용하는 경우는 옳지 않다.
4. <br /> 연속으로 사용하기
   <br /> 은 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소이다. 그런데 이러한 목적이 아니라 요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안된다.
5. 인라인 스타일링 사용하기
   웹 표준을 지키기 위해서는, HTML과 CSS 코드를 분리해서 작성하는 게 좋다.

---

웹 접근성

웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻

웹 접근성을 갖추면 얻을 수 있는 효과

1. 사용자층 확대
   
   
2. 다양한 환경 지원
   
   
3. 사회적 이미지 향상