The note of Legendre

 

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

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

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

아직 웹표준에 대해 고민하고 있다면, 이 책을 통해 웹표준을 자발적으로 선택할 수 있는 계기가 되리라 봅니다.

 

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 작성방법

 

절대경로는 파일의 주소를 전부 기술하는 방법입니다.
유닉스 계열의 운영체제라면
/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://(생략된 경로)/ 형태이다 보니 이스케이프 문자를 세 번 사용하게 된 거죠.

 

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

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

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

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

에이콘 출판사에서 나온 방탄웹과 실용예제로 배우는 웹표준은 아직 읽지 못했는데, 기회가 된다면 이 책들도 읽어보고 싶네요.