Class
- Tip&Tech
| [스크립트] HTML5.js | |||||
| 글쓴이 |    ㏇мþоζıŧе |
날 짜 | 09-07-04 01:31 | 조 회 | 4982 |
|---|---|---|---|---|---|
| 간편URL |
http://www.phpschool.com/link/tipntech/68616
|
||||
| Link1 | http://remysharp.com/2009/01/07/html5-enabling-script/ (841) | ||||
| Link2 | http://ejohn.org/blog/html5-shiv/ (588) | ||||
|
골때리는 자바스크립트 소재를 드뎌 찾았습니다.
일단 여러가지로 정리한 후 올리도록 하죠. 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 |
|||||
전체댓글수 7
-
게시물 1,320건
12345678910
