꽤 오랜 동안 제 웹 생활의 중심은 오페라가 되어 왔습니다. 지난 번 올블로그 3주년 행사에서 만난 하늘이님 블로그에 올린 글을 보고 9.2부터 사용하기 시작했습니다. 기능이나 이미지 렌더링이나 irc 채팅지원, RSS 뉴스리더 등의 특징을 잘 활용하고 있습니다.

하지만, 자바스크립트 해석이 달라서 오작동하거나 아예 동작을 하지 않거나, 혹은 원어데이 같은 사이트는 CPU 100%으로 가게 만들더군요.

다음 사이트의 경우입니다. daum 블로그는 읽기가 상당히 난해합니다. 스크린 캡쳐를 잡으면 이렇습니다. 글 우측에 보이는 스크롤바와 그 스크롤바가 가리는 글씨들... 음...
사용자 삽입 이미지

ie, ff에서는 잘 보입니다. 이케요. 브라우저 우측의 스크롤바 보이시죠.
사용자 삽입 이미지
contents from: http://blog.daum.net/miriya

그리고 최근 베타 오픈한 다음 검색쇼를 오페라에서 시도하다가 OTL 했습니다. 1단계에서 2단계로 잘 넘어갑니다. 하지만, 2단계 페이지에 있는 3단계 버튼을 아무리 클릭해도 꼼짝하지 않습니다.
사용자 삽입 이미지

저 다음 단계 버튼을 아무리 클릭해도 꿈쩍을 하지 않는다는 것이죠. 개똥벌래(firebug) 출동시켜서 코드를 비교해봤습니다. href="javascript:..." 와 같은 식으로 코딩을 하면 오페라에서 동작되지 않는 것을 알게 되었습니다. onclick 으로 수정하면 될 듯 합니다.
이 코드는 1단계에서 2단계로 넘어가는데 사용된 코드입니다. onclick 을 사용했습니다.
사용자 삽입 이미지

아래는 문제의 코드입니다.
사용자 삽입 이미지
href="javascript:..." 보이시죠.

브라우저가 많아지는데, 일일이 대응하기 힘들다는 것은 웹프로그래머인 저도 잘 알고 있습니다. 하지만 명품이냐 아니냐는 그 디테일이 어떠하냐로 구분되어집니다. 브라우저를 만드는 벤더나 오픈소스 그룹은 표준을 지키기 위해서 고군분투중입니다. 점차로 브라우저 특화된 함수보다는 웹표준에 입각한 빠른 성능의 브라우저를 만들고 있기 때문에 함수 사용만 웹표준에서 지정하는 방식으로 코딩을 하면 모든 브라우저에서 동작하는 잇점을 취할 수 있을 것입니다.

여튼 마이너 그룹에 속해서 투정 한 번 부려봅니다.
검사(validation)이라는 녀석은 말이죠, 아무 때나 들이대면 피곤합니다. 3.3에서 추가된 spelling check도 마찬가지죠. 지난 번에는 이 기능을 잠재우는 방법을 소개했었습니다. 이번에도 비슷한 경우를 얘기해봅니다. 툴의 기본 성격은 자동화입니다. 문법 자동 체크, 형식 자동 체크 등이죠. 하지만 느슨한 검사를 하는 HTML 같은 경우, 신경쓰고 싶지 않은 때가 많습니다. 더군다나 기존의 html코드가 저주받은 경우는 더 하죠.
사용자 삽입 이미지

index.jsp 파일에 경고도 아니고, 빨간 딱지가 붙었습니다. 굉장히 신경쓰이죠.
사용자 삽입 이미지

파일을 열어봤습니다. 도대체 무엇을 잘 못 했길래... 쯔업. 주석처리한다는 것이 >/tr<를 낙오시켜 버렸군요.
잘못한 것 많네요. 하지만, 이런 류의 미스는 신경쓰기 싫다 하시는 분들, 언제 저주받은 html을 다 정리하냐 현실적으로 불가능하다 하시는 분들, 그래서 준비했습니다. 음주단속 피하는 방법처럼 이것도 피하는 방법이 있습니다. 음주단속이야 술 안마시면 걸리지 않죠. 양조장에서 일하기 때문에 몸에서 기본적으로 알코올 도수가 나온다면... 음... 지금 삼천포로 가고 있습니다. 일단 Preferences 를 열어서 validation이라고 칩니다. Validation 메뉴 선택하고 세팅을 다음과 같이 맞춰줍니다.
사용자 삽입 이미지


xml 문법체크는 중요하기 때문에, 어긋나면 웹 애플리케이션이 죽어버리니까 체크했습니다.
그리고 프로젝트 다시 빌드하시면 깨끗하게 나옵니다. 그래도 찜찜하죠. 앞으로 짜는 코드는 말끔하게 짜 주세요. 특히나 table 태그 안에서 tr 사이에 있는 기생하는 form 태그, table 밖으로 나오시거나 td 안으로 들어가세요.
한 줄이 붕 뜬다고요? form 태그 속성에 style="margin:0" 주시면 그런 거 없습니다.
웹표준, 그리 나쁘지 않습니다.
w3의 validation을 통과하던 페이지에 JavaScript를 통해서 생성하는 컨텐츠 부분의 코드 때문에 validation이 깨져버렸다.
가이드 문서를 따라가 보니
document.write("</p>");
위와 같이 문자열 안에 있는 마크업 태그 때문에 파서가 인식하지 못한다는 것이다.

document.write("<\/p>");
해답은 위와 같이 닫는 태그 부분을 escape시켜주면 된다고 하는데, 적용해봐야겠다.

웹표준 어렵다.

가이드 대로 수정을 해서 적용하니 다시 통과된다.
okjsp validation passed

okjsp validation passed



related: http://www.htmlhelp.com/tools/validator/problems.html#script

+ Recent posts