웹표준 코딩하기
라스트 프로젝트 돌입 ㅋ...포폴에 올릴 사이트 리뉴얼 메인과 서브의 디자인이 끝나고 웹표준 코딩 작업시작...
화일명이나 구조,코딩방법은 회사마다 다르므로 회사내규를 따르면 되고...
일단 이번 프로젝트에서 하는 방법들을 적어보자면..
[개발가이드 참고]
서울특별시 http://waf.seoul.go.kr/
네이버nhn : http://html.nhndesign.com/
daum : http://ui.daum.net/ftdev/guideline
1.일단 디자인된 psd를 야무지게 슬라이스 작업해서 폴더에 잘 분류해서 저장하기
전체적인 폴더 구성은
html폴더 안에 images,css,flash,js등등의 폴더가 있고
images폴더 안에 다시
common(메인,서브 공통이미지),main(메인관련이미지),sub(서브페이지 화일명에 따라 폴더 생성후 넣기)로 구성.
2.마크업 작업하기
이제..웹표준의 정신에 입각하여(!!!) 시각장애인이든, 어떤 브라우저이든, 스크립트가 안먹히든
일단 홈피에 오신 분들이 모두 동등하게 내용을 체험(!)하실 수 있도록 염두해 두며 작업을 시작한다.
쌤께서 주신 웹접근성 페이지제작과 마크업 준수사항을 살펴보면...
[웹접근성 페이지제작 준수사항(체크리스트)]
1. 대체텍스트를 제공하였는가?
(예: 네이버의 로고이미지 - alt="네이버(o)" alt="네이버 로고(x)
-모든 이미지의 명확한 네이밍
-영문alt는 알기쉬운 한글화
2. 동영상 삽입 시, 동영상을 이해할 수 있는 대체내용(자막 등)을 제공하여 접근가능하도록 하였는가?
3. 색상으로 콘텐츠의 내용을 구분하지 않도록 개발 되었는가?
4. 이미지 맵을 시킨경우, 대체텍스트를 제공하였는가?
5. 프레임으로 제작한 경우(frameset/iframe), 프레임안의 내용을 짐작할 만한 적절한 대체텍스트를 제공하였는가?
6. 처음부터 깜빡거리는 개체가 없도록 개발하였는가?
배너등의 경우 처음에는 정지되어있고, 사용자가 원할 경우에만 재생이 가능하도록 제작
7. 키보드만으로 운용가능한 사이트
8. 건너띄기 링크 기능을 제공했는가?
- 페이지상단 : <p><a href="#contents">본문바로가기</a></p>
- 콘텐츠내용 분류가 긴 페이지의 콘텐츠상단에 분류리스트제공
9. 반응시간의 조절기능(모든 페이지의 기능이 자동제어가 아닌 사용자가 직접 컨트롤하도록 개발되었는가?)
- 개편된 페이지의 경우 자동넘김이 아닌 사용자가 직접 해당링크로 이동할 수 있도록
- 여러개의 목록이 있는 배너나 뉴스 등이 자동으로 다음화면이 아닌 사용자가 다음리스트 버튼으로 제어가능하도록
- 새창 또는 팝업창 또는 사용자 예측 전 뜨게 하지 않고, 미리 경고메시지를 알리거나, 직접 제어가능하도록
10. 데이터테이블을 접근성에 맞게 제작하였는가?
- 제목과 요약정보 제공
: summary / caption / thead,tfoot,tbody / th
- 제목셀과 내용을 대응되도록
: scope="col" scope="row" scope="colgroup" scope="rowgroup"
11. 논리적구성(시멘틱한 마크업)
- heading을 이용해 순차적 마크업 진행(각 콘텐츠별 적절한 제목부여)
- 모든 모양 및 배치는 css로 사용(구조와 표현의 분리)
- 불가피하게 레이아웃 목적의 테이블을 제작시 왼쪽 상단에서 오른쪽 하단순서로 인지한다는 것을 명심
- 각 문서에 의미있는 제목(title) 지정
예 : CEO인사말 | 한국직업전문학교
12. 온라인 서식 구성(Form)
- 폼요소 레이블링
1) label과 폼요소 연결 (for와 id연결)
<label for="userid">아이디</label> <input type="text" name="userid" id="userid" value="" />
2) label을 달기 어려운 경우, title속성으로 대체
<input type="text" name="userid" value="" title="아이디입력" />
- 탭키를 이용하여 양식 제어 요소 간의 이동이 순차적으로 가능
13. 신기술 사용 제한
스크립트, 플래시 등 신기술 사용의 경우 해당 기술 지원이 되지 않아도, 사용자가 콘텐츠의 내용에 접근가능해야 함.
- 스크립트의 경우 noscript를 이용하여 대체콘텐츠 제공
- Flash의 경우
1) flash제작시 : accesibility패널에서 name과 tabindex적용
2) 코딩시 : 대체콘텐츠 제공
14. 별도의 페이지 제공
콘텐츠가 13개 지침을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면
텍스트만의 콘텐츠를 제공하는 웹 페이지 (또는 웹 사이트)를 별도로 제공해야 한다.
[마크업]
1. Title 의미있게 작성
- 메인 : 회사이름 및 슬로건
- 서브 : 해당 페이지의 주요제목을 앞에 작성
예) ceo인사말 | 한국직업전문학교
2. 스킵네비게이션 제공
- 가장 먼저 마크업
- 본문바로가기 기능은 반드시
- 그 외 다양한 스킵메뉴 연결 가능
3. 논리적구성
- 의미있는 요소만 마크업 되도록
- heading태그를 이용한 순차적인 의미진행
- 문법
1) 모든inline과 텍스트는 블록안에 마크업
2) 블록요소 안에는 블록, 인라인, 텍스트 모두 포함 가능
단, p, h1~h6, dt는 블록 포함 할 수 없는 블록
3) 인라인 요소안에는 인라인, 텍스트만 포함 가능
4. 대체텍스트
- 일반 텍스트 요소가 아닌경우 의미를 파악할 수 있는 대체텍스트 제공
5. 데이터테이블
- 제목과 요약정보 제공
summary / caption / thead,tfoot,tbody / th
- 제목셀과 내용을 대응되도록 th요소에
scope="col" scope="row" scope="colgroup" scope="rowgroup"
또는
th:id부여 / td:headers속성 지정
6. 온라인 서식(Form)
- 폼요소 레이블링
1) label과 폼요소 연결 (for와 id연결)
<label for="userid">아이디</label><input type="text" name="userid" id="userid" value="" />
2) label을 달기 어려운 경우, title속성으로 대체
<input type="text" name="userid" value="" title="아이디입력" />
- 탭키를 이용하여 양식 제어 요소 간의 이동이 순차적으로 가능
7. 플래쉬 삽입
- flash제작시 : accesibility패널에서 name과 tabindex적용
- 코딩 삽입시 : 플래시가 제대로 동작되지 않는 경우의 환경을 위해 대체콘텐츠 제공
(script방식은 noscript안에 대체내용 제공 / object방식은 object삽입 소스 안에 제공)
이러한 내용을 숙지한 후 마크업 시작...
제목에 해당되는 부분은 h1부터 순차적으로 마크업하고...
로고가 h1,주메뉴가 h2,메인의 컨텐츠 제목들은 h3...
(최근글 보기의 공지사항탭 이미지도 h3로 하고, 배너이미지들도 제목이 있는 경우(쇼핑몰 바로가기-부가설명) h3로 이미지를 감싼다)
메뉴나 일반적인 나열은 ul과 li로 작업...
정의형목록은 dl,dt,dd ...
이미지나 카피같은건 p로...
하단 주소는 address로...
폼태그들에는 레이블링 작업 잊지 말고...
나중에 한꺼번에 오류확인하면 꼬일수 있으므로 파이어폭스의 벨리데이터로 그때그때 확인...
마크업이 끝나면 css 레이아웃을 위한 div 그룹핑작업으로....