[ CSS 사용 ]

보기 좋은 음식이 먹기도 좋다.

인터넷 사이트도 마찬가지다.

보기 좋게 꾸미면 방문객들에게 인기가 있다.

보기 좋고 읽기 편해 그 속에 담긴 내용을 끝까지 볼 수 있게 해준다.

웹문서를 보기 좋게 만들려면 CSS(Cascading Style Sheet)를 사용하는게
좋다.

CSS는 "계층적 스타일시트"로 번역된다.

문서의 외양을 규정하기 위해 정의된 W3C(월드와이드웹컨소시엄)의 규약
이다.

CSS는 HTML의 한계를 보완하기 위해 만들어졌다.

스타일시트란 무엇인가.

워드프로세서로 문서를 만들때 중간 제목, 소제목을 각각 같은 글꼴과
크기로 하는게 일반적이다.

초보자들은 보통 원고 작성 중에 제목이 나올 때마다 글꼴과 크기를 기억해
두었다가 그때마다 적용할 것이다.

하지만 고급 사용자는 이 값들을 "중간 제목"과 "소제목"이란 이름으로 미리
지정해 놓는다.

이렇게 하면 같은 속성을 적용해야 할 부분에서 지정한 이름을 선택만 하면
된다.

이때 지정된 글꼴과 크기를 "스타일"이라고 한다.

"스타일시트"란 스타일들을 모아 놓은 목록이라고 할 수 있으며 캐스케이딩
이란 여러 개의 스타일을 한 문단에 적용할 수 있다는 의미다.

CSS의 등장은 웹 문서의 겉모습을 미적인 면에서나 실용적인 면에서 매우
발전시켰다.

그렇지만 이런 발전은 CSS를 적용한 HTML문서를 제작할 수 있고 제대로 보여
줄 수 있을 때 의미가 있다.

다행히 인터넷익스플로러 4.0 이상, 넷스케이프 4.0 이상의 웹브라우저는
완벽하지는 않지만 CSS 규약을 해석해 보여준다.

나모 웹에디터도 CSS를 적용한 문서를 만들 수 있는 기능을 제공하고 있다.

나모 웹에디터를 이용해 가장 쉽게 CSS를 적용한 문서를 만들려면 [파일-
새 글]을 선택한 후 "문서" 탭 안의 목록중 "줄간격 1백50% 문서"를
선택한다.

그러면 편집화면에 흰 여백의 빈 문서가 나타난다.

평소의 빈 문서와 다른 것이 없는 것처럼 보이지만 서식 도구막대의 스타일
펼침목록을 누르면 "leading 150"이란 스타일이 나타나는 것을 볼 수 있다.

사용하는 방법도 매우 간단하다.

나모 웹에디터를 평소의 문서 작성하듯이 글을 쓴 후 줄과 줄 사이의 간격을
넓히고 싶을 때(즉 1백50%), 그 문단의 아무 곳이나 커서를 가져다 놓고
스타일 펼침 목록의 "leading 150"을 선택하면 된다.

스타일을 적용하면 편집화면의 줄 간격이 넓게 벌어지는 것을 확인할 수
있다.

스타일시트를 미리 정의해놓고 쓸 수도 있지만 필요할 때마다 쓸 수도 있다.

먼저 글꼴이나 문단의 모양을 바꿀 곳을 블록으로 선택한다.

마우스 왼쪽 버튼을 누르고 움직이면 블록이 지정된다.

그런 후 [서식] 메뉴의 "글꼴"이나 "문단"을 선택하고 원하는 값을 지정
한다.

특히 "문단" 메뉴의 경우 CSS란 표식이 돼있어 적용하는 값이 CSS인지
아닌지를 알 수 있다.

CSS는 웹의 환경을 사용자 위주로 보다 편리하게 만들어 주지만 버전이 낮은
웹브라우저에서는 적용한 값을 전혀 보여주지 못하는 문제가 있다.

상위 버전이라고 할 지라도 인터넷 익스플로러와 넷스케이프가 서로 다르게
보여준다.

< 김형렬 나모인터랙티브 과장 rancet@namo.co.kr >

( 한 국 경 제 신 문 1999년 9월 14일자 ).