첫째, ‘실전 웹 표준 가이드’(무료배포, PDF형식)로 웹 표준 개념잡기
아직 ‘실전 웹 표준 가이드(모질라 커뮤니티 배포)’ 라는 문서를 접해보지 못한 분이 계시다면 우선 읽어보실 것을 권합니다. ‘실전 웹 표준 가이드’ 는 국내에서 웹 표준으로 잘 알려진 분들(윤석찬, 신현석, 이성노, 신정식)께서 저작하고 ‘KIPA(한국소프트웨어진흥원)‘ 와 ‘IABF(정보통신 접근성 향상 표준화 포럼)‘ 에서 무료로 배포하는 PDF 형식의 자료 입니다. 목차는 아래와 같으며 다른 어떤 서적보다 먼저 읽어볼 것을 권해드립니다. 표준 XHTML/CSS/DOM 구현 기법과 웹 표준 방식의 개발 프로세스에 대한 개념을 전반적으로 다루고 있습니다.
- 실전 XHTML 가이드
- 실전 CSS 레이아웃
- 실전 DOM/Script 가이드
- 실전 표준 웹 프로그래밍
- 실전 웹 표준 개발 프로세스
- 웹 표준 브라우저 호환표
PDF 형식의 ‘실전 웹 표준 가이드’ 직접 다운로드: 모질라 방문
둘째, ‘웹 접근성을 고려한 콘텐츠 제작기법’(무료배포, PDF)으로 HTML 다시배우기
‘실전 웹 표준 가이드’ 가 웹 표준과 관련하여 다양한 실무분야를 다룬것에 비하여 KADO(한국정보문화진흥원) 에서 발간한 연구보고서 ‘웹 접근성을 고려한 콘텐츠 제작기법‘ 은 (X)HTML의 바른 바크업(Valid Markup & Semantic Markup)에 대하여 보다 집중적으로 세세하게 다루고 있습니다. 웹 표준을 처음 접하는 개발자들은 당장의 필요(현실)에 의하여 바른 Markup 보다 CSS 관련기법을 먼저 학습하는 경우가 많은것 같은데 이는 다소간의 조율이 필요합니다. Markup 이 잘못되면 아무리 유능한 CSS 기법이라 할지라도 ‘그 의미가 없다’ 할 수 있습니다. ‘실전 웹 표준 가이드’ 다음으로 읽어볼 것을 추천합니다. 이 문서에는 ‘한국형 웹 콘텐츠 접근성 지침(KWCAG) 1.0‘ 이 함께 첨부되어 있습니다. 참여(최두진 센터장, 김석일 교수, 홍경순 팀장, 조웅희 대표, 신승식 과장, 현준호 전임연구원).
- 웹 접근성이란?
- 대체 텍스트
- 동영상
- 색상
- 이미지 맵
- 프레임
- 깜박임, 움직임
- 장치 독립성
- 링크를 통한 이동
- 시간 제한
- 데이터 테이블
- 콘텐츠의 배치
- 온라인 양식(form)
- 스크립트, 애플릿
- 별도(대체) 페이지
- 첨부 : 한국형 웹 콘텐츠 접근성 지침 1.0
PDF 형식의 ‘웹 접근성을 고려한 콘텐츠 제작기법’ 직접 다운로드 : 모질라 제공
셋째, 예제중심의 ‘웹 표준 완전정복 세트’(3권 1셋)로 CSS 스킬 향상
아래 소개하는 책보다 지금은 미투데이 서비스로 더욱 유명해지신 박수만님께서 번역하신 책입니다. 아래 책은 가장 많은 분들에게 알려져 있어서 굳이 설명이 필요없을것 같습니다. 최근에는 3권을 하나의 셋트로 묶어 ‘웹 표준 완전정복‘ 이라는 패키지로 판매(정가 66,000, 할인가 59,400)하고 있군요. 예제중심이므로 CSS에 대한 기본지식이 있다면 아래 세권은 모두 빠르게 읽어내려가실 수 있습니다.
- 실용예제로 배우는 웹표준
- 리스트
- 머리글
- 테이블을 쓰면 안된다?
- 인용문
- 폼
- 구문표현 엘리먼트
- 앵커
- 리스트의 고급 기능
- 마크업 용량 줄이기
- CSS적용하기
- 인쇄를 위한 스타일
- CSS로 레이아웃 잡기
- 텍스트 스타일
- 이미지 바꿔치기
- <body>를 위한 스타일
- 새로운 도약
- 부록1 – 웹 표준 블로그 만들기
- 부록2 – 국내외 웹 접근성 소개 및 현황
- 웹 2.0을 이끄는 방탄웹
- 글꼴 크기를 내 마음대로
- 자유롭게 크기가 조절되는 네비게이션 메뉴바
- 자유자재로 높낮이가 조절되는 행 만들기
- 나만의 Float 활용 비법
- 깨지지 않는 상자 만들기
- 이미지나 CSS가 없이도 볼 수 있게 하기
- 쉽게 변환할 수 있는 테이블 만들기
- 유동적인 레이아웃 만들기
- 방탄웹 구축 완결 종합편
- CSS 마스터 전략
- 기초 다지기
- 화면 표시를 위한 모델 완벽 정리
- 배경 이미지와 이미지 대치 기법
- 링크 모양 꾸미기
- 리스트 스타일과 네비게이션 바 만들기
- 접근성 높은 폼과 테이블 만들기
- 레이아웃
- 핵과 필터
- 브라우저 버그 해결하기
- 부록1 – 동호회 사이트 만들기
- 부록2 – 투스카니 럭셔리 리조트
넷째, ‘웹 표준 교과서’로 W3C의 방대한 표준 스펙 이해하기
저는 지금도 (X)HTML/CSS 스펙을 확인하기 위하여 일주일에 2~3번은 W3C 웹사이트에 방문합니다. 하지만 W3C에 방문해도 원하는 목적을 달성하지 못하는 경우가 있는데, 그 의미가 명확하지 않거나 원문으로 되어 있어서 이해하기 힘들기 때문입니다. 처음 ‘웹 표준 교과서‘라는 책을 받았을 때에는 마치 사전 같다는 생각을 했는데 정말 사전 같습니다.(ㅡㅡ;) 그리고 마치 W3C의 스팩 해설서 같습니다. 이런 책을 보면 안읽고는 배겨내기 어렵기 때문에 앞에서부터 보려고 시도하였지만 이러한 방식 보다는 가까운 곳에 두고 필요할 때마다 필요한 페이지를 펼쳐보는 방식으로 접근해야 겠다고 생각을 바꿨습니다. 지금까지 소개한 책들 가운데 가장 빈틈없는 웹 표준 서적이라고 소개드리고 싶습니다. NmindPlus라는 블로그로 잘 알려져 있고 NHN Japan에 근무하시는 김대석님께서 번역해 주셨습니다.
- 소개 – 웹표준은 무엇인가
- 문서구조 – XHTML 웹페이지 구축 시작
- 시각표현 – CSS 웹페이지를 자유롭게 디자인 하기
- 상호작용 – 웹 사이트를 장식하는 다양한 콘텐츠
- 리디자인 – 웹표준으로 매끄러운 전환
- 크로스 브라우저 레이아웃 – 브라우저를 차별하지 않는 레이아웃 기법
- 접근성 – 다양한 사용자를 배려하는 설계
- 메타데이터 – 효율적인 정보 수집을 지원하는 웹 기술
다섯째, ‘DOM 스크립트’로 Javascript 다시 배우기
‘DOM 스크립트‘는 기존의 자바스크립트 서적과는 확실히 다릅니다. 자바스크립트 문법을 알려주기 전에 ‘지금 구현하려고 하는 기능이 정말 사용자에게 유용한 것인가? 오히려 웹의 가치를 훼손하고 있지는 않은가?’ 라는 질문을 던져주고 사용성과 접근성을 해치지 않으면서도 웹 표준에 근거한 겸손한 코드를 작성할 수 있도록 개념을 새롭게 환기시켜 주는 책입니다. 웹의 접근성을 떨어뜨리지 않으면서 사용자 경험을 확장할 수 있는 방법으로 고민하고 있다면 이 책이 좋은 입문서가 될 것 같습니다. 특히, 이 책에서 소개하고 있는 ‘단계적 기능축소, 스크립트 분리’와 같은 개념들은 매우 중요하게 생각되는군요. 한국의 대표적인 웹 표준 전도사로 잘 알려진 다음 커뮤니케이션의 윤석찬님께서 번역하셨습니다.
- 간단히 살펴보는 자바스크립트 역사
- 자바스크립트 문법 익히기
- 문서 객체 모델(DOM)이란?
- 자바스크립트로 만드는 온라인 사진첩
- 꼭 알아야 할 핵심 기본기
- 사진첩 기능 개선하기
- 실행 시에 마크업 코드 생성하기
- 의미가 살도록 컨텐츠 개선하기
- CSS와 DOM 연동하기
- 애니메이션 슬라이드쇼 만들기
- 총정리 : 더블트랙 밴드 웹사이트 제작
- DOM 스크립트의 미래
- 부록1 – 유용한 DOM 메소드와 프로퍼티
- 부록2 – 웹 표준 기반의 멋진 DOM 스크립트 예제
- 부록3 – 다이내믹한 웹사이트를 위한 고려 사항
출처 : http://web.dicnote.com/bbs/board.php?bo_table=web_tip&wr_id=718
