티스토리 뷰
처음 접한 언어가 C++ 이었고, 조금 하다가 자연스레 MFC 를 이용한 클라이언트 프로그래밍을 하게 되었다. 수업으로 자바를 잠깐 들었지만, 절대로 자바는 하지 않겠다는 생각이 들만큼 어려웠었던 기억이 있었다. (아이러니하게도 지금은 자바만 한다. -_-)
어쩌다보니 Server-Side 만 만지게 되었는데, 직장을 얻기전까지도 해보지 않았던 부분이 바로 웹의 Presentation 영역이었다. 솔직히 얼마전까지만 해도 html, javascript 등의 클라이언트 부분은 하급기술이라 알고 있었고, 또한 맘만 먹으면 2-3주면 할 수 있다라는 생각까지도 가지고 있었다.
헌데, 요근래 들어 웹2.0 이라는 주제가 떠오르면서 웹표준에 대한 이야기가 쏠쏠히 나오고, 국내 웹을 점령했던 ActiveX 등의 기술의 문제점이 본격적으로 논의되기 시작하면서 부터 나도 순수 웹을 한번 정도는 맛을 봐야겠다는 생각이 들었다.
그래서 몇권의 책을 구매해서 살짝 봤더니, 경악 그 자체였다....
이제껏 내가 너무 모르고 있었던건 둘째치고, 참으로 경이로운 세상을 만난 기분이다. 사실 시작한건 꽤 오래되었는데... 이놈의 귀차니즘으로 인해 이제야 시작한다.
일단 인터넷 이곳 저곳에서 모아낸 웹 표준 개발에 관련된 내용을 정리해 둔다. 이젠 정말 열심히 해야지.. -_-
1.사용시
* 모든 <script> 와 <style> 요소에는 type 속성이 포함되어야 한다. 기존의 language 속성은 있든 없든 상관이 없지만 type 은 반드시 있어야 한다.(language 속성은 deprecated 되었다고 한다.) 하지만 하위호환성(HTML 4 이전)을 위해서 둘 다 사용하는것이 필요하다. (이 부분은 나중에 다시 정리할 필요가 있다)
* 모든 <script> 요소 내의 태그는 반드시 escape 시켜야 한다. 왜냐하면 html parser 가 <script> 태그내의 정보를 읽을 때 CDATA 로 읽어들이기 때문이다. 따라서 CDATA 에서 &나 /를 해석하지 못하기 때문에 문제가 발생하게 됩니다. 그래서 다음과 같이 간단(?)하게 바꿔야 한다.
이에 대한 첫번째 해결방안은 관련 script 파일을 모두 .js 를 확장자로 가지는 외부파일로 빼내는 것입니다. 외부파일로 빼내게 되면 이런 CDATA 형에 대한 문제를 가장 깨끗하게 해결할 수 있습니다.
하지만 부득이하게도 그렇게 할 수 없는 상황이라면, 다음과 같은 꼼수도 생각해 볼 수 있습니다. 이건 squeeze CSS and JS into one file 이라는 기사를 보고 생각해낸 주석을 이용한 다중 파서의 처리 예제 정도가 되겠다. -_-
2. 문서구조
XHTML 은 말그대로 HTML의 장점 + XML의 장점 이라고 생각된다.(아닐수도 있는데, 이렇게 이해하고 있다. 역시나 많이 공부를 해야할 부분이다.) 그래서 정확한 문서구조가 필요하다.
* 문서의 루트는 반드시 html 이어야 한다. 또한 html 은 XHTML namespace 를 가져야 한다.
* XML 의 특성이 들어 있으므로 당연히 well-formed 되어야 한다. 즉, 중첩(nest)가 부적합(illegal)하면 안되며, 반드시 종료태그가 있어야 한다.(일부 종료태그가 없는 태그제외)
3. 표현
* XHTML 태그 사용시에는 태그의 이름(name) 및 속성(attribute) 의 대/소문자설정에 상관없이 XHTML 코드에서 HTML 요소의 이름과 속성은 소문자로 '강제'설정해서 사용해야 한다. 왜냐하면 HTML은 대소문자를 구별하지 않지만, XML 은 대소문자를 구별하기 때문이다.
* 모든 속성(attribute) 값은 반드시 ', " 같은 인용부호로 감싸야 한다.
* 모든 속성(attribute)값은 속성이 함께 선언되어야 하며, 최소화되어 표기되면 안된다. 왜냐하면 XML 은 속성의 최소화를 지원하지 않기 때문이다.
즉, a, frame, img, map, applet, form 등의 element 에는 name 속성 이외에도 id 속성도 반드시 있어야 한다.
참고 사이트:
1. W3C의 HTML 4.01 스펙내의 Script Element 정보 참조
2. 한국소프트웨어 진흥원 '실전 웹 표준 가이드'
어쩌다보니 Server-Side 만 만지게 되었는데, 직장을 얻기전까지도 해보지 않았던 부분이 바로 웹의 Presentation 영역이었다. 솔직히 얼마전까지만 해도 html, javascript 등의 클라이언트 부분은 하급기술이라 알고 있었고, 또한 맘만 먹으면 2-3주면 할 수 있다라는 생각까지도 가지고 있었다.
헌데, 요근래 들어 웹2.0 이라는 주제가 떠오르면서 웹표준에 대한 이야기가 쏠쏠히 나오고, 국내 웹을 점령했던 ActiveX 등의 기술의 문제점이 본격적으로 논의되기 시작하면서 부터 나도 순수 웹을 한번 정도는 맛을 봐야겠다는 생각이 들었다.
그래서 몇권의 책을 구매해서 살짝 봤더니, 경악 그 자체였다....
이제껏 내가 너무 모르고 있었던건 둘째치고, 참으로 경이로운 세상을 만난 기분이다. 사실 시작한건 꽤 오래되었는데... 이놈의 귀차니즘으로 인해 이제야 시작한다.
일단 인터넷 이곳 저곳에서 모아낸 웹 표준 개발에 관련된 내용을 정리해 둔다. 이젠 정말 열심히 해야지.. -_-
1.사용시
* 모든 <script> 와 <style> 요소에는 type 속성이 포함되어야 한다. 기존의 language 속성은 있든 없든 상관이 없지만 type 은 반드시 있어야 한다.(language 속성은 deprecated 되었다고 한다.) 하지만 하위호환성(HTML 4 이전)을 위해서 둘 다 사용하는것이 필요하다. (이 부분은 나중에 다시 정리할 필요가 있다)
<script type="text/javascript" language="javascript"></script>
* 모든 <script> 요소 내의 태그는 반드시 escape 시켜야 한다. 왜냐하면 html parser 가 <script> 태그내의 정보를 읽을 때 CDATA 로 읽어들이기 때문이다. 따라서 CDATA 에서 &나 /를 해석하지 못하기 때문에 문제가 발생하게 됩니다. 그래서 다음과 같이 간단(?)하게 바꿔야 한다.
<script type="text/javascript" language="javascript>
// 틀린표현
if (a < b)
</script>
<script type="text/javascript" language="javascript>
// 올바른표현
if (a < b)
</script>
헌데 중요한건 위와같이 < 나 & 등의 CDATA에서 취급하지 못하는 문자들을 일일히 바꾸는게 보통 노가다가 아니란 것이다. 만약 xml 문서라면 <![CDATA[ 를 이용해서 처리할 수 있겠지만 그렇지 않다면 참 난감한 상황이 됩니다.// 틀린표현
if (a < b)
</script>
<script type="text/javascript" language="javascript>
// 올바른표현
if (a < b)
</script>
이에 대한 첫번째 해결방안은 관련 script 파일을 모두 .js 를 확장자로 가지는 외부파일로 빼내는 것입니다. 외부파일로 빼내게 되면 이런 CDATA 형에 대한 문제를 가장 깨끗하게 해결할 수 있습니다.
하지만 부득이하게도 그렇게 할 수 없는 상황이라면, 다음과 같은 꼼수도 생각해 볼 수 있습니다. 이건 squeeze CSS and JS into one file 이라는 기사를 보고 생각해낸 주석을 이용한 다중 파서의 처리 예제 정도가 되겠다. -_-
<script type="text/javascript" language="javascript>
//<![CDATA[
// 올바른표현
if (a < b)
//]]>
</script>
위와 같이 자바스크립트 주석인 // 를 이용하면, html parser 는 위의 문장중에 if (a < b) 만 인식하게 되며, xml parser 는 맨처음의 // 를 제외한 <![CDATA[ 부터 ]]>까지 모두 인식하므로 정상적으로 작동하게 됩니다. 이부분에 대해서도 추가적인 공부가 필요하다.//<![CDATA[
// 올바른표현
if (a < b)
//]]>
</script>
2. 문서구조
XHTML 은 말그대로 HTML의 장점 + XML의 장점 이라고 생각된다.(아닐수도 있는데, 이렇게 이해하고 있다. 역시나 많이 공부를 해야할 부분이다.) 그래서 정확한 문서구조가 필요하다.
* 문서의 루트는 반드시 html 이어야 한다. 또한 html 은 XHTML namespace 를 가져야 한다.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR">
* XML 의 특성이 들어 있으므로 당연히 well-formed 되어야 한다. 즉, 중첩(nest)가 부적합(illegal)하면 안되며, 반드시 종료태그가 있어야 한다.(일부 종료태그가 없는 태그제외)
<p>이렇게<b>하면</p> 틀리다</b>
<p>이렇게<b>하면</b> 맞다</p>
<p>이렇게<b>하면</b> 맞다</p>
3. 표현
* XHTML 태그 사용시에는 태그의 이름(name) 및 속성(attribute) 의 대/소문자설정에 상관없이 XHTML 코드에서 HTML 요소의 이름과 속성은 소문자로 '강제'설정해서 사용해야 한다. 왜냐하면 HTML은 대소문자를 구별하지 않지만, XML 은 대소문자를 구별하기 때문이다.
<LI>틀린 표현</LI>
<li>올바른 표현</li>
<li>올바른 표현</li>
* 모든 속성(attribute) 값은 반드시 ', " 같은 인용부호로 감싸야 한다.
<a href=http://parankiho.tistory.com>틀린 표현</a>
<a href="http://parankiho.tistory.com">올바른 표현</a>
<a href="http://parankiho.tistory.com">올바른 표현</a>
* 모든 속성(attribute)값은 속성이 함께 선언되어야 하며, 최소화되어 표기되면 안된다. 왜냐하면 XML 은 속성의 최소화를 지원하지 않기 때문이다.
즉, a, frame, img, map, applet, form 등의 element 에는 name 속성 이외에도 id 속성도 반드시 있어야 한다.
<a name="parankiho">틀린 표현</a>
<a id="group1" name="parankiho">올바른 표현</a>
최소화할 수 없는 속성(attribute)은 checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly 및 select 가 있다.<a id="group1" name="parankiho">올바른 표현</a>
<option value="wrong" selected>틀린 표현</option>
<option value="right" selected="selected">올바른 표현</option>
<option value="right" selected="selected">올바른 표현</option>
참고 사이트:
1. W3C의 HTML 4.01 스펙내의 Script Element 정보 참조
2. 한국소프트웨어 진흥원 '실전 웹 표준 가이드'
'개발이야기' 카테고리의 다른 글
| 윈도우에서 폰트 자동으로 등록하기 (2) | 2007.10.10 |
|---|---|
| Microsoft Vista 에서 Java TimeZone 버그 발견 (2) | 2007.09.27 |
| Eclipse 에서 Javascript 파일의 한글이 깨지는 경우 (1) | 2007.09.10 |
| [Java : Portability] #2 플랫폼 종속적인 '\n', '\r'을 쓰지마라. (0) | 2007.07.20 |
| [Java : Portability] #1 System.getenv() 를 사용하지 마라. (2) | 2007.07.20 |
| [Java : Struts Frameworks ] #1 스트럿츠 액션 클래스내에 인스턴스 변수를 만들지 말라 (0) | 2007.07.18 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- logback
- Microsoft
- CODSTA
- VMware
- GDIProcessHandleQuota
- qaos.com
- 본사
- prudent
- 미투데이
- Internet Explorer 7
- Windows
- 할인채
- websocket
- 파생
- 이표채
- hp-ux
- WsServerContainer
- coding standard
- 웹표준
- 의왕
- 이미지
- JTest
- TyrusServerContainer
- SharedSection
- JavaScript
- Java
- ActiveX
- WebLogic
- 채권
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함