웹 표준 웹 접근성

백아름·2023년 6월 26일

프론트엔드

목록 보기

51/80

웹!?

다양한 정보를 여러사람들과 공유할 수 있는 공간

인터넷?!

전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망
웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함.

웹 표준

웹에서 표준적으로 사용되는 기술이나 규칙
사용자가 어떤 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작기법을 담고 있는 것.

1. 웹표준을 맞춰서 작성하면 검색 효율성도 높아짐.

적절한 HTML의 사용
웹 페이지에 대한 정확한 정보작성
검색 엔진에서 더 높은 우선순위로 노출됨

2. 유지 보수 용이

HTML, CSS, JS가 분리되면서 유지보수가 용이해지고, 코드가 경량화되어 트래픽 비용이 감소함.

3. 웹 호환성 확보

웹 브라우저의 종류나 버전, 운영체제나 사용기기 종류에 상관없이 동일한 결과가 나옴

4. 웹 접근성 향상

웹 표준을 지키는 것만으로도 브라우저 종류, 운영체제 종류, 기기종류 등 접근할 수 있는 환경 및 사용자들에 맞춰 웹페이지 개발하는 일이 어느정도 해결됨

시맨틱 Semantic HTML

검색엔진은 HTML 코드를 보고 문서구조를 파악함. 시맨틱 요소를 보고 어떤 요소에 더 중요한 내용이 들어있을지 우선순위를 정하게 됨.
웹 접근성: 나이, 성별, 장애여부, 사용환경을 떠나서 항상 동일한 수준의 정보를 제공하는 것
시각장애인: 음성으로 화면을 스크린리더.

시멘틱 요소의 종류

눈여겨볼 마크업 문법

1. 블록요소 안에 인라인 요소를 넣자

블록요소: hgroup div
인라인요소: span label

2. strong과 em 요소를 사용하자

글씨 두껍게 : strong /
글씨 기울이기: em /

3. br /을 연속으로 사용하기보다는 p와 css margin을 이용하기

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

4. inline 스타일링보다는 html과 css 파일 분리하기

//HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링 속성은 CSS로 작성해 주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>  
 
//CSS 파일
h2 { color : "yellow" }

크로스 브라우징

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

1. 초기기획

2. 개발

코드 호환성 확인: Can I use 사이트
https://caniuse.com/

3. 테스트/발견

TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴

기능 구현 후 테스트 필요
1) 안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트 진행
2) 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트 진행
3) 그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트 진행
4) Window, Linux, Mac 등 다양한 운영 체제에서도 테스트 진행