목차
웹표준 조건 (4가지) 의미 부합 태그 사용 (Sementic HTML) <h1> ~ <h6> : 제목태그 (=표제태그 = 머리말태그) alt 속성 (= 대체문자열 = Alternative Text) lang 속성 (= 언어설정) 명확한 언어 사용 좋은 링크 사용 (= 명확한 정보 전달 설명 링크) title 속성 (= 타이트속성 = 요소추가정보 속성)
웹표준 조건 (4가지)
1. W3C의 권고안 준수 ( HTML 역사 참고 ) 2. (구조를 담당하는 HTML , 기능을 담당하는 JAVASCRIPT , 디자인을 담당하는 CSS) 부분의 분리 3. 크로스브라우징 (주요 브라우저에서 동일 화면 구현) + 웹 유효성 검사 통과 4. 웹접근성 (아래 5가지 조건 충족 웹)
① (대형PC・소형PC・태블릿・모바일) 등 다양한 기기 에 맞는 반응형 레이아웃. (Responsible Layout) ② 시각・청각 등 인체 적 장애 배려 (ScreenReader) ③ 의미 에 맞는 태그 사용 (Sementic HTML)메뉴 탐색 (Navigation)상호작용 (Interaction)
5. 웹표준 검사 사이트 https://validator.w3.org/unicorn/?ucn_lang=ko
의미 부합 태그 사용 (Sementic HTML)
1.
(예) 버튼
2.
스크린리더기는 Semantic HTML 작성 코드를 큰소리로 읽음.
버튼을 <button> 태그 이용해 제작 시 장점 (= Semantic HTML 작성 장점)
⑤ 키보드 전용 사용자도 Tab키 이용해 선택 선택 후, Enter키로 선택 가능.<div> , <span> 등 <form>, <table>, <article>, <button> 등
<h1> ~ <h6> : 제목태그 (=표제태그 = 머리말태그)
<h1>Heading 1</h1> : 가장 큰 글씨
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> : 가장 작은 글씨
결과보기
1.
검색엔진은 제목태그 <h1> ~ <h6> 이용해 웹페이지 구조 및 콘텐츠를 색인화 함.
3.
<h1> ~ <h6> 제목태그 사용해서만 문서 제목 작성할 것.★ 주의: <big> 또는 <bold> 태그 이용한 제목 작성 금지.
alt 속성 (= 대체문자열 = Alternative Text)
<img src="logo.jpg" alt="홈짱닷컴" >
결과보기
사용자가 어떤 이유로 이미지 볼 수없는 경우 (예: 느린 연결, src 속성 오류, 사용자가 화면 판독기 사용)
해당 이미지를 설명하는 대체텍스트 제공.
※
<img> 태그
lang 속성 (= 언어설정)
[예제]
<!DOCTYPE html>
<html lang="ko" >
<body>
...
</body>
</html>
[설명]
1.
<html> 태그
명확한 언어 사용
이해하기 쉬운 명확한 언어 사용하고, 스크린 리더로 명확하게 읽을 수없는 문자는 사용 금지.
1.
문장을 가능한 한 짧게 유지.
2.
대시 회피 . (예) 1-3 (X) , 1 ~ 3 (O)
3.
약어 회피 . (예) Sep (X) , September (O)
4.
속어 회피.
좋은 링크 사용 (= 명확한 정보 전달 설명 링크)
[ 나쁜 링크 예제]
[ 좋은 링크 예제]
결과보기
title 속성 (= 타이트속성 = 요소추가정보 속성)
<a href="https://homzzang.com/b/html/" title="HTML강의보기" >HTML강의</a>
결과보기
PS. title 속성 : 링크위로 마우스커서 위치할 때 뜨는 요소 정보.
