제프리 젤드만의 웹표준 가이드(부제:웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택)를 읽었습니다. 이 책은 Desinging With Web Standards 2판의 번역서인데요. 웹표준을 다루는 여러 책들 중에서, 가장 과도기적 접근을 추구하는 책입니다. 받아들이기 쉽게 다양한 스크린샷 사례를 들면서 웹표준을 소개하는 이 책은, 무리하게 표준 준수를 강요하지는 않습니다. 하지만 표준을 사용하면 어떤 장점이 있는지, 비즈니스적 가치로는 무엇이 있는지 알려줍니다.

그래서 이 책은 구형 웹브라우저 사용자가 많은 웹페이지를 위해, CSS 핵도 언급하고 있습니다. Gecko 표준모드에서 인라인 엘리먼트일 때 Baseline[각주:1] 밑에 공백이 생긴다는 이야기는 모르고 있었는데요, 흥미롭게 읽었습니다. 이미지 태그는 보통 인라인 엘리먼트로 취급되기 때문에, CSS를 통해 display 속성을 블록으로 속성을 바꾸어주면 공백이 사라진다는 게 신기했습니다.

웹 접근성에 대한 이슈들도 뒷부분에서 꽤 비중있게 다루고 있었는데요. 제프리 젤드만은 디자이너들이 일반적으로 생각하는 접근성에 대한 오해들을 설명하고 있습니다. 현실적으로는 "시각장애 억만장자들"이라는 부분이었는데요. 여기서 말하는 억만장자는 검색엔진이었습니다. 구조와 표현이 분리되지 않은 마크업으로 페이지가 구성되어 있다면, 스크린리더 웹브라우저와 시각장애 억만장자들은 그 페이지에 접근하기 어렵습니다.

아직 웹표준에 대해 고민하고 있다면, 이 책을 통해 웹표준을 자발적으로 선택할 수 있는 계기가 되리라 봅니다.
제프리 젤드만의 웹표준 가이드(위키북스 오픈소스 웹 시리즈 5)(제2판) 상세보기
제프리 젤드만 지음 | 위키북스 펴냄
'위키북스 오픈소스 웹' 시리즈, 제5권 『제프리 젤드만의 웹표준 가이드』. 제2판. 웹표준 분야의 최고 권위자인 저자가 2003년에 저술하여 베스트셀러가 된 〈Designing With Web Standards〉의 초판을 완전히 새롭게 번역하여 출간한 것이다. 이 책은 접근성이 높은 웹사이트만이 살아남는 Web2.0 시대를 대비하여, 우리가 편하고 빠르게 일할 수 있도록 도와주는 웹표준에 대해 이해하기 쉽게 소개하고 있다. 아울러 웹표준은

  1. 활판 인쇄나 서예에서 대부분의 글자들이 기대고 있는 선. Baseline (typography) [본문으로]
Posted by 세레

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

  1. 카리나
    2008.02.19 18:23
    표현을 위한 마크업으로 페이지가 구성되어 있을 경우, 스크린리더 웹브라우저에서도, 시각장애 억만장자들도 그 페이지에 접근하기 어려울 것입니다. <- 이부분이 무슨말인가요 ㅠㅠ...??
    • 2008.02.20 00:30 신고
      댓글 주소 수정/삭제
      HTML문서에는 그 구조만 담겨 있으면 스크린리더 브라우저나 검색엔진이 접근하기 쉽다는 말을 쓰려고 했는데, 잘 전달력 있게 쓰지 못한 것 같네요.

      표현이 구조에 섞이게 되면, 예컨대

      <font size="3" color="red">deprecated font tag</font>

      보다는

      <h3>recommended use</h3>

      로 구조(HTML)에 넣어두고 외부 스타일시트(CSS)로

      h3 {
      font-size: 14px;
      color: red;
      }

      분리해두면 시각장애인에게 내용을 온전히 듣는데 불편을 주는 색상정보나, 크기정보를 제외하고 검색엔진도 실제 색인해야 되는 내용을 쉽게 알아 볼 수 있어요.
  2. 카리나
    2008.02.25 12:20
    오오오 자세한 설명 감사드립니다 +ㅁ+/ 이제 알 것 같아요!
  3. 2008.04.07 13:54
    저도 출간된 직후에 구매해 놓고는 시간이 많이없어서 조금씩 계속 읽고 있는 책입니다. ^^
    저자도 유명한 사람이기도 하고 기존의 웹표준과 관련된 책들보다 조금 더 실무적으로 깊은 내용을 다루고 있는 듯한 내용이 마음에 들었었습니다.

    단지... 번역이 조금 덜 부드럽게 된 듯한 느낌을 지울 수가 없습니다. 아주 이해가 안되는 것은 아닌데, 읽을 때 좀 껄끄럽게 진도가 나간다는 느낌이 들어서 말이죠. ^^
    그리고 웹표준과 관련되어 아주 초보자 분들에게는 다소 추천하고 싶지 않습니다.
    일단 다른 초심자용 책들과 웹표준 교과서를 통해 웹표준에 대한 기술적인 내용과 이론적인 부분을 어느 정도 정립하시고 읽어보시면 더 좋을 듯 하다는 생각이 듭니다.

    아무튼 이런 식의 책들이 보다 더 많이 나왔으면 좋겠습니다. ^^
    (참... 책이 부피에 비해 좀 무거워요. ㅠㅠ 전체가 컬러라 종이가 그런건가요.. 흑)
    • 2008.05.24 17:56 신고
      댓글 주소 수정/삭제
      동감합니다. 어디까지나 유익한 지침들을 제공할 뿐이지 체계적인 입문서라고는 보기 힘듭니다. 컬러라서 그런지 부피에 비해 책이 무겁습니다.

      이런 책들이 많이 나와서 웹접근성 향상에 도움이 되었으면 좋겠습니다.

 

CSS 비밀 매뉴얼은 졸트 상 기술서적 부문의 생산성 상을 수상하기도 했던 CSS: The Missing Manual의 번역본입니다. (졸트 상에 관한 더 자세한 내용은 애자일 이야기: 개발자들의 아카데미 상을 참고하시면 좋겠습니다.) 이전에 보았던 CSS 마스터 전략(원서명은 CSS Mastery: Advanced Web Standards Solutions)와 비교해 볼 때, 책 안에서 다루고자 하는 양이 더 풍부하고 세세했습니다. 글씨 크기도 더 작고요. :) CSS 관련 기술 용어의 경우 어떻게 한글로 번역할 것인지 기준이 없기 때문에, 종종 용어가 다른 부분이 있기는 합니다. (eg. 속성-애트리뷰트)

이 책에서는 기초-적용-레이아웃-고급 크게 4 부분으로 나누어 CSS를 설명하고 있습니다. CSS 마스터 전략에서처럼 따로 핵이나 필터에 대한 절을 구분하여 두지는 않았지만, 부록에 도움이 될 수 있는, 꼭 이 부분이 아니더라도 다양한 참조 링크를 배치해 두었습니다.

CSS 마스터 전략이 어떤 부분이 필요할 때 빠르게 훑어볼 수 있는 책이라면, CSS 비밀 매뉴얼은 어떤 부분에 대한 깊고 자세한 정보를 구할 때 유용하게 쓰일 수 있는 책이라고 생각합니다. 개인적으로는 CSS 마스터 전략을 더 선호합니다.
CSS 비밀 매뉴얼(감추고 싶은 나만의 비밀 노트) 상세보기
데이빗 소여 맥팔랜드 지음 | 한빛미디어 펴냄
CSS 매뉴얼 입문서. 이 책은 웹페이지를 제작하기 위한 CSS의 단계적 사용법을 담아 정리한 것으로 전문가가 사용하는 실용적인 페이지 레이아웃 기법부터 CSS 코딩 방법 등을 실전 예제를 통해 익힐 수 있도록 했다. 《CSS 비밀 매뉴얼》은 CSS를 위한 HTML 인식 전환과 스타일 및 스타일시트 작성, CSS를 적용한 다양한 웹 페이지 만들기 등의 내용을 담았고 책 뒤편에는 CSS 프로퍼티 참고자료와 드림위버 8에서 CSS 작성방법

Posted by 세레

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

 

절대경로는 파일의 주소를 전부 기술하는 방법입니다.
유닉스 계열의 운영체제라면
/home/someuser/Desktop/blahblah.html
윈도 계열의 운영체제라면
C:\Windows\mspaint.exe
또는 C:/Windows/mspaint.exe를 쓸 수 있습니다. (가장 앞의 드라이브 문자는 꼭 C가 아니어도 됩니다.)

반면에 상대경로는 지금 위치를 기준으로 경로를 설명합니다.
위에서 예를 든 유닉스 계열의 운영체제에서 blahblah.html에서, 같은 Desktop 디렉토리의 someimage.jpg를 접근한다고 할 때 상대경로는 someimage.jpg입니다.
/home/someuser/Desktop/images/subimage.jpg 를 접근하려고 할 경우,
상대경로는 images/subimage.jpg 이고
/home/someuser/Desktop/supimage.jpg를 접근하려고 할 경우,
상대경로는 ../supimage.jpg 입니다.

여기서 점을 두 개 찍은 ..은 그 디렉토리의 상위 디렉토리라는 의미입니다.
(참고로 점을 한 개 찍은 .은 현재 디렉토리를 가리킵니다.)

그렇다면 /home/someuser/superimage.jpg를 접근하려고 하면 어떻게 해야 할까요?
blahblah.html이 위치한 디렉토리에서 상위 디렉토리를 두 번 올라가야 하므로
상대경로는 ../../superimage.jpg로 쓰면 됩니다.

이러한 상대경로는 (X)HTML이나 CSS 문서를 작성할 때 이미지, 스타일시트 파일 등 웹페이지에 필요한 파일들의 경로를 지정할 필요가 있을 때 사용할 수 있습니다. 일반적으로 절대경로보다는 상대경로를 쓰는 것이 총 주소의 앞부분이 달라지더라도 내용은 보존되기 때문에, 이식성 면에서 더 좋습니다. (만일 절대 경로로 작성했고, 웹 관련 파일들을 지금으로부터 다른 서버로 옮겨야 한다면 그 절대경로를 일일이 고쳐주어야 하겠지요.)

그럼 경로에 관한 다른 이야기를 해 볼까요?
우리가 쓰고 있는 웹 브라우저(예: 모질라 파이어폭스, 인터넷 익스플로러..)는 하드에 저장된 파일을 보여줄 수 있습니다. 최상위 디렉토리에 가고 싶다면 윈도 계열의 운영체제에서는 file:///C: 를 유닉스 계열의 운영체제에서는 file:/// (여기서는 주소가 그냥 /부터 시작하죠.)
을 입력하여 볼 수 있습니다.

그런데 우리가 웹 주소를 입력할 때에는 http:// 해서 '/'(이스케이프 문자)를 두 번 사용합니다. 왜 그럴까요? http://somecompany.com/이 있다고 가정해 봅시다. 그러면 우리는 그 홈페이지의 디렉토리나 파일을 접근하려면 http://somecompany.com/somedirectory/ 또는 http://somecompany.com/index.html 이런 식으로 할 수 있습니다.
디스크 내부에 접근할 때에는 이 somecompany.com이 생략되어(또는 그렇게 생각하고), 즉 file://(생략된 경로)/ 형태이다 보니 이스케이프 문자를 세 번 사용하게 된 거죠.
Posted by 세레

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

 

책을 받은 지 3개월이 넘었고, 학기말이다 뭐다 하면서 그동안 CSS 마스터 전략을 제대로 읽지 못했어요. 그래서 이번에 한 번 부지런하게 읽어봐야겠다고 생각해서 한 번 쭉 읽었습니다. 모든 부분을 자세히 이해하면서 넘어가려면 끝까지 못 읽을 것 같아서, 그냥 끝까지 책을 한 번 두루 살펴 보았죠.

우선, 책을 쓴 사람은 기본적인 컴퓨터 활용능력과, (X)HTML에 대한 어느 정도의 지식이 있는 사람을 대상으로 한 것으로 보입니다. 1장에서 다시 짚어 주기는 하지만, 진도의 상승폭이 상당히 빠르기 때문이죠. 이미지, 링크, 레이아웃 등으로 CSS 사용의 범주를 기준으로 나누어서 설명하는 게 특징입니다. 이런 방식은 나중에 CSS에 대해 참고하고자 할 때, 편리하게 작용하겠죠. 비록 인터넷 익스플로러 버전 6 이하에서는 CSS의 기능(속성선택자도 그 중 하나)을 완벽하게 지원하지 않지만, 속성선택자를 이용해 외부링크, PDF 아이콘을 동적으로 만들어 주는 게 신기했습니다. 리모트 롤오버 기능도 인상 깊었습니다. 어떻게 활용하느냐에 따라 넘길 수 있는 사진첩도 만들 수 있고, 상단메뉴 위에 올리면 부속메뉴가 나오도록 할 수 있고. 학교 도서관 홈페이지에서는 자바스크립트를 이용해서 이런 처리를 하는데, 파이어폭스에서는 제대로 작동하지 않았습니다. 그 때 이런 기능을 사용하면 대안적으로 해결할 수 있지 않을까 생각했어요.

뒷 부분에는 핵과 필터에 관한 내용이 나옵니다. 처음에는 그 의미를 이해해 보려고 했지만, 상당히 어려웠습니다. 브라우저 간의 호환성을 어떻게 지킬 것인가에 대한, 사람들의 고민과 그 결과가 담겨 있습니다.

부록에는 앞에서 배운 내용을 기초로 하여 준-실전용 페이지를 만드는 연습을 합니다. 이 부분에서는 레이아웃을 단 형식으로 배치하는 것이 인상깊었습니다. 음수 마진 값을 적절히 활용하는 사례에 대해 조금 더 구체적으로 볼 수 있었습니다.

에이콘 출판사에서 나온 방탄웹과 실용예제로 배우는 웹표준은 아직 읽지 못했는데, 기회가 된다면 이 책들도 읽어보고 싶네요.
CSS 마스터 전략(고급 웹 표준 사이트 제작을 위한) 상세보기
앤디 버드 지음 | 에이콘출판 펴냄
CSS 활용서. 이 책은 CSS 기본 개념을 정리해 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룬다. 다양한 예제통해 실무에 바로 적용할 수 있는 실전 기법을 익힐 수 있도록 했다. 《CSS 마스터 전략》은 CSS 기본에 대한 핵심 정리와 이미지, 링크, 리스트 처리나 폼, 데이터 테이블 같은 핵심적인 CSS 기법을 다루고, 핵, 필터, 브라우저 버그

Posted by 세레

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절


카테고리

분류 전체보기 (447)
Science (283)
ars boni et aequi (55)
Routine (83)
Language (23)
Q&A (1)
me2day (1)

달력

«   2019/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30