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 요소를 표시하지 않는 버그가 있습니다.

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

여러분은 대학시절 어떤 동아리 활동을 하셨나요? 저는 생긴것 답게 ‘독서토론동아리’에서 활동했었습니다. 작년 연말 팀 내에서 ‘가장 책을 많이 읽을 것 같은 사람’으로 지목되기도 했었는데 이것이 ‘생긴것 답게’의 증거라고 치죠.(주의:생긴것과 실제 다독률의 현저한 차이) 대학시절에는 책이 너무 좋아서 동아리에 가입했다기 보다는 ‘이제 대학생도 되었으니 책도 좀 읽자’라는 의지가 있었는데요. 기대만큼 그 의지는 따라주지 못했지만 그 때 읽은 책들이 인생관에 적지않은 영향을 주었던것 같습니다. 제가 가입한 동아리에서는 ‘사회과학’서적을 주로 읽었습니다. 특히 유물론을 알기 쉽게 풀어쓴 책들을 재미있게 읽었죠. 저는 오늘의 포스팅을 위하여 다시 유물론 책을 뒤적거렸고 ‘양질전환의 법칙’이라는 말을 찾아 냈습니다. ‘질적인 변화는 양적인 변화에 의해서만 일어난다’ 라는 것이 바로 ‘양질전환의 법칙’이고 오늘의 팁은 여기서 부터 시작하겠습니다.

저희와 같은 직군에서 근무하시는 분들은 HTML/CSS 편집도구(드림위버, 에디트플러스…)를 하루중 얼마나 다루실까요? 하루종일 옆에서 시간을 측정하면서 지켜본 적이 없으니 정확히 알 수는 없지만 추측해 보면 하루중 절반이 넘지 않을꺼라고 생각합니다. 메일 읽어야죠. 성실하게 답장 해야죠. 구두로 대화를 하거나 회의에도 참석 해야죠. 포토샵도 다뤄야 하구요. 어떤 HTML 엘리먼트와 CSS 기법을 사용해야 하는지 창의적인 고민도 해야하고. 4대 브라우저에서 렌더링 테스트도 해야하고. 렌더링된 화면은 디자이너의 시안과 일치하는지 일일이 대조도 해야 하구요. 커피 마시고 담배 태우고 밥도 먹어야죠. 이런 시간들을 제외하고 남는 시간이 편집기를 다루는 시간이 되겠죠. 따라서 저는 하루중 8시간을 근무하지만 실제로 편집툴을 다루는 시간은 4시간 미만일 것으로 추정 하고 있습니다. 이 4시간동안 편집툴을 사용하는 개발자들의 작업 효율은 과연 비슷할까요?

제가 처음 드림위버의 단축키를 과도하게(?) 사용하기 시작한 계기는 위와같은 질문으로부터 시작되었습니다. ‘단순한 작업을 빠르게 처리하면 보다 창의적인 일에 시간을 소비할 수 있다’는 생각이었고 소규모 에이젼시에 근무하던 시절에는 정말로 대부분의 일정을 앞질러 나아갔습니다. 남는 시간에는 관련분야의 전문지식을 읽거나 습득한 지식을 블로그에 포스팅 하는 등 ‘생각대로’하면 되었습니다. 지금은 뭐 남는 시간에는 주로 매일같이 올라오는 ‘BTS’를 해결하고 있습니다만. ㅜㅜ (BTS : Bug Tracking System) BTS는 아무리 해치워도 끝이 없네요.(이게 다 IE 때문이야!) 제가 하고싶은 이야기는 여러분이 ‘질적으로 달라지기 위해서는 반드시 양적인 변화가 필요하다’라는 것이고 하찮아 보이는 드림위버의 단축키 활용은 여러분의 성장에 도움이 된다는 겁니다. 드림위버 단축키 활용법 소개하는데 ‘양질전환의 법칙’까지 들먹거리는건 제가 생각해도 참 유별나다 싶지만 제가 도구 사용법만 알려드리면 별로 재미가 없지 않나요?

이제 시작 할께요! 제가 즐겨 사용하는 단축키를 모두 소개해 드릴텐데요. 이러한 단축키들은 드림위버에서 기본적으로 제공하는 것도 있고 제가 만들어 사용하는 것도 있습니다. 제가 만들어 사용하는 단축키는 우측에 ‘사용자 정의’라고 적어두겠습니다.

• 엘리먼트 삽입
  • div : Ctrl+Alt+D (사용자 정의)
  • h1~h6 : ‘Ctrl+1′ ~ ‘Ctrl+6′
  • ul : Ctrl+Alt+Shift+U (사용자 정의)
  • ol : Ctrl+Alt+Shift+O (사용자 정의)
  • li : Ctrl+Alt+Shift+L (사용자 정의)
  • dl : Ctrl+Alt+Shift+F (사용자 정의)
  • dt : Ctrl+Alt+Shift+T (사용자 정의)
  • dd : Ctrl+Alt+Shift+D (사용자 정의)
  • a : Ctrl+Alt+A (사용자 정의)
  • p : Ctrl+Shift+P
  • img : Ctrl+Alt+I
  • strong : Ctrl+B
  • em : Ctrl+I
  • table : Ctrl+Alt+T
  • form : Ctrl+Alt+F (사용자 정의)
  • fieldset : Ctrl+Alt+S (사용자 정의)
• 테이블 편집
  • 테이블 셀 합치기 : Ctrl+Alt+M
  • 테이블 열 삭제 : Ctrl+Shift+’-’
  • 테이블 행 삭제 : Ctrl+Shift+M
• 빠른 이동/선택/삭제
  • 단어 단위로 이동 : Ctrl+방향키
  • 단어 단위로 선택 : Ctrl+Shift+방향키
  • 단어 단위로 삭제 : Ctrl+BackSpace, Ctrl+Del
• 주석 삽입
  • HTML 주석 삽입 : Ctrl+Alt+C (사용자 정의)
  • CSS/JS 주석 삽입 : Ctrl+Alt+Shift+C (사용자 정의)
• 코드 접기/펼치기
  • 코드 짝 맞추어 접기 : Ctrl+Shift+C (사용자 정의)
  • 선택한 코드 펼치기 : Ctrl+Shift+E
• 코드 자동완성 : Space, Ctrl+Space
• HTML Validation 검사 : Shift+F6
• 디자인뷰/코드뷰 전환 : Ctrl+`
• 열린 탭간 이동 : Ctrl+Tab

제가 즐겨쓰는 단축키는 모두 30개 정도이고 직접 만들어서 활용하는 ‘사용자 정의 키’는 13개 로군요. 보시면 아시겠지만 빈도 수가 높은 엘리먼트는 모두 단축키를 할당해서 삽입하고 있으며 직접 타이핑 하는 것은 거의 속성 뿐인데 이마저도 자동완성 기능을 사용합니다. 이것이 바로 제가 현재의 콘텐츠를 마크업하기 위한 최적의 구조를 고민하고 창의적인 CSS 기법에 보다 많은 생각의 에너지를 투자할 수 있는 비법 입니다. 한 순간에 모두 외우려고 하기보다는 필요할 때 마다 하나씩 순차적으로 셋팅하면서 머리보다 손으로 익히시는 것이 효과적 입니다.

사용자 정의 단축키 셋팅은 이렇게 하세요!

File > Keyboard Shortcuts. 키보드 단축키 대화상자를 엽니다. 

Current set > Duplicate set. 드림위버의 기본 단축키 셋에 대한 사본을 만듭니다. 

Name of duplicate set. 단축키 사본의 이름을 작성 하시구요. 

Commands. 단축키를 설정하고 싶은 명령을 찾아낸 다음 나만의 단축키를 만듭니다. 

만약 원하는 명령이 어디 숨어 있는지 찾기 어렵다면 Export set as HTML 명령으로 현재 설정된 기본 단축키 목록을 HTML 파일로 내보내기 하세요. 

누구나 쉽게 따라할 수 있고 매우 적은 노력으로도 ‘양질전환의 법칙’을 실천할 수 있는 팁이 아닐까요?

한글 주석 달았는데 열어보니 깨져있고…

이런 케이스는 문서 저장할 때 EUC-KR 인코딩으로 저장한 다음, 드림위버의 새문서 열기 형식을 UTF-8 으로 설정해 놓고 EUC-KR 으로 저장한 문서를 열 때 발생합니다.

하지만 CSS 문서에 아래와 같은 형식으로 문서 인코딩 형식을 제대로 명시해 주면 깨지지 않습니다. CSS 문서 첫줄에 공백 없이 입력 합니다.

@charset "euc-kr";
@charset "utf-8";

직접 타이핑 하기 귀찮죠.

단축키 Ctrl+J 키를 누르면 현재 문서의 Document Encoding 을 바꿀 수가 있습니다. 그럼 캐릭터셋 정의문구가 삽입되고 문서 저장할 때 인코딩 형식도 그에 맞게 바뀝니다.

방향키를 이용하여 입력커서를 좌우로 이동시킬 때는 보통 한 글자씩 옮겨갑니다. 좀 더 빨리 이동 시키려면 이렇게 해보세요.

Ctrl + 좌/우방향키

단어 단위로 입력커서를 옮길 수 있으며 기존의 방법보다 대략 3~5배정도 빠르게 옮길 수 있습니다. 뭐 이딴 팁이 다 있습니다. ^^

웹 표준 준수 방법

(X)HTML&CSS 유효성 검사, 웹 접근성 향상, Cross Browsing Check

1. DTD 관리 : DTD Setting & DTD Switching 기본 DTD 설정 및 DTD 전환하기
2. 접근성 대화상자 : Accessibility Dialog Box 접근성 속성 대화상자의 사용
3. (X)HTML 유효성 검사 : (X)HTML Validation Check (X)HTML Markup 표준 문법 검사
4. CSS 유효성 및 Cross Browsing 검사 : CSS Validation & Cross Browsing Check CSS 유효성 및 브라우저 호환성 검사
5. 웹 접근성 검사 : Accessibility, WCAG 1.0 & Section 508 WCAG 1.0 및 Section 508 검사

CSS 관리 기법

숙련도 및 선호에 따른 CSS 관리방법, 대표속성 사용, 미디어타입 설정

1. CSS 대화상자 : CSS Dialog Box 대화상자를 이용하여 CSS 코딩하기
2. CSS 속성패널 : CSS Properties Panel 속성패널을 이용하여 CSS 코딩하기
3. CSS 코드뷰 : CSS Code View 코드뷰를 이용하여 CSS 코딩하기
4. CSS 대표속성 : CSS Shorthand Properties 대표속성으로 코딩하기
5. CSS 링크 & 가져오기, 미디어 타입 설정 : CSS Link & Import, Media Type Link 와 Import 그리고 Media Type 설정하기

코딩의 기술

코딩 속도 개선 및 코드 품질 향상 기법

1. 코드 자동 완성 : Code Hints 코드 자동완성(Space, Ctrl+Space)기능
2. 빠른 태그 편집 : Quick Tag Editor 빠른 태그 편집(Ctrl+T) 기능
3. 단축키의 확장 : Keyboard Shortcuts 필수 단축키와 단축키의 최적화
4. 삽입 메뉴 관리 : Insert Panel Favorites 삽입 메뉴 최적화
5. 코드 관리 : Code Management 코드의 정렬(Source Formatting, Tag Library)

이 워크샵에 참석했던 분들 중(또는 누구라도) 제게 추가 질문이 있으시거나 강연장에서 원하는 답변을 얻지 못한 경우 아래 댓글쓰기를 통하여 다시 질문해 주세요. 24시간 이내에 답변 드리겠습니다.

한동안 주변분들이 ‘책 썼다면서 왜 안나오냐’ 고 물어보실 때에는 정말 쥐구멍에라도 들어가고 싶은 심정이었는데 이렇게 늦게라도 나와주니 참 다행이네요. 인쇄 직전에는 몇몇 잘못된 표현을 발견하여 수정하기도 했는데 책이 나오면 다시한번 쭉 읽어보고 자아비판을 좀 해야할 것 같습니다.

여하튼 ‘드림위버+웹 표준+웹 접근성’ 이라는 세 마리 토끼를 죄다 잡으실 분들은 한번 구입해서 봐주세요. 이런 책은 국가에서 밀어줘야 하는것 아닌가 싶지만.ㅎㅎㅎ. 사실은 좀 부끄럽구요. 그럼에도 불구하고 책 소개 올립니다.

자기 책 광고하면서 이래도 되나 싶지만 웹 표준과 접근성 관련하여 우선 추천하고 싶은 책은 제가 예전에 소개한 적이 있는 이것 입니다.

제가 쓴 책은 드림위버라는 도구를 이용하여 웹 접근성 지침들을 지켜내고 이해하고 또한 업무 효율을 높일 수 있는 측면들을 곁들였다고 생각하시면 맞습니다.

곧 드림위버의 차기버전인 CS3가 등장(올해 상반기 예상)하지만 드림위버8과 드림위버CS3의 버전간 차이는 미미하고 인터페이스도 동일하기 때문에 향후 등장할 CS3 버전을 사용하시는 분들이 참조하기에도 전혀 무리가 없다는 점을 알려드립니다. 즉, 드림위버의 CS3 버전업을 고려하더라도 CS3의 차기버전이 다시 등장하기 전까지(향후 1~2년간)는 더 보셔도 된다는 뜻입니다.

책에 대하여 더욱 자세히 알고 싶으신 분들은 정글프레스 출판사의 책소개 및 구매하기 페이지를 참조하세요. 영업 끝.

새로운 CSS 규칙을 생성할 때 대표속성 사용하기.

대표속성은 여러가지 유사 속성과 값을 하나의 속성에 몰아서 정의하는 방식 입니다. 대표속성을 사용하면 CSS 코드의 분량을 획기적으로 절감할 수 있습니다. 아래 예제는 대표속성을 사용하지 않았을 때와 대표속성을 사용했을 때의 극단적인 예를 보여 줍니다. 1px 짜리 회색 보더를 가진 상자를 표현하는 코드로서 첫 번째 예제와 두 번째 예제는 동일하게 렌더링 됩니다. 이미 말씀드린 대로 다소 극단적인 예제 이지만 이 코드를 보면 대표속성을 왜 사용해야 하는지 확실한 동기가 부여 됩니다.

#ex1 {border-top-width:1px; border-top-style:solid; border-top-color:#CCC; border-right-width:1px; border-right-style:solid; border-right-color:#CCC; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#CCC; border-left-width:1px; border-left-style:solid; border-left-color:#CCC; }

#ex2 {border: 1px solid #CCC;}

이제 본론으로 들어가서 드림위버의 CSS 환경설정을 들여다 보도록 하겠습니다. 아주 쉬운 문장임에도 영어로 되어있어서 저조차도 읽기가 불편하네요. /*한글 번역*/ 해 드렸습니다.

• When creating CSS rules: /*CSS 규칙을 생성할 때*/
  • Use shorthand for: /*~에 대한 대표속성을 사용함*/
    • Font /*폰트*/
    • Background /*배경*/
    • Margin and Padding /*마진 & 패딩*/
    • Border and border width /*보더 & 보더 두께*/
    • List-Style /*목록*/

이 부분은 CSS 규칙을 생성할 때 대표속성을 사용할 것인지에 대하여 설정하는 부분입니다. 대표속성으로 코딩이 가능한 CSS 속성으로는 ‘font, background, margin, padding, border, list-style’ 이 있습니다. 나머지 속성들은 대표속성이 필요 없거나 지원하지 않습니다. 대표속성이 무엇인지 간단하게 살펴보는것도 나쁘지 않겠네요. 이미 대표속성을 알고 있는 분들은 ‘대표속성의 종류와 규칙’ 에 관한 설명을 건너뛰기 하시고, 하나라도 놓치고 싶지 않은 분들은 꾸준히 읽어내려 가십시오. 대표속성을 사용하려면 ‘Use shorthand for’ 항목에 전부 체크 하시면 됩니다.

아래 목록은 CSS의 ‘대표속성 및 각개속성’ 입니다. W3C 표준 가운데 주요 브라우저(IE, FF, OP)에서 지원하는 속성만 간추렸습니다. 특히 font 에 대한 대표속성을 사용할 때에는 몇가지 주의사항이 있으므로 이를 유념하지 않으면 원하는대로 렌더링 되지 않습니다. 주의깊게 확인하시기 바랍니다.

‘font’ 대표속성 규칙.

• ‘font’ 는 아래 속성을 대표 합니다.
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

‘font-size 와 font-family’ 에 밑줄 쫙 친 이유가 있습니다. ‘font’ 에 대한 대표속성을 정의 할 때 주의할 점은 다음과 같습니다.

1. ‘font-size 와 font-family’ 는 반드시 정의 되어야 한다.
2. ‘font-size 와 font-family’ 는 반드시 그 순서를 지켜야 한다.(잘된 예: ’small dotum’, 잘못된 예: ‘dotum small’)
3. ‘font-size 와 font-family’ 는 다른 속성보다 항상 나중에 정의되어야 한다.(잘된 예: ‘bold small dotum’, 잘못된 예: ’small dotum bold’)
4. ‘font-size 와 font-family’ 이외의 속성은 없어도 무방하며 ‘font-size 와 font-family’ 보다 먼저 정의되기만 한다면 더이상 순서에 구애받지 않는다.
5. ‘font-style, font-weight’ 따위를 정의하지 않으면 마크업에서 기본적으로 ‘italic, bold’ 체로 표현되는 서체에 ‘normal’ 스타일이 적용된다. (예: ‘font-style’ 을 정의하지 않으면 ‘em, address’ 따위의 ‘italic’ 속성이 제거되고 ‘font-weight’ 를 정의하지 않으면 ‘h1~h6, th’ 따위의 ‘bold’ 속성이 제거됨.)

라는 점 입니다. ‘font’ 에 대한 대표속성 코딩 규칙에 따르면 최소한 다음과 같은 형식을 가집니다.

#ex1 {font: small dotum;}
#ex2 {font: italic small-caps bold small dotum;}

‘font-size 와 font-family’ 를 반드시 포함하고 있으며 ‘font-size’ 를 먼저 정의하고 ‘font-family’ 를 나중에 정의 하였습니다. 그리고 그것들은 다른 속성들보다 ‘가장 나중에 정의’ 되어 있습니다. 이 규칙을 머리속에 넣기 복잡하다고 생각되시면 ’size & family’ 순이니까 ’si-fa’ 라고 기억하시면 되겠네요. 발음이 좋네요. 욕나오는 것들은 나중에 처리합시다.

‘background’ 대표속성 규칙.

• ‘background’ 는 아래 속성을 대표 합니다.
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

#ex {background: #CCC url(dot.png) no-repeat 50% 50% fixed;}

배경색과 배경이미지를 동시에 설정할 수 있습니다. 이런 경우 배경색이 배경이미지보다 아래쪽에 깔립니다. 그리고 배경 이미지의 반복과 배치는 자유롭게 설정이 가능합니다. 위 예제에서 ‘50% 50%’ 부분은 배경이미지의 x좌표와 y좌표에 대한 값 입니다. x좌표와 y좌표를 설정하는 부분을 제외한 나머지 속성값은 그 순서를 지키지 않아도 무방 합니다.

‘margin’ 및 ‘padding’ 대표속성 규칙.

• ‘margin’ 은 아래 속성을 대표 합니다.
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
• ‘padding’ 은 아래 속성을 대표 합니다.
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

#ex1 {margin: 1em 2em 1em 2em;} = #ex1 {margin: 1em 2em;}
#ex2 {padding: 1em 2em 1em 2em;} = #ex2 {padding: 1em 2em;}

속성 값을 ‘top right bottom left’ 순으로 정의 합니다. 시계방향. 쉽죠? 만약 ‘top’ 과 ‘bottom’ 의 값이 같고, ‘right’ 와 ‘left’ 의 값이 같다면 ‘top, right’ 값만 순서대로 적어주어도 됩니다.

‘border’ 대표속성 규칙.

• ‘border’ 는 아래 속성을 대표 합니다.
  • border-width
  • border-style
  • border-color
  • border-bottom
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-top
  • border-top-color
  • border-top-style
  • border-top-width

#ex1 {border: 1px solid #CCC;}
#ex2 {border: 1px solid #CCC; border-bottom:none;}

박스 네 변의 보더값이 모두 같다면 ‘#ex1′ 형태로 처리할 수 있습니다. 세 변이 같고 하나만 다르다면 ‘#ex2′ 와 같이 처리해도 됩니다. 순서상으로 나중에 정의된 코드가 우선권을 갖는 원리 입니다.

‘list-style’ 대표속성 규칙.

• ‘list-style’ 은 아래 속성을 대표 합니다.
  • list-style-image
  • list-style-position
  • list-style-type

#ex {list-style:url(bullet.png) inside;}

사실상 목록에 블릿을 표현하는 방법으로서 예제와 같이 ‘image’ 속성을 사용하는 것보다는 ‘background’ 를 이용하는 방식이 훨씬 더 많은 표현의 자유를 보장 합니다. ‘list-style’ 은 블릿의 위치를 ‘inside’ 또는 ‘outside’ 밖에 설정하지 못하지만 ‘background’ 는 자유롭게 배치할 수 있기 때문입니다.

지금까지 대표속성의 종류와 대표속성 사용규칙을 간단하게 살펴보았습니다. ‘대표속성의 종류와 규칙’ 에 대하여 리뷰 할 필요가 있는 분들은 위로이동 하시구요. 계속해서 CSS를 위한 드림위버의 환경설정 설명이 이어집니다.

CSS 규칙을 수정할 때 대표속성 사용하기.

• When editing CSS rules: /*CSS 규칙을 수정할 때*/
  • Use shorhand: /*대표속성을 사용함*/
    • If original used shorhand /*원문에서 대표속성을 사용했을 때에만 대표속성 사용*/
    • According to setting above /*상위 설정(CSS 생성 규칙)에 따름*/
    • Open CSS files when modified /*수정될 때 CSS파일 열기*/

CSS 패널을 더블클릭 할 때 ‘대화상자 or 속성패널 or 코드뷰’ 에서 편집하기.

• When double-clicking CSS panel: /*CSS 패널을 더블클릭 할 때*/
  • Edit using CSS dialog /*CSS 대화상자를 이용함*/
  • Edit using Properties pane /*속성패널을 이용함*/
  • Edit using code view /*코드뷰를 이용함*/

드림위버에서 CSS를 편집하는 방법은 모두 3가지가 있습니다.

디자인뷰, 또는 코드뷰를 통하여 특정 마크업을 선택한 다음 CSS Styles 패널을 보면 그림과 같이 해당 마크업에 적용된 CSS 속성을 보여주는데 이를 더블클릭 하면 사용자가 설정해 놓은 방법으로 CSS 편집이 가능한 상태가 됩니다.

CSS Styles 패널을 더블클릭 했을 때 이렇게 ‘대화상자’ 를 이용하여 편집하는 것을 선호하는 사람이 있고,

아래 그림과 같이 ‘CSS 속성패널’ 에서 편집하는 것을 선호하는 사람이 있는가 하면,

이렇게 ‘코드뷰를 직접 열어서 ‘태그 자동완성기능을 이용’ 하여 편집하는 사람도 있습니다.

제 경우,

1. CSS 코드를 원하는 순서대로 배치하기 위하여.
2. 한 개의 속성에 한 번의 줄 바꿈을 해버리는 드림위버의 CSS 코드 정렬을 싫어하기 때문에.

‘코드뷰를 직접 열어서 태그 자동완성기능을 이용’ 한 편집만 고집하고 있습니다. ‘코드뷰’ 에서의 ‘태그 자동완성기능’ 은 ‘Space’ 또는 ‘Ctrl+Space’ 키를 이용하여 활성화 됩니다.

WCAG 라는 것은 익히 잘 알고 계시는 대로 W3C 에서 권고하는 ‘웹 콘텐트 접근성 지침(Web Content Accessibility Gidelines)’ 에 관한 국제 표준안(WCAG 1.0, 1999.05) 입니다. 웹 접근성이라는 단어를 처음 접하는 사람들은 이 지침이 단지 ‘장애인’ 을 위한 지침으로 오해되기도 하는데 이는 교정되어야 합니다. 장애인 뿐만 아니라 정상인들의 다양한 접속장치(다기종 브라우저, 모바일 및 PC를 포함한 기타 인터넷 접속장치)와 그 밖의 다양한 접속환경(접속속도, 장애유사환경 등)을 고려한 지침으로서 소수를 위한 웹이 아닌 보편적인 웹문서를 작성하기 위한 지침인 것입니다. 이를 준수하는 것이 모든 인류와 장치를 위한 국제적인 표준임을 다시한번 강조 합니다. 이해를 돕기위해 간단한 예를 하나 들면 이렇습니다.

접근성 지침의 하나로서 텍스트로 되어 있지 않은 비텍스트콘텐츠(이미지, 플래시 등)에는 반드시 대체문자(음성출력을 지원하는 최소한의 수단)를 입력하도록 되어 있습니다. 이 때 고려되는 음성장치는 단지 시각장애인을 위한 것일까요? 차량용 네비게이션 장치에 인터넷이 연결되어 있고 운전자가 이를 읽을 수 있도록 배려 한다면 어떨까요? 깨알만한 글씨를 그냥 눈으로 읽도록 내버려 둘까요? 요리에 전념하고 있는 주부에게 냉장고가 읽어주는 인터넷 요리법은 어떨까요? 노안이 되어버린 부모님이 구청 웹사이트에서 자신에게 돌아올 복지혜택을 알고자 한다면요? 이들이 장애인은 아니잖아요?

‘웹 접근성, 상호운용성, 장치독립성’ 에 대한 좀더 명확한 정의가 있지만 저는 ‘웹 접근성’ 이 장애인을 위한 개념이라는 데에는 동의하기 어렵더군요. 접근성이라는 개념이 장애인에게 크게 도움이 되기는 하지만 장애인만을 위한 개념이 아니라는 의미 입니다.

Section 508(미국 재활법 508조)

‘미국 재활법 508조’ 는 정보기술활용에 대한 장애인의 차별을 금지하기 위해 1998년 제정되어 2001년 6월 부터 미국 연방정부에 적용되기 시작했습니다. 연방정부에 조달되는 전자 및 정보기술제품에 관한 강제적 법률입니다. 따라서 민간기업이나 지방정부에는 강제적용되지 않고 시민권리에 관한 법률이라기보다는 조달법에 가깝습니다. 하지만 미국의 국가적 입지와 무역통상의 관례에서 볼 때 이것은 범세계적인 규정으로 발전할 가능성이 있습니다.(참조, IABF 현준호)

KWCAG 1.0(한국형 웹 콘텐츠 접근성 지침 1.0)

KWCAG 1.0 (Korean Web Contents Accessibility Guidelines 1.0)은 한국정보통신기술협회(TTA) 민간단체표준으로 확정(2004.12)되었으며 ‘WCAG 1.0′ 과 ‘미국 재활법 508조’ 를 근간으로 하여 국내 실정에 맞게 제정되었습니다. 하지만 그 내용을 자세히 들여다 보면 국제 표준안과 거의 흡사하여 마치 ‘WCAG 1.0′ 지침을 준수하기만 하더라도 ‘KWCAG 1.0′ 에 대한 고려를 별도로 하지 않아도 될 정도 입니다. ‘WCAG 1.0′ 문서는 행정자치부에서 발표한 ‘행정기관 홈페이지 구축운영 표준지침(2005.04)’에 수록되어 있으며 최근의 공공행정기관 웹사이트 구축 RFP(Request For Proporsal, 제안요청서) 문서에는 이를 반드시 지킬것을 명시하고 있습니다. 물론 강제규정(법)이 아니기 때문에 이를 모르거나 아예묵살하는 ‘지방자치단체’ 도 있을 수 있습니다. 하루속히 법률화(강제화) 되어 공공행정기관의 사회적 책임을 다하도록 촉구되어야 합니다. 공공행정기관이 이러한 사회적 책임을 다하지 않는 경우 국민으로부터 소송 당하는 것은 시간문제 입니다.

접근성 지침 준수 프로젝트에 투입된 실무자의 임무

퍼블리셔만 알아서는 안됩니다. 기획자, 디자이너, 퍼블리셔, 프로그래머 모두 상기 지침을 읽어보는 것이 권장됩니다. 접근성 지침에 대한 이해가 없는 기획자나 디자이너가 접근성이 확보된 플래시 메뉴 네비게이션을 만들어 주겠노라고 클라이언트에게 뻥을 치는 난감한 사례가 발생할 수 있다는 것은 충분히 짐작하고도 남습니다. 또한, 접근성 높게 코딩 되어있는 XHTML 문서를 프로그래머가 엉망으로 만들어 놓을 수도 있기 때문입니다. 퍼블리셔는 이 분야에 대하여 가장 높은 이해도를 지니고 있어야 하고 다행히도 드림위버가 이것을 돕습니다. 참, 클라이언트에게 올바른 접근성을 이해시키는 것도 숙제군요. 접근성에 대한 오해(사례1, 사례2)가 생각보다 참 많습니다.

드림위버를 이용하여 ‘WCAG 1.0′ 및 ‘Section 508′ 접근성 검사하기

1. ‘File > Check Page > Check Accessibility’ 항목을 클릭합니다.

   현재 열려있는 페이지의 웹 접근성을 검사합니다.

2. ‘Result > Site Report’ 패널에 ‘Section 508′ 및 ‘WCAG 1.0′ 지침 위반 항목과 수동검사 요구항목이 리스팅 됩니다.

   • ‘?’ 표시는 확인요함. 기계가 검사할 수 없으므로 직접 사람이 수동으로 검사하여야 할 항목 입니다.
   • ‘X’ 표시는 지침위반. 이 항목을 더블클릭 하면 해당 파일이 열리면서 지침에 어긋나는 코드가 반전 됩니다.
   • ‘1.1~14.3′ 표시는 ‘WCAG’ 지침의 항목별 번호 입니다.
   • ‘P1~P3′ 는 ‘WCAG’ 지침의 중요도 입니다. P1은 반드시 지켜야 할, P2는 가급적 지켜야할, P3는 지킬수록 좋은 항목으로서 숫자가 낮을수록 중요도가 높습니다.
   • 더 자세한 내용을 보려면 해당 항목의 ‘콘텍스트메뉴(마우스 우측버튼 활성메뉴)’를 펼친 다음 ‘More Info…’ 항목을 클릭합니다.

3. 지침 위반항목 위에서 콘텍스트메뉴를 활성화 하고 ‘More Info…’를 클릭하면 다음과 같은 설명이 제공 됩니다.

   아래 예제는 CSS 속성의 값으로서 절대단위 ‘in, px, mm’ 대신 ‘%, em’ 과 같은 상대단위의 값을 사용할 것을 지시하고 있습니다. 잘못된 점이 무엇인지, 어떻게 고치는지, 그래서 얻을 수 있는 장점이 무엇인지 친절하게 설명해 주고 있네요. 영어로 설명되어 있지만 비교적 이해하기는 쉬운 편입니다.

4. 사이트 전체에 대한 접근성 검사를 진행 하려면 ‘Result’ 패널 좌측 상단의 ‘Reports’ 버튼을 누릅니다.

   1. ‘Reports’ 라는 대화상자가 열립니다.
   2. ‘Entire Current Local Site’ 를 선택합니다.
   3. ‘HTML Reports’ 항목에 전부 체크하고 ‘Run’ 버튼을 누릅니다.
      • ‘Combinable Nested Font Tags’ : 중첩되어 병합 가능한 Font 태그.
      • ‘Accessibility’ : 접근성 관련 항목
      • ‘Missing Alt Text’ : 비어있는 대체문자
      • ‘Redundant Nested Tags’ : 중복된 중첩 태그
      • ‘Removable Empty Tags’ : 제거해도 관계없는 빈 태그
      • ‘Untitled Document’ : 제목없는 문서
   4. 이렇게 사이트 전체에 대한 접근성 검사를 진행하는 데에는 다소간의 시간이 소요됩니다.
   5. 검사결과는 ‘Result’ 패널의 좌측에 위치한 ‘Save Reports’ 버튼을 이용하여 *.xml 형태로 저장할 수 있습니다.

드림위버가 비록 국내 지침인 ‘KWCAG 1.0‘에 대한 검사까지 지원하지는 않습니다. 하지만 본 기능을 참조하여 ‘WCAG 1.0‘ 을 준수한다면 대부분의 경우 별도로 국내 지침을 의식하지 않고 작업을 진행해도 됩니다. 만약 ‘KWCAG 1.0′ 에 대한 리포트를 제출해야 한다면 그때는 ‘KADO-WAH‘ 를 이용하세요. 웹 접근성 지침을 준수해야 하는 국내 프로젝트에서는 KADO-WAH 가 제공하는 사이트 리포트 기능이 꽤 쓸만 합니다.

주제 : 드림위버를 활용한 웹 표준 및 접근성 향상기법 소개

http://naradesign.net/open_content/document/DW8_WebStandard&Accessibility.pdf

참고 : KADO 에서 주최한 ‘제 1회 웹 접근성경진대회’ 때 강의했던 자료의 재활용 입니다.

오류는 ‘Rename & Update Files’ 작업 수행시 발생

‘Files’ 패널에서 폴더 명칭을 바꿀 때 해당 경로를 참조하는 CSS 파일들의 코드가 자동으로 업데이트 되도록 하고자 한다면 CSS 문서를 열어놓고 이 작업을 수행하지 마십시오.

CSS 문서를 열어둔 상태로 폴더 명칭을 변경하는 순간 해당 폴더를 참조하는 CSS 코드가 자동으로 업데이트 되면서 업데이트되어야 할 CSS 파일이 1KB의 데이터만 남겨놓고 모두 삭제되는 버그 입니다. 삭제된후 자동으로 저장 되고 이를 되돌릴 수 없으므로 매우 치명적 입니다.

CSS 데이터가 삭제되는 오류를 유발하는 스텝

1. 로컬 사이트의 모든 CSS 파일을 연다.
2. CSS 코드에서 이미지 경로로서 참조하고 있는 특정 폴더의 명칭(예:img 따위)을 변경한다.
3. 이 때 ‘Update Files > Update links in the following files?’ 라고 묻는 대화상자가 나타나며 ‘Update’ 될 파일들의 목록이 대화상자에 나타난다. ‘Update’ 버튼을 눌러서 이 폴더의 경로를 참조하는 문서코드가 자동으로 업데이트 되도록 한다.
4. 폴더의 명칭이 변경된 후 드림위버는 자동으로 이 폴더를 참조하는 경로가 포함된 HTML 및 CSS 문서의 코드를 업데이트 한다.
5. 작업이 끝난 후, 열려있던 CSS 문서를 확인해보면 자동으로 업데이트 되어야 할 파일의 코드가 정확하게 1KB 의 분량만 남고 모두 제거된 상태로 남아서 이미 저장된 상태로 존재하며 이를 되돌리기(Ctrl+Z) 할 수 없다.
6. 이 때 ‘로컬과 원격 동시저장’ 기능을 사용하는 사람이 이러한 사실을 모르고 문서를 모두 저장(Ctrl+Alt+Shift+S)하거나 또는, ‘로컬과 원격 동시저장’ 기능을 사용하지 않더라도 이 파일을 원격에 업로드 하게 되면 ‘로컬과 원격’ 모두 손실된 데이터로 동기화가 되므로 데이터가 사라진 CSS 문서를 복구할 수 없는 상황이 발생한다.

2007년 1월 31일, 버그의 원인을 뒤늦게 발견하다

CSS 코드에 /*한글 주석*/ 이 포함된 경우 이와 같은 문제가 발생하는 것으로 확인되었습니다.

이 사실을 모르고 버그에 일격 당하는 순간 극도로 흥분된 상태에서 ‘자살충동’ 에 휩싸일 수 있으므로 유의하십시오.