[사용자 친화 웹] 웹 표준 & 접근성

Chapter1. 웹 표준
1.웹 표준의 개념과 등장 배경을 기억한다.
2.웹 표준을 지켰을 때의 장점을 이해한다.
3.Semantic HTML을 작성해야 하는 이유를 이해한다.
4.Semantic HTML을 작성하는 방법을 이해한다.
5.자주 틀리는 마크업 규칙과 올바르게 작성하는 방법을 기억한다.
6.크로스 브라우징의 개념과 방법을 기억한다.
Chapter2. SEO
7.SEO의 개념과 필요성을 기억한다.
8.SEO의 종류를 기억하고 구분할 수 있다.
9.SEO에 영향을 주는 요소의 종류와 작성 방법을 기억한다.
10.SEO에 영향을 주는 요소를 직접 작성할 수 있다.

1.웹 표준이란 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있다.
2000년대 초반에 다른 브라우저에서 작동이 되지 않는 등의 호환성 문제가 자주 발생해 웹 개발의 형식을 통일하게 됬다.

2.웹 표준의 장점은 다음과 같다.

 ● 유지 보수의 용이성
 ● 웹 호환성 확보
 ● 검색 효율성 증대
 ● 웹 접근성 향상
 
3.시멘틱은 개발자간의 협업에서 div 또는 span 태그라면 알 수 없는 목적을 알 수 있게 해주는 편리한 장치가 될 수 있으며 특정 태그를 통해 알고자 하는 내용을 쉽게 검색하게 할 수 있어 검색 엔진에 더 쉽게 노출될 수 있고 웹 접근성을 향상시킨다.

4.시멘틱 요소는 해당하는 위치 또는 목적에 맞춰서 다음과 같은 태그를 사용한다.
 ● <article> 게시글, 뉴스 등 구분된 요소
 ● <aside> 직접적인 연관이 없는 내용
 ● <details> '열림'상태일 때 정보 공개
 ● <summary> details의 요약 등
 ● <figure> 독립적인 콘텐츠
 ● <figcaption> figure가 포함하는 콘텐츠 설명
 ● <footer> 최하단 꼬릿말
 ● <header> 최상단 머릿말
 ● <main> 메인 컨텐츠
 ● <mark> 하이라이트, 강조
 ● <nav> 메뉴, 목차
 ● <section> 독립적인 구획
 ● <time> 시간, 알림, 검색 등에 사용되는 정보제공
 ● <hgroup> 제목 등 표시(<h1>~<h6>)

5.자주 틀리는 요소는 다음과 같다.
 ● 인라인 요소 안에 블록 요소 넣기 -> 블록 내부에 인라인 태그가 들어가야한다.
 ● <b>, <i> 요소 사용하기 -> <strong>, <em>태그를 이용해야 한다.
 ● <hgroup> 마구잡이로 사용하기 -> 트리구조처럼 목차식으로 사용해야 한다.
 ● <br /> 연속으로 사용하기 -> 여러줄을 구별하고 싶다면 <p>태그 또는 css를 이용한다.
 ● 인라인 스타일링 사용하기 -> css또는 style요소를 사용해야 한다.

6.크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다. 기획 -> 개발 ->테스트 -> 수정 -> 테스트 -> 수정의 사이클로 반복해서 테스트한다.

7.SEO(Search Engine Optimization)는 이름 그대로 검색 엔진 최적화를 하는 것으로 광고등 웹사이트 외적으로 진행되는 Off-Page SEO와 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 On-Page SEO가 있다.

8.SEO는 아래와 같은 형식대로 사용한다.
 ● <meta name="description" content="내용 요약" />
 ● <meta name="keywords" content="키워드 나열" />
 ● <meta name="author" content="제작자" />
 ● <meta property="og:type" content="website" />
 ● <meta property="og:title" content="페이지 제목" />
 ● <meta property="og:description" content="페이지 설명" />
 ● <meta property="og:image" content="image.jpg" />
 ● <meta property="og:url" content="www.site.com" />
 ● <meta property="og:site_name" content="사이트 이름" />
 ● <meta property="og:type" content="미디어 유형" />
 ● <meta property="og:locale" content="리소스 언어" />

9.SEO에 영향을 주는 것들은 아래와 같다.
 ● 개성있는 브랜딩 URL
 ● 복사 + 붙여넣기 금지 
 ● 사용자를 위한 콘텐츠를 작성하기
 ● 간결한 제목과 설명글 
 ● 최대한 글자로 작성하기
 ● 꾸준한 관리와 홍보


10.SEO를 이용하고 싶을 때  원하는 노출키워드에 따라 통제할 수 있으며 어떤 내용과 어떤 이미지가 출력되는지를 이해하고 사용할 수 있다.

 

내용은 쉽게 이해했는데 정리하는게 생각보다 어려웠던 것 같다..

다음 주 월요일도 접근성에 대한 내용을 정리하는 것인데 블로깅하는 시간을 따로 주기 때문에 정리하기는 더 쉬울 것 같다.

문제를 푸는 시간까지는 얼마 걸리지 않았지만 막상 링크를 따라 구글 및 네이버에서 제공하는 가이드라인을 보니 원하는대로 사용하기가 쉬운 내용은 아닌 것 같다.