웹표준

W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙

웹표준 장점

1. 유지 보수의 용이성
2. 웹 호환성 확보
3. 검색 효율성 증대
4. 웹 접근성 향상

Semantic HTML

semantic: 의미의 의미가 있는 이라는 영단어 뜻

HTML : 화면 구조를 만드는 마크업 언어

이 두가지 단어를 합성한 합성어로 의미가 담겨있는 HTML 구조를 뜻함

div와 span으로만 화면을 구성할 수 있지만 header nav main aside 등과 같은 의미가 있는 태그를 통해 구성하면 Semantic 하다고 볼 수 있음

시맨틱 HTML의 필요성

1. 개발자간 소통
2. 검색 효율성
3. 웹 접근성

시멘트 요소 종류

header : 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소
nav : 메뉴, 목차 등에 사용되는 요소
aside : 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
main : 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소
article : 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소
section : 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용
hgroup : 제목을 표시할 때 사용하는 요소로, h1 ~ h2 요소가 hgroup
footer : 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소

크로스 브라우징

웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업 완전히 똑같은 화면이 보이도록 만드는 것이 아닌 동등한 수준의 정보와 기능을 제공하는 것

ActiveX를 사용해야만 정보 제공 및 기능을 원활히 수행하던 IE가 지원을 종료하게 되자 크로스 브라우징을 진행할 수 있도록 됨

크로스 브라우징 워크 플로우

초기 기획 → 개발 → 테스트 / 발견 → 수정 / 반복

초기 기획

어떤 웹 사이트를 만들 것인지 정확하게 결정해야 함

어떤 콘텐츠와 기능이 있어야 하는지, 디자인은 어떻게 할지 등의 사항을 결정해야 함

그 이후에 사이트의 고객이 누군지 생각하며 맞는 기술을 사용해서 개발 할 수 있도록 기획해야함

개발

코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 함

MDN, Can I Use 등의 사이트에서 코드의 호환성 확인 가능

인터넷 익스플로러 사용 비율이 높다면 해당 코드는 사용하지 않는 것이 좋음

테스트/ 발견

각 기능을 구현한 후에는 그 기능에 대한 테스트가 필요

TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴을 사용하여 테스트 진행

수정 / 반복

테스트 단계에서 버그가 발견되었다면 수정이 필요

버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 함

조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋음

수정이 완료되면 3번 과정부터 반복

SEO

검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 해주는 검색 엔진 최적화

on - page SEO

페이지 내부에서 진행할 수 있는 SEO

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

Off-Page SEO

웹 사이트 외부에서 이루어지는 SEO

소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법

title 요소

검색 결과창에서 제목에 해당하는 요소
head 요소의 자식요소로 작성

title요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아짐

meta요소

메타 데이터를 담는 요소

메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터

웹 접근성

장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 법적의무사항

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

1. 사용자층 확대

2. 다양한 환경 지원

3. 사회적 이미지 향상

웹 콘텐츠 접근성 지침

인식의 용이성

**1. 적절한 대체 텍스트: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 함**

<img src="이미지 주소" alt="대체 텍스트" />

alt 속성을 활용하여 대체 텍스트 삽입

**2. 자막 제공: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 함**

• 자막을 포함한 동영상 사용하기
• 자막을 지원하는 멀티미디어 플랫폼 사용
• 비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오기

<video ... >
	<track src="자막.vtt" kind="captions" />
</video>

• 자막을 제공하기 어려운 경우 대본 또는 수어를 제공

**3. 색에 무관한 콘텐츠 인식**

**4. 명확한 지시사항 제공**

**5. 텍스트 콘텐츠 명도 대비**

**6. 자동 재생 금지**

**7. 콘텐츠 간 구분**

**운용의 용이성(Operable)**

**8. 키보드 사용 보장**

**9. 초점 이동**

**10. 조작 가능**

**11. 응답 시간 조절**

**12. 정지 기능 제공**

**13. 깜빡임과 번쩍임 사용 제한**

**14. 반복 영역 건너뛰기**

**15. 제목 제공**

**16. 적절한 링크 텍스트**

**이해의 용이성(Understandable)**

**17. 기본 언어 표시**

**18. 사용자 요구에 따른 실행**

**19. 콘텐츠 선형 구조**

**20. 표의 구성**

**21. 레이블 제공**

**22. 오류 정정**

**견고성(Robust)**

**23. 마크업 오류 방지**

**24. 웹 애플리케이션 접근성 준수**

**WAI-ARIA**

WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술

WAI-ARIA는 WAI와 ARIA를 합친 단어

**WAI-ARIA의 필요성**

시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와줌

SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있음

**WAI-ARIA 사용법**

WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있음

• 역할(role) : HTML 요소의 역할을 정의하는 속성
• 상태(state) : 요소의 현재 상태를 나타내는 속성
• 속성(property) : 요소의 특징을 정의하는 속성(attribute)