[UFA]Web Standards

December 30, 2022

양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’

웹 개발의 형식을 통일 시킨 것이 바로 웹 표준

웹 표준

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

화면이 어떤 구조로 나누어져있는지 까지만 알 수 있고, 어떤 내용이 들어갈지는 명시되어 있지 않다.

어떤 기능을 하게 될지 확실하게 의미를 가지고있는 요소를 시맨틱 요소라고 한다.

개발자간 소통
검색 효율성

검색 엔진은 HTML 코드를 보고 문서의 구조를 파악, 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시
웹 접근성

웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함, 화면의 구조에 대한 정보까지 추가로 전달

시맨틱 요소의 종류

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

웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업

완전히 동일하게 만드는 것은 불가능, 동등한 수준의 정보와 기능을 제공하는 것

초기 기획
- 어떤 웹 사이트를 만들 것인지 정확하게 결정
- 어떤 콘텐츠와 기능
- 디자인은 어떻게 할지 등의 사항을 결정
- 고객이 누구일지 생각
- 고객이 사용하는 브라우저
- 기기는 무엇일지 고민
개발
- 코드가 각 브라우저에서의 호환성이 어떤지 파악https://caniuse.com/
- 크로스 브라우징이 힘든 경우 이를 인정하고 대체 수단을 마련
테스트 / 발견
- 안정적인 데스크톱 브라우저(롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트
- 휴대폰 및 태플릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트
- 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트
- Window, Linux, Mac 등 다양한 운영 체제에서도 테스트
- TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴로 테스트 가능
수정 / 반복