당신은 웹표준 개발자인가?

제가 제목을 썼지만 참 표현이 웃기네요.

웹표준 개발자라....


가끔 개발 관련 커뮤니티에 들어가면

웹표준에 대해 엄청난 비난을 하고 한순간의 유행으로 치부하며

웹표준을 왜 해야되는지 성토하는 개발자들의 게시물을 종종 봅니다.


그런 격한 분노가 담긴 글을 읽을때마다

웹표준과 개발자의 갭이 이렇게나 컸던가...

웹표준은 단지 퍼블리셔의 영역인가...

웹표준이 개발자에게 업무를 과중시키는건가....

정말로 웹표준이 아무 의미없는 것이라고 생각하고 있는건가....

참 많은 생각을 하게 됩니다.



요근래에 대형 웹서비스의 웹표준 기술 컨설팅을 했습니다.

IE 중심으로 개발된 웹사이트에서 문제되는 부분들을 찾아내어 수정하여

메이저 브라우저들에서 크로스브라우징을 목표로하는 작업이었습니다.


그 과정에서 나름 의미있는 것을 발견했습니다.

개발자들이 흔히 사용하는 비표준 코드라고 할까요.

그래서 그 목록을 정리해보았습니다.

아마 아래에 언급될 내용들만 준수하더라도

크로스브라우징을 위해 들이는 수고가 90% 이상 줄어들 것입니다.




1. 단위를 넣어라


상당히 자주 발견되는 잘못된 코딩의 예입니다.

자바스크립트로 width 또는 height 값을 변경할때

IE에서는 단위를 적지 않아도 자동으로 px로 인식하지만

다른 브라우저에서는 단위를 적지 않을 경우 원하는 화면을 얻을수 없습니다.


width나 height, padding, margin 값과 같이 수치를 입력하는 css 속성값에는

반드시 단위(px, pt, %, em 등)를 넣어주세요.



2. document.all은 버려라


IE식 DOM스크립팅의 대표주자 바로

document.all과
document.regForm.userId 와 같은 DOM 접근 방법입니다.


name속성값에 기반한 document.regForm.userId과 같은 DOM접근이나

document.all[objectID] 과 같은 DOM 접근방식은 IE에서만 동작을 보장합니다.


이제 document.getElementById(objectId)를 사용해주세요.



3. 올바른 주석 사용하기


HTML에서의 주석 넣기

<!------ 주석 ------> (X)
<!--주석--> (X)
<!-- 주석 --> (O)


HTML에서 주석을 넣을때 정확한 구분을 위해 과도하게 하이픈(-)을 넣는 것을 종종 발견합니다.

하이픈은 딱 2개만 넣으세요.

코멘트을 시작하는 "<!"와 내용을 시작하는 "--" 사이에는 빈 공간이 허용되지 않습니다.

그리고 주석의 양옆에는 안전하게 빈 공간을 넣어주세요.



CSS 주석 넣기

<!-- css 주석 --> (X)
/*css주석*/ (X)
/* css 주석 */ (O)


CSS는 HTML과 주석을 넣는 방법이 다릅니다.

CSS의 주석도 HTML처럼 <!-- --> 이렇게 넣으시면 안됩니다.

그리고 CSS도 안전한 주석처리를 위해

주석 내용 양 옆에 빈공간을 넣어주세요.



4. inline 엘리먼트와 block 엘리먼트를 구분하자.
<tr>은 block엘리먼트가 아닙니다.



HTML엘리먼트는 크게 inline엘리먼트와 block 엘리먼트로 나뉩니다.

<span>, <strong>, <em> 과 같이 줄바뀜이 일어나지 않는 엘리먼트를 inline 엘리먼트라 하고

<div>, <h1>, <p>와 같이 줄바뀜이 일어나는 엘리먼트를 block 엘리먼트라고 합니다.


block 엘리먼트와 inline 엘리먼트는 css 로 변경이 가능합니다.

보통 inline으로 취급되는 <span> 태그도 css에서 display:block 으로 설정하면

block 엘리먼트와 같이 표현됩니다.


그렇기 때문에 개발자는

엘리먼트를 숨겼다가 다시 보이기를 할때

inline 엘리먼트인지, block 엘리먼트인지 알아야 합니다.


display:none 되어 있는 엘리먼트를 무조건 block 으로 보이게 한다면

퍼블리셔에 의해 inline으로 설정된 엘리먼트가 block 엘리먼트로 취급되는 경우

레이아웃이 무너지는 현상을 발견할 수도 있습니다.



block엘리먼트인지 inline 엘리먼트인지 신경쓰지 않고

자바스크립트 스크립팅을 하는 가장 좋은 방법은

display 값에 아래와 같이 빈 값을 넣는 것입니다.


document.getElementById('elementId').style.display = '';


이 경우 display 속성값이 기본값으로 세팅이 되기 때문에

css에서 선언된 원래의 display 값으로 되돌아가게 됩니다.



그리고 하나 더.

DB에서 데이터를 불러와 뿌려주는 데이터테이블 형식에서

display:none 되어 숨겨있는 <tr>을 사용자 액션에 따라 보이게 할때

documet.getElementById('tr_id').style.display = 'block';

이렇게 사용하는 경우가 많습니다.

IE에서는 tr엘리먼트의 display 속성값을 block으로 하여도 원하는 화면을 얻을 수 있겠지만

그 외의 브라우저에서는 테이블이 깨져나오는것을 발견하게 될것입니다.


<tr>엘리먼트는 정확히 얘기하자면 고유의 display 속성이 table-row 입니다.

그렇기 때문에 display 값을 "table-row"로 해야하나 IE에서 이 또한 문제가 발생하므로

display 값에 다음과 같이 빈값을 넣어 스크립트를 작성해야 합니다.


documet.getElementById('tr_id').style.display = '';


이렇게 함으로써 display 값이 선언된 CSS의 default 값으로 세팅이 됩니다.





5. 파일 저장시 문서의 BOM을 제거하여 저장하기



에디트 플러스 3버전대에서는 도구 → 기본설정에 BOM 설정부분이 있고

이클립스나 비주얼스튜디오를 비롯한 다른 에디터들에서도

도구 → 속성, 파일 → 속성, 파일 → 옵션, 옵션 → 설정, 설정 → 옵션

메뉴에 BOM 제거 설정 부분이 있습니다.

BOM이 포함되어 파일이 저장될 경우

문서의 가장 앞에 다른 문자가 있는 것으로 인식이 되어

스크립트 에러가 발생하거나, HTML문서 최상단에 선언한 doctype이 제대로 인식되지 않아

quirks모드 (비표준모드)로 렌더링을 할 수도 있습니다.


파일 저장시에는 BOM을 제거 하여 저장하세요.




6. IE전용 이벤트, 속성, 메소드 사용을 피해라


구축된지 오래된 사이트의 유지보수를 진행할때마다 매번 놀라는 것이

코드속에 숨겨져 있는 IE만의 다양한 이벤트, 메소드, 프로퍼티들 입니다.

어쩜 이런 것들을 알고 사용하는지, 개발자들이 마냥 신기하기만 합니다.


사실 이문제는 마냥 개발자를 탓할수 없는 문제이기도 합니다.

웹표준이라는 바람이 불기 이전부터 웹개발을 하셨던 분들은

IE6 환경에서만 웹개발을 하셨기 때문에

그만큼 IE6만의 고유 이벤트나 속성, 함수들에 대한 지식들로 개발경험이 쌓여진 것이기 때문입니다.



흔히 사용하는 IE전용 이벤트, 속성, 메소드를 짚어보고

이에 대응되는 표준 이벤트, 속성, 메소드를 알아보겠습니다.





innerText  → innerHTML

getElementsByClassName() → getElementById()

selectNode(), selectSingleNode() → getElementsByTagName()


DATE 객체에서 getYear() → getFullYear()


이벤트 onmouseleave → onmouseout


javascript에서 event 객체를 받을 경우 마우스포인터의 x, y값을 가져오기 위해서 e.x, e.y 대신 e.clientX, e.clientY 프로퍼티를 사용


javascript로 검색어와 같은 기능에서 한글을 비롯한 특수문자를 get형식으로 보낼때는


escape()함수가 아닌 encodeURIComponent() 함수를 사용







개발자들이 흔히 사용하는 비표준 코드에 대해서 정리해보았습니다.

IE점유율이 98%나 되는 대한민국에서

오늘 짚어본 비표준코드는 아마 향후 몇년간도 계속 쓰이고 있을것 같습니다.

그만큼 IE에 대한 종속성이 심하다는 것이겠지요.




개발자들은 왜 웹표준이란 것이 갑자기 나와서

개발자를 귀찮게 하는거냐 라고 생각하지 말고

웹표준을 준수하니 개발시간도 단축되고 제품의 품질도 좋아지는구나 라고 느끼면 좋겠습니다.

Comment List

  • 어거 2010.07.07 10:04 address / modify or delete / reply

    이글 마구마구 뿌리고 싶네요^^ 잘읽었어요~

  • boxersb 2010.07.07 11:42 address / modify or delete / reply

    딴지는 아니지만.. innerHTML 은 Property 입니다 ㅎㅎ 메소드처럼 쓰셔서요...

    좋은내용 잘보고갑니다 :)

  • kissmehani 2010.07.07 12:09 address / modify or delete / reply

    좋은글 잘보고 갑니다.. 트위터 리트윗 보고 왔어요 ㅎ

  • jacob you 2010.07.07 12:13 신고 address / modify or delete / reply

    고급 중국집에 가서 양장피를 시켰는데 동네 짱깨집 탕수육 그릇에 나오면 어떨까요?
    웹표준이... 개발자 자신들의 성과물을 예쁘게(?) 담아주는 그릇이라는 걸 아직 잘 몰라서 그러는 사람들이 많은 거 같아서 안타깝습니다.

  • 치프 2010.07.07 12:53 address / modify or delete / reply

    안녕하세요~
    정말 좋은 글 잘보고 갑니다.

  • moonbow 2010.07.07 17:06 address / modify or delete / reply

    잘 보고 갑니다.~

  • 호빗 2010.07.08 14:32 address / modify or delete / reply

    좋은글 감사합니다.

    제 블로그에 가져가서 두고두고 보도록 하겠습니다.

  • ncrash 2010.07.12 09:50 address / modify or delete / reply

    웹표준에 대해 잘모르는 상태에서 프로젝트를 진행해서 상당히 고생을 직후에 읽은 포스트라 그런지 짚어주시는 것 하나하나가 절실히 와닿네요. 항상 느끼는거지만 진작 알았다면 덜 고생했을텐데란 생각...


    하지만 그전에 노력이 부족했다는것이 사실입니다 ㅠ 반성하고 노력해야 겠습니다. 좋은 글이라 제 블로그에 담아 두고두고 읽어보겠습니다.

  • vf2416 2010.10.26 15:19 address / modify or delete / reply

    http://todayhumor.co.kr/board/view.php?no=306192&table=humorbest
    웹표준은 2~3년 후에나 도입 된답니다ㅋㅋ

  • 엿잡숴 2011.02.16 10:03 address / modify or delete / reply

    저도 현재 회사에서 입사 이래로 개발팀장과 부대끼느라 지쳤네요 ㅎㅎ
    그분역시 위에서 말씀하신 '웹표준에 대해 격하게 성토하는' 경력 17년차 개발자시라..
    심지어는 UI개발자 라는 말 조차도 '어디 감히 개발자라는 단어를 붙이느냐'고 했던 기억이 나네요. 지금은 다행히 웹표준 개발쪽으로 이직을 할 예정이지만 ㅎㅎㅎ

    앞으로도 좋은 글 많이 부탁드립니다~

  • 아마데우스 2011.07.25 21:35 address / modify or delete / reply

    잘 보고 퍼갑니다~^^

  • 정존 2013.08.02 18:21 신고 address / modify or delete / reply

    잘 보고 갑니다.^^

  • 에르소 2014.05.22 17:22 address / modify or delete / reply

    /*css주석*/ (X) 이렇게 쓰셨는데..
    음.. 저는 빈공간 안두고서, 연습할땐 이리썻는데...
    /* css주석 */ 이게 표준으로 되어있는건가요 ?

| 1 | ··· | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | ··· | 1788 |