HTML5 & CSS3 오늘 구현하는 내일의 웹 표준 기술 이야기 2015. 6. 15. 23:35

10페이지도 채 읽기 전에 내가 얼마나 HTML5와 CSS3에 대해서 잘 못 알고 있었는지 알게 되어 얼굴이 화끈거렸다. 기본적인 코딩 룰도 지키지 않은채 코딩을 했었던 것 같다. 문제 없이 잘 돌아가지만 어디 내놓기 부끄럽다는 걸 알게 되었다. 간단하게 정리해둔다.

doctype 선언 (DTD, Document Type Declaration)

현재의 문서가 어떤 형식으로 제작되어 있는지를 나타낸다.

  1. 유효성 검사기가 문서에 어떤 규칙을 적용할 지 알려줌
  2. 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 : 검색을 수행하는 영역을 정의

[HTML5] 7장 추가된 글로벌 속성

클라이언트 데이터 활용

로컬 스토리지, 세션 스토리지, 웹SQL, 오프라인 작업(캐시 메니페스트)
각 특성을 잘 알고 적절하게 사용하자.

더 알아보기 - 분리된 API

API들을 내가 다 정리하긴 힘들 것 같고 html5 api 를 검색해보면 정리된 글이 매우 많으니 한번 쭉 읽어보고 필요한 것들은 그때 그때 알아보고 사용하는 것이 좋을 것 같다. 내용이 계속 바뀌어서…;;

댓글