10페이지도 채 읽기 전에 내가 얼마나 HTML5와 CSS3에 대해서 잘 못 알고 있었는지 알게 되어 얼굴이 화끈거렸다. 기본적인 코딩 룰도 지키지 않은채 코딩을 했었던 것 같다. 문제 없이 잘 돌아가지만 어디 내놓기 부끄럽다는 걸 알게 되었다. 간단하게 정리해둔다.
doctype 선언 (DTD, Document Type Declaration)
현재의 문서가 어떤 형식으로 제작되어 있는지를 나타낸다.
- 유효성 검사기가 문서에 어떤 규칙을 적용할 지 알려줌
- IE6,7,8 버전에서 문서를 '표준모드'로 렌더링하도록 강제함
시맨틱 마크업
semantic - 의미론의, 어의의, 의미의
마크업을 의미적으로 좀 더 잘 표현하는 것이며, 기계와 사람 모두가 좀 더 쉽게 문맥을 이해할 수 있게 해준다. 예를 들어 헤더와 본문를 div 로 나누지 말고 각각 header와 article 태그로 설정한다면 마크업만으로도 내용물이 무엇인지 짐작할 수 있다.
아래 자료를 한번 읽어보면 좋을 것 같다.
Best Practice of HTML5 Semantic Markup
IE 9 미만에서는 해당 요소들들 인식하지 못해서 자바스크립트로 생성해 줘야한다. 간단하게 이미 만들어진~html5shiv.js 를 사용해도 된다.
아래 코드를 넣으면 <head>안에 넣어주면 된다~
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
저 comments는 IE 9 이하 버전에서만 동작한다. IE 만을 위한 conditional comments.ㅎ http://www.w3schools.com/html/html_comments.asp 참고
추가 자료,
시맨틱 마크업 사고의 출발점
http://nuli.navercorp.com/sharing/blog/post/1084101
커스텀 데이터 속성을 사용하자
웹앱 처음 만들어 볼 때 요소의 class 속성을 변수처럼 사용해서 구현한적이 있다. 예를 들어, 'item1' 이나 'item2' 이런 식으로 상태를 저장하고 각각의 class에 css속성도 줬다. 나름 효율적이고 똘똘한 방법이라고 생각했는데(Class 변경과 변수 변경을 동시에 할 수 있으므로) 순전히 혼자 개발하니까 편하게 생각했던 것 같다.
커스텀 데이터 속성은 "data-" 접두어로 시작하며 어떤 요소든 이 소성을 사용 가능하다. 자바스크립트로 쉽게 가져올 수 있으므로 class 나 id 같은 속성을 다른 의미로 사용 말고 커스텀 데이터 속성을 적절하게 사용하자.
자바스크립는 없는 페이지를 만들고 나서 + 자바스크립트
자바스크립트가 없어도 동작해야 한다. 기본은 그렇다. 가능하면...
접근성 향상 시키기
role, aria-live, aria-atomic 속성을 추가. 폴백에 대한 고려는 필요없음
WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications suite)는 독립 스펙으로 웹 애플리케이션과 웹페이지의 접근성이 더 좋아질 수 있게 HTML 확장기능을 제공한다. 즉, 역할과 상태 정보, 사용자 정의 위젯의 속성을 기술하는 수단을 제공하며, 보조적인 기술을 사용하는 사용자들이 이를 인식하고 사용할 수 있게 해준다. http://www.w3.org/TR/wai-aria/roles#role_definitions 참고
role 속성 분류
ARIA는 특정 요소가 담당하는 역할을 기준으로 role 속성에 지정할 수 있는 몇가지 속성값을 정의한다. 이를 기술적 용어로 온톨로지(ontology)를 부여한다고 표현한다.
랜드마크 역할
페이지 탐색을 목적으로 페이지 내의 특정 지점을 묘사한다. <nav role="navigation">과 같이 사용하여 스크린리더가 이 영역을 쉽게 이동하도록 만들 수 있다.
banner : 특정 문서가 아닌 전체 사이트 영역을 지정, 예를 들어 사이트의 헤더나 로고
application : 웹 애플리케이션에 사용되는 영역을 지정
complementary : 페이지의 메인 섹션을 보완하는 영역을 지정
contentinfo : 메인 콘텐츠의 정보를 지정. 예를 들어 페이지 하단의 저작권 정보 표시
form : 웹 폼을 지정. 검색 엔진일 경우에는 대신 search를 사용
main : 페이지의 메인 콘텐츠를 지정
navigation : 현재 문서나 관련된 문서의 내비게이션 링크를 지정
search : 검색을 수행하는 영역을 정의
클라이언트 데이터 활용
로컬 스토리지, 세션 스토리지, 웹SQL, 오프라인 작업(캐시 메니페스트)
각 특성을 잘 알고 적절하게 사용하자.
더 알아보기 - 분리된 API
API들을 내가 다 정리하긴 힘들 것 같고 html5 api 를 검색해보면 정리된 글이 매우 많으니 한번 쭉 읽어보고 필요한 것들은 그때 그때 알아보고 사용하는 것이 좋을 것 같다. 내용이 계속 바뀌어서…;;
'기술 이야기' 카테고리의 다른 글
| 파비콘favicon 만들어서 블로그에 적용하기 - 김프gimp사용 (0) | 2015.09.18 |
|---|---|
| 텔레그램 기반의 혁신적인 메신저 소셜라이저 소개 (0) | 2015.09.04 |
| 깃 허브 스타일로 구글 Syntax Highlighter prettify 적용하기 (0) | 2015.08.20 |
| 웹 서버를 운용하는 5가지 방식 (0) | 2015.08.03 |
| 깃으로 디버깅 하기 - git bisect 활용 (0) | 2015.04.30 |
| 로드 밸런싱 2가지 타입 - Layer 4(L4), Layer 7(L7) (0) | 2015.04.28 |
| 자료 백업 방법 (0) | 2014.12.03 |
댓글