참조 : http://remysharp.com/2009/01/07/html5-enabling-script/
참조 : http://ejohn.org/blog/html5-shiv/
골때리는 자바스크립트 소재를 드뎌 찾았습니다.
일단 여러가지로 정리한 후 올리도록 하죠.
HTML5.js입니다. IE 전용이죠. IE는 약속된 태그 외엔 안먹힌다는 게 정석이죠.
설명 필요없고 걍 바로 써보고싶다면 링크 #1로 가면 됩니다.
JQuery의 창시자 John Resig가 발견한 꼼수입니다. 원문은 링크 #2에 있습니다.
HTML5의 기초는 바로 XML처럼 맘대로 태그이름을 지어서 맘대로 CSS로 꾸며 표현할 수 있는 것입니다.
다른 현대 브라우저에 비해 IE는 약속된 태그 외에는 안먹히는게 정석입니다.
IE 외에도 불여우 2 이하, 오페라 7 이하 등등의 옛 브라우저도 안먹힐겁니다.
지금, IE를 키고 다음 코드를 작성한 후 실행해보세요.
<html>
<head>
<style>blah { color: red; }</style>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>
음.. 일단 blah 태그에 빨간글씨가 나타나야 되지만.. 안나옵니다. 썅.
blah는 표준 태그가 아니기 때문에 IE가 무시를 한 꼴인 셈이죠. DOM 등록조차 안하니 렌더링은 커녕 엘리먼트로도 등록이 안되어 있습니다.
하지만, 이 한 줄의 스크립트로 상황은 역전되었습니다. HTML5의 모든 것을 구현할 수는 없지만, 기본에 충실한 이 원초적인 방법을 그가 찾아낸 겁니다.
<html>
<head>
<style>blah { color: red; }</style>
<script>document.createElement("blah")</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>
바로 blah란 엘리먼트 태그를 만들어버리는 것이죠. 그 이후로 모든 blah 태그가 드디어 DOM 엘리먼트로 인정받게 됩니다. 그 이후, blah 안에 있는 hello는 빨간글씨가 적용됩니다.
이뿐만이 아니죠. figure 엘리먼트를 생성시켜서 만들고, 그안에 이미지를 넣었습니다. 별거 없어요. 이미지에 4픽셀 안만큼 공백 짜내고 안으로 들어간 테두리를 만들었습니다.
무리없이 잘 실행됩니다.
<html>
<head>
<style>
figure { border: 1px inset #AAA; padding: 4px; }
</style>
<script>document.createElement("figure");</script>
</head>
<body>
<figure>
<img src="http://ejohn.org/files/jeresig-wordpress-sm.jpg"/>
</figure>
</body>
</html>
이제 HTML5의 기초적인 렌더링은 이루어진 셈이죠. 그렇다고 해서 모든 것들이 해결되는 건 아닙니다. 아직 완성단계는 아니지만, 캔버스와 오디오, 오픈비디오 태그도 또다른 문제로 남아있죠. 오디오 문제는 어자피 엔진이 한정되어 있어 별 무리없이 우회해서 꾸밀 수 있지만.. 하지만 오픈비디오같은 경우는 코덱부터가 다릅니다. ogg vobis..
그 엔진을 건드릴 수 있는 클라이언트가 아니면 재생은 커녕 구경조차 못하는거죠.
하지만, HTML5의 가장 큰 매력은 엘리먼트 이름을 원하는대로 꾸밀 수 있어 가독성을 높이면서 더욱 더 자유로운 HTML을 구현할 수 있는 매력이 있습니다.
자. 이제 HTML5의 세계로 빠져볼 준비를 하세요. 저도 엄격덩어리 XHTML 들어가다가 이 기회를 이용해 HTML5로 갈 생각입니다. 그럼 이만.
해당 사이트의 저작권은 해당 사이트의 라이센스에 따릅니다.
제가 쓴 글은 링크#2를 인용했기 때문에 해당 원작자의 라이센스에 따릅니다.
그래봤자 오픈소스. ㅋㅋ
HTML5를 재대로 테스트할 수 있는 사이트도 마련했습니다.
http://remysharp.com/demo/html5-test.html
출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=68616&page=1
참조 : http://ejohn.org/blog/html5-shiv/
골때리는 자바스크립트 소재를 드뎌 찾았습니다.
일단 여러가지로 정리한 후 올리도록 하죠.
HTML5.js입니다. IE 전용이죠. IE는 약속된 태그 외엔 안먹힌다는 게 정석이죠.
설명 필요없고 걍 바로 써보고싶다면 링크 #1로 가면 됩니다.
JQuery의 창시자 John Resig가 발견한 꼼수입니다. 원문은 링크 #2에 있습니다.
HTML5의 기초는 바로 XML처럼 맘대로 태그이름을 지어서 맘대로 CSS로 꾸며 표현할 수 있는 것입니다.
다른 현대 브라우저에 비해 IE는 약속된 태그 외에는 안먹히는게 정석입니다.
IE 외에도 불여우 2 이하, 오페라 7 이하 등등의 옛 브라우저도 안먹힐겁니다.
지금, IE를 키고 다음 코드를 작성한 후 실행해보세요.
<html>
<head>
<style>blah { color: red; }</style>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>
음.. 일단 blah 태그에 빨간글씨가 나타나야 되지만.. 안나옵니다. 썅.
blah는 표준 태그가 아니기 때문에 IE가 무시를 한 꼴인 셈이죠. DOM 등록조차 안하니 렌더링은 커녕 엘리먼트로도 등록이 안되어 있습니다.
하지만, 이 한 줄의 스크립트로 상황은 역전되었습니다. HTML5의 모든 것을 구현할 수는 없지만, 기본에 충실한 이 원초적인 방법을 그가 찾아낸 겁니다.
<html>
<head>
<style>blah { color: red; }</style>
<script>document.createElement("blah")</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>
바로 blah란 엘리먼트 태그를 만들어버리는 것이죠. 그 이후로 모든 blah 태그가 드디어 DOM 엘리먼트로 인정받게 됩니다. 그 이후, blah 안에 있는 hello는 빨간글씨가 적용됩니다.
이뿐만이 아니죠. figure 엘리먼트를 생성시켜서 만들고, 그안에 이미지를 넣었습니다. 별거 없어요. 이미지에 4픽셀 안만큼 공백 짜내고 안으로 들어간 테두리를 만들었습니다.
무리없이 잘 실행됩니다.
<html>
<head>
<style>
figure { border: 1px inset #AAA; padding: 4px; }
</style>
<script>document.createElement("figure");</script>
</head>
<body>
<figure>
<img src="http://ejohn.org/files/jeresig-wordpress-sm.jpg"/>
</figure>
</body>
</html>
이제 HTML5의 기초적인 렌더링은 이루어진 셈이죠. 그렇다고 해서 모든 것들이 해결되는 건 아닙니다. 아직 완성단계는 아니지만, 캔버스와 오디오, 오픈비디오 태그도 또다른 문제로 남아있죠. 오디오 문제는 어자피 엔진이 한정되어 있어 별 무리없이 우회해서 꾸밀 수 있지만.. 하지만 오픈비디오같은 경우는 코덱부터가 다릅니다. ogg vobis..
그 엔진을 건드릴 수 있는 클라이언트가 아니면 재생은 커녕 구경조차 못하는거죠.
하지만, HTML5의 가장 큰 매력은 엘리먼트 이름을 원하는대로 꾸밀 수 있어 가독성을 높이면서 더욱 더 자유로운 HTML을 구현할 수 있는 매력이 있습니다.
자. 이제 HTML5의 세계로 빠져볼 준비를 하세요. 저도 엄격덩어리 XHTML 들어가다가 이 기회를 이용해 HTML5로 갈 생각입니다. 그럼 이만.
해당 사이트의 저작권은 해당 사이트의 라이센스에 따릅니다.
제가 쓴 글은 링크#2를 인용했기 때문에 해당 원작자의 라이센스에 따릅니다.
그래봤자 오픈소스. ㅋㅋ
HTML5를 재대로 테스트할 수 있는 사이트도 마련했습니다.
http://remysharp.com/demo/html5-test.html
출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=68616&page=1
'소프트웨어 > JavaScript • Dhtml' 카테고리의 다른 글
| JSON을 활용한 HTTPService 개발 (0) | 2009.07.10 |
|---|---|
| HTML 4와 HTML 5의 차이점 (0) | 2009.07.09 |
| JSON javascript 읽기 (0) | 2009.07.03 |
| jQuery Async Plugin (0) | 2009.07.02 |
| Masked Input plugin (0) | 2009.06.29 |