웹표준 관련 Site

출처 : http://www.cyworld.com/nude9082/3068714 

웹접근성 연구소 : http://www.wah.or.kr/

정보통신 접근성 향상 표준화 포럼 : http://www.iabf.or.kr/

W3C 문서 한국어 번역판 :  http://www.w3.org/2005/11/Translations/Lists/ListLang-ko.html

NHN 웹표준 NULI : http://html.nhndesign.com/

Naver 개발자 센터 : http://dev.naver.com/

다음 UI Dev Guid : http://ui.daum.net/

다음 개발자네트워크DNA : http://dna.daum.net/

FireFox : https://developer.mozilla.org/ko

FireFox : http://forums.mozilla.or.kr/

 

웹접근성 테스트

BrowserShots : http://browsershots.org/

브라우저샷은 무엇인가요?

브라우저샷은 다른 브라우저에서 여러분이 요청한 웹 디자인의 스크린샷을 찍습니다. Johann C. Rocholl에 의해 만들어진 자유 오픈 소스 온라인 서비스입니다. 웹 주소를 제출할 때, 작업 큐에 추가될 것입니다. 다수의 분산된 컴퓨터들이 그들의 브라우저에서 당신의 웹사이트를 열 것입니다. 그러고나서, 스크린샷을 찍고 이 중앙 서버로 스크린샷을 업로드할 것입니다.

  

1. 브라우져 선택 체크

2. URL 입력

3. 결과페이지 즐겨찾기 추가

4. 나중에 다시 방문 대략 5분정도인듯..

5. 브라우져별로 스크린샷 으로 결과 확인(압축파일로 전체 내려 받을수 있음)

 

유용한 접근성

 WAVE : http://wave.webaim.org/

   

테스트 결과

 

 검사한 사이트에 이미지 형태로 경고 및 오류 표시

 

 

---

 

출처 : http://hyeonseok.com/pmwiki/

공개 문서

• 접근성을 떨어뜨리는 웹사이트 구현 사례
• 잘못된 보안 권고 사항
• 웹표준을 이용한 웹사이트 접근성의 향상
• 접근성을 해치지 않는 javascript의 사용
• 실전 웹 표준 가이드 (2005) (down)
• CSS 제대로 쓰기
• 주요 W3C 기술 문서

The Web

• 웹표준(Web Standards)
• 테이블 레이아웃과 CSS 레이아웃
• 브라우저
• 저작 도구
• 웹표준 커뮤니티
• 웹표준 관련 서적
• 웹표준 온라인 강좌
• 웹 에디터
• 문서포함 방법
• 한글 공개 서체
• 브라우저 통계

Markup language(HTML, XHTML)

• 문서형 선언(Document Type Definition)
• Character Encoding
• 서식의 레이블(label) 제공
• 링크의 타겟(target) 지정
• 적절한 URL 표기
• 자바스크립트(Javascript) 선언 방법
• 스타일(style) 선언 방법
• 오브젝트(object) 요소와 대체 텍스트
• 표준 오브젝트(object) 구문을 이용한 플래시 무비의 삽입
• 윈도우 모드(wmode)로 플래시 플레이어의 투명/불투명 제어
• 인터넷 익스플로러의 선택 요소(select)가 아이프레임을 뚫는 현상
• 인터넷 익스플로러에서 프레임(frame)안에 표준 DTD 문서를 사용할 때 생기는 스크롤바 제거
• 마크업을 생성하는 템플릿 엔진, 언어
• 마크업을 손쉽게 편집하는 위지윅 에디터

Cascading Style Sheet

• Cascading Style Sheet
• 링크 걸린 이미지의 경계선(border) 없애기
• 세로정렬(vertical-align) 속성으로 이미지 아래의 여백 조정
• 줄간격(line-height) 속성을 이용한 이미지를 세로 방향 중앙 정렬
• 표시(display) 속성 조정으로 텍스트 링크를 버튼처럼 사용하기
• border-collapse로 cellpadding, cellspacing속성 없이 여백없는 table 만들기
• Float Element만 포함한 블록을 클리어(clear)하는 방법
• 여백(Margin) 속성을 이용한 컨텐츠 블록의 중앙정렬
• 화면 정 중앙에 위치하는 블록
• absolute position과 relative position의 관계
• 높이를 100%로 유지하는 레이아웃
• UL, OL, LI Element in IE
• IE Float 블록의 double margin bug
• IE의 position: fixed
• IE Scrollbar 디자인 변경
• IE에서 display: block을 사용할 경우 리스트 하단의 여백 없애는 방법
• IE에서 줄이 나뉘는 인라인 블록의 배경 이미지가 안나오는 오류

Javascript

• 팝업창의 사용자 접근성 높이기
• document.getElementsBySelector
• addEvent, removeEvent (via QuirksMode)
• Rollover Image
• CSS3 Background Image Layering
• 동적으로 className 바꾸기
• Mouseover 시에 className 바꾸기
• 리스트 항목의 높이 맞추기
• Toggle List
• Tab 컨텐츠
• Cookie를 이용한 팝업 제어
• Iframe 크기 조절
• Menu
• IE에서 PNG 포맷의 이미지 사용
• Flash Object를 Active-X로 바꾸기
• 미디어 불러오기
• Minimize Windows (Windows IE only)
• Ticker
• 컨텐츠 Slide
• 컨텐츠 Scroll
• 스크롤 따라 부드럽게 움직이는 레이어
• MessageLayer
• 각종 자바스크립트 라이브러리
• 플래시를 이용한 서체 변경(sIFR)

Flash

• 투명효과가 들어간 이미지 사용: PNG
• Loadmovie
• 메뉴
• 플래시 접근성