웹 표준

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

• 어떤 운영체제나 브라우저를 사용해도 동등한 웹 페이지가 보이게 하는 제작 기법

장점

• 유지보수 용이
  HTML, CSS, JS로 각각 구조/표현/동작의 영역이 분리되면서 코드가 경량화됐고 유지보수가 용이해졌다.

• 웹 호환성
  브라우저나 운영체제가 달라도 동일한 화면이 나오도록 할 수 있게 됐다.

• 검색 최적화
  검색엔진에 높은 우선순위로 노출된다. 적절한 HTML 요소의 사용과 데이터 등으로 검색 효율성을 높일 수 있다.

• 웹 접근성 향상
  브라우저, 운영체제, 기기의 종류 등 다양한 환경에서 웹에 접근할 수 있는 환경을 마련하게 된다.

Semantic HTML

의미가 있는 HTML

• 태그만 보고 어떤 내용인지 의미를 알 수 있는 태그를 사용해라
• <div> 보다 의미가 있는 header, footer, nav, main, aside, article, section 등의 태그를 사용
• 시맨틱 HTML을 짜면 검색 최적화가 된다.

주의사항

• block 요소(div, h1)안에 inline요소(a, span) 요소 넣기
• 글씨 두껍게 : <strong>글씨 두껍게</strong>
  글씨 기울이기: <em>글씨 기울이기</em>
• <hgroup> 남발하지 말고 폰트크기로 조절하기
• <br> 남발하지 말고 <p>로 단락 구별하거나 CSS설정하기
• HTML안에 CSS속성 설정하기 말기

크로스 브라우징

브라우저 종류마다 동등한 화면과 기능을 제공하는 작업

• 렌더링 엔진이 다 다르기 때문에 완전 동일한 화면은 불가능. 그래서 동등한 수준의 정보와 기능을 제공

크로스 브라우징 안된 예시

• 인터넷 익스플로러(Internet Explorer)
  한국의 공공기관 등 웹 사이트들이 ActiveX의 사용을 사용자에게 강제한 것을 볼 수 있다.
  ActiveX는 마이크로소프트사가 개발한 인터넷 인스플로러용 플러그인으로 브라우저 외부 프로그램이다. 여기서 문제는 ActiveX를 설치하라는 문구가 뜨고 미설치 시 작동되지 않는다는 것이다. ActiveX 때문에 크로스브라우징이 불가능해졌고, 인터넷 익스플로러는 최신 CSS와 최신 JS 미지원 등의 이유로 22년 6월 15일 지원을 종료했다

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

1. 초기 기획
   콘텐츠와 기능, 디자인, 타겟 고객층, 고객이 사용하는 브라우저와 기기 등을 파악하여 웹 사이트를 기획한다

2. 개발
   Can I Use 등의 사이트에서 코드의 호환성을 파악한다. 일부 오래된 브라우저에서는 작동하지 않을 수 있다는 것을 알고 받아들여야 한다.

3. 테스트 / 발견

• 데스크톱 브라우저(사파리, 엣지, 파이어폭스, 롬 등)에서 테스트
• 휴대폰, 태플릿 브라우저(Andriod기기 크롬, 사파리, 삼성인터넷 )에서 테스트
• 그 외 기획에서 목표했던 브라우저에서 테스트
• window, max, linux 등 운영체제에서 테스트

4. 수정 / 반복

• 테스트단에서 버그발견 시 특정 브라우저에서의 조건문으로 코드 실행하고 수정

사진 출처