728x90
새로운 웹표준 테스트로 발표된 Acid3 가 웹브라우저 시장에 좌절을 안겨주고 있다는 소식이 들려오고 있습니다. 특히 IE8 이 Acid2를 통과했다는 소식은 이제 IE도 악명높은 IE6 의 비정상적인 렌더링을 벗어나 웹표준을 잘 지킬 수 있지 않느냐 하는 희망을 주기도 했는데요…

그런데 과연 이 Acid 테스트라는 것은 무엇일까요?

Acid 테스트란 웹브라우저들이 웹 표준을 어느정도로 지원하면서 렌더링을 하는지 측정할 수 있도록 작성된 예제 페이지를 말합니다. 단 한장의 페이지에서 수많은 웹표준 스펙을 포함하고 있으며, 그래픽이 얼마나 잘 표현되는지의 결과를 통해 해당 브라우저의 웹표준 준수율을 한눈에 알 수 있도록 되어있습니다.
현재 Web Standards Project (WaSP) 에서 Acid Test 사이트를 운영하고 있으며, 1998년에 처음으로 Acid1 이 개발된 이후로, 2005년에 Acid2 를 거쳐 2007년에는 Acid3 가 개발되었습니다.


1. Acid1
http://www.w3.org/Style/CSS/Test/CSS1/current/test5526c.htm

사용자 삽입 이미지

웹브라우저 테스트용 페이지로 가장 먼저 개발된 Acid1 테스트는 CSS1 스펙을 중점적으로 테스트할 수 있습니다. 1998년에 개발되었던 페이지가 꾸준히 개선되어 왔으며 가장 최근 버전은 5.5.26.c 버전입니다. 현재 주로 쓰이는 웹브라우저에서는 무난히 통과하고 있구요. (IE6, IE7, FF2, OP9, SF2 등) 다만 IE5.5 버전 이하에서는 비정상적으로 렌더링되는 것을 확인할 수 있습니다.

2. Acid2
http://acid2.acidtests.org/

사용자 삽입 이미지

IE8 이 Acid2 test 를 통과했다고 알려지면서 대중에게 많이 알려지기 시작했지요. Acid2 는 HTML과 CSS2.1 스펙을 중점적으로 테스트를 합니다.
표 준 CSS2.1 스펙을 완벽하게 지원한다면 위 이미지처럼 웃는 얼굴과 Hello World! 라는 문구가 나타나게 되어있으며, 코 부분을 마우스 커서를 가져가면 파란색으로 바뀌게 됩니다. 하지만, 현존하는 웹브라우저 중에는 이를 완벽하게 지원하는 브라우저가 많지 않은 실정입니다. IE6 은 물론이고 IE7 에서는 붉은색으로 가득찬 화면을 볼 수 있구요, 심지어 웹표준을 잘 지킨다고 인식되는 FireFox 2 에서도 렌더링이 제대로 되지 않는 모습을 보여주죠.
Acid2 테스트를 처음 통과한 브라우저는 맥의 Safari 입니다. 이후에는 Konquerer, Opera, FireFox3 beta 버전이 통과했구요, 최근에 개발중인 IE8 의 표준모드에서 이 테스트를 통과했다고 알려지고 있습니다.

Acid에서 체크하는 항목은 다음과 같습니다.

  • Alpha transparency on PNG images – the eyes are transparent PNGs
  • The object element
  • Absolute, relative and fixed positioning using CSS
  • The CSS box model
  • CSS tables
  • CSS margins
  • CSS generated content
  • CSS parsing – Acid2 includes a number of illegal CSS statements to test error handling
  • Paint order
  • CSS line heights
  • Hovering effects 

Acid2 테스트의 소스가 어떤 구조로 되어있는지 궁금하다면 다음 가이드 페이지를 참조하세요!
http://www.webstandards.org/action/acid2/guide/

3. Acid3
http://acid3.acidtests.org/

사용자 삽입 이미지

가장 최근에 개발된 Acid3 test 는 HTML5 그룹의 리더인 Ian Hickson 에 의해 개발되었습니다. 자바스크립트로 작성되어 있으며, 이전 Acid1 과 Acid2 테스트를 종합적으로 체크하는 것은 물론이며 Web 2.0 을 위한 동적인 웹 애플리케이션을 만드는데 필요한 스펙을 중점적으로 체크합니다. 이전 테스트가 CSS스펙을 중점적으로 체크했기에 엄밀하게 말해서 웹표준을 테스트한다고 할 수는 없었는데요, Acid3 test 는 이전 테스트에 비해 한층 의미에 맞는 웹표준 스펙을 테스트한다고 볼 수 있겠습니다.
Acid3 test를 완벽하게 통과한다면 위 화면을 보여주게 되어 있는데요, 100개의 테스트를 수행하면서 통과한 테스트 수를 구체적으로 보여주기 때문에 테스트 결과를 객관적으로 볼 수 있도록 바뀐 것이 장점이라고 볼 수 있겠습니다.
현재로선 이 테스트를 제대로 통과하는 웹브라우저는 없다고 알려져 있습니다. 그나마 가장 높은 점수를 낸 웹브라우저는 FireFox3 beta3 버전이 59/100, Opera 9.5 beta 버전이 64/100, Safari 3.1 버전이 64/100 정도의 점수를 내고 있는 상황이지요.

Acid3 테스트에서 체크하는 항목은 다음과 같습니다.

  • DOM2 Core
  • DOM2 Events
  • DOM2 HTML
  • DOM2 Range
  • DOM2 Style (getComputedStyle, …)
  • DOM2 Traversal (NodeIterator, TreeWalker)
  • DOM2 Views (defaultView)
  • ECMAScript
  • HTML4 (<object>, <iframe>, …)
  • HTTP (Content-Type, 404, …)
  • Media Queries
  • Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
  • XHTML 1.0
  • CSS2 (@font-face)
  • CSS2.1 (’inline-block’, ‘pre-wrap’, parsing…)
  • CSS3 Color (rgba(), hsla(), …)
  • CSS3 UI (’cursor’)
  • data: URIs

아직까지는 Acid3 테스트는 개발중으로 현재 Final Review 단계에 있다고 합니다. 과연 어떤 웹브라우저가 1등으로 100/100을 받게 될지 궁금하네요. ^^


과 거의 웹브라우저 시장은 Internet Explorer 가 독점적인 시장 점유율을 바탕으로 웹 표준 스펙을 소홀히 해왔기 때문에, 개발자 입장에서도 어쩔 수 없이 IE 기준으로 왜곡된 웹페이지를 개발할 수 밖에 없었으며 사용자의 웹브라우저 선택의 폭도 좁아진다는 문제점이 있었습니다.
하지만 Web 2.0 시대에 들어서며 웹표준의 중요성이 강조되면서 IE를 제작해오던 Microsoft 도 더이상 웹표준을 외면할 수가 없게 된 현재의 상황은 IE도 이전보다 웹표준 스펙을 준수할 수 있도록 개발될 것이라는 기대를 할 수 있겠으며, 이는 개발자와 사용자 모두에게 좋은 영향을 줄 것이라고 생각됩니다.

웹표준이 만능은 아니겠지만, IE의 수많은 비표준 스펙에 휘둘려왔던 웹 관련 개발자라면 웹표준이 얼마나 반가운 존재인지 아실 분은 아시리라 생각합니다. 웹개발에 있어서도 표준적인 개발이 가능한 세상이 빨리 왔으면 좋겠습니다. ^^

출처 : http://blog.naver.com/preserde/130028814635



728x90

'Information' 카테고리의 다른 글

최근 웹 서비스 트렌드와 웹 2.0B/M  (0) 2008.11.06
Google의 인수 합병 회사 목록  (0) 2008.09.16
UI 사용성 지침서  (0) 2008.09.04
728x90
웹표준을 왜 해야 하는지에 대해 정말 잘 정리한 글이다.

페이지오프님의 '웹표준 합시다. 제발 합시다.'


728x90

'Information' 카테고리의 다른 글

NHN의 웹 접근성 관계요소 표  (2) 2008.04.07
세계 각국의 지하철 노선도  (0) 2008.03.31
Adobe Photoshop Speed Painting  (0) 2008.03.31
728x90
MS가 IE8 부터는 웹표준 기술을 준수하겠다고 밝혔다.

관련 포스트는 '여기' (영어다..)

이를 위해 IE8팀은 웹 표준화 그룹(WaSP)의 CSS 표준 테스트인 Acid2 Test를 이미 통과했다.

자료출처 : Channy’s Blog



그동안 IE의 '사용자 편리성' 이라는 미명하에 얼마나 많은 기형 코드들이 쏟아졌던가!

특히나 국내의 친 IE적 웹소스들은 심각할 정도의 수준이다.

FF(Firefox) 나 Safari 에서 오류나는 화면들을 보여주면 "IE 에선 되잖아 왜 그걸써?" 라는 말도 안되는 대답을 당연한 듯이 받아들여야 했던 상황에서 이젠 탈피할 때가 온 것이라 할 수 있다.

점유율을 믿고 훨씬 나은 기능들을 가진 Firefox, Safari, Opera 같은 다른 웹브라우저들의 웹표준 준수화를 무시한 IE가 지금이라도 웹표준을 지키겠다고 선언한 것은 반가운 일이라 할 수 있다. (세계시장 웹브라우저 점유율을 보려면 '여기')

"회사가 웹표준 개념을 안드로메다로 보낸게 100년 전인데, 그럼 난 이제 어떻해!!" 라고 말하는 당신..

너무 걱정하지 말자.
IE8이 웹표준을 준수하더라도 META 태그를 통해 IE7 렌더링 엔진을 타겟팅 할 수 있도록 해 놓는다고 한다.
<meta http-equiv="X-UA-Compatible" content="IE=7" />


하지만 언젠가는 해야할 웹 표준 작업이라면, 회사 사이트가 엉망이 되는 것을 느긋하게 바라 보는 것도 나름의 즐거움이 있지 않을까? (야근은 잠시 접어두자...)
728x90

'Information' 카테고리의 다른 글

Fantastic HDR Pictures  (0) 2008.03.13
웹사이트 기획시 사용하는...  (0) 2008.02.27
웹디자인 2.0 고급 CSS  (6) 2008.02.26
728x90
왜 웹표준을 준수해야 하는지에 대해 잘 정리한 글이다.

출처 : http://monoeyes.com/523

여러분 가게에 물건 구경하겠다는 손님을 그냥 내쫓겠습니까?
손님이 시각장애인이라는 이유로 물건을 팔지 않겠습니까?

웹표준을 지키지 않으면 알게 모르게 놓치는 것들이 많습니다!

웹표준? 웹접근성? 그게 뭐길래?

웹표준을 지킨다 즉, 웹접근성을 높인다는 말은 무엇이고.
웹표준을 지키면 뭐가 좋길래 사람들이 웹표준, 웹표준 할까요?
똑같은 데이터를 가지고 있는 웹사이트가 있습니다.

사용자 삽입 이미지

웹표준을 지키면 검색엔진 노출이 잘 됩니다. 반면 그렇지 않으면 검색엔진 노출도 힘들어 집니다. 또한, 웹표준을 지키지 않으면 어렵사리 찾아온 고객을 내쫓는 경우도 발생합니다.


웹표준을 지키면 브라우저나, 장치, 기기에 관련없이 조금더 많은 사람에게 정보전달을 할 수 있습니다. 또한 검색엔진 유입량도 늘어납니다. 웹표준을 지키지 않으면, 우리 웹사이트에서 가지고 있는 정보가 모두에게 전달될 수 없습니다. 제한된 일부 사람들에게만 전달될 뿐이지요. 이것은 매우 비효율적 입니다. 똑같은 데이터를 가지고 있는데 웹표준을 지원하고 안하고는 웹사이트의 정보를 더욱 많은 사람에게 전달할 수 있고 못하고의 차이를 가져옵니다. 그 이외에 웹표준을 지키면 다양한 장점이 있습니다. 그 장점들을 소개해 드리겠습니다.

크로스브라우징
혹시 익스플로러에 최적화하여 사이트를 제작하셨습니까? 파이어폭스나, 사파리, 오페라 등 다른 브라우저에서 웹사이트 레이아웃이 문제없이 출력되며, 문제없이 작동되는지 확인해보셨나요? 웹표준을 지킨 웹사이트는 일단 크로스브라우징을 가능하게 해줍니다. 내가 만든 웹사이트를 방문하는 방문객이 익스플로러를 사용하든, 파이어폭스를 사용하던, 사파리나 오페라 등의 특이한 브라우저를 사용하든 늘 한결같은 모습을 보여줍니다. 아래의 그림을 보시면 이해가 쉽게 되시리라 생각됩니다.

사용자 삽입 이미지
물론 익스플로러의 점유율에 비하면, 아직은 보잘것 없는 파이어폭스나 사파리등의 점유율 입니다. 그렇지만, 단 한 명이라도 방문객을 더 유치하기 위해서라면 웹표준은 반드시 지켜야겠지요.

데이터와 디자인의 분리?!
이 말은 처음 웹표준을 접하는 분들께는 언뜻 이해하기 어려운 개념일 수 있습니다. 하나의 웹페이지를 흔히 우리가 다루는 A4 용지의 문서처럼 하나의 문서라고 가정합시다. 그렇다면 해당 웹페이지는 디자인을 배제하고 기본적으로 문서의 형태를 띄고 있어야 합니다. 그 기본적인 문서의 형태를 띄면서 데이터를 가지고 있는 것이 HTML 입니다. 그리고 이 HTML 페이지를 좀 더 다양하고 보기좋게 디자인 해주는 역할을 하는 것이 바로 CSS입니다.

사용자 삽입 이미지
사용자 삽입 이미지

CSS Zen garden의 웹사이트 입니다. HTML 문서를 보세요. 큰 제목부터 작은 제목, 그리고 단락별로 들어가는 내용까지... HTML 문서의 구조화가 잘 되어있지요? HTML 파일에는 손 하나도 안대고, CSS 만 교체하여 전혀 색다른 느낌의 웹사이트 디자인을 만들 수 있습니다. 잊지마세요. HTML은 문서!(데이터) CSS는 디자인 속성 저장!


모바일 기기를 위한 웹표준
CSS가 지원되지 않는 모바일 기기에서 여러분의 웹사이트는 접속을 원하는 이용자에게 정보전달을 제대로 하고 있나요? HTML데이터와 CSS디자인을 완벽하게 분리하여 웹표준에 따라 작성된 웹페이지는 CSS가 지원되지 않는 모바일 기기에서도 원하는 정보를 완벽하게 전달할 수 있습니다. (단, 와이브로나 휴대폰 전용 서비스로 개발된 웹페이지 제외)


사용자 삽입 이미지

CSS가 지원되지 않는 모바일기기에서 접속해도 충분히 원하는 정보를 얻을 수 있도록 데이터와 디자인이 잘 분리되어 있는 '다음'메인페이지의 경우(우측 핸드폰 사진은 합성한 것입니다)


사용자 삽입 이미지

데 이터와 디자인의 분리가 되지 않은 사이트는 모바일 기기가 아예 웹페이지를 해석하지 못하기도 합니다. 또한 CSS없이 사이트를 읽어들이면 아래 사진처럼 사이트가 폭격을 맞은냥 깨져서 출력됩니다. 사이트 이용이 전혀 불가능하게 됩니다. 조사결과 웹표준을 지키는 컴퓨터학원 홈페이지는 한군데도 없었고, 홈페이지 제작업체들도 웹표준을 거의 지키지 않고 있었습니다. 명색이 홈페이지로 돈벌어 먹고 사는 사람들이 말입니다. (위 사진은 합성된 이미지 입니다)



시각장애인을 위한 스크린리더기의 지원
웹은 평등합니다. 웹은 사람을 차별하지 않습니다. 하지만 언제부턴가 우리나라는 많은 디자이너/개발자분들께서 의미를 담은 웹페이지는 신경을 쓰고 있지 않습니다. 사이트는 테이블로 통자이미지를 덕지덕지 붙여서 보여주기에만 급급한 경우가 많고, 필요없는 플래시 U.I.를 남발하여 웹페이지의 의미를 알아볼 수 없게 만들고 있습니다. 앞을 못보는 시각장애인을 위한 사이트를 고려해보셨습니까? 웹표준을 지키면 시각장애를 가진 분들도 웹사이트를 편안하게 이용할 수 있게 해줄 수 있습니다. 그래서 웹접근성도 한층 높아집니다.

사용자 삽입 이미지
계속 강조하는 것이지만, HTML 문서를 코딩할 때는 꼭 의미에 맞는 코딩을 해야합니다.
예 를 들어서, 강조하고 싶은 문장이 있는데, 해당 부분을 <b> 태그로 감싸면 글씨만 굵어질 뿐, 브라우저나 스크린리더기는 해당 문장을 중요문장으로 취급하지 않습니다. 웹표준에 맞는 태그는 <b>태그가 아니라 <strong>입니다. 이처럼 웹표준에 부합하는 태그들이 있습니다. 숙지하시어 사용하시기를 권장합니다.

사이트 디자인 관리 시간 단축
데 이터와 디자인의 분리. 즉, HTML 페이지는 말그대로 문서상태이고, CSS를 통해서 웹페이지를 디자인 합니다. 그러면, CSS를 여러개 만들었을 경우, CSS 파일의 경로를 변경하는 것 만으로 새로운 디자인으로 사이트를 리뉴얼 할 수 있습니다. 또한 기존에는 사이트에 이미지나 스타일 하나만 변경하더라도 페이지마다 다 바꿔주어야 하는 번거로움이 있었습니다. 하지만 HTML 과 CSS의 분리는 이런 작업시간까지 단축시켜 주었습니다. CSS에서 코드 한 줄만 수정해주면, 수백~수천페이지의 디자인이 한꺼번에 변경이 가능하게 되었습니다. 이것은 추가적으로 웹사이트 관리 비용절감의 효과도 가져옵니다.

사용자 삽입 이미지

디자인을 수정해야하는 페이지가 12500페이지라면 여러분의 선택은?


검색결과 상단에 노출되고 싶으세요? 그럼 웹표준을 지키세요!
실 제로 똑같이 그래픽 처리가 된 두개의 웹사이트가 있다고 가정합시다. 하나의 사이트는 데이터와 디자인 분리를 하지 않고 많은 사이트이고, 다른 하나는 데이터와 디자인을 완벽하게 분리하여, 웹페이지의 내용과 의미를 정확하게 담고 있습니다. 겉보기는 똑같지만 속은 완전히 다른 사이트이지요. 한 쪽은 페이지의 의미를 정확하게 담고 있고, 한쪽은 페이지의 의미가 해석불분명하니까요.

이것은 검색결과에 상당한 영향을 미칩니다. SEO에서 웹표준은 많은 부분을 차지합니다.

검 색엔진의 검색결과 상단에 노출되기 위해서 메타태그나 title 태그의 활용, 본문에서 주력 단어의 빈도수 노출 등 많은 부분이 널리 알려져서 활용되고 있습니다. 그렇지만 아직까지, 웹표준을 지키면 검색엔진의 검색결과 상단에 컨텐츠가 노출된다는 사실은 그다지 많이 알려져 있지 않습니다.

대표적으로 H1, H2, H3 ... 제목 태그인 h 태그의 SEO는 막강합니다.

사용자 삽입 이미지

저 의 블로그 제목은 '쏭군은 열정 드리머' 입니다만, CSS를 이용하여 MONOEYES라는 블로그 제목으로 이미지 치환 해두어 텍스트는 감추어 두었습니다. 보이지만 않을뿐 문서의 대제목은 '쏭군은 열정 드리머'라는 속성을 항상 가지고 있는 것입니다. 구글에서 검색한 결과 최상단에 H1 태그가 검색되어 출력됩니다.



사용자 삽입 이미지

포 스팅 제목의 경우 검색엔진에서 검색되는 빈도가 많아야 하는 중요한 부분인 만큼, 문서 대제목인 H1 다음으로 H2를 주었습니다. H1 보다 중요도는 떨어지지만, 단락의 대제목으로서 검색엔진 검색결과에서 만족스러운 노출을 보여줍니다. 위의 사진은 CSS를 제거했을 때, 포스트 제목이고, '디올 어딕트'라는 디올의 제품을 구글에서 검색했을 때, 가장 상단에 쏭군의 블로그가 노출되는 것을 보실 수 있습니다.


DIV와 TABLE 논란은 문제의 본질이 아닙니다
많은 분들이 DIV=웹표준, TABLE=비표준이라는 인식을 가지고 계십니다. 문제는 DIV냐 TABLE이냐가 아닙니다. DIV나 TABLE은 모두 웹페이지를 작성하기 위한 '도구'일 뿐이지, 그 자체가 '웹표준이냐 아니냐'를 가늠하는 목적이 될 수 없습니다.

TABLE은 데이터를 출력하기 위해 존재하지 레이아웃 짜라고 존재하는 것이 아닙니다
테 이블은 말그대로 데이터들을 표형식으로 출력해야 할 필요성이 있을때만 사용합니다. 테이블로 레이아웃을 만들게 되면, 웹페이지의 로드 속도도 느리게 되고, 웹페이지를 수정할 곳이 생기면 자칫 페이지 전체를 뜯어내야하는 대공사가 발생될 수 있습니다.

TABLE에 없는 DIV의 장점
모 듈화? 디자인을 하시는 분들께는 말이 어렵지요. 하지만 간단한 뜻입니다. 필요한 부분을 마음껏 떼어서 쓸 수 있게 웹사이트를 만들 수 있다고 생각하시면 됩니다. 예를 들어, 테이블로 웹사이트 레이아웃을 구성하면 로그인 박스 하나를 바꾸기 위해서 웹페이지의 다른 부분도 영향을 주거나, 웹페이지 전체를 뜯어내야 하는 경우가 대부분입니다. 그렇지만 DIV로 작업을 하면 원하는 박스만 떼어서 디자인을 수정할 수 있고, 또 그 박스는 얼마든지 다른 페이지에 자유롭게 붙였다 뗐다 하면서 재활용이 가능합니다.

게다가 TABLE 레이아웃을 구성할때보다, 작업의 속도나 사이트 관리적인 측면에서 훨씬 이득을 볼 수 있고, 페이지 로드도 테이블 레이아웃 보다 빠릅니다.

하지만 TABLE이 꼭 필요한 곳은 테이블을 쓰세요
테이블을 이용해서 웹사이트의 레이아웃을 짜면 나쁜 것 입니다. 하지만 반드시 테이블이 들어가야 할 곳이 있습니다. 반드시 데이터형식을 표방식으로 보여주어야 하는 곳은 테이블을 쓰는편이 낫습니다.

사용자 삽입 이미지

테이블을 유용하게 활용하고 있는 올블로그와 네이버


만 약 위의 프리미어리그 점수판을 표를 사용하지 않고 DIV나 LI 를 이용해서 표현했다고 가정합시다. 그 페이지의 CSS가 지원되지 않을때 오히려 팀별로 득점이나 승점을 보기가 힘들어집니다. 이런 표형식의 데이터는 TABLE을 사용하는 것이 더욱 웹표준에 부합합니다. 또한 CSS를 깼을때도 점수표를 깔끔하게 출력할 수 있구요. 반드시 이런 데이터처리에만 TABLE을 쓰시고 어지간하면 사용하지 않는 것을 권장드립니다. 더구나 TABLE로 레이아웃을 짜는 비통한 일은 다시는 있어서는 안 되겠지요. 데이터를 표시하라고 하사한 TABLE 이거늘.. 그걸로 홈페이지 레이아웃을 만들면 원래 목적에도 어긋날 뿐 아니라 원통하기 까지 합니다.

스크립트 사용시
될 수 있으면 스크립트 사용을 자제하는 것이 좋습니다. 부득이 스크립트를 사용해야 하는 경우라면, 모든 브라우저에서 작동되는 스크립트를 사용하시고, 스크립트가 지원되지 않는 환경을 위해서 스크립트 없이도 웹사이트를 이용할 수 있도록 차선책을 미리 만들어 두시는 것을 권장합니다.

서버 부하를 덜어줌
디자인 정보를 CSS에 저장함으로서, 관련 소스코드를 획기적으로 줄일 수 있습니다.
또한, CSS는 캐싱되어 웹사이트에 최초 접속할 때 한번만 로드되므로, 서버 부하를 획기적으로 줄여줄 수 있고, 규모가 큰 사이트라면 비용 절감 효과도 가져올 수 있습니다.

긴 글 읽느라 고생 많으셨습니다. 글쓴이를 표기하신다면 본 문서를 상업적으로 이용하셔도 되고, 어디에나 퍼가셔도 됩니다. 웹표준을 처음 접하시는 분들께 도움이 되고자 작성한 문서인데. 조금이나마 도움이 되셨으면 좋겠습니다.
728x90

'Information' 카테고리의 다른 글

JCO Conference  (0) 2008.02.12
스티브잡스 식(式) 프리젠테이션 십계명  (0) 2008.02.07
Adobe Photoshop Tutorials - Best Of  (0) 2008.02.04
728x90
원문 : http://www.mozilla.or.kr/docs/web-developer/standard/

실전 웹 표준 가이드 (2005)

본 가이드는 XHTML, CSS, DOM, ECMAScript 등 모든 웹 표준에 대한 이슈를 새롭게 정리하고, 웹 개발 프로젝트에서 표준을 준수하는 방법을 제공하는 가이드 입니다.

목 차

  • 웹 표준이란 무엇인가?
  • 실전 XHTML 가이드
    • XTHML 소개
    • XHTML 일반 문법 준수
    • 구조적 XHTML 사용 방법
  • 실전 CSS 레이아웃
    • CSS 개념 및 소개
    • CSS 레이아웃(LAYOUT) 기초
    • 실전 예제를 통한 CSS 레이아웃
    • 고급 CSS 레이 아웃
  • 실전 DOM/Script 가이드
    • W3C DOM vs. MS DOM
    • 표준 JAVASCRIPT 사용 방법
    • 올바른 플러그인(PLUGIN) 사용
  • 실전 표준 웹 프로그래밍
    • 표준 MIME 타입 설정
    • 표준 문자 인코딩 지정
  • 실전 웹 표준 개발 프로세스
    • 현재 프로세스 소개(Waterfall 방식)
    • 개선된 모델(퍼블리셔 중심)
    • 새로운 개발 프로세스
  • 맺음말
  • 부록 : 웹 표준 사양-브라우저 호환차트
- URL: http://www.mozilla.or.kr/docs/web-developer/web-standard-guide-2005.pdf
- 인쇄 버전 : PDF 파일 (223pp), PDF 파일(부록 포함, 305pp)

웹 표준 기반 홈페이지 구축 가이드 (2004)

본 가이드는 브라우저 호환성 유지 방법은 물론 XHTML/CSS 레이아웃을 통한 홈페이지 개발 방법을 소개한 가이드 입니다.

목 차

  • 1부 브라우저 호환성 유지 방안
    • 현대 웹사이트 제작의 방향
    • W3C 표준안
    • 정확한 문서 형식 사용
    • 올바른 HTML 및 CSS 사용 방법
    • 올바른 객체 모델 및 자바스크립트 사용 방법
    • 웹페이지 디버깅 도구 사용
  • 2부 웹표준 기반 페이지 제작 방법
    • 구조와 표현의 분리
    • XHTML를 사용해야 하는 이유
    • XHTML의 주요 특징
    • CSS 사용 방법
    • CSS 레이아웃 vs.Table 레이아웃
- 인쇄 버전 : PDF 파일

Cross Browsing 가이드(2003)

본 가이드는 각 웹 브라우저의 비 표준 기능과 이를 극복할 수 있는 방법을 위주로 작성된 것입니다.

목 차

- 인쇄 버전 : PDF 파일
728x90
728x90
orm 코딩시 발생되는 margin 을 없애기 위해 대부분 아래의 `틀린 코딩법`으로 코딩을 한다.
이는 표준에 위반되는 행위이며 스크립트로 form 을 제어 할 수 없는 위험한 상태까지 가게 된다.
따라서 표준 브라우져에서 가능하려면 아래의 `올바른 코딩법`으로 코딩하기 바란다.

form 에 대한 margin 값을 없애기 위해
<style type='text/css'>
form {
margin:0;
}
</style>
을 꼭 추가 하기 바란다.


틀린 코딩법
<table>
<form><tr><td><inpu type='text'></td></tr></form>
</table>


올바른 코딩법
<form>
<table><tr><td><input type='text'></td></tr></table>
</form>


자바스크립에서 표준에 맞도록 image, form, input element에  접근하기 위해서는 아래와 같이 사용하기 바란다.

document.images['bar'] // name 이 있는 경우
document.images[0]
document.images[1]
document.forms['execform'] //name 이 있는 경우
document.forms[0].elements['addr']
document.forms[0].elements[0]



728x90
728x90

스킨작업을 하면서 웹 표준을 지키는 코딩에 도전하게 되었습니다. 그리고 스킨만으로는 웹표준을 준수할수 없는 것을 알게 되었고, 태터툴즈 클래식의 웹 표준에 반하는 코드도 모두 뜯어고쳐 W3C의 표준 유효성 검사를 통과하였습니다. 처음에는 300개가 넘는 오류로 자포자기하고 있었지만, 하나하나 수정하기 시작하여 태터툴즈 클래식을 사용하는 블로그도 웹 표준 유효성 검사를 통과하게 된 것입니다. 이곳 외에도 Tyburn님과 Vincent님도 이미 클래식을 XHTML1.0까지 통과시킨 전적이 있습니다.

W3C HTML 4.01 웹 표준 유효성 검사 바로가기

유효성을 통과하면 좌측의 배너를 사용하여 언제든지 해당 웹 페이지의 유효성 검사를 해볼수 있습니다. 태터툴즈 클래식을 웹 표준 준수 블로그툴로 만들기위한 가장 까다로웠던 작업은 name으로 정해진 폼이름입니다. 삽질 끝에 name를 id로 변경하고 몇 줄의 자바스크립트 함수의 변경으로 해결할 수 있었습니다. 포스트 작성도 웹 표준에 따라 작성해야 합니다. 때문에 이전에 작성한 글에서는 오류가 나타나기도 합니다. 그래서 글 입력페이지도 대대적으로 손보았습니다. 기존에 입력했던 글과 댓글들이 HTML 4.01 표준에 만족하도록 마이그레이션 작업을 진행 중입니다. 조금더 공부해서 XHTML 1.01 표준에도 도전해 볼 생각입니다. 앗! 그전에 CSS 1.0부터 orz...

출처 : http://firejune.com/804&ct1=8&ct2=42
728x90

+ Recent posts