티스토리 블로그 스킨을 html5 시멘틱 마크업을 하면?

게시자: 대문 demun 카테고리: 퍼블리셔/html 2012.12.17 09:00

티스토리 블로그 스킨을 이전부터 html5로 제작해봤지만 의미에 맞는 html5 마크업, 재사용 가능한 마크업이 이글에 목적입니다.

허나 이것은 쉬운일이 아니었습니다.

완전하지는 않지만 하나의 발자취가 될수 있기에 이렇게 포스팅합니다.


html5 골격은 boilerplate 를 사용합니다.

먼저 사진을 참고하세요.


head 부분


독타입이 html로 시작이 되며 modernizr 로 걸러내기위한 마크업이 시작이 됩니다.

티스토리 블로그의 타이틀이 들어가고, meta 에 설명과 저작자가 들어갑니다.

ie7이에서는 크롬설치창이 뜨고, viewport 에 대한 설정, 스타일시트, 블로그 아이콘, rss url 에 대한 설정이 들어갑니다.

그다음 자바스크립트인 jquery, modernizr 이 들어갑니다. 물론 이부분은 상황에 따라 다르겠지요.


그다음 body에 티스토리 클래스가 들어가고 본문에서 자바스크립트를 사용할 수 있도록 <s_t3> 로 시작을 합니다.


전체 마크업.

제일먼저 ie7에 대한 주석이 들어갑니다.

그다음 본문바로가기 링크인 건너뛰기메뉴가 나옵니다.

클래스를 visuallyhidden 을 정한것은 boilerplate 에서 제공하는 normalize.css 에 지정이 되어 있습니다.

본문에서는 감추고, 스크린리더에서는 보이는 설정입니다.


header 에는 role="banner" 을 설정했고, 블로그메뉴는 nav 를 사용했으며, 차후 또 사용이 가능해서 id 를 부여했습니다.


전체 마크업 부분



가장 크게 분류한것은 header , section, aside, footer 입니다.

각각 글로벌해서 id 를 부여했습니다.

여기서 section 을 div 로 해야하는지? article 로 해야하는지 많은 시간을 보냈습니다.


section 도 각각의 section과 article를 포함할수 있고, article 도 각각의 section과 article를 포함할 수 있습니다.

티스토리의 구조상 content 를 section으로 분류했으며, 각각의 하나의 포스트로 해당되는 본문글, 태그, 미디어로그, 공지사항, 보호글 등을 article 로 분류했습니다.

한가지더 각각의 큰 분류에는 role 속성을 추가해서 접근성을 향상시켰습니다.


article 가 전역이라 각각의 해당 글에 해당하는 클래스를 부여했습니다.

또한 현재위치를 나타내는 빵부스러기 breadcrumb 를 nav 로 설정했습니다.


article 부분


본문을 좀더 자세히 들여다보면 

본문에는 글제목, 관리자설정인 수정,삭제, 트랙백...부분이 있고, 본문글, 그아래에 태그, 트랙백, 댓글 순으로 나열됩니다.

글제목 부분에 header 로 사용해서 글제목, 관리자설정 등을 하나로 그룹핑하고, 본문글은 본문글하나로만 그룹핑해서 article 클래스를 부여했습니다.


태그와 트랙백 부분이 좀 난감한데요. 의미에 맞는 태그가 없어 의미가 없이 사용하는 div 를 사용했습니다.


본문 자세히 들여다보기


한가지 댓글부분.

하나의 글에 해당되는 부분이 아니라서 article 로 분류하기에는 다소 무리가 잇고해서 section으로 분류했으며, 각각 클래스를 부여했습니다.

댓글부분에는 role="form" 을 추가했으며, 이 댓글부분은 방명록 부분에도 똑같이 작성해서 스타일을 같이 사용하도록 했습니다.


티스토리에는 본문 말고도, 검색리스트, 검색결과 리스트, 위치로그, 태그로그, 공지사항, 보호글 등이 있습니다.

여기서 검색리스트, 검색결과 리스트, 위치로그, 태그로그 등은 하나의 글, 하나의 페이지 입니다.


다른점은 공지사항, 보호글은 하나의 글과 페이지 이지만 본문글에 해당하는 부분이 또 있습니다.

다른점은 article 안에 article 가 다시 들어갔다는 점입니다.


아래 이미지는 태그로그와 공지사항은 글 성격이 다르기 때문에 의미에 맞게 작성하고, 일관된 스타일을 유지하려면 article 가 또 들어가서 그룹핑을 해줘야 하는것이 맞다고 판단되었습니다.

서로 다른점을 이미지로 비교해보세요.


태그영역과 공지사항 영역의 서로 다른 점



사이드바의 영역에는 aside 를, 푸터에는 footer 을 지정했습니다.

이 부분은 성격이 딱딱 나뉘어져있어서 쉽게 구분이 가능했습니다. 


사이드바, 푸터



티스토리 블로그 스킨을 html5 로 그것도 의미에 맞는 시멘틱 마크업으로 하는데는 생각보다 시간이 많이 걸렸습니다.

교과서라고 하는 가이드라인이 없었고, 광범위한 분류와 성격의 글가지고 판단을 해야해서 시간이 걸렸고, 여기에 접근성과을 더 추가하면 더 시간이 걸릴듯했습니다.


WAI ARIA 부분과 Landmar 부분이 어려웠으며, 잘 사용하지 않는 부분이라 시간이 걸렸습니다.

위의 사항에 좀더 추가할 사항이나 수정할 사항이 잇으면 댓글 부탁합니다.


참고 링크.

html5 한글명세 : http://html5.clearboth.org/spec

html5 가이드 : http://html5.creation.net/html5-guide.pdf


WAI ARIA Landmark Roles

HTML5, ARIA Roles, and Screen Readers in March 2011 : http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

Definition of Roles : http://www.w3.org/TR/wai-aria/roles#role_definitions

Using WAI ARIA Landmark Roles : http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/


HTML5 + ARIA Roles TEST : http://www.accessibleculture.org/research-files/html5-aria-2011/html5Aria.php


건너뛰기 링크

건너뛰기 링크(Skip Navigation)란? : http://www.jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/

건너뛰기 링크 제공 : http://www.wah.or.kr/Example/wcag_desc.asp?cate=47


댓글

  1. 2016.07.29 13:35 신고 BlogIcon 작은설탕-Mini  댓글주소  수정/삭제  댓글쓰기

    엄청 정리를 잘해놓으셨네요.
    잘보고갑니다 ^^