NARADESIGN

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


강연자료 배포 – 드림위버를 이용한 웹 표준 코딩 가이드.

본문 건너 뛰기

오늘 4/25(목) 비즈델리에서 주최하는 웹 표준 & CSS 실무 가이드 워크샵에서 드림위버를 이용한 웹 표준 코딩 가이드 라는 주제로 강연을 다녀왔습니다. 이 강연을 위하여, 그리고 더 많은 분들과의 공유를 위하여 특별히 HTML 버전의 프리젠테이션 문서를 준비하였는데 결국 이렇게 아주 쉬운 방법으로 여러분들에게 공개해 드릴 수 있게 되었습니다. 이 문서는 별도의 출력용 스타일 시트(print.css)를 사용하여 인쇄에도 적합합니다. 또한 웹 표준을 이제 막 시작하시는 분들은 프리젠테이션 문서 자체의 XHTML 사용방법과 CSS 코드를 분석해 보시는 것도 권장해 드립니다. 강연할때에는 다소 긴장도 되고 시간제한 때문에 빠르게 스킵된 부분이 있는데 이 문서를 보시면 강연때 부족했던 내용들을 보다 상세하게 파악하실 수 있습니다. 이 문서는 제 강연을 듣지 않은 사람이라도 이해하는데 무리가 없도록 충분히 고려하여 제작되었습니다. 이 문서는 CCL 2.0 라이센스(저작자 표시, 비영리, 변경금지)에 따라서 누구라도 복제, 배포, 전송, 전시, 공연 하실 수 있습니다.

웹 표준 준수 방법

(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시간 이내에 답변 드리겠습니다.

분류: CSS,웹 디자인,웹 접근성,웹 표준,편집기 | 2007년 4월 25일, 21:50 | 정찬명 | 댓글: 20개 |
트랙백URI - http://naradesign.net/wp/2007/04/25/121/trackback/

20개의 댓글이 있습니다.

  1. 이현석 댓글:

    좋은자료 정말 감사드립니다.

  2. 신현석 댓글:

    우왔! 너무나 좋은 자료입니다.

  3. 오홋, 이번엔 찬명님 혼자 드림위버+웹표준 도서를 한번 작필 해보심은 어떨까요~?

  4. 정찬명 댓글:

    감사합니다. 많은 사랑 부탁드려요~ ^^; 요한님, 혼자는 힘들고 외로워요~ 우리 다 같이 함께 해요!

  5. 신승식 댓글:

    프리젠테이션 자료를 HTML로 만드는 것이 정말 좋다는 것을 보여주는 좋은 증거가 될 것 같습니다. 내용도 원더풀이구요~

  6. 김창겸 댓글:

    강의 잘들었구요.좋은 자료 감사드립니다..이번에 출시된 드림위버 CS3버전이 CSS관련부분이 대폭 강화되었다고 하는데..CS3버전에 대한 가이드 작업 또는 집필 작업 예정에 없으신지요..^^

  7. 정찬명 댓글:

    신승식님, 너무 감사합니다 (__). 저는 앞으로도 프리젠테이션 할 때 HTML 문서를 사용하려고 합니다,
    김창겸님, CS3에서 제가 체감할 수 있었던 변화는 CSS 코드의 줄바꿈을 사용자가 설정할 수 있었다는 점이었습니다. 그 외 WYSIWYG(Design View) 모드에서의 렌더링은 여전히 개선의 여지가 많습니다. 드림위버의 Design View는 IE만큼 렌더링에 관한 버그가 많습니다. 아참, 집필 예정은 아직은 없답니다 ^^ 감사합니다.

  8. 헉, 저같은건 내공이 부족해서 안되요ㅎㅎ

  9. 정찬명 댓글:

    무슨 말씀을~ 내공이 충만해서 책 쓰는 사람 결단코 없습니다.

  10. Na! 댓글:

    좋은 정보 공개해주셔서.. 감사합니다.
    저희 사무실 사람들과 돌려보도록 하겠습니다..
    가능하다면. 뜯어도 보고 싶네요.. 표준HTML의 사내 교육자료로..

  11. 정찬명 댓글:

    제품 뜯어 보시고 하자 있는경우 A/S 신청 하셔도 됩니다. ㅎㅎㅎ. 감사하구요~ 좋은 하루 되세요 ^^a

  12. 파우스트 댓글:

    정말 좋은 정보 감사합니다.~!!
    드림위버 사용자로서 많은 도움이 될것 같습니다.

  13. 이정주 댓글:

    와우…HTML을 자주 작성하고 표준에 맞게끔 작성한다 했지만 글을 읽어보니 모르는것들이 많이 있었내요. 지금은 잠깐 일을 하느라 다 읽진 못하였지만 나중에 프린트 하여 심도있게 읽어봐야 겠네요.
    감사합니다.

  14. 김미화 댓글:

    좋은 자료 넘 감사합니다. ^-^

  15. 차윤정 댓글:

    정말 좋은 사이트를 발견한 기분입니다.

    오늘 정말 많은걸 배우고 있어요…
    Xhtml에 한층더 가까워진 기분이 드는데요~^-^

  16. 정찬명 댓글:

    네, 자주 오시고 다른분들과 많이 공유하시면 좋겠습니다 ^^

  17. 차윤정 댓글:

    네.. 어제부터 시간날때마다 들어와서 공부하고 있습니다..
    정말 감사해요..^-^

  18. 서주영 댓글:

    사랑합니다!ㅋ

  19. 정찬명 댓글:

    부끄럽네요 >.<

  20. 익명 댓글:

    잠시 손을 놓았다가 너무 오랫만에 들렸습니다..
    소중한 글 다시 한번 잘 읽었습니다. 감사합니다. ^^

댓글 쓰기

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

필수 아님

필수 아님