웹 표준
어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙
웹 접근성
어떠한 사용자가 어떠한 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것
웹 접근성을 지켜야 하는 첫 번째 이유
장애인 차별 금지법(장차법)이 정해져 있기 때문에 지켜야한다
장차법에서는 2013년 4월 11일부터 장애인들도 비장애인과 동등하게 전자정보 및 비전자정보를 사용할 수 있도록 해야 한다는 법이다
웹 접근성에서는 다음의 사항들을 고려하여야 한다
웹 접근성에 맞는 마크업 예시
- 스크린리더 / img 태그
img 요소의 경우 스크린 리더로 들으면 alt 값을 읽어준다.
input의 type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공하여야한다
<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">
<img src="btn_next.png" alt="다음 콘텐츠 보기"> /*의미있는 이미지인 경우에도 값을 넣어줘야 한다*/2. 콘텐츠의 선형 구조
웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 한다
제목-내용-더 보기 콘텐츠
보이는 순서대로 공지사항, 더 보기 버튼, 내용 순으로 마크업 된 경우는 오류다
논리적인 순서는 제목 > 내용 > 더 보기 버튼 순이므로 마크업도 이 순서대로 작성해야한다
<div class="noti_section">
<h3><span class="blind">공지사항</span></h3>
<ul class="lst_noti">
<li>
<a href="…">[복구완료] 10/19 (금), '뮤직'...</a>
</li>
<li>
<a href="…">[복구완료] 10/17 (수), '지도'...</a>
</li>
</ul>
<a href="…"><span class="blind">공지사항</span>더보기</a>
</div>3. 표의 구성
HTML5부터는 summary 속성이 없어졌으므로 caption에 제목과 요약 정보를 모두 제공
<table>
<caption>
<strong>직원 관리 현황 표</strong>
<span>부서별 직원 수, 합계 정보</span>
</caption>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">부서</th>
<th scope"col">직원 수</th>
</tr>
</thead>
</table>시멘틱 태그
시맨틱 태그란 웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그다
html5에 도입되었다
자주쓰이는 태그
header : 웹문서 상단
nav : 주로 메뉴표현에 사용
aside : 왼쪽 또는 오른쪽 사이드
section & article : 본문
footer : 웹문서 하단
SEO - Search engine optimization(검색엔진최적화)
웹 문서를 작성할 때 시맨틱 태그를 꼭 사용할 필요는 없지만 사용시에 장점이 있다
- SEO 최적화에 유리. (SEO: Search Engine Optimization)
검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어
검색 결과의 노출에 유리할 수 있게 해준다.
검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다
검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다
- 웹 접근성에 효율적
일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.
Button 태그의 Default type
button 태그의 dafault 값은 submit이다
버튼태그의 타입은 총 3가지가 있다
1) submit, reset, button
Section 태그와 article 태그의 차이점
section
섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다.
주제별로 구분한 그룹이다.
article
문서내에서 그룹화해서 분리하는 역할을 한다.
내용이 독립적이다.
※ 논리적인 관계가 없는 요소들을 그룹화 할 경우에는 div를 사용한다.
<section>
<h1>과일</h1>
<section>
<p>빨간색</p>
<article>사과</article>
<article>체리</article>
</section>
</section>참고한사이트
https://www.boostcourse.org/web201/joinLectures/193141
https://www.youtube.com/watch?v=xToJhmAJYCE
https://moo-you.tistory.com/m/406
https://falaner.tistory.com/48
