NARADESIGN

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


유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드.

본문 건너 뛰기

올해 하반기에 해야 할 일들이 많이 쌓여 있었습니다. 강의, 책, XE(오픈UI프로젝트)에서 사용해야 할 ‘교재, 콘텐츠, 가이드’를 만들어야 했는데 따로 따로 준비 하자니 너무 소모적인 일들이라 벌어진 일들을 한 번에 일망타진할 수 있는 묘안이 필요했고 제 결단은 ‘세 가지 일을 한 번에 해치우기’ 였습니다. ‘토, 일’ 모두 사무실로 출근하면서 후배들이 궁금해 할만한 질문들을 추린 다음 스스로 답변을 달기 시작 했는데 오늘 문서를 완성(?) 했습니다. 여러 문서들을 참조 했지만 주관적인 의견이 포함된 내용도 있어서 ‘정답’이라고 할 수는 없습니다. 하지만 UI 개발자들이 한 번 쯤은 고민했던(또는 해야 할) 주제들의 FAQ 목록 입니다. 저와 다른 의견을 가지고 계시거나 또는 제가 다루지 않았던 주제들에 관한 질문을 환영 합니다. 여러분의 댓글이 아마도 이 문서를 보완하는데 크게 도움이 될 것 같습니다.

  1. 문서형(DTD)을 꼭 선언해야 하나요?
  2. 문서형(DTD)의 종류가 많던데 권장하는 것은 무엇입니까?
  3. XHTML의 문법은 HTML과 비교해서 무엇이 다른가요?
  4. HTML과 XHTML 가운데 어떤 문서형(DTD)을 사용하는 것이 좋을까요?
  5. 문자셋(charset)으로 UTF-8을 권장하는 이유는 무엇인가요?
  6. 휴먼 랭귀지(human language)가 무엇인가요?
  7. 문서의 제목 <title>…</title>을 어떻게 작성하는것이 가장 좋을까요?
  8. 의미론적 마크업(semantic markup)이란 무엇입니까?
  9. 제목 요소 <hx>…</hx>는 어떻게 작성하는 것이 가장 좋을까요?
  10. 의미론적 마크업을 잘 하는 방법이 있을까요?
  11. 논리적인 순서란 어떤 것입니까?
  12. 논리적 마크업을 위해서 화면 배치를 위한 <table>…</table>을 사용하지 않기로 했습니다. 이제 무엇으로 마크업 하나요?
  13. 논리적인 마크업 예제를 한번 볼 수 있을까요?
  14. 컬럼 구조 레이아웃을 위한 CSS 기법이 궁금합니다.
  15. ‘id/class’ 선택자 사용 기준은 무엇이고 어떻게 네이밍 하는것이 좋을까요?
  16. 이미지 대체 텍스트 속성 alt="*" 어떻게 작성하는 것이 가장 좋은가요? title="*" 속성과는 어떻게 다르죠?
  17. 이미지에 포함된 텍스트의 양이 너무 많습니다. 어떻게 처리하죠?
  18. 모두가 이용할 수 있는 longdesc 텍스트를 제공하고 싶습니다.
  19. 웹 브라우저 호환성을 유지하기 위한 CSS 기법은 무엇이 있나요?
  20. IR(Image Replacement) 기법이란 무엇입니까?
  21. Image Sprite 기법이란 무엇입니까?
  22. 동영상 대체 콘텐츠는 무엇이고 어떻게 처리해야 합니까?
  23. 프레임셋 <frameset>…</frameset>의 문제는 무엇인가요?
  24. 프레임셋 <frameset>…</frameset>을 사용한다면 무엇을 주의해야 하나요?
  25. 서버와 데이터를 주고 받기 위해 내용 없는 빈 <iframe>…</iframe>을 사용하고 있습니다. 이런 빈 프레임에도 title="*" 속성을 이용해서 설명해야 하나요?
  26. 모든 기능을 키보드로 이용할 수 있도록 하려면 무엇을 주의해야 하나요?
  27. onclick과 onkeypress, onkeydown, onkeyup 이벤트 헨들러를 함께 사용하면 안되는 이유가 무엇입니까?
  28. <a>…</a> 요소를 마크업 할 때 href 속성의 값으로 "#"을 사용하면 안되나요?
  29. <button type="button">…</button> 요소의 의미와 사용법을 알려주세요.
  30. <button type="button">…</button> 요소의 디자인을 CSS로 제어할 수 없나요?
  31. CSS 기반의 가변폭 텍스트 버튼을 만들고 싶습니다.
  32. 키보드의 논리적인 접근 순서를 위해 tabindex="*" 속성을 사용해도 될까요?
  33. 건너뛰기 링크는 어떻게 구현하는 것이 가장 좋을까요?
  34. 자바스크립트를 이용한 팝업 띄우기는 무엇이 문제인가요? 어떻게 하면 되죠?
  35. 데이터 테이블 <table>…</table>을 의미있고 논리적으로 작성하는 방법은 무엇인가요?
  36. 탭 메뉴 형태의 네비게이션은 무엇으로 어떻게 마크업 해야 합니까?
  37. <label>…</label> 요소는 어떻게 사용하나요?
  38. 플래시 <object>…</object> 네비게이션의 문제는 무엇인가요?
  39. 겸손한 자바스크립트(Unobtrusive JavaScript)란 무엇입니까?
  40. Ajax의 접근성 문제는 무엇입니까?
  41. 시각 장애인을 위하여 CSS { display:none } 처리된 콘텐츠를 제공하는 것이 왜 나쁜가요?
  42. CSS Framework이란 무엇 입니까?
  43. 드림위버와 같은 위지윅(WYSIWYG) 도구는 웹 표준이나 접근성을 지원 하나요?
  44. 드림위버는 너무 무거운 프로그램 아닌가요?
  45. CSS 파일을 부를 때 <link />와 @import의 차이는 뭔가요? 어떤 방법이 더 좋죠?
  46. 인쇄용 CSS를 어떻게 작성하는 것이 좋을까요?
  47. IE 6 브라우저는 #id.class 다중 선택자 조합을 지원하지 않습니다.
  48. IE 6 브라우저는 .class.class 다중 선택자 조합 일부를 지원하지 않습니다.
  49. IE 6 브라우저는 float 처리된 요소의 margin을 두 배로 처리하는 버그가 있습니다.
  50. IE 6~7 브라우저는 float된 요소의 문자를 복사하는 버그가 있습니다.
  51. IE 6~7 브라우저는 float된 요소 주변에 등장하는 absolute 요소를 표시하지 않는 버그가 있습니다.

허걱 벌써 다 보셨나요? 저는 몇일 걸렸는데. ㅡㅡ;

분류: CSS,웹 기획,웹 디자인,웹 접근성,웹 표준,자바스크립트,편집기 | 2009년 9월 7일, 0:43 | 정찬명 | 댓글: 78개 |
트랙백URI - http://naradesign.net/wp/2009/09/07/1040/trackback/

78개의 댓글이 있습니다.

  1. 동치미의 생각…

    유니버설 디자인을 위한 실전 UI 개발 가이드 깔끔한 정리에 감탄을 금치 못하겠나이다….

  2. BNU 댓글:

    점차 신 계급으로 올라가시는군요.
    ((이미 올라가신 것같지만…))
    정찬명님 최고=_=b

  3. exign's me2DAY 댓글:

    hong!의 알림…

    정찬명 님의 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드. 일망타진, 일타삼피 그 이상인 것 같아요. 강추!…

  4. Na! 댓글:

    이글 주소도 넓리 배포해야할 내용이네요..
    또 많이 배웠습니다.
    감사합니다.

  5. 아크몬드 댓글:

    완소 정보!
    고맙습니다.

  6. reedids' me2DAY 댓글:

    청설모의 생각…

    유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드.… 따끈따끈하다….

  7. HYLA 댓글:

    역시 정찬명님!!

  8. 정찬명 댓글:

    성원 감사드립니다. ^^

  9. 푸땡 댓글:

    후아~~ 멋지네요~~

  10. 황규연 댓글:

    항상 부지런하시네요~~^^;

  11. 황준상 댓글:

    좋은글 잘보고갑니다..

  12. 도리 댓글:

    대단하십니다. ^^ 대단한 노고에 경의를 표합니다.

  13. 빽짱구 댓글:

    정말 좋은글들이네요..^^ 링크좀 걸겠습니다.

  14. 정찬명 댓글:

    라이선스(저작자)만 표기해 주시면 통째로 퍼가셔도 좋습니다. ^^ 감사합니다.

  15. 오현 댓글:

    몇 번이라도 읽어서 꼭 숙지해 둬야 할 내용같네요.
    모를때 이곳 저곳 찾는다고 힘들었었는데….

    이거 열면 다 풀릴것 같습니다. ^^&

    그러면서 질문하나 드릴께요.

    layout부분에서 div로 틀짜는 부문 중 —
    .container { width:300px; background:#ddd; *zoom:1; }
    .container:after { content:””; clear:both; display:block; }
    .content { width:200px; float:left; background:#f00; }
    .navigation { width:90px; float:right; background:#00f; }

    여기에서 궁금한게 몇가지 있습니다.
    이건 container가 condent와 navigaition을 안기 위한것이라면
    :after가 없어도 ie6, ie7은 안고 가는걸로 테스트 되더군요.
    제가 테스트 할때는 그 외의 웹브라우저에서 하위 div들이 상위 div 밖으로 나가더군요.
    그렇다면 after는 ie6~7외의 브라우저를 위한 것이고 그럼 따로 *zoom:1 속성을 둘 필요가 없는것이 아닙니까?? content:””안에 텍스트를 넣을것이 아니라면….

    제 테스트가 틀린 것이지 제가 미처 보지 못한것이 있는 것인지 좀 알려 주시기 바랍니다.

  16. 오현 댓글:

    그리고 한가지만 더 첨가해 주셨으면 하는게 있습니다.

    css의 속성값 우선순위 부분이 항상 혼동스럽습니다.

    class와 div가 함께 있을때 우선 순위

    ul class=”##”
    같은 경우에서 ul에 붙혀둔 속성값고 class의 속성의 우선 순위 등..

    전에는 class밑으로 ul이나 li가 적다보니 그냥 다 된것 같은데….

    XE CSS Framework for Layout.을 바탕으로 짜다보니

    class 밑으로 ul이나 li가 세단계 이상 내려가다 보니

    속성값 부여가 쉽지가 않더군요. 과거에는 ul이나 li의 속성값보다 class가 class보다는 div의 속성값이 우선한다는 것 정도로 알고 속성부여를 하면 다 된거 같은데…

    안되더군요 ㅜ.ㅜ

    어찌 짜 맞추기는 했는데 꼭 알다두고 싶습니다.

    전에 어디서 글을 본것 같기는 한데 지금은 찾지도 못하겠더군요 ㅠ.ㅠ

  17. 박중석 댓글:

    엄청난 정보네요. 웹 개발시 가이드 자료로 정말 좋을 것 같습니다.

  18. 오현 댓글:

    다시 읽어보니 css의 속성값 우선순위 부분은 제가 위의 47 48번을 정확히 이해하지 못해서 생긴문제인거 같습니다.

    정찬명님 덕에 진짜 많이 배우게 또 생각하게 됩니다.

  19. 오현 댓글:

    51번 의
    -부모 요소에 position:relative 속성이 있고 자식 요소가 float된 요소는 형제 관계에 있는 position:absolute 요소를 간헐적으로 화면에 표시하지 않는 버그가 있습니다. 이런 경우 float된 요소와 absolute 요소 사이에 float되지 않은 빈 요소를 추가해서 문제를 해결할 수 있습니다.-
    제가 테스트 해볼때는 빈요소는 ie7의 해결책이고 ie6는 부모의 속성에 zoom:1이 들어갈때만 해결되는거 같습니다.

    그래서 해결책으로는
    -이런 경우 float된 요소와 absolute 요소 사이에 float되지 않은 빈 요소를 추가해 ie7의 문제를 해결하고 부모요소에 _zoom:1을 추가해 해결 할 수 있습니다.-라고 적혀야 맞는거 같습니다.

    제가 워낙 초보다 보니 이런말 드리는게 조심스럽군요.
    한번 체크해 주십시오.

  20. 오현 댓글:

    이런 경우 float된 요소와 absolute 요소 사이에 float되지 않은 빈 요소를 추가해 ie7의 문제를 해결하고 부모요소에 _zoom:1을 추가해 ie6을 해결 할 수 있습니다.

    에구 ie6을 빼먹었군요 ㅜ.ㅜ

  21. 수잔 댓글:

    ^^ 항상 좋은 정보 너무 감사합니다…
    머리속을 정리하고 싶었는데~ 한번에 해결!!!

  22. 고래 댓글:

    몰랐던 것들과 궁금했던 것들에 대해서 한번에 다 풀어주시네요 ^^
    다른 말이 필요가 없네요. 한마디로 ^^b 입니다.

  23. 정찬명 댓글:

    오현님 안녕하세요? 오현님 덕분에 중요한 오류를 수정할 수 있게 되었습니다.
    float을 clear 시키는 문제와 관련하여 IE는 IE 브라우저에만 존재하는 hasLayout 속성이 부여되면 float을 clear 할 수 있는데요.

    zoom 속성은 hasLayout을 유발하는 CSS 속성 가운데 하나일 뿐입니다. zoom 이외에도 display:inline-block, width, height, float, position:absolute 속성이 hasLayout을 유발하는 CSS 속성들 입니다.

    예제에서는 width 값이 포함되어 있었기 때문에 zoom 속성을 제거하더라도 IE 브라우저가 hasLayout 속성을 가질 수 있었고 이점 때문에 float이 제대로 해제가 되었던 것입니다.

    결국 예제에서 width 값을 포함시킨 것은 학습하시는 분들에게 혼동을 유발하므로 제거를 했습니다.

    hasLayout을 유발하는 여러가지 속성들 가운데 유독 zoom 만을 하나의 방법으로 제시한 이유는 다른 속성들은 화면 배치와 관련하여 마음대로 통제할 수 없는 경우가 빈번하게 발생하기 때문입니다.

  24. 손희조 댓글:

    초보적인 질문입니다.
    footer를 프레임으로 나누지않고 인크루드 시킬때
    프레임으로 나눈것처럼 항상 아래쪽에 붙도록 하려면 어떻게 해야하나요?

  25. 정찬명 댓글:

    오현님, 51번 문제도 오현님 말씀이 맞습니다. 예제를 수정해서 다시 올려 두었습니다. 도움 주신 분들의 목록에 오현님의 이름을 포함시켰습니다. 블로그 주소를 알려 주시면 블로그 링크도 걸어드리겠습니다. 원치 않으시면 넣지 않겠구요. ^^ 큰 도움 주셔서 감사합니다.

  26. 정찬명 댓글:

    박중석님 퓨처 웹 포럼 발표 동영상으로 잘 봤습니다. ^^ 감사합니다.

  27. 오현 댓글:

    -display:inline-block, width, height, float, position:absolute 속성이 hasLayout을 유발하는 CSS 속성-

    이 정보 저에게는 대박입니다.

    그리고 아직 블로그 같은거 만들 쌓아둔 지식이 없어서 블로그가 없습니다 ㅠ.ㅠ

    항상 성의것 답변해 주셔서 너무 감사합니다.

  28. 아름이 댓글:

    @손희조님께
    #footer { position: fixed; bottom: 0; left: 0; }
    을 기본으로 원하시는 틀로 맞춰가보세요^.^; position은 고정, 위치는 bottom(밑)에서 0, left(옆)에서 0이라는 간단한 스타일부여입니당. #footer는 임의로 제가 넣은 것이고, 인크루드할 footer를 감싸는 녀석을 적어주세요~~

  29. 정찬명 댓글:

    손희조님, 안녕하세요? #footer를 항상 하단에 붙이는 방법은 html, body 요소에 height:100% 속성을 부여하고 #footer 요소에 position:absolute 속성을 부여하면 가능합니다.

    html,
    body{ height:100%;}
    #container{ position:relative; min-height:100%;}
    #footer{ position:absolute; bottom:0;}

    한편 IE 6 브라우저는 min-height 속성을 지원하지도 않고 실제로 #container 상자의 높이가 100%로 유지되는 것은 아니지만 희한하게도 #footer는 항상 페이지 하단에 붙지요.

    #container 요소는 #footer 요소의 부모 요소 입니다.

  30. 정찬명 댓글:

    아름이님 설명 감사합니다. 그런데 아름이님의 코드는 콘텐츠가 화면(View Port)보다 작을 때에는 유용한 방법이지만 콘텐츠의 높이가 화면보다 커지게 되면 콘텐츠과 #footer가 겹치는 방법 아닌가요? ^^

  31. dauby 댓글:

    정말 궁금해 하던 내용들이 많이 정리되어있어요. 역시 ^^b
    참 질문이 있는데 브라우저에서 doctype 종류별로 돌려가며 확인할 수 있는 애드온이나 활용할 수 있는 툴이 있을까요??

  32. 정찬명 댓글:

    dauby님 안녕하세요? 웹 브라우저 디버거(파이어버그, 개발자도구..)가 현재 열린 웹 문서의 HTML/CSS를 수정할 수 있는 기능이 있지만 DTD만큼은 수정이 불가합니다.

    DTD를 바로 바꿔주는 도구는 없는 것으로 알고 있구요. 직접 문서를 수정하는 방법으로 테스트 하셔야 할 것 같습니다.

  33. dauby 댓글:

    아그렇군요 감사합니다 ^^

  34. KevinCharis 댓글:

    아주 훌륭한 가이드네요. ^^

  35. 아름이 댓글:

    정찬명님 ㅎ.ㅎ; 프레임셋을 이용해 프레임 나뉜 것처럼 보이게 하시길 바라는 것 같아서,,
    fixed와 bottom:0으로 최하단에 고정한 후,
    내용이 많아지면 footer와 contents가 겹쳐질 우려가 있지만,,
    저같은 경우는 contents 하단에 footer의 높이만큼의 패딩이나 마진을 주는 식으로 쓰고 있습니당;…그렇게 하면 최하단까지 스크롤시에 footer가 contents의 최하단 밑으로 보여지지 않나요? @.@;

  36. 정찬명 댓글:

    아.. 지금 보니 제가 손희조님의 질문을 잘못 이해를 했군요.
    프레임을 나눈 것처럼.. 이 부분을 ㅜㅜ 생각 못했어요.

    그렇다면 아름이님이 말씀하시는 것과 같은 방법이 유효하죠.
    IE6는 position:fixed 값을 지원하지 않는데 이건 어떻게 처리하시나요?

    집에는 IE6가 없어서 테스트를 못하고 있네요.
    언더바 핵을 써서 _position:absolute 속성을 추가하면 될까 모르겠어요.
    테스트 한번 해보시고요. 되면 좋구. 안되면 다른 방법 찾아 봐야죠 뭐.

  37. 박순철 댓글:

    우아~~~ 저 같은 초보에게는 보석같은 자료입니다.

    너무 고맙습니다~ ^^

  38. 좋은날 댓글:

    … 요소의 의미와 사용법을 알려주세요.~
    을 사용하면 서버로 버튼 값이 전송되지 않지만
    을 사용하면 서버로 값이 전송하는 것으로 알고 있습니다.

  39. 정찬명 댓글:

    좋은날님 꺽쇠를 [괄호]로 바꿔서 다시 한번 부탁드릴께요. ^^

  40. dauby 댓글:

    14번에서 clear:both; display:block; 을 동시에 써준데에는 어떤 논리가 적용된지 궁금합니다. 실제 해보면 둘중이 하나만 있을경우 제대로 작동되지 않는다는 걸 알수는 있지만 ‘그냥 그런거야’ 하고 외우기 전에 같이 있어야만 하는 분명한 이유를 알 수 있다면 더 기억하기 쉬울 것 같습니다. :8^)

  41. 정찬명 댓글:

    dauby님, clear 속성은 블럭 요소에만 적용되는 속성이라서 그렇습니다. ^^ 생성된 텍스트가 인라인이었고 이것을 블럭 요소로 바꾼 다음에 clear 해주는 것이죠.

    clear 속성에 관한 더 자세한
    http://trio.co.kr/webrefer/css2/visuren.html#propdef-clear

  42. 초식동물 댓글:

    와… 마침 프로젝트가 연기돼서 조금 짬이 나는데, 열심히 정독해야겠네요^^

    감사합니다~!!!!

  43. 로미스 댓글:

    17.이미지에 포함된 텍스트의 양이 너무 많습니다. 어떻게 처리하죠? 에서 longdesc 대신 IR 기법을 사용해도 될까요? 접근성 측면에서 어떨까요?

  44. 정찬명 댓글:

    IR 기법이 장애인 접근성 측면에서는 문제가 없지만 다양한 환경에서 문제가 전혀 없는 것은 아닙니다. 예를 들면 모바일 환경에서 이미지를 끄고 접근하는 경우에는 화면에 아무것도 출력되지 않겠구요. 또 인쇄할 때 기본적으로 배경이미지를 인쇄하지 않기 때문에 아무것도 출력되지 않는 단점이 있습니다.

    따라서 이미지에 포함된 텍스트의 양이 너무 많은 경우 IR기법을 권장하지는 않습니다.

    longdesc 속성 또한 모바일 환경에서 이미지를 끄는 경우 노출되지 않는 것은 마찬가지 이긴 하나 최소한 alt 속성을 함께 사용해서 이미지를 설명하고 있기 때문에 IR 기법보다 더 유니버설한 방법이라고 설명 드릴 수 있겠네요.

    만약 IR 기법을 사용하신다면 최소한 인쇄용 스타일 시트를 추가로 작성해서 인쇄할 때에는 텍스트가 출력될 수 있도록 고려해야 하겠습니다.

    인쇄용 스타일 시트는 이렇게. ^^

    @media print {
    #imageReplace { … }
    }

  45. 오현 댓글:

    정찬명님 제가 베트남에 있습니다.

    베트남에 있으면서 베트남의 잘못된 웹디자인을 보면서 아쉬운 부분이 많았었는데
    이 내용을 베트남어로 번역해서 돌리면 도움이 되지 않을까 싶어
    번역을 시키고 있는 중입니다.

    번역하는 사람이 웹쪽과 관련이 없는 사람이다 보니 힘들어 하는 부분도 있고
    그런 이유로 번역이 끝난 내용이 틀린 부분도 좀 있겠지만
    그래도 도움이 될거 같아 작업중입니다.

    출처는 베트남어로 한국의 정찬명님이 만들었다고 꼭 넣어 드릴테니
    베트남어로 뿌리는 것을 허락해 주십시오.

    당연히 반가워 하실줄 알고 작업은 오래전에 시켜뒀습니다. ^^&

  46. 정찬명 댓글:

    우와~ 세계로 뻗어가는 나라디자인 인가요? ㅎㅎㅎ. 당연히 허락하고 말구요. 정말 멋진일 하시네요. 감사합니다. ^^

  47. mihee 댓글:

    와~ 오현님 멋지십니다 +_+)!!

  48. 플모 댓글:

    ^^ 넘~~ 감사드립니다

  49. 이지선 댓글:

    항상 좋은정보 감사드려요~

  50. 마약 댓글:

    먼저 “오현”님 박수를 드리고 싶습니다. _ _;; (꾸벅)

    IR기법의 문제점은, 본의가 아니든..이든 간에 이미지가 출력되지 않을때 제공할 수 있는 대체내용이 없다는 거예요. 이번 스크린리더 세미나에서 IR기법을 사용하는것이 좋은 방법중 하나라고 들었는데요. IR기법을 사용하려면 텍스트를 보이지 않는 저 어둠의 동굴속끝으로 날려버려야 되지 않나요? 물론 시각장애인들은 음성으로 들을수는 있지만, 일반유저들은 이미지가 로드되지 않으면 내용을 알 수가 없잖아요…
    그래서 IR기법도 별로 좋은 방법이 아니라고 개인적인 의견이 판단을 했습니다.^^;

    예전에 어떤 분께서 제시한 방법중, 텍스트를 이미지 밑에 깔아버리는 방법이 있었는데…
    예를들어 이미지를 p태그로 감싸고, [p][img /][span]대체텍스트[span][/p]
    이미지 밑에 대체 텍스트를 숨겨버리고, span에 대체 텍스트를 제공… 넘치는 부분은 p에서 오버플로 스크롤 등의 처리…
    이미지가 로드되지 않아도 대체 텍스트를 제공받으며, 스크린리더의 낭독 기능도 가능케 합니다.
    물론 절차가 복잡하여 업무효율은 떨어지지만, 전부 이렇게 쓸 것은 아니고…longdesc도 그닥 좋은 방법은 아니라는걸 고려하여 이런 방법을 생각해 봤는데요.
    이미지를 잘게 쪼개면 안되는 경우일때에만 이런 방법을 쓰는건 어떨까 싶습니다.

    익스에서 포지션 버그도 유발할 수도 있으므로, 물론 그 부분도 피해서 해야겠죠^^;;

    이런건 혹시 문제가 되지 않을지…조언좀 구할 수 있을까요 ㅎㅎ;;

  51. 정찬명 댓글:

    마약님, 안녕하세요?

    IR 기법의 문제점에 대해서 정확하게 알고 계시고 적절한 대안을 가지고 계시네요. 제가 딱히 조언을 드릴 수 없을만큼 잘 알고 계셔서 생각하신것을 그대로 실천하시면 되겠네요. ^^

    대안으로 생각하고 계신 방법이 딱히 문제라고는 생각하지 않습니다. 다만 상황에 따라서 공간의 제약 때문에 이 대안이 언제나 완벽한 해결책이 될 수는 없겠지요.

    결론은 마약님이 말씀하신 대로 IR 남용말고 꼭 필요한 곳에 선별해서 사용하자 랄까요. ^^

    longdesc와 관련하여 긴 대체 설명으로 보다 더 권장하는 것은 사실입니다.
    그러나 longdesc 대신 IR을 사용했다고 해서 접근성이 떨어지거나 없다고 단적으로 말 할 수도 없습니다. 왜냐하면 IR로 처리된 텍스트는 일단 화면 낭독기에서 접근이 가능할 것이고 인쇄시, CSS 제거시 출력되도록 고려해서 처리한다면 전혀 문제가 없다는 거죠.

  52. 마약 댓글:

    ^^언제나 보석같은 답변 정말 고개숙여 감사드립니다. ㅎㅎ _ _; 꾸벅~

  53. huno 댓글:

    onclick에 대한..
    접근성 마크를 획득하려고 하는데.. onclick을 썼을경우 꼭 onkeypress=”” 를 써줘야하나요
    안쓰자니 kado 자동검사에서 걸리고..
    쓰자니.. onclick만으로도 충분히 접근이 가능한데 저 빈태그를 꼭 넣어야하나 생각이들고..
    넣어야할까요?

  54. 정찬명 댓글:

    huno님 안녕하세요? onclick 은 마우스 클릭과 키보드 Enter 입력을 모두 받기 때문에 onkeypress를 병행 표기할 필요가 없고 오히려 병행 표기 했을 때 Tab키의 접근에 의해 상황이 발생하게 되므로 병행 표기하지 않아야 합니다.

    KADO-WAH의 경고는 잘못 구현된 낡은 지침에 의한 것으로 무시해야 합니다. 만약 단순히 KADO-WAH 경고가 뜨지 않도록 하기 위함이라면 onkeypress를 동시에 표기하되 onkeypress 속성의 값은 비워 두시면 됩니다.

  55. 이은경 댓글:

    정말 최고중의 최고입니다.

    실무에 있으면서도 정말 답답하고 어려웠던 점들을 하나하나 알아가는 이 기분…^^

    감사합니다. 꾸벅 _–_

  56. 장세영(Se0) 댓글:

    헉, 정말 보물같은 자료네요^-^!!

  57. 김종호 댓글:

    너무 유용한 자료네요
    다른분들도 열심히 정리하셔서 올린 자료겠지만
    너무 정리가 깔끔하고 이해가 쉬워서 길이 남을 자료가 되겠네요~

    현재 제가 다니는 회사의 사이트가 예전 테이블로 짜여져 있어서 일단 메뉴등 디자인 약간을 수정하고 테이블을 웹표준에 맞추어 수정을 해야 하는데 사이트가 한두개도 아니고 머리터지겠네요 ㅎㅎㅎ

    하지만 이 자료 보면서~ 열심히 해야죠~^^?

    정말 국보급 자료네요 잘 소장하고 프린트해서 항상 끼고 다녀야겠어요^^
    소중한 자료 감사합니다~

  58. 정찬명 댓글:

    김종호님 힘내세요! 국보급으로 격상시켜 주셔서 감사합니다. ^^

  59. 엄브로 댓글:

    항상 좋은 정보 얻고 있습니다
    css관련해서 한가지 궁금한 사항이 있는데요
    gnb에 다수의 메뉴가 포함되는 사이트를 구축할때 header 파일을 include하여 전체 사이트에 사용하고 각각의 메뉴에 사용되는 css파일을 따로 제작해둔 경우 header 파일내에 css파일을 어떻게 불러와서 사용하해야 하나요? 정찬명님 블로그 어딘가에서 관련정보를 본 적이 있는거 같은데 제가 못찾는건지 다시 찾으려고 하니 안보이네요.

  60. 정찬명 댓글:

    엄브로님 안녕하세요?
    물론 페이지마다 다른 CSS 파일을 불러와도 원하시는 효과를 거두실 수 있죠. 그런데 질문을 가만히 살펴보니 그 방법을 몰라서 질문하신것 같지는 않구요. 제 기억에 CSS를 페이지별로 다르게 불러오는 팁은 공유드린적이 없는것 같습니다. ^^ (혹시라도 발견하시면 신고좀 ㅡㅡ)

    저라면 이렇게 하겠습니다.
    http://naradesign.net/open_content/reference/navigation/

    Firebug를 켜시고 메뉴를 눌러보시면 ul#gnb 요소에 클래스 값이 동적으로 변하는 것을 확인하실 수 있습니다. 예제에서는 자바스크립트로 처리했지만 저 클래스 값을 서버측 스크립트로 출력하면 원하시는 효과가 가능할껍니다.

    저는 저것을 동적 클래스라고 부르고 있는데요. 저렇게 ul에 넣을 수도 있고 보다 상위의 요소에 넣을 수도 있습니다. 전자의 장점은 #gnb 라는 UI 자체가 독립적으로 존재하기 때문에 재 사용성이 높다는 점이구요. 후자의 장점은 #gnb 이외에 다른 요소들의 스타일도 한꺼번에 동적 클래스를 이용하여 바꿀 수 있다는 점이겠지요.

  61. 낭망백수의 생각…

    웹 UI 에 대해선 왠지 왕도가 있는 것 같음….

  62. zerochan 댓글:

    ㅋㅋㅋ 찬명님 딴지 하나

    (X)
    (O)

    –>

    (X)
    (O)

  63. zerochan 댓글:

    ㅋㅋ 유의사항을 읽지 않고 썼네요;;;
    제차 딴지 함 걸어봅니다. ^^ 역시 좋은 글 잘봅니다.
    다른 태그였으면 그냥 넘어가는건데 ㅎㅎ input인 관계로 ㅋㅋ;;

    생략 금지
    HTML은 속성의 값에 대한 단축 표기를 허용했지만 XHTML은 단축 표기를 허용하지 않습니다.
    [input type=”radio” checked] (X)
    [input type=”radio” checked=”checked”] (O)

    –>

    [input type=”radio” checked] (X)
    [input type=”radio” checked=”checked” /] (O)

  64. 정찬명 댓글:

    zerochan님 감사합니다. 아주 기본적인 문법을 실수 했네요. ㅡㅡ; 예리한 눈썰미 최고세요! ㅎㅎ

  65. Nes 댓글:

    감사합니다. 많은 도움이 되었습니다~^^

  66. 윤군 댓글:

    저 궁금한 내용이 있어서요~
    제가 이제 막 퍼블리셔를 시작하는 사람이라서요..
    display:none 을 사용하는 대신에 overflow:hidden 을 사용하는게 낫다고 하셨는데..
    이것 말고도..
    text-indent를 사용해서 화면밖으로 날려버리는 것은 문제가 될까 해서요…

    낭독기프로그램을 가지고 있는것도 아니라 이렇게 해도 읽을 수 있지 않을까요?

  67. 정찬명 댓글:

    윤군님 안녕하세요?
    네, text-indent를 사용해도 읽을 수 있습니다. ^^

  68. Wise 댓글:

    찬명님 궁금한게 있는데요
    img 테그에서 ~ width와 height 의 값을 테그 안에 넣으면 속도적인 향상이 있다는 말을 들은거 같은데요(사실 여부는 모르겠습니다;;)
    많은 사이트들이 넣지 않는 이유가 있다고 생각합니다.~ 이 부분에 대한 글을 못찾아서 그런데 아시는부분좀 알려주셨으면 ^^;

  69. 정찬명 댓글:

    @Wise
    img 태그에 w/h 값을 넣으면 표시 속도가 빨라지는 것은 사실로 알고 있어요. 한편 같은 자리에서 표시되는 이미지들이 동적으로 항상 갱신이 되고 이미지의 크기가 일률적으로 같지 않은 상황에서 w/h 값을 생략하는 대신 CSS로 이를 제어하려는 경우가 있습니다. 이 때 w/h 값을 생략하는것 같구요. CSS로 w값만 지정하게 되면 h값은 브라우저가 알아서 표시해 주기 때문에 이미지 비율이 어떻게 달라지더라도 알아서 잘 표시가 되는 효과가 있죠. 속도 측면에서는 아무래도 w/h 값을 모두 적어주는 것보다 느릴 수 있겠으나 최근의 PC 또는 브라우저 성능을 감안하면 그다지 중요한 이슈로 떠오르지는 않는것 같습니다.

  70. Wise 댓글:

    앗 답변감사합니다~ ~

  71. Un-i-que 댓글:

    MSIE 전용 속성 zoom을 파서 교란이나 혼동 없이 나타내기 위해서라면, *zoom이라고 쓰기보다는 -ms-zoom이라고 써 주는 게 좋을 것 같습니다. http://msdn.microsoft.com/en-us/library/ie/ms531189(v=vs.85).aspx

  72. 정찬명 댓글:

    @Un-i-que
    -ms- 접두사는 IE 6~7 브라우저에서 해석하지 않는 문제가 있습니다. 그리고 IE8 브라우저에서는 zoom 속성이 필요 없는 경우가 대부분이구요. 결국 * 표시를 붙인것은 안전하게 IE 6~7 브라우저에서만 해석하도록 하는 효과가 있습니다.

  73. 호영 댓글:

    좋은자료 정말 잘보고 갑니다.
    진작 봤으면 더 좋았을것을.. 이제라도 본게 다행이라고 생각해야겠죠^^

  74. 문경태 댓글:

    저… 저의 방법이 맞는지 모르겠는데요…
    14번에 컬럼구조

    .container {display:inline-block;} 라고 넣어 주면 그냥 자동으로 알아서
    매번 글만 읽다가 댓글이라도 하나 남기는게 예의 같아서^^;

  75. 정찬명 댓글:

    @문경태
    inline-block 속성이 float 처리된 자식 콘텐츠를 제대로 표시하는 부모 요소를 만들어주기도 하는데요. IE 6, 7 브라우저는 block 요소에 inline-block 속성이 적용되지 않는 버그가 있습니다. 그리고 inline-block 으로 설정하면 표준 브라우저는 너비 값이 자식 콘텐츠 너비에 따라서 수축이 되어 새로 너비를 지정해 주어야 하구요. inline-block 요소는 상자 우측 끝에 4px 정도의 공백 문자가 생성되기 때문에 정확하게 px 그리드를 형성해야 하는 경우에 적합하지 않아서 정교한 레이아웃을 작성하려는 경우 권장하지 않는 방법입니다. 물론 이런 단점들을 커버할 수 있거나 무시해도 좋은 경우라면 사용할 수 있겠지요. ^^

  76. 강대한 댓글:

    정말 많은 도움 받고 갑니다.~~

    감사합니다~ ^^

  77. parksh 댓글:

    기본적으로 알아야 하는 내용 정리가 정말 눈에 쏙!

    감사합니다!

댓글 쓰기

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

필수 아님

필수 아님