웹표준 3

벨리데이터는 벨리데이터일뿐

"네이버 탑페이지 HTML 유효성 검사 통과" 코멘트에서 id와 name의 중복문제가 나온다. 사실 "보안된 페이지의 HTML Validation Check 방법"을 보면서 살짝 예상하기도 했었다. (더불어 W3C Validator는 내부에 설치할 수도, 파일을 직접 올려서 확인해 볼 수도 있다.) W3 Validator나 SGML Parser는 DTD에 따른 문법 검사만 한다고 보면 된다. 가령 이번에 문제가 된 "12.2.3 항목"은 DTD에 정확히 표현되어 있지 않다. HTML의 과도기적 문제라고도 할 수 있는데 id 속성과 Anchor의 name은 서로 문법이 틀리다. DTD가 뭔지 id와 name이 뭐가 틀리다는 건지는 직접 찾아 보시고(하단 덧글 참고) 맞춤법이 맞다고 해서 올바른 국어가 아니..

p안에 div를 넣으면

리퍼러 중에 이런 문제로 고심하는 분들을 위해 왜 p안에 div를 넣으면 안되는지를 간략히 살펴보자. 우선 W3의 HTML 4.01 스펙부터 보자. 9.3.1 Paragraphs : the p element를 보면 p 태그는 inline 요소만을 자식으로 가질 수 있다고 한다. div는 block 그룹에 속한다. 따라서 p안에 div를 쓰면 잘못된 것이다. 헌데 다들 잘 쓰고 있지 않은가? 심지어 텍스트큐브나 티스토리 에디터도 이런 식으로 html을 생성하기도 한다(정확히는 각 브라우저의 위지윅 에디팅 모듈의 버그라고 할 수 있지만). 많은 웹사이트 코더들이 이 부분을 묵과한다. 아래의 코드를 보자. 테스트문장 정상적인 문단 "테스트문장"이 전형적으로 실수한 부분이고 아래는 정상적이다. p 영역이 정확히..

Extreme Font-Resizing bug of IE

태터툴즈 1.1 그리고 티스토리 이번 업데이트 이후 파일 업로드가 일부 화면에서 갑자기 폰트가 크게 나오는 이유중 하나가 바로 이 "extreme font-resizing bug" 때문이다. http://www.gunlaug.no/contents/wd_additions_13.html 원인은 EM단위를 스타일에 적용하였을때 상위 태그를 뒤지다가 초기값이 없으면 지맘대로 계산해 버리는 것. 결국 해결책으로 나오는 것들을 보면 html이나 body 태그에 %로 미리 폰트사이즈를 지정해 주는 것이다. 웹표준 이야기가 많이 나오지만 결국 표준대로 html을 만들면 망하는 시대. 각종 브라우저로 테스트 해 보면서 온갖 Hack을 써서 브라우저에 맞게 코드를 작성해야 한다. 티스토리에는 좀더 정확히 해결법을 찾아서 ..