실전 UI(HTML/CSS)개발 가이드

유니버설 디자인을 위한 실전 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 요소를 표시하지 않는 버그가 있습니다.

출처 http://naradesign.net/open_content/lecture/wp/