IT/모바일
by 에릭 메이어, Cascading Style Sheets: The Definitive Guide의 저자
- CSS와 HTML 코드가 올바른지 검사한다. 아무리 경험이 많은 웹 개발자나 디자이너라 해도 스타일을 사용할 때는 실수를 할 수 있는데, 화면에 표시되는 HTML을 엉망으로 만들어 버리는 경우도 있다. 이런 문제를 피하기 위해서는 스타일 사용에 에러가 없어야 한다. 유효성을 검사하는 데는 W3C와 웹 디자인 그룹(Web Design Group)의 두 가지 주요 소스가 있다. 웹 디자인 그룹을 이용하면 자주 접하는 에러 메시지를 볼 수 있으므로 이 사이트에 있는 내용부터 참고하는 것이 좋을 것이다. HTML Validator와 CSScheck 등의 사이트에 있는 툴을 사용하는 것도 좋다. CSS 코드가 이들 툴을 문제없이 통과한다면, 이 글에 있는 여러가지 팁을 일일이 기억하지 않아도 될 것이다.
- 페이지를 마음먹은 대로 제어할 수는 없다. CSS를 사용하는 것은 페이지를 만든 사람(독자도 역시)이 페이지를 어떻게 표시할 것인지를 제안하는 것이다. 모든 사람이 똑같은 형태의 페이지를 볼 수 있을 것이라고 믿어서는 안된다. 팜탑(palmtop) 컴퓨터에 표시되는 페이지가 어떻게 40인치 짜리 평면 스크린 모니터에 표시되는 것과 같을 수 있겠는가? 브라우저 환경이 매우 다양하다는 현실을 고려하면, 페이지가 일정한 형태로 표시되도록 하는 것은 불가능한 일이다. 이 때문에 CSS를 이용하는 것은 어디까지나 페이지를 보게될 사람들에 대한 제안일 뿐이다.
- 기본(BODY 태그) 글꼴의 크기를 변경하지 않는다. 사용자는 자신이 보기에 가장 편한 글꼴 크기로 브라우저를 설정하기 때문에 기본 글꼴의 크기를 변경하면, 사용자 중에는 웹 페이지를 보기 어려워지는 경우도 있다. 물론 일부 텍스트를 일반 텍스트보다 더 크게 혹은 더 작게 할 수는 있지만(제목이나 각주 등), 나머지 텍스트에 대해서는 저자가 크기를 조정해서는 안 된다. 특별한 이유가 있어서 기본 글꼴의 크기를 바꾸어야 한다면, em 태그(강조 태그)나 퍼센트로 조정하는 것이 좋을 것이다. H1 {font-size: 2 em;} IMG.exam {width: 200;}
- 각종 단위를 사용해야 하는 경우에는 값과 단위를 나타내는 기호를 띄어 쓰거나 생략해서는 안된다. 다음은 잘못된 것이다. H1 {font-size: 2 em;} IMG.exam {width: 200;} 첫 번째 줄의 경우 단위 기호와 숫자 사이에 공백이 있기 때문에 잘못된 것이다. 둘째 줄은 더 애매한 경우이다. 의도는 이미지의 넓이를 200 픽셀로 설정하려고 한 것인데, 브라우저에서 단위가 픽셀인지 어떻게 알 수 있겠는가? 200 센티미터일 수도 있고, 그보다 훨씬 더 클 수도 있고, 파섹이나 앵스트롬일 수도 있는 것이다. 대부분의 브라우저에서는 이러한 숫자를 무시해 버리지만, 어떤 브라우저에서는 단위가 없는 숫자를 픽셀로 처리하기 때문에 문제가 발생한다. 그러므로 다음과 같이 하는 것이 바람직하다. H1 {font-size: 2em;} IMG.exam {width: 200px;}
- 새로 지정한 스타일과 원래 설정돼 있던 스타일이 함께 적용되면, 새로 지정한 스타일로 나타난다. 전체 문서에 색을 설정할 때는 다음처럼 하면 된다: BODY {color: red;} 하지만 하이퍼링크의 경우에는 다르게 해야 한다. A:link {color: blue;}라는 브라우저 스타일의 규칙이 이미 있기 때문이다(링크는 파란색으로 설정되어 있는 것으로 가정하자). 하이퍼링크에는 파란색으로 표시하라는 분명한 규칙이 있으므로, 하이퍼링크는 빨간 색이 아닌 파란색으로 표시된다. 웹 페이지를 만들때 가장 자주 하는 실수는 이러한 사실을 잊어버리고, 왜 빨간 색으로 나타나지 않는지 의아해 하는 것이다. 유효성 검사기도 이런 부분을 처리하지 못하는데, 잘못된 것이 없기 때문이다. 단지 페이지를 만드는 사람이 원하는 결과가 아니라는 게 문제다.
- 단축 속성(Shorthand properties)이 이전의 스타일을 지워 버릴 수 있다. 다음과 같은 실수를 하기 쉽다: H1 {background-image: url(bg42.gif);} H1, H2, H3 {background: yellow;} H1 요소에는 노란색 배경에 배경 이미지가 타일 형태로 표시될 것이라고 생각할 수 있다(이미지가 투명한 것이라서 노란색을 볼 수 있다는 것을 가정한다). 그러나 실제로는 그렇지 않다. 배경색을 노란색으로 설정(background:yellow)하는 과정에서 특별히 지정하지 않은 값(배경 이미지, 배경 위치, 배경 반복, 그리고 배경 첨부에 대한)은 기본값으로 바뀌게 된다. 배경 이미지에 대한 디폴트 값이 없기 때문에, H1 요소의 배경에는 이미지가 표시되지 않는 것이다. 물론 이 규칙을 바꿔 놓을 수도 있다. H1, H2, H3 {background: yellow;} H1 {background-image: url(bg42.gif);} 이번에는 예상한대로 결과가 나타날 것이다. 즉 노란색 배경 위에 이미지가 타일 모양으로 표시될 것이다. 이는 첫 번째 규칙에서는 디폴트 이미지 값을 지정하지 않았기 때문에 두 번째 규칙에서 설정한 값이 적용되는 것이다.
- 스타일을 지정해 주지 않으면 테두리(border)는 표시되지 않는다. 기본 테두리에는 스타일이 없기 때문에 테두리에 스타일을 지정해 주지 않으면 표시되지 않으며, 결국 테두리의 폭은 0이 된다. 즉, 폭을 지정해 줘야만 보더가 나타나는 것이다. 그러므로 이미지와 같은 요소 주변에 여분의 공간을 주고 싶으면, 테두리의 폭이 아닌 여백을 사용해야 한다.
- 색을 설정할 때 주의한다. 색을 지정할 때에는 배경 색도 함께 지정해 주는 것이 좋다. 사용자는 검은색 배경에 노란색 텍스트로 나타나게 스타일시트의 페이지를 설정할 수도 있을 것이다. 다음과 같은 스타일을 자신의 페이지에 지정한다고 가정해 보자. BODY {color: black;} 이제는 자신의 페이지에 있는 일부(혹은 모든) 요소가 검은 색 배경에 검은 색 텍스트로 표시되어, 거의 텍스트를 거의 읽을 수 없을 것이다.이렇게 될 바에야 다음의 두 가지 중 한가지를 선택하는 게 더 낫다. 텍스트 색과 어울리는 배경 색을 선택하거나, 아예 색을 섞지 않는 것이다. 사용자는 자신이 보기에 가장 편하게 브라우저를 설정한다는 사실을 상기하자. 그러면 글꼴 크기 뿐 아니라, 색을 어떻게 조합해야 할지도 결정할 수 있을 것이다.
- 네비게이터(Navigator) 4에서 CSS를 사용하려면 자바스크립트가 필요하다. 웹용 스타일시트가 발표된지 얼마 되지 않았을 때 넷스케이프가 자바스크립트 스타일시트(JSSS)라고 부르는 아이디어로 앞서 나갔다. JSSS는 CSS와 유사하지만 자바스크립트와 좀더 깊이 연관돼 있어서 네비게이터 4에도 그 특성이 어느 정도 나타난다. 하지만 자바스크립트를 사용할 수 없으면 스타일시트도 사용할 수 없다는 단점이 있다. 모질라와 넷스케이프 6 프리뷰 배포판은 이러한 문제점을 수정하였지만, 다른 회사의 브라우저는 아직도 수정하지 못한 상태다.
- 코드의 유효성을 검사한다. 다시 한번 말하지만 이처럼 중요한 것이 없다. 유효성 검사기를 이용하여 HTML과 CSS를 작동시키면 좋은 코딩 습관을 만들 수 있다. 직접 시도해 보는 것 보다 더 빨리 배우는 길은 없으므로, 유효성 검사기에서 알려주는 내용을 주의깊게 살펴본다.
TAG :
이전 글 : 비주얼 베이직 시험을 위한 10가지 팁
다음 글 : 론(Ron)의 비주얼 베이직 포럼
최신 콘텐츠