웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드.
Posted by kimdirector | 2009.09.15 | Hit : 1343
UI 디자인
목록보기이전보기
아래 내용은 나라디자인 블로그을 운영중이신 정찬명님의 블로그에서 펴온 글입니다.
익히 잘 아시는 분들도 계시겠지만, 너무 좋은 내용들이 있어 공유합니다.
디자이너든, 개발자든 한번쯤 읽어보시면 좋을 듯한 내용들이 많습니다.

올해 하반기에 해야 할 일들이 많이 쌓여 있었습니다. 강의, 책, 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>을 사용하더라도 참고 제목 <frame title="*" /> 속성을 이용해서 현재 문서를 설명해 주면 되는것 아닌가요?
  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 요소를 표시하지 않는 버그가 있습니다.
Posted by kimdirector | 2009.09.15 | Hit : 1343
Origin http://naradesign.net/open_content/lecture/wp/#section51
Tags UI 디자인
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=37

COMMENT
Commented by kimdirector
2009.09.16 10:25:29 X
다운로드 파일을 교체했습니다. 링크가 깨져있었더군요. ^^
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
홈페이지 디자인 로고디자인 kimdirector 소셜 아이콘 디자인 메일폼 인터넷 웹기획 오프라인 이벤트 브랜드 온라인광고 인터페이스 애플 UI Parallax 두리하나 애니메이션 레이아웃 셀렉트박스 다운로드 웹표준 Draft 기획자 iOS 로고 목업툴 개발자 디자이너 설명회 반응형 웹디자인 에버노트 웹사이트 웹디자인 이메일 CIP 폰트 고객 제안서