NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


실전 비 표준 가이드 ‘CSS Hack’.

본문 건너 뛰기

UI 개발자가 ‘웹 표준’ 방식으로 전환하게 되면 으레 ‘브라우저 호환성’까지 확보하는 작업을 병행하게 됩니다. 정해진 표준 명세에 따라서 코드를 작성하는 것은 쉬우나 ‘브라우저 호환성’을 확보하는 일은 그 반대로 정말 고된 작업입니다. 저는 여기서 적지않은 오해가 발생한다고 생각합니다. ‘웹 표준은 더 많은 자원을 필요로 한다’ 라고 말하는 거죠. 저는 이것이 ‘브라우저 호환성 유지 작업은 더 많은 자원을 필요로 한다’ 라는 사실의 잘못된 표현이라고 생각합니다. ‘웹 표준’과 ‘브라우저 호환성’은 서로 다른 개념인데 이 두 개념을 아무 구분없이 뭉뚱그려 사용함으로서 웹 표준에 대한 그릇된 인식이 형성되었다고 생각합니다. 웹 사이트를 개발함에 있어 ‘브라우저 호환성’은 목표이고 ‘웹 표준’은 방법론 입니다. ‘웹 표준≠브라우저 호환성’ 서로 같지 않습니다.

솔직히 사람들은 ‘웹 표준’ 이라는 키워드를 더 많이 찾지만 ‘크로스브라우징’ 이라는 키워드에 더 환호한다고 생각합니다. 그래서 오늘은 이것을 준비 했습니다. ‘실전 비 표준 가이드’. 말 그대로 표준이 아닌 가이드 입니다. 제가 악마에게 영혼이라도 판걸까요? 이제서야 정리하는 이유는 이제 막 당구에 입문하는 친구에게 찍어치기를 먼저 알려주지 않는 것과 마찬가지 이유 입니다. 찍어치기를 먼저 알려주면 얇게 쳐도 될 공을 찍어치기 때문이죠.

주요 브라우저 호환성 확보를 위한 실전 비 표준 가이드 ‘CSS Hack’
Target Browser CSS Hack Comment
IE 5 ~ IE 7 #selector { *property:value } DTD와 무관하게 작용
IE 5 ~ IE 6 #selector { _property:value } DTD가 Quirks Mode인 경우 IE 7에도 작용함
IE 5 #selector { _property /**/:value } DTD가 표준모드인 경우 작용
Firefox 2 #selector { property:default-value; }
#selector, x:-moz-any-link { property:firefox-value; }
#selector, x:-moz-any-link, x:default { property:default-value; }
첫 번째 라인은 희망하는 값
두 번째 라인은 FF 2 디버깅 값
세 번째 라인은 다시 희망하는 값
DTD가 표준모드인 경우 작용
Opera 9 html:first-child #selector { property:value; } Opera 9.5 부터 작용하지 않음
DTD와 무관하게 작용
Safari 3 없음 없음

브라우저 호환성을 유지하는데 너무 많은 시간이 소요된다면 이런 CSS Hack 이라도 사용해서 시간을 절약해 보세요. 단, 다른 장치나 브라우저에서 어떻게 작용하게 되는지에 대하여 저는 아무것도 보증하지 않습니다. Hack을 사용하기 전에 반드시 알아두면 좋은 것은 ‘어느 브라우저가 CSS 표준 명세에 따라 렌더링 하고 있는지’에 대한 정보 입니다. 브라우저 마다 렌더링이 달라서 어느것이 표준인지 모르겠다면 Opera 와 Safari 를 먼저 참고하세요. 이 두 브라우저가 99.9% 정도 표준에 따라 렌더링 하는 브라우저들 입니다.

분류: CSS,웹 디자인,웹 표준 | 2008년 8월 27일, 2:31 | 정찬명 | 댓글: 22개 |
트랙백URI - http://naradesign.net/wp/2008/08/27/153/trackback/

22개의 댓글이 있습니다.

  1. 조소 댓글:

    누구를 위한 웹표준인가?

    웹표준과 웹호환이 다르다는 것에 동감합니다.
    실제로도 웹표준과 웹호환을 구분 못하는 개발자들이 대부분입니다.
    그냥 맹목적으로 파폭에서 안된다고 웹표준 지켜달라고 한마디 던지는
    어의없는 개발자 때문에 분노게이지가 상승할 때가 있습니다.

    개발자들은 HTML을 개뿔도 모릅니다.
    심지어는 드림위버질 하면서 개발하는 초짜들도 자기들이 코딩하지 않는다고
    웹표준 지켜달라고 한마디씩 툭툭 던집니다.

    웹표준이 개브라우져 소브라우져 다 통일 시키는것이 웹표준이 아닙니다.
    그럼 네이버에서 브라우져 출시하면 그 브라우져도 파폭이랑 똑같이 보이게 코딩해야 하는게
    웹표준입니까?

    일반 네티즌들은 웹표준이고 모고 신경 않씁니다.
    네티즌들이 원하는 것은 내가 찾고자 하는 정보가 있느냐 없느냐가 중요합니다.
    네티즌에게 웹표준이 머가 중요하겠습니까.
    페이지 잘 보이면 보고 , 안보이면 안보는게 일반 사용자들인데…

    웹표준이 어쩌내 저쩌내 하는 사람들은 개발자들이 대부분입니다.
    실예로 웹표준코딩 한다고 하고 일정딸려서 막코딩해서 사이트 오픈한적도 있지만,
    사이트 운영에 있어서 문제된적이 없습니다.
    투덜 되는 사람들은 개발자들 뿐입니다.

    내 생각에는 쓸데없는 MS 저항정신을 가지고 있는 사람들의 논란입니다.
    리눅스가 윈도우즈 따라갈꺼다라고 예전에 떠들던 사람 많았습니다.
    속도가 어떻네 리소스가 어떻네…
    이젠 윈도우즈를 쓰는 사람들도 파폭이 윈도우를 따라잡을꺼다라고 하는 사람들이 있습니다.
    쓸데없는 망상 그만하고 개발이나 똑바로 하라고 말하고 싶네요.

    브라우져의 사용 빈도가 IE가 압도적이라는 것은 다들 인정하실 겁니다.
    이 이야기는 브라우져가 이미 IE로 표준화 되었다고 의미 하는 것입니다.
    표준이 무엇입니까? 대다수의 공통이 표준입니다.

    턱없이 부족한 웹퍼블리셔 인력들도 호환성 작업하는데 피가 마릅니다.
    표준코딩운동이 표준브라우져운동으로 바뀌기를 희망합니다.

  2. 궁시렁의 생각…

    cj에서 웹표준하다가 포기한거 같다. 아무리 봐도.. 실전 비 표준 가이드 ‘CSS Hack’…

  3. 이상훈 댓글:

    사람들은 변화를 싫어하죠.^^

  4. 신현석 댓글:

    80%를 압도적이라고 말할 수 있다면 IE가 압도적이라고 할 수 있겠죠. 5명중 1명은 IE를 사용하지 않습니다. 덧붙여서, IE에서만 쓸 수 있는 사이트의 IE사용 비율이 압도적이라고 말한다면 개그죠.

  5. 정찬명 댓글:

    조소님, 리눅스나 파이어폭스를 선호하는 사람들이 MS에 대하여 저항정신을 지니고 있다고 말씀하시는건 무리스러운 발언 아닌가요? 표준 브라우저 운동은 한번 열심히 해보시지요.

  6. 김주원 댓글:

    찍어치기 실력이 꽤 됩니다. ie6로 겐세이 들어오면 방법이 없더군요
    대신 다이는 너덜너덜해졌죠….-_- 후아~

  7. 조소 댓글:

    80% 정도면 압도적이라는 말은 무리가 없다고 생각합니다.
    그리고 제가 책임지고 있는 모사이트가 있습니다. 하루에 만명 방문합니다.
    사실 그대로를 애기하는 것입니다. 만명 중 파이어폭스 사용자는 2-3명입니다.
    기타 브라우져로 채크 되는것이 1-2명 정도 있습니다. 결국 만명중 최대 5명이 파폭이라고 봐도.
    만명 중에 5명이면 0.05% 입니다. 대충 넉넉 잡아쳐두 IE사용률이 99% 이상이란 애기져.
    물론 안믿으리라 생각합니다. 늘 파폭 추종자들은 믿지 않았으니까요.
    표준브라우저 운동 하지 않습니다. 할 필요가 없는 것입니다.
    사용자들이 판단하는 것입니다. 운동은 저항정신 있는 사람들이 하든지 말든지…

    IE 사용율이 압도적이란 말이 개그인가요? 빗나간 언더그라운드정신이 이성을 흐트리는겁니다
    어떤 이슈가 발생해서 대다수의 사람들이 80%를 지지한다면 그게 압도적이 아닙니까?
    바로 이런 것을 지적하고자 했던 겁니다. 저런식으로 이성이 흐트러져 있기 때문에
    웹표준과 웹호환성을 구분 못하는 겁니다. 똥오줌은 구분해야 한다고 애기하는것이져.
    웹표준이란 것은 그야말로 HTML 코딩을 하는 사람이라면 반드시 지향해야할 코딩법입니다.
    XHTML 문법이 W3C에서 나오기전에 얼마나 난장판이었습니까.
    HTML은 웹작업에 있어서 뼈대를 이루며, 디자이너, 개발자 간의 커뮤니케이션 역할을
    하기 때문에 HTML 표준문법제안은 그야말로 환상적인 이슈라고 생각했었습니다.

    문제는 웹표준이 아니라 웹표준을 했는데 왜 파폭에서 깨지냐는 식으로 생각하는 사람들이져.
    웹표준인데 당연히 파폭에서 정상뷰가 되야 되지 않냐고 파폭에서 깨지면 웹표준 안한것처럼
    싸잡아서 애기하는 사람들이 문제입니다.
    대부분 개발자들이져 HTML 개뿔도 모르는 개발자들 중에 파폭 사랑하는 사람 가끔 있습니다.
    코딩하는 입장에서는 솔직히 파이어폭스 만드는 회사 찾아가서 폭파 시키고 싶습니다.
    예전도 회사에서 디자이너들하고 코더하고 휴식시간에 애기할 때 호환성 애기 나오면
    다같이 넷츠케프사 폭파시키러 가자고 농담한적 많았습니다.

    그리고 인력문제 심각합니다.
    웹표준등장하기 전에도 하드코더 채용하기란 농담쫌 보태서 하늘에 별따기 였습니다.
    그야말로 하드코딩은 모든 구조가 타이핑으로 작업하기 때문에 IT 노가다 중에 노가다입니다.
    요즘에는 하드코딩 + 웹표준문법 작업자를 원하는게 추세입니다.
    한마디로 어렵습니다.

    제발 웹표준 애기하면서 파이폭스 들먹거리지 않았으면 하는게 제 바람입니다.

  8. 꿈트리 댓글:

    오랜만에 열정(?)적인 답글을 보았네요.^^
    조소님께서 좀 더 다른 협업 관계에 있는 분들께 많은 정보를 공유 해주시고 알려주시면 조금씩 나아지지 않을까요^^;
    힘내세요.^^

  9. 정찬명 댓글:

    친절한 꿈트리님! ^^ 최고!

  10. 정찬명 댓글:

    고맙습니다. 요거 재미있는 현상이네요. ^^;

  11. 김진환 댓글:

    아…참으로 속상하군요..
    웹표준을 아시는 분조차 위와 같은 생각을 가지고 계시다니요..

    말씀대로 제대로 알지도 못하는 개발자분(기타 클라이언트님들^^)이하 등등의 웹표준과 크로스브라우징의 개념이 없거나 혼동스러워 하시는 분과, 웹표준은 장애인용이냐? 라고 알고 계시는 등등의 분들…

    모르시거나 제대로 알지 못하고 있다는 것은, 이제서야 그나마 주위의 이목이 끌고 있고, 지나가는 소리로라도 들었기 때문이지 않을까 싶습니다.
    그런 분들이 계시다면, 조금이라도 정확히 알고 있는 사람이 바로 잡아 주는 것이 옳지 않을까 싶구요.

    점유율로 표준을 정한다는건….솔직히 저도 처음엔 웃기는 소리로 생각했었지요. 웬 웹표준,
    거의 모든 사람이 익스를 쓰는 이마당에. 익스가 표준이지 뭔 난리들인가..하고 말이죠.

    하지만, 냉정한 마음으로 여기저기서 정보를 알아보고, 무엇이 옳은 것이고 어떤것이 잘못된 것인 가를 알고나니, 맙소사..세상에.. MS라는 거대 괴물이 이렇게 까지 망쳐 놓은 것이구나..하는 안타까움이 더 크더군요.

    그런 MS도 익스8버전에서는 표준웹의 준수 여부에 더욱 충실해 진다니 어쩌니 하는 말이 나온다는것은 과오를 뉘우쳐서가 아니라. 어떠한 위기감에서 였을지도 모르겠습니다.
    시장경제에 충실하고 발빠른 MS의 횡보에는 언제나 흐름이라는 것이 있으니까요.

    우리들이 입고 쓰고 있는 수 많은 제품 그 유명한 나이키 제품 마저도 메이드 인 차이나 (Made In China) 가 엄청 많다고 그 제품의 생산표준이 중국이 될 수는 없겠죠..쌩뚱맞네요..^^
    하지만, 정말 아무것도 모르거나 잘 모르는 사람이라면 중국제품으로 생각하기에 충분합니다.
    중국에서 만들었다고 찍혀 있으니 말이죠.

    주절주절 말이 많았지만,
    잘 알고 제대로 알고 있는 사람이, 모르는 사람에게는 정보를 공유해 주고, 잘 못 알고 있는 사람에게는 올바로 고쳐알려 주는 것이 좋지 않을까 싶습니다.

    여담으로 약 10년전 저또한 네스케이프 망해라 차라리 하고 생각했었고, 점차 사라져 대한민국에서 자취를 감추게 되고, 코딩을 2가지로 해야하는 현실이 없어졌을때…이제 크로스브라우징이란 말을 다시는 쓰지 않게 될 지 알았었습니다.
    하지만!! 두둥~ 그때는 2가지만 했었던 크로스브라우징을 이제는 몇개 씩이나 ~
    하하하 웃음만이 크게 나오더군요.
    아무튼!! 퍼블리셔를 하시는 분들이나 개발자 분들이나, 웹디자이너 분들이나,
    하나의 사이트가 되었던 무엇이든 간에 혼자만의 작업이 분명 아닙니다.
    모르는 것이 있으면 서로 지식을 나누고 올바로 알고 협업하는 길만이 더욱더 서로를 업그레이드 시키고 작업 또한 원활해 지는 지름길입니다.~ 화이팅!!

  12. 김영하 댓글:

    본문내용과 댓글을 쭈~욱 읽어보았습니다.
    마치 웹표준이 크로스브라우징 을 위한 것인마냥 느껴지는것은 저뿐인가요?
    웹표준은 웹접근성을 지키기 위한 수단입니다. .

    웹접근성이란 구지 말하지않아도 모두 아실듯한데요.
    모두를 위한 웹이 아니었습니까?
    모두가 웹을 이용함에 있어 불편함이 없이 설계를 해야하는것이 우리의 사명아닌가요?

    조소 님의 말씀도 이해는 합니다만.. 80% 가 사용한다고 해서 그 80% 를 위한 웹을 만든다면
    나머지 20% 를 위한 웹은 별도로 만들어야 합니까? 아니면 20% 를 버려야 합니까?

    이제는 웹표준이 국가정책으로 자리잡고 있습니다.
    머지않아 크로스브라우징 과 웹접근성 조사에서 좋지못한 점수를 받은 사이트는 마치 죄인취급 받을날이 분명히 옵니다.

    그때가서 후회한들 막대한 유지보수 비용만 떠오르겠지요.
    한번 잘 생각해보십시오. 이제는 하고 안하고의 문제가 아니며, Ie 에 저항하는 일부 저항세력의 반발만으로 생각될 일이 아닙니다.

    이제 웹접근성은 선택이 아닌 필수가 될것입니다.
    그날이빨리왔으면 하는 맘 뿐입니다.

  13. boDlvAxoW 댓글:

    조소라는 사람은 현업에서 하드 코더로 일하며 현실에 많이 데여본 사람 같습니다. 사실 바로 윗분들이 얘기한 것처럼 저런 태도가 실제로 나타난다는 게 문제입니다. 오히려 웹 표준을 잘 아는 사람일수록 웹 표준이라는 것에 대해 환멸을 느끼게 된다는 것이죠. 웹 표준은 분명히 지향해야 할 이상이며 동시에 현실화도 가능하지만 그 과정이 순탄하지만은 않다는 점. 허나 그걸 표현할 때 개발자에 대한 불만을 엉뚱한 식으로 표출하는 건 문제가 있다고 봅니다. 화풀이를 할 대상이 잘못된 것 같다는 생각이 들어요.

    아마 앞으로도 몇 년간 이런 현상은 지속될 것이며 웹 기획자, 웹 개발자(웹 코더도 포함), 웹 디자이너의 인식이 삼위일체가 되어 개혁되지 않는 한 웹 표준을 둘러싼 논란과 비방과 무시는 여전히 이어질 것입니다. (‘웹’이라는 단어가 모두 들어가 있다는 것이 중요)

  14. 박승민 댓글:

    우연히 들렸습니다.
    좋은글들이 많네요 특히 게시판관련 리스트,글쓰기,화면은 도움이 될것같습니다.
    저도 웹개발(프로그래밍) 하는데요
    여간 웹접근성에 마추기가 힘들더라고요 실예로 로그인 화면 있지 않습니다.
    (아이디,비번 인풋박스있고 우측에 버튼있는 화면구성이요)
    관리자 로그인화면단 구성하는데 table 안쓰고 하기 힘겹더라고요
    여력이 되신다면 이부분 도 소스 공개해주시면 좋겠습니다 ^^/

    여러사이트 보면 웹푠준에 마추어서 개발해야한다고 하던데 실제 브라우져마다 들어가서
    테스트하기도 번거롭고 힘들고 모든 화면 자체를 접근성에 유용하게 만들기도 만만찮은
    일인것이 사실입니다.
    허나 필요성은 공감합니다..
    저같은경우 리눅스(우분투) 테스트탑을 써본기억이 있는데 서핑하는데 미치는지 알았습니다.
    또한 접근성관련 업무가 있어서 리더프로그램 깔아서 눈감고 테스트해보니 이또한
    미칠노릇이였습니다. 국회 홈페이지 갔더니 과관이구요 리더기에서 소리나고
    tts뻘질해서 ㅎㅎ …

    하여튼 개인적으로 바램이 있다면 실제 쓰여지고 있는 화면단을 접근성에 마추어
    소스를 공개하고 개발담당자들이
    많이 볼수 있도록 제공한다면 … 좀더 좋아지지 않을까하는 생각이 듭니다.
    노력에 박수를 보냅니다.

  15. 정찬명 댓글:

    웹 접근성의 필요성에 공감하고 그것을 실현하기 위한 승민님의 노력이 헛되지 않도록 저도 더욱 노력해야겠습니다. ^^; 웹 개발자 분들께 필요한 소스들은 조만간 XE 공식 웹사이트를 통해서 공개할 예정입니다. 이곳 블로그를 통해서 공개하는 것도 나쁘지는 않지만 중복된 노력이 들어가기 때문에 자제하고 있는점 양해 부탁드려야 할 것 같습니다.

    대신 제가 네이버 서비스를 담당하고 있을 때 사용했던 로그인 페이지 예제를 하나 링크해 드리겠습니다.

    http://html.nhndesign.com/guidelines/pattern/naver/login/default372_v2.html

    이 소스는 보안 2단계(플래시 로그인)를 기본값으로 출력하고 있지만 보안 1단계는 HTML 형식으로 로그인 하게 되어 있습니다. 따라서 class=”step2″ 부분을 class=”step1″ 으로 바꾸시고 해당 부분의 키보드 접근 여부 및 순서와 소스코드를 참고해 주세요. 네이버 고객센터쪽 개편을 위하여 준비했던 코드 입니다.

    이 밖에도 네이버 HTML 가이드 웹 사이트에 가시면 더 많은 예제를 참고하실 수 있습니다.

    http://html.nhndesign.com/
    http://html.nhndesign.com/guidelines/pattern/naver/

    감사합니다.

  16. chimai 댓글:

    전 에이전시에서 순수하게 디자인 작업만 하는 사람입니다. (하드코딩은 손 뗀지 좀 됐어요..)
    일할 때 보면 웹표준을 오해하는 사람들이 굉장히 많기는 해요.
    확실히 업계 전반적으로 웹표준이라고 하면 브라우저호환은 당연히 지켜지는 줄 알고 있었습니다. 조소님 같은 분이 저렇게 토로하실만 해요..;
    웹그래픽만 하시는 분들 중에는 심지어 웹2.0(전 이말 별로 좋아하진 않지만..)의 기본 개념도 모르는 분들이 태반이구요. 그리고 디자인쪽 입장에서 보면 이런 경우도 많지요. 클라이언트 요구사항이라 기껏 웹표준에 가깝게 작업했더니 개발에서 액티브X로 깔아주시는 시츄에이션~ (금융권쪽 작업때 이런 일이 참 많죠;)

  17. 정찬명 댓글:

    그래서 웹 표준이나 접근성 문제를 특정 부서의 문제로 취급해서는 안되는 거죠. ^^; 의견 감사합니다.

  18. 네꼬히메 댓글:

    몇년간 눈팅만 하다 오늘 처음으로 리플달고나서 또 다네요 ^^;
    조소님의 리플은 2008년도산이네요. 오늘은 2011년 3월 21일이구요. 그 사이 개발자들도 참 많은 변화를 한 것 같습니다. 다들 저렇진 않죠.
    변화를 무서워하고 변화하기 싫어하는 개발자들은 div만 봐도 치를 떠는 시절이 있었는데 ㅎㅎ 대략 2년동안은 저런 파폭만을 예찬하며 표준경멸 및 퍼블리셔까대는 개발자를 못 만나봤습니다. 그 전엔 몇몇 만나봤었죠. 오히려 개발자들이 class 만들어두고 필요하면 css작성하라고 까지 합니다 ㅎㅎ 3년만에 많은 변화가 생겼듯 앞으로도 긍정적인 변화가 많이 많이 생기리라 생각합니다 ^^
    (근데 왜 세월이 흐를 수록 잔인하고 나쁜 사람들은 늘어날까요 ㅠ_ㅠ)

  19. 고나 댓글:

    네꼬히메님, 2008년부터 벌써 2012년이네요. ㅋㅋ
    아. ㅜㅜ 오늘도 하드코딩 하면서 불타는 토요일 지새웁니다.
    언제나 IE 때문에 골치아픕니다.
    강제로 업그레이드 시킬수도 없는 이 현실,
    다행인 것은 스마트폰 덕분이랄까.
    사파리, 파이어폭스, 오페라 <– 이런 명칭도 모르던 사용자들이
    차츰 브라우저로 인식해 나간다는 점이랄까요
    아직은 더디지만 ㅜ_ㅜ 하루빨리 IE6이라도 버리는 날이 오면 좋겠습니다!
    뜬소리 잡고 갑니다 ㅋㅋ

  20. 이나라학생 댓글:

    이제 막 입문한 꼬마개발자가, 3년전의 조소님께 여쭙니다.
    “정말 웹 표준에 맞추어 코딩하였는데 IE에서만 잘 작동하였었습니까?”

  21. 조현민 댓글:

    웹표준을 하다보면 크로스브라우징에 어려움이 많이 생기더군요.. 실력이 부족해서 그런지 몰라도 ie6은 참으로… 어떨때는 디자인을 바꾸기도 합니다. 불필요한 디자인부분을 줄이기도하고 원하던 효과를 좀 더 단순하게 바꾸고…
    꼭 코딩에서만 웹표준의 시작이 아니라 디자인에서부터 웹표준이 시작되야하지 않을까 생각이 들기도 합니다. 콜록콜록..
    웹표준을 모르던 시절 디자인과 웹표준 코딩을 하면서 디자인이 많이 바뀌어가게 되더군요..
    html도 하나의 언어라고 생각하고 있어요. 어떻게 보면 표준말을 쓰는 것같기도 하고요 ㅎㅎ. 하지만 살면서 표준말만 쓰면 재미없잖아요, 가끔 사투리도 쓰고 ㅎㅎ.
    이런 생각도 들어요.
    그냥 주절주절 헛소리좀 했네요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님