[ 들어가면서...]
ㅇ 참고사이트
ㅇ HTML5 보일러 플레이트 사용 .... 모방은 벤치마킹... 좋은 거 ㅋㅋ
- 필수적인 CSS 및 미디어쿼리 제공
- http://html5boilerplate.com/
get a custom build 다운(initializr-verekia-4.0.zip) *v5.0.0.이 풀버전
- copy해 와서 코딩
- 새로운 project 만들기
- 새 project에 initializr(initializa 압축풀면) 폴더 내의 폴더와 화일을 복사
------> 반응형 사이트의 템플릿 페이지를 얻어낼 수 있음.
|
* HTML5 보일러 플레이트 다운로드 http://html5boilerplate.com/ [Get a custom build]버튼 클릭 http://www.initializr.com/ 로 이동하면 [Responsive]항목 클릭 체크박스항목을 모두 체크하거나 기본값을 그대로 사용하고 [Download it]버튼 클릭 다운로드 받은 initializr-verekia-4.0.zip 파일의 압축을 해제 [initializr]폴더안의 모든 파일을 선택 후 이클립스의 [프로젝트명]-[WebContent]에 붙여넣기
|
[ HTML5 반응형 웹 디자인 ]
ㅇ HTML5의 경제성... 간결성
- HTML5의 <!DOCTYPE> : 문서 선언
<!DOCTYPE html>
- HTML5의 문자 인코딩
<meta charset="UTF-8">
- HTML5의 <link>태그--- css 참조
<link href="css/rwtest.css" rel="stylesheet"/>
- HTML5의 <script>태그---js 참조
<script src="../js/jquery-1.11.0.min.js"></script>
ㅇ 폐기된 HTML 기능
- CSS에서 대체할 수 있기 때문에 더 이상 사용되지 않는 태그
basefont, big, center, font, frame, frameset, noframes, s, strike, tt, u
- 다른 태그들과의 사용법에서 혼란을 주어 더 이상 사용되지 않는 태그
acronym, applet, isindex, dir, noscript
- CSS로 대체 가능해서 더 이상 사용하지 않는 속성
align, background, border, cellpadding, cellspacing, frame, height, width, size, type, valign등등
ㅇ HTML5 문서구조
- <header> : 사이트의 소개나 내비게이션 등을 표시.
- <nav> : 사이트의 내비게이션(메뉴) 항목을 표시. 주로 <header>태그에 넣어서 사용.
- <article > : 문서의 내용(글)을 표시하는 태그로, 주로 블로그의 글들이나 기사와 같이 독립적인 콘텐츠를 표시.
- <section> : 문서의 내용을 표시하는 태그로 주로 문서의 영역적인 의미로 사용됨,
문서의 내용을 표시할 때 <article >, <section>, <div>중에 아무거나 사용해도 된다. 실제로 사용 시에는 그다지 차이가 없음.
- <aside> : 본문의 내용과는 독립적인 내용(주로 광고나 부 메뉴 등등)인 사이드바 콘텐츠를 표시.
- <footer> : 사이트의 제작자, 주소, 저작권 정보 등을 주로 표시
ㅇ HTML5의 새로운 시멘틱태그
- 버튼 생성
<input type='button' id='b1' value='소개'
<button id='b1'>소개</button>
ㅇ WAI-ARIA에 웹 접근성 추가... GOOD!
- Web Accessibility Interactive-Accessible Rich Internet Application의 약자
- RIA 또는 Ajax에 대한 웹 접근성 표준
- Ajax : Asynchronous Javascript and XML, 비동기적 요청
- client 요청과 server가 동기화 되면 요청이 보내지지만 server 준비와 관계없이 지속적으로 요청을 보낸다. so 속도 증가
- 사용목적 : 웹 접근성 보장을 위해 동적 콘텐츠를 만들 때 생기는 문제를 해결
- 기 능
역할과 상태정보
사용자정의 위젯의 속성을 기술하는 수단을 제공
보조적인 기술을 사용자들의 편의 제공
**** 참고사이트
w3c.github.io/aria-in-html
https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA
- ARIA의 랜드마크 롤(landmark role) 사용 : 웹사이트 작성시 접근성을 지원할 시간적 여유가 없는 경우
index.html index.html/a.html/b.html
--------- -------------------
메인 메인/기관소개/민원안내... 개별 화일로 작성 번거로우나
기관소개 jQuery Mobile에서 data-role page를 주면 자동으로 태그가
민원안내 웹페이지로 변환
참조 : http://www.w3.org/TR/wai-aria/roles
. HTML5 시멘틱의 단점 보완
. 스크린 리더가 반응형 웹 디자인과는 상관 없으나 시스템이 인식하여 특정 영역으로 쉽게 이동할 수 있게 함.
<nav role=“navigation”>
<li><a href=“#”>Why?</a></li>
</nav
* 스크린 리더(screen reader) : 시각 장애인들에게 화면의 내용과 자신이 입력한 키보드 정보나 마우스 좌표 등을음성으로 알려 주어, 컴퓨터를 사용할 수 있도록 도와주는 프로그램
. 랜드마크 롤 속성 값
application : 웹 애플리케이션에 사용되는 영역
banner : 사이트의 헤더나 로고
complementary : 메인 섹션을 보완하는 영역. 사이드바 영역
contentinfo : 하단의 저작권 정보 표시 영역
form : 웹 폼을 지정. 검색엔진일 경우 search사용
main : 페이지의 메인 콘텐츠
navigation : 네비게이션 링트
search : 검색을 수행하는 영역
ㅇ 멀티미디어 element
- 플러그인 없이 멀티미디어를 재생.....audio
<audio controls>
<source src="play1.mp3" type="audio/mpeg">
</source>
</audio>
'잡기' 카테고리의 다른 글
| [HTML 5 반응형 웹디자인_2015.03.27] 8. CSS3 (0) | 2015.04.01 |
|---|---|
| [HTML 5 반응형 웹디자인_2015.03.27] 7. 웹폼 (0) | 2015.04.01 |
| [HTML 5 반응형 웹디자인_2015.03.26] 5. 유동형 레이아웃 (0) | 2015.03.31 |
| [HTML 5 반응형 웹디자인_2015.03.26] 4. 미디어 쿼리 (0) | 2015.03.31 |
| [HTML 5 반응형 웹디자인_2015.03.25] 3. 반응형 웹의 개요 (0) | 2015.03.31 |
