design-h

라스트 프로젝트 돌입 ㅋ...포폴에 올릴 사이트 리뉴얼 메인과 서브의 디자인이 끝나고 웹표준 코딩 작업시작...

화일명이나 구조,코딩방법은 회사마다 다르므로 회사내규를 따르면 되고...

일단 이번 프로젝트에서 하는 방법들을 적어보자면..

[개발가이드 참고]

서울특별시  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 그룹핑작업으로....

웹표준...css...시작...!

그 전꺼 정리해야 하는뎅..ㅠㅠ ㅎㅎ..눈 깜짝 할 사이에 xhtml이 끝나버렸네..ㅠㅠ...

암튼...전에 작업할때는 css를 드림위버로만 불러오고 생성했었는데...

요즘은 매번 에디트플러스에서 직접 소스를 파악하고 입력하려니 영타도 후덜덜 기억력도 후덜덜...

그땐 그냥 걍 생성되나부다 했던 것들에 대한 각각의 의미를 배우니 흥미진진하네..ㅎㅎ...

기억력만 좀 어케 해보장..!!

스타일시트

1. 내부
- 문서내에 head안에 삽입
<style type="text/css">
</style>
2. 외부
- 외부에 css문서를 만들고 연결 (abc.css)
① link
- head안에
<link rel="stylesheet" type="text/css" href="abc.css" />
② import
- html문서내의 head안에
<style type="text/css">
   @import url(abc.css);
</style>
- css문서 안에
@import url(abc.css);
3. 인라인
- 태그의 style속성을 이용하여 삽입
<p style="color:red;">text</p>

테이블에서 제목이 될만한 셀이 있다면 td가 아닌 th로 표현한다.

th는 반드시 scope가 들어가야 하며 이것은

표를 눈이 아닌 소리로 이해하는 분들 위해 반드시 넣어야 한다.

없으면 그냥 표를 순서대로 읽기만 할테니..

scope를 넣어서 내용을 읽을때 해당 셀의 상단이나 왼쪽편의 제목셀 내용을 한번씩 더 읽어준다.

세로줄 scope는 col   <th scope="col">

가로줄 scope는 row   <th scope="row">

<th scope="col">이 여러칸 있고 그 위에 병합된 또 다른 scope="col"이 있다면

<th scope="colgroup">

나중에 추가로 배운 내용이지만 scope로 계속 제목을 반복해서 읽으면 지겨워(!)지고 복잡할 수 있으므로

<th abbr="축약어">를 넣어서 두번째엔 요걸 읽어주도록 한다.

..............

행 그룹화 요소는 thead,tbody,tfoot...

그렇다면 열 그룹화 요소는!! (빰빰!) ㅋ

col,colgroup...

caption닫기 태그 아래에 써주며...세로줄 부분의 스타일이나 너비를 지정할 수 있다..

하지만 스타일의 경우 브라우저마다 결과값이 다르므로...

거의 너비를 지정할때 사용한다.

닫기태그 사용해야 한다.

<col width="10%" />

같은 col이 반복될때는 ...

예를들어 3열이 같은 것이라면

<col width="10%" span="3" /> 이라고 함께 쓴다.

<colgroup>

<col />

<col />

</colgroup>

<col />

==>이렇게 쓰면 문법상 오류가 나므로

<colgroup>

<col />

<col />

<col />

</colgroup>

==>이렇게...

-------------------

table 내에 내용이 없는 셀(td)표현에는 '없음'이나 '-' 아니면 &nbsp;를 넣어준다

scope대신 id와 headers를 사용해서 내용셀의 제목을 불러오기도 하지만 주로 scope를 많이 쓴다.

이렇게 복잡한(!) id와 headers,scop등등이 잘 들어갔는지 확인하기 위해

파이어폭스의 부가기능인 juicy studio accessibility toolbar를 사용한다.

https://addons.mozilla.org/ko/firefox/addon/9108 에서 설치하고 설치되면 생성된 툴바의 'table inspector'메뉴 클릭해서 본다.

==================================================

[폼관련요소]

1.폼요소...주소값은 action으로...처리방식은 method로..주소값이 보이는 것은 get, 데이터값이 길고 노출 안되게 하려면 post...

2.폼요소 그룹화 fieldset 제목 legend로 연관성 있는 컨트롤 요소끼리 그룹화한다.

3.레이블(label) : 웹접근성을 높이기 위해 모든 폼 컨트롤 등에 사용하도록 권장

명시적

암묵적

레이블텍스트를 클릭하면 연결된 input요소에 포커스가 설정된다.

라디오버튼이나 체크박스의 경우 해당 텍스트를 선택해도 적용이 된다.

4.다양항 폼 컨트롤

5.목록상자

6.여러글상자

(나머지 계속 정리해야함)