웹표준...계속 공부중

테이블에서 제목이 될만한 셀이 있다면 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.여러글상자

 

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

[출처] 웹표준...계속 공부중..ㅋㅋ..