📌 웹 표준
웹 표준이란 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 가지고 있습니다.
장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
Semantic HTML
웹 표준에서는 HTML을 시맨틱하게 작성하는 것이 중요합니다.
시맨틱(semantic)의 뜻은 의미가 있는 이라는 뜻을 가지고 있습니다.
그래서 Semantic HTML은 HTML을 구조만 만드는 것이 아니라 의미까지 가지게 한다는 것입니다.
필요한 이유
- 개발자 간 소통에 용이
- 검색 효율성 증가
- 웹 접근성
자주 사용되는 Semantic 요소들
요소 종류 | 설명 |
<header> | 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소 |
<nav> | 메뉴, 목차 등에 사용되는 요소 |
<aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 다루는 요소 |
<main> | 문서의 메인이 되는 주요 콘텐츠를 담는 요소 |
<article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소 |
<section> | 문서의 독립적인 영역을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용하는 요소 |
<hgroup> | 제목을 표시할 때 사용하는 요소, <h1> ~ <h2> |
<footer> | 페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소 |
크로스 브라우징
크로스 브라우징이란 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공하도록 만드는 것입니다.
모든 브라우저에서 똑같은 화면이 보이게 하는 것이 아니고, 동등한 수준의 정보와 기능을 제공하는 것이라고 할 수 있습니다.
과정
- 초기 기획 - 콘텐츠와 기능, 디자인 고려, 고객 층 파악
- 개발 - 코드의 브라우저 호환성 파악
- 테스트
- 수정
- 반복
📌 SEO
SEO(Search Engine Optimization)은 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업입니다.
SEO로 검색 엔진에서 웹 페이지를 상위에 노출이 가능하게 할 수 있습니다.
On-Page SEO: 제목과 콘텐츠, 핵심 키워드 배치, 효율적인 HTML 요소 등을 사용하는 방법입니다.
Off-Page SEO: 소셜 미디어 홍보, 백링크 등을 이용하는 방법입니다.
SEO에 영향을 미치는 요소
- <title> 요소
- <meta> 요소
- <hgroup> 요소
- 콘텐츠
- 개성 있는 브랜딩
- 복사, 붙여넣기 금지
- 간결한 제목과 설명글
- 최대한 글자로 작성하기
📌 웹 접근성
웹 접근성이란 장애인, 고령자 등이 웹사이트에서 일반적으로 제공되는 정보를 비장애인과 비슷하게 접근할 수 있고 이해할 수 있도록 보장하는 개념입니다.
하지만 웹 접근성이 좋지 않다면 비장애인도 정보에 제한을 받는 불편함을 겪을 수 있습니다.
따라서 모든 상황과 사람들이 정보를 제공받지 못하는 경우가 없도록 하는 것이 웹 접근성의 궁극적인 목적입니다.
웹 접근성을 갖추면 얻을 수 있는 효과
- 사용자층 확대
- 다양한 환경 지원
- 사회적 이미지 향상
웹 접근성 지침
인식의 용이성 (Perceivable)
- 적절한 대체 텍스트
- 자막 제공
- 색에 무관한 콘텐츠 인식
- 명확한 지시사항 제공
- 텍스트 콘텐츠 명도 대비
- 자동 재생 금지
- 콘텐츠 간 구분
운용의 용이성
- 키보드 사용 보장
- 초점 이동
- 조작 가능
- 응답 시간 조절
- 정지 기능 제공
- 깜빡임과 번쩍임 사용 제한
- 반복 영역 건너뛰기
- 제목 제공
- 적절한 링크 텍스트
이해의 용이성
- 기본 언어 표시
- 사용자 요구에 따른 실행
- 콘텐츠 선형 구조
- 표의 구성
- 레이블 제공
- 오류 정정
견고성
- 마크업 오류 방지
- 웹 애플리케이션 접근성 준수
'코드스테이츠 프론트엔드' 카테고리의 다른 글
UI / UX (0) | 2023.04.13 |
---|---|
Section 2 회고 (0) | 2023.04.10 |
[SEB_FE] Section 1 회고 (2) | 2023.03.18 |
[SEB_FE] 나만의 아고라 스테이츠 만들기 (1) | 2023.03.18 |
[SEB_FE] 유효성 검사 예제 (0) | 2023.03.18 |