현재 시점에서 바라보면, HTML 에서 XHML로 넘어가는 과정에 있는 것으로 보여진다.

아직까지 HTML4.01을 기본으로 사용하고 있는 사이트 들이 많이 있으며,

내가 작업한 대부분의 사이트 들도 HTML4.01의 표준을 따르고자 노력 하였다.

그렇다면 XHTML의 장접이 무엇일까?

보통 3가지 정도의 장점을 이야기 한다.

  1. 빠른 데이터 처리와 안정적 브라우저 동작
  2. 데이터 재사용과 정보공유 촉진
  3. 네임스페이스 이용과 다양한 기기에 대응

빠른 데이터 처리와 안정적 브라우저 동작

XHTML은 HTML 보다 엄격한 문법을 유지 하기 때문에 오히려 초보자들이 만들기에는 편한 것이 많았다.

테그를 한두개쯤 닫지 않아도 브라우저가 알아서 맞추어 주기 때문에...

하지만 XHTML에서는 종료 태크의 생략을 인정하지 않는다.

이처럼 엄격한 서식으로 마크업하면 데이터 처리가 고속화 되고 브라우저에 종속적이지 않는 콘텐츠를 만들 수 있다.

데이터 재사용과 정보공유 촉진

XHTML로 작성된 페이지는 필요한 부분의 데이터만 읽어 들이는게 가능하여 XSLT에 의한 문서 변환이 가능하다.

네임스페이스 이용과 다양한 기기에 대응

MathML과 SVG 등의 XML 어플리케이션 삽이이 가능하기 때문에 XML 어플리케이션을 이용하는 때에도 XHTML 자체를 변경할 필요가 없다.

  1. 웹접근성 향상 : 다양한 브라우저에 대하여 접근 가능한 웹페이지를 만들수 있으며, 장애인들을 배려한 웹페이지를 만들 수 있다.
  2. 호환성 확보 : 브라우저의 버전과 종류에 관계 없이 콘텐츠가 적절하게 보여진다.
  3. 수정과 관리의 용이 : 홈페이지를 대규로로 리뉴얼 해야 하는 상황이거나, 여러 사람이 Site를 관리하는 경우 통일된 형태로의 작업이 가능
  4. 공간절약 : 소스 재활용 등 효율적인 사용으로 파일의 크기가 줄고, 서버의 공간을 절약할 수 있으며, 화면에 표시 되는 시간이 줄어 서버의 부담을 줄일 수 있다.
  5. 검색엔진(SEO) 최적화 대책 : 검색엔진의 클롤러(Crawler)는 (X)HTML 소스를 거의 액면 그대로 해석하기 때문에 적절하게 구조화되고 정리된 소스는 검색이 용이 하다.

웹표준을 '멋없고 딱딱한 웹 페이지밖에 만들지 못하는 것은 아닐까'라고 오해하는 사람도 있습니다.

스포츠에는 엄격한 규칙이 있지만 스포츠가 '창조적이지 않다'라는 의견을 들어본 적이 없습니다.

이처럼 바른 규칙에 근거하여 웹을 제작하는 것은 창조력에 해를 끼치지 않습니다.

- 웹표준 교과서 머릿말 중에서(마시코 타카히로)

사실, 웹표준을 지키면 딱딱하고 멋없는 홈페이지가 되는것 아니냐는 질문을 많이 받습니다.

아니라고 이야기 하면서, 이 질문에 대한 적절한 비유를 찾아 보지만 그동안 찾지 못했는데,

오늘 신입사원이 읽고 있던 이 책에서 답을 찾았네요...

앞으로는 가끔 이 비유를 써먹게 될 것 같습니다 ^^

HTML은 원래 단순하면서 이해하기 쉬운 마크업 언어로 사용할 목적으로 만들어 졌다.
  • W3C ( http://www.w3.org ) : 월드와이드웹 컨소시엄.
  • W3C 유효성 검사 서비스 ( http://validator.w3.org )
  • Web Standards Project ( http://www.webstandards.org ) : 1998년 조직. 웹 표준 프로젝트(WaSP)는 웹 표준을 대중에게 널리 알리고 웹 디자이너와 개발자들이 표준에 따라 개발할 수 있는 교육 자료를 제공 한다.
  • A List Apart ( http://www.alistapart.com ) : 웹표준과 관련된 디자인, 개발, 사업 분야의 훌륭햔 팀과 테크닉에 관련된 기사를 제공
  • CSS Zen Garden ( http://www.csszengarden.com ): WaSP 회원인 Dave Shea가 만듬. CSS 기반 디자인으로 어떤 일을 할 수 있는지 보여주는 사이트
  • Dive Into Accessibility ( http://www.diveintoaccessibility.org ) : 마크 필그림. 웹 접근성을 매우 쉽게 구현할 수 있으며 이 기능을 통해 어떤 사람들이 해택을 보는지 이해할 수 있는 자료를 소개.
  • css-disuss ( http://www.css-discuss.org ) : css와 실제 프로젝트에서 이를 사용하면서 생기는 일에 댛 이야기를 나룰 수 있는 메일링 리스트
  • Web-Graphics( http://web-graphics.com) : 디자인 자료, 링크, 설명들을 모아 놓은 사이트
  • Digital Web Magazine ( http://www.digital-web.com ) : Fick Finck가 운영. 디지털 웹 매거. 디자이너를 위한 컬럼, 뉴스, 튜토리얼을 제공하는 온라인 잡지
  • The Weekly Standards ( http://www.weeklystandards.com ) : 웹 표준으로 만든 멋진 사이트를 주단위로 소개.

기획자, 개발자, 디자이너가 함께 보는 XHTML + CSS 활용가이드

실용예제로 배우는 웹 표준

댄 씨더홈 (지은이) | 박수만 (옮긴이) | 드류 맥르란 (감수) | 에이콘출판 | 2005-08-10
정가 : 20,000원

반양장본 | 376쪽 | 235*190mm | ISBN(13) : 9788989975779

목차

1부 마크업, 처음부터 제대로 배우기
1장 리스트
블로그 꾸미기 | 퀴즈 시간|요약 | 심화 학습

2장 머리글
문서 제목을 마크업하는 가장 좋은 방법은? | 요약 | 심화 학습 | 마무리

3장 테이블을 쓰면 안된다?
테이블이 적합한 경우 | 테이블 기초 | 심화 학습 | 마무리

4장 인용문
방법 A. 의미를 살리지 못한 표현 | 방법 B. 불필요한 클래스 지정 | 방법 C. 최선의 선택, <blockquote> |
요약 | 심화 학습 | 마무리

5장 폼
폼을 마크업하는 방법에는 어떤 것이 있나요? | 요약 | 심화 학습 | 마무리

6장 구문표현 엘리먼트
문서모양 vs. 문서구조 | 요약 | 심화 학습 | 마무리


7장 앵커
웹 페이지 내의 특정 위치를 가리키는 가장 좋은 방법은? | 요약 | 심화 학습 | 닻을 들어올리며

8장 리스트의 고급 기능
번호가 매겨진 리스트를 마크업하는 가장 좋은 방법은? | 용어와 설명 묶음을 마크업하는 가장 좋은 방법은? |
요약 | 심화 학습 | 마무리

9장 마크업 용량 줄이기
웹 표준을 지켜 사이트를 만들면 마크업 용량을 줄일 수 있을까? | 요약 | 심화 학습 | 마무리

2부 웹 표준 스타일의 세계로
10장 CSS 적용하기 | CSS를 문서에 어떻게 적용하나요? | 요약 | 심화 학습 | 마무리

11장 인쇄를 위한 스타일
인쇄를 위한 스타일은 어떻게 지정하나요? | 마무리

12장 CSS로 레이아웃 잡기
CSS로 2단 레이아웃을 어떻게 만드나요? | 요약 | 심화 학습 | 마무리

13장 텍스트 스타일
어떻게 하면 텍스트를 근사하게 꾸밀 수 있나요? | 마무리

14장 이미지 바꿔치기
CSS로 텍스트 대신 이미지를 표시하려면 어떻게 해야 하나요? | 요약 | 심화 학습 | 마무리

15장 <BODY>를 위한 스타일
2단 또는 3단으로 자유롭게 변경하기 | 사용자가 머물고 있는 위치 알리기 | 마무리

16장 새로운 도약
이제 어디로 가야 할까요? | 맺는 말

3부 한국어판 특별 부록
부록 1 웹 표준 블로그 만들기 | 블로그 출판| 블로그 페이지를 위한 마크업과 스타일| 기타 참조 블로그 | 마무리

부록 2 국내외 웹 접근성 소개 및 현황
웹 접근성이란 | 우리나라 웹 접근성 관련 법률 및 동향 | 해외 선진국의 웹 접근성 관련 법률 및 동향
국내 스크린리더 프로그램 현황 | 한국정보문화진흥원 소개 | 정보통신 접근성 향상 표준화 포럼
웹 접근성 자동평가 툴 | 한국형 웹 콘텐츠 접근성 지침(KWCAG) 1.0 | W3C 웹 콘텐츠 접근성 지침(WCAG) 1.0
미 재활법 508조

고급 웹 표준 사이트 제작을 위한, CSS 마스터 전략

원서명 : CSS Mastery: Advanced Web Standards Solutions


Andy Budd, Simon Collison, Cameron Moll 지음

박수만 옮김

웹 프로페셔널 시리즈|ISBN : 8960770051

28,000원|2006년 12월 20일 펴냄

페이퍼백|320쪽|190*235mm

책소개

최신 CSS 기법과 다양한 활용사례를 편리하게 참조할 수 있도록 한 권으로 정리했다. 기존의 책들이 기본적인 기법과 활용을 다루고 있었다면, 이 책은 기본적인 내용은 이미 숙지하고 있고, CSS를 사용해야 하는 이유를 이미 알고 있는 독자를 대상으로 하여 고급 기법에 중점을 두고 설명을 한다.

먼저 CSS 기본 개념을 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룬다. 그리고 CSS 기반 디자인에서 사용되는 특징을 다룬다. 쉽게 따라 할 수 있는 튜토리얼 형식을 통해 업무에 바로 적용할 수 있는 실전 기법을 익히게 될 것이다.

목차

1장 기초 다지기
구조가 탄탄한 코드 만들기
스타일을 꾸밀 대상 선택하기
스타일 시트를 계획/구성/관리하는 방법
요약

2장 화면 표시를 위한 모델 완벽 정리
박스 모델 완벽 정리
포지셔닝 완벽 정리
요약

3장 배경 이미지와 이미지 대치 기법
배경 이미지 기초 다지기
둥근 모서리 상자 모양 만들기
그림자 효과
이미지 대치 기법
요약

4장 링크 모양 꾸미기
링크 스타일 기초
밑줄치며 놀기
링크 유형별로 스타일 지정하기
버튼과 롤오버 효과 만들기
방문한 링크 스타일 꾸미기
CSS로만 만드는 툴팁
요약

5장 리스트 스타일과 내비게이션 바 만들기
리스트 스타일 기초
세로형 내비게이션 바 만들기
내비게이션 바에서 현재 페이지 표시하기
가로형 내비게이션 바 만들기
슬라이딩 도어 효과의 탭 내비게이션 바 만들기
CSS 이미지 맵 만들기
리모트 롤오버 만들기
정의 리스트
요약

6장 접근성 높은 폼과 테이블 만들기
데이터 테이블 스타일 꾸미기
간단한 폼 레이아웃 만들기
복잡한 폼 레이아웃 만들기
요약

7장 레이아웃
디자인을 가로 중간에 배치하기
플로트 기반의 레이아웃
고정 레이아웃, 유동 레이아웃
가짜 단 모양 만들기
요약

8장 핵과 필터
핵과 필터
개별적인 스타일시트에 필터 적용하기
개별적인 규칙과 선언에 필터 적용하기
요약

9장 브라우저 버그 해결하기
버그 잡기
버그 잡기 기초
레이아웃
흔히 발생하는 버그 해결방법
요약

부록Ⅰ 동호회 사이트 만들기
적용 사례 소개
하위 선택자를 이용한 컨텐트 영역 조정
컬럼 띄우기
body 클래스를 이용해서 현재 페이지 표시하기
드롭인 박스
둥근 모서리 상자 만들기
투명 모서리와 테두리선
원하는 동작을 위한 클래스 조합
이미지 클래스
링크 모양 꾸미기
그림자 효과 만들기
요약

부록 II 투스카니 럭셔리 리조트
적용 사례 소개
유동적인 레이아웃
절대위치를 이용한 엘리먼트 배치
배경 이미지 관련 기법
이미지 대치 기법
유동적인 이미지
리스트 항목 하나에 여러 엘리먼트 넣기
요약


+ Recent posts