Mozilla 한국 커뮤니티

재미삼아 친구들이나 아들놈 홈페이지를 만들어 주는 취미가 있습니다.
며칠전 맥킨토시에서 내 홈페이지가 다 헤플어져 보이는것 보고 리눅스나 모질라와 같은 영역에 관심을 가지게 되었습니다. 그리고 오늘 모질라 / 불여우를 깔았습니다.

지금까지 내가 만든 모든 홈페이지에 한 두가지씩 결함이 보이는 군요.
대부분 인터넷에서 주워다 만든건데....
지금까지 익스플로어가 아닌 모든 브라우져에서 내 홈페이지가 어떻게 보였을지 갑자기 머리에서 열이 확 나는군요.

그 표준은 어떻게 알 수 있습니까 ?
그 수많은 스크립트 들 중 표준에 부합되는 놈과 그렇지 않는놈은 어떻게 알아냅니까 ?
이를테면 몇몇 홈페이지는 모질라 / 불여우에서는 그냥 저냥 볼만하게 나오는데,
mac OS 에 탑재된 브라우져에서는 더 헤플어져 버리거든요... 폰트도 다 깨지고...
그렇담 맥킨토시는 표준이 아닙니까 ?
무자게 헤깔리고 있습니다.
도와 주십시요.

글구 ...
웹폰트는 안돼나요 ?

HTML, CSS validation service:
http://validator.w3.org
(여기서 우선 HTML과 CSS의 문법 검사를 하십시오)

웹 표준화 운동 게시판 (이곳에 있습니다)에 가서 맨 위에 올려 놓은 문서들을 읽어 보십시오. (차니님, 그곳의 중요한 문서 몇 개를 'sticky'로 만들어서 맨 위로 올려 주시렵니까?)

이 글타래도 그곳으로 옮기는 것이 좋겠네요.

----------------------

HTML, XHTML, CSS, DOM 등의 표준 : 표준 문서를 그냥 읽기는 쉽지 않습니다.

http://www.w3.org

(http://www.w3.org/TR/HTML4 : HTML 4 표준
http://www.w3.org/Style : CSS, XSL 등 표준
http://www.w3.org/TR/xhtml1 : XHTML 1 표준 )
http;//www.w3.org/DOM : DOM 관련 정보 및 표준 문서




ECMAscript (Javascript)

http://www.ecma.ch (ECMA 262를 찾아 보세요) 하지만, 언어 표준 문서를 읽는 것은 아주 많은 인내를 필요로 합니다.



http://www.w3.org/International
(언어, 문자 인코딩 지정 등에 대한 정보)

http://www.w3.org/WAI (웹 접근성에 대한 정보)
: http://gregshin.pe.kr (WAI 문서 몇 개에 대한 한국어 번역과 다른 접근성 정보)

웹 이외 분야에서의 인터넷 표준 :
<a href="http://www.ietf.org">IETF</a>에서 나온 RFC에 있습니다. IETF에서도 볼 수 있지만, 다음 장소에서 더 보기 쉽게 정리되어 있습니다.

http://www.faqs.org/rfcs

웹 표준 운동 :
http://www.webstandards.org

http://www.anybrowser.org

http://www.csszengarden.com : 표현과 내용의 분리의 중요성, CSS의 막강함



eot 형식의 웹 폰트는 모질라가 지원하지 않습니다. 아마 영원히 안 할 지도 모릅니다. 웹은 우선 '내용' 전달이 우선이라는 점을 염두에 두십시오. '모양'은 부차적인 문제입니다. 따라서, 웹 페이지를 만드실 때에도 우선 '이야기'를 그럴 듯 하게 만든 후에 장식을 하셔야 합니다. 웹 폰트를 쓰지 못 해도 내용을 보는데 지장이 없도록 하셔야 하고요.

웹표준, 더 정확하게 WWW(World Wide Web)표준을 참고하시려면...
이미 아시고계시겠지만...

아래 사이트를 참고하시면 됩니다.

World Wide Web Consortium -- http://www.w3.org/
우리나라좋은나라(추천) -- http://w3c.or.kr/

HTML은 현재 HTML4.01이 표준이고요...
XML형식의 HTML은 XHTML1.0이 표준이고요...
위의 우리나라사이트에 번역자료있습니다...

또, 아래의 사이트에서 원하는 웹페이지가 표준에 얼마나 적합하게
작성되어 있는지를 검사할 수 있습니다.

http://validator.w3.org/

또한 자바스크립트같은 경우에는 문법보다는 각 브라우져별로
객체에 대한 정의, 객체에 접근하는 방법을 달리하기 때문에
에러가 발생합니다.
w3c에서는 자바스크립트에 대한 표준 객체를 위해
DOM(Document Object Model)을
정의하고 있습니다.

DOM은 현재 2.0버젼을 표준으로 권고하고 있고, 대부분의 브라우져도
이를 지원하고 있는 것으로 알고 있습니다.
ie도 완벽하지는 않지만 이를 지원하고 있습니다.

예를들어 아래와 같은 form 태그가 있다면...

form id="w3cform" name="ieform" ....

위의 form 객체에 접근하기 위해서...

w3c 표준을 지원하는 모질라, 불여우에서는...
id 속성을 이용해서...

var form_object = document.getElementById("w3cform"); (OK)

ie전용방식으로는...
name 속성을 이용해서

var form_object = document.ieform; (Oh! NO)



그리고, Cascading Style Sheets (CSS)같은 경우에도
w3c의 권고안을 살펴보세요...
번역본도 있습니다.

CSS에 대한 객체에 대한 접근방법도 DOM에 정의되어 있습니다.

예를들어, 객체에 대한 커서를 "손모양" 커서로 변경할 경우에는

w3c 표준은...

form_object.style.cursor = pointer; (OK)

ie는...

form_object.style.cursor = hand; (ie만 OK)



제 생각에는 html4.01과 dom만이라도 표준을 따르면
브라우져 종류에 관계없이 무난한 웹페이지를
제작하실 수 있을 것입니다.

답글적으면서 급히볼일(?)다녀와서 제출했더니...
빛알갱이님께서 아주 친절하게 답글을 달아주셨네요...
저도 도움이 많이 되었습니다...

앞서 여러분들이 추천해 주신 몇몇 사이트를 방문해 보았습니다.
영문문서들, 그리고 딱딱하고 어려운 문장구조들을 읽으며,
대략 다음과 같이 제 나름대로의 표준화 실천안을 만들어 보았습니다.
조금 패배적이긴 하지만...

1) 일단 만든다.
2) 모질라/불여우에서 해당 페이지를 테스트 본다.
3) 대체로 여기서 동작이 원활치 않는경우 해당 부분은 표준화를 벗어 났다고 본다.
4) http://validator.w3.org 에서 해당 페이지를 테스트 해 보고, 권고안이나 대안을 찾아 본다.
5) 대안이 없다면 에러를 야기하는 문법을 사용하지 않는다.

여기에서 질문몇개

1) 모질라/불여우에서 제데로 보인다면 해당 페이지는 표준안에 부합합니까 ?
2) 매킨토시에 탑재된 익스플로어는 웹 표준을 따르고 있지 않습니까 ?
- 매킨토시 브라우저는 모질라와 또 다른 모습들을 보여 줍니다.
3) 표준안의 MS 사유화를 막기위해 우리가 할 수 있는 행동들 중 표준안에 따른 웹페이지를 제작하는 것 외에 어떤것이 있겠습니까 ?

초보 여우팬 wrote:앞서 여러분들이 추천해 주신 몇몇 사이트를 방문해 보았습니다.
영문문서들, 그리고 딱딱하고 어려운 문장구조들을 읽으며,

수고하셨습니다 원래 표준 문서는 모호함을 피하고, 다른 해석의 여지를 없애기 위하다 보니, 문장이 아주 딱딱합니다. 한마디로 '영어'가 아닙니다.

대략 다음과 같이 제 나름대로의 표준화 실천안을 만들어 보았습니다.
조금 패배적이긴 하지만...

1) 일단 만든다.

일단 만들지 마시고 , 우선 무슨 내용을 전달하고 싶은지 '얼개'를 짜십시오. 모양은 생각하지 말고요. 내용과 구조가 정해지면, 구조를 표시하는 마크업만으로 HTML 문서를 만드십시오. 즉, font, align, b와 같은 markup은 쓰지 말고, div, h1, h2, ul, ol, li, dl, dd, p, code, q, strong, em 등만을 써서 문서를 만드십시오. 그 다음에 모양을 조절하고 싶은 부분에 id를 부여하거나 class를 부여하고 (특징을 공유하는 부분이 여럿 있다면) 그에 해당하는 Style을 정의합시오.

초보 여우팬 wrote:
2) 모질라/불여우에서 해당 페이지를 테스트 본다.
3) 대체로 여기서 동작이 원활치 않는경우 해당 부분은 표준화를 벗어 났다고 본다.
4) http://validator.w3.org 에서 해당 페이지를 테스트 해 보고, 권고안이나 대안을 찾아 본다.
5) 대안이 없다면 에러를 야기하는 문법을 사용하지 않는다.

2를 하기 전에 4를 먼저 하실 것을 강력히 권합니다. DOM 표준 검사기가 없는 게 문제이기는 한네, 모질라의 Javascript console이 그 역할을 해 준다고 할 수 있겠네요. '파란 사오정'님이 몇 가지 문제를 지적하셨는데, document.all.object_id도 대표적인 MS DOM입니다. document.getElementById("object_id")를 쓰셔야 합니다. (MS IE 5 이상에서는 문제 없습니다. MS IE 4도 고려하셔야 한다면, 웹 표준화 게시판에 CrossBrowsing Tip을 읽어 보십시오).

5)에 대해서: 사용하지 않는 것도 한 방법이고, 'graceful degradation'이란 기법(?)을 쓰는 수도 있습니다. 일부 브라우저만 지원하는 표준 기능을 쓴 경우 (예를 들어, CSS나 Javascript를 지원하지 않는 브라우저에서도 잘 보이게) 그런 기능이 없는 곳에서도 내용 파악과 탐색/이동에 지장이 없도록 (CSS를 이용해서 pull down menu를 만든 경우, 이런 메뉴를 만들기 위한 CSS는 MS IE에서 아직 지원하지 않습니다. 모질라나 사파리에서는 잘 보이겠지만, MS IE 사용자를 위나 배려를 해야 합니다) 해야 합니다.

초보 여우팬 wrote: 여기에서 질문몇개

1) 모질라/불여우에서 제데로 보인다면 해당 페이지는 표준안에 부합합니까 ?
2) 매킨토시에 탑재된 익스플로어는 웹 표준을 따르고 있지 않습니까 ?
- 매킨토시 브라우저는 모질라와 또 다른 모습들을 보여 줍니다.
3) 표준안의 MS 사유화를 막기위해 우리가 할 수 있는 행동들 중 표준안에 따른 웹페이지를 제작하는 것 외에 어떤것이 있겠습니까 ?

1)에 대해 : 그것이야 100%라고 답할 수 없지요.
2) :
매킨토시 OS가 무엇인지요? 혹시 Mac OS 9.x나 8.x입니까? Mac OS의 IE는 Windows의 IE와 많이 다릅니다. Mac OS X 이후의 기본 브라우저는 IE가 아니라 Safari입니다. Safari의 경우라면 불여우에서 잘 보이는 것은 거의 대부분 잘 보여 줍니다.

3) 교육, outreach, 안내 메일 보내기, 항의하기, 켐페인, .....

http://www.ivanyeung.pwp.blueyonder.co. ... v/sidebar/

에 가시면 모질라/파이어폭스용 사이드바를 다운로드해서 설치하실 수 있습니다. 웹 표준 문서를 찾아 볼 때 꽤나 편리합니다. 검색까지 된다면 더 좋겠지만....

http://www.w3c.or.kr/Translation/

파란 사오정님 답변 가운데 언급되었는데, 중간에 묻혀 있어서 못 보신 분이 계실까 봐 따로 씁니다. 아직 많지는 않지만 그래도 주요 문서가 한국어로 번역되어 있습니다.

http://www.quirksmode.org/

이곳도 아주 좋은 정보를 많이 담고 있습니다. 이 사이트를 만든 사람은 예닐곱 플랫폼에서 10개 이상의 브라우저로 시험해 보았다는군요.

빛알갱이 wrote:http://www.quirksmode.org/

이곳도 아주 좋은 정보를 많이 담고 있습니다. 이 사이트를 만든 사람은 예닐곱 플랫폼에서 10개 이상의 브라우저로 시험해 보았다는군요.

한가지 아쉬운 것은 이 사람은 표준에 대한 입장이 조금 다릅니다. !DOCTYPE 선언을 안하고 브라우져의 quirks mode 를 더 중요시 하더군요. 그래서 그렇게 많은 테스트 결과가 있는 지도

hyeonseok wrote:

빛알갱이 wrote:http://www.quirksmode.org/

이곳도 아주 좋은 정보를 많이 담고 있습니다. 이 사이트를 만든 사람은 예닐곱 플랫폼에서 10개 이상의 브라우저로 시험해 보았다는군요.

한가지 아쉬운 것은 이 사람은 표준에 대한 입장이 조금 다릅니다. !DOCTYPE 선언을 안하고 브라우져의 quirks mode 를 더 중요시 하더군요. 그래서 그렇게 많은 테스트 결과가 있는 지도

도메인 이름이 왜 그런가 했더니 그랬군요. 하지만, 테스트 대상이 그것 때문에 많은 것은 아닌 것 같습니다. Qnx, Web TV, RISC 등 잘 안 쓰는 OS/플랫폼/브라우저도 시험해 보았다고 써 놓았더군요.

http://www.visibone.com/javascript/

모질라를 따로 분류해 놓지 않은 것이 맘에 안 들기는 하지만, 저 회사에서 만든 reference card들이 괜찮아 보이네요. 웹 개발하시는 분들에게 편리할 것 같습니다.

혹시나 해서 알려드리는데 윈도용 Safari도 있습니다.
http://www.apple.com/kr/safari/