xhtml과 css : 써맨틱스와 스타일의 분리
기존의 html은 페이지의 보여지는 면을 규정하는 태그와 내용이 뒤섞여 있어서 내용과 형식이 완전히 분리된 상태가 아닙니다. 내용과 스타일의 분리가 중요한 이유는 일차적으로 싸이트의 유지관리, 업그레이드가 현저하게 용이해진다는 측면에서 그렇고, 웹의 미래라고 할 수 있는 'semantic web'으로 나아가는 데 있어 가장 기초적인 요구조건이 웹 문서의 스타일과 써맨틱스의 분리이기 때문입니다. 하지만 대부분의 html 페이지는 그렇지 못 한 상태에 있고 그 점을 개선하기 위해 웹의 표준을 만들고 전파하는 w3c.org은 html의 차세대 버전인 xhtml(Extensible HyperText Markup Language)을 만들어 현재의 혼돈스런 html로부터 차세대 xml로 부드럽게 이행될 수 있게 하려고 노력 중입니다.
xhtml은 xml의 형태로 html을 확장한 것입니다. xhtml 문서형에 맞게 만들어진 문서는 일반적인 웹브라우져 뿐만 아니라 다른 xml 기반 에이젼트에서도 큰 문제 없이 디스플레이할 수 있습니다. 지금처럼 스타일과 서맨틱스(semantics)가 혼재된 html 보다는 가급적 내용은 내용대로, 스타일은 스타일대로 확실하게 분리된 쪽으로 페이지를 만드는 것이 제작 및 관리가 쉬워질 뿐만 아니라 훨씬 더 플랫폼 독립적으로, 브라우져 의존성이 낮은, 기기 의존성이 낮은 페이지를 만들 수 있습니다.
먼저, css를 사용하지 않는 경우의 웹디자인이 어떻게 불편한지 생각해 봅시다. 만약에 수백 장의 html 문서들에 있는 이탤릭체를 모두 굴림체에 파란색으로 보이게 하고 싶다면 기존에는 <i> 태그가 있는 부분을 모두 찾아서, <font face="굴림" color="blue"><i>파란색 이탤릭체</i></font>라고 바꾸어야 했습니다. 하지만 css를 사용하면
i { font-family:굴림; font-style:italic; color:blue}이렇게 한 줄만 써주면,이 css 파일에 의해 조정되는 모든 html 문서의 이탤릭체는 모두 파란색에 굴림체로 바뀝니다. 문서가 수천, 수만 장이라도 그렇습니다. 바로 이런 점 때문에 스타일과 내용을 분리해야 하는 것입니다. 모양을 바꾸기 위해 문서 내부를 일일이 손을 대는 일이 없어야 합니다. 우선 css 코드를 간단하게 살펴 보고 자세한 사용법을 알아 봅시다.
맨 앞의 i를 "selector"라 합니다. 여기서는 이탤릭체로 바꿔주는 태그이므로 i이지만, 다른 태그 (b, p, blockquote, strong, h1, h3, ...)가 올 수도 있고, 사용자가 정의한 새로운 이름이 올 수도 있습니다. 그런 것을 class라고 합니다.
그 뒤에 나오는 스타일을 규정해 주는 { }부분을 스타일 정의(style definition)라고 합니다. 스타일 정의 부분을 보면 <font face="굴림">과 똑같은 효과를 갖는 font-family:가 있고, 마찬가지로 이탤릭체, 보통체 등을 결정하는 font-style:, 폰트 컬러를 설정하는 color:가 있습니다. 이런 것들을 속성(property)이라 합니다.
직관적으로도 쉽게 이해가 되죠? 한 가지 주의할 점은, 각 속성을 세미콜론;으로 분리해야 한다는 것입니다. 맨 마지막 속성에는 세미콜론을 해도 되고 안 해도 됩니다.
css 사용 방법
cascading style sheet's' 라는 이름에서 볼 수 있듯 한 문서에 적용되는 스타일은 여러 개일 수 있습니다. 이 경우 제일 좁은 범위를 갖는 스타일이 우선권을 갖습니다. 즉,
- 개별 태그의 스타일 속성
- 블록 (blockquote, p 같은) 스타일
- 문서의 head에서 규정한 스타일
- 외부에서 읽어 들인 css 파일에 있는 스타일
순서대로 우선순위가 있습니다. 1이 있다면 1을 적용, 없다면 2, 없다면 3,.. 식입니다. 만약 같은 레벨의 css끼리 충돌하면 먼저 나온 것보다 나중에 나온 것이 더 우선권을 갖습니다.
그러면 css를 어떻게 사용할 수 있을까요? 크게 두 가지 방법이 있는데, 가급적 첫 번째 방법은 피하는 것이 좋고 두 번째처럼 사용하는 것이 좋습니다.
1. html 파일 내에 작성
첫 번째 방법은 html 문서 내에 스타일 설정을 위한 css 코드를 포함시키는 것입니다. 문서 내에 포함시키는 방법은 다시 또 두 가지가 있습니다. 하나는 <head>에 넣는 방법입니다. 다른 하나는 개별 태그내에 넣는 방법입니다. 어떤 식이 되었든 이렇게 html 내에서 스타일 규정을 하는 것은 좋지 않습니다.(매우 많은 싸이트가 그렇게 하고 있습니다만) 위에서 얘기한 것처럼, 스타일과 내용은 가급적 완전히 분리해야 합니다. 동일한 문서 내에 스타일과 써맨틱스가 혼재되는 것은 싸이트의 확장성과 유지관리를 크게 제한하기 때문입니다. 실제, xhtml 표준에서는 개별 html 파일 내에서 스타일을 규정하는 것을 허용하지 않고 있습니다. 그럼에도 불구하고 많이 쓰이고 있기 때문에 어떻게 한다는 정도만 예시하고 넘어가겠습니다.
<html>
<head>
<style type="text/css">
<!--
i { font-family: 굴림; font-style: italic; color: blue }
-->
</style>
</head>
<body>
<i>이것은 파란색 이탤릭체 입니다</i>
</body>
</html>
또는 개별 태그별로,
<i style=" font-family: 굴림; font-style: italic; color: blue;">blue italics</i>2. 독립적인 스타일 쉬트 파일을 사용
위에서 얘기한대로, css는 html파일과 별도의 독립적인 파일로 만들어서 규정을 하는 것이 좋고, 또 훨씬 유용합니다. css 파일 하나만 손질하면 수천,수만개의 문서 스타일을 한 번에 바꿀 수 있기 때문입니다. 만드는 방법은 간단합니다. 텍스트에디터 아무 것이나 실행한 다음,
i { font-family: 굴림; font-style: italic; color: blue }위의 css를 입력합니다. 그리고 적당한 이름으로 저장하세요. 예를 들어 basic.css라는 파일명으로 html 문서와 같은 디렉토리에 저장을 하세요.
그 다음, 그 css 파일에 규정한 스타일대로 보여지게 할 html 문서는 다음과 같은 태그를 <head> 파트에 넣어두면 됩니다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="basic.css" />
</head>
link 태그는 외부 css 파일을 불러들이는 역할을 하게 됩니다. href에는 css 파일이름을(html 파일과 다른 디렉토리에 있다면 상대적 패쓰를 맞춰서) 입력하면 됩니다.
이제, 이렇게 head 태그에 위와같이 <link rel= .. />이 들어있는 html 문서는 모두 다 basic.css 파일에서 규정한 스타일의 조종을 받게 됩니다.,
이렇게 모든 문서가 다 basic.css의 통제를 받게 되었다면 이제 이 basic.css 파일만 수정함으로써 모든 문서가 어떻게 보여질 것인지를 결정할 수 있습니다.
스타일 정의 방법
그러면 구체적으로 스타일 정의를 어떻게 하는지 조금 더 자세히 알아 봅시다. 스타일 정의 방법은 위에서 본 것처럼,
selector { property1; property2;..}입니다.
이때 속성은 이름:값의 형태를 갖습니다.
i { font-family: 굴림; font-style: italic; color: blue}<i> 태그는 폰트 종류:굴림, 폰트 스타일:이탤릭, 폰트 컬러:파란색으로 보이게 됩니다.
그리고 조금 더 읽기 좋게 하기 위해 다음과 같이 쓸 수도 있습니다.
h3 {
font-family:굴림;
font-sytle:italic;
color:red
}
또, 한 속성에 여러 가지 값을 부여하고 싶다면 콤마를 이용하면 됩니다.
h3 {
font-family: 굴림, 돋움, sans-serif;
font-style: italic;
color: red
}
font-family 속성을 여러 종류의 폰트로 규정한 것을 볼 수 있습니다. 이 경우 웹브라우져는 사용자 컴퓨터에 저장된 폰트를 만날 때까지 계속 읽어나갑니다. 위의 경우 먼저 굴림체를 찾아보고, 굴림체가 사용자 컴퓨터에 있다면 굴림체로 보여줍니다. 굴림체가 없으면 돋움, 그것도 없으면 sans-serif 폰트 중 어떤 것으로 보여주는 것입니다.
특히 마지막 sans-serif 부분은 특정 폰트를 지정한게 아니라 일반적인 폰트 스타일을 얘기한 것으로, font-family:에는 반드시 써주는 것이 좋습니다. 왜냐하면 지정한 폰트를 갖고 있지 않은 컴퓨터에서 어떻게 디스플레이할 지를 지정해 둬야 하니까요.
클래스를 이용한 자신만의 스타일 정의
대부분의 (x)html 태그는 다 selector로 쓸 수 있습니다. b, p, blockquote, i, strong, code, h1, h2, tr, td, . . . . . 하지만 특별히 자신만의 스타일을 정의해야 할 필요가 있는 경우도 있습니다. 그럴 때 사용하는 것이 클래스(classes)와 아이디(IDs)입니다.
클래스 스타일을 정의하는 방법은 다른 xhtml 태그 때와 마찬가지입니다. 단지 selector를 . 마침표로 시작해야 한다는 점만 다릅니다.
.gray {background-color:#eee;}gray라는 클래스를 정의한 것입니다. 맨 첫 글자가 마침표라는 것만 주의하면 됩니다.
이 스타일을 (x)html 문서에서 사용할 때는 문서 내 어떤 '덩어리'를 위의 gray 스타일로 보이게 할 때 쓰게 됩니다. 그렇게 어떤 부분을 한 덩어리로 묶어주는 태그가 <div>..</div> 태그입니다. 예를 들어,
<div class="gray">이것은 바탕색이 회색입니다.</div>는 이렇게 보입니다.
<div class="클래스 이름">클래스 스타일로 보일 부분</div>처럼 쓰는 것입니다.
그리고 컬러를 #eeeeee 대신 #eee처럼 사용했다는 것도 주목하세요. css에서는 전자처럼 써도 되고 후자처럼 줄여 써도 됩니다.
그러면 클래스를 어떻게 이용할 수 있을까요? 웹페이지의 기본적 구성요소를 크게 몇 개의 덩어리로 나누고, 이들 각각의 스타일을 클래스를 이용해서 정의하면 전체 문서의 레이아웃을 바꿀 때 각 페이지의 '부품'별로 css 파일만 수정하면 됩니다. 예컨데,
.title {background-color:#ccc; font-family:굴림, sans-serif; font-size:10pt;}
.bigTitle {background-color:#ccc; font-family:굴림, sans-serif; font-size:12pt;}
.navigation {background-color:#eee; font-family:굴림,sans-serif; font-size:10pt;}
.mainBody{background-color:#fff; font-family:굴림,sans-serif; font-size:10pt;}
처럼, 문서의 기본 구성요소 별로 스타일을 지정합니다. css를 이용하면 기존 html 태그보다 훨씬 더 정교하게 화면상의 디스플레이를 조정할 수 있기 때문에 수많은 table 태그 해킹, 싱글 픽셀 사용 없이, css 파일 하나만으로 모든 페이지 레이아웃을 원하는대로 정밀하게 수정할 수 있고, 이렇게 문서의 가장 큰 구성요소를 <div>를 이용해서 나눠 두고 이를 외부 스타일 쉬트 하나로 통제하는 형태로 싸이트 전체를 구성하는 것이 좋습니다.
큰 구성요소 하부에 부가적인 블럭이 들어가야 할 필요가 생기면 그 때는 또 다른 div를 사용해서 정의하면 됩니다. 그리고 그렇게 정의된 스타일은 밑에서 설명될 컨텍스츄얼 실렉터를 이용해서 계층별로 정말 편리하고 정밀한 스타일 정의가 가능합니다. 이렇게 문서의 가장 큰 구성 단위를 개별 클래스로 정의함으로써 페이지 레이아웃 전체를 크게 변경하는 것도 css 조절만으로 손쉽게 가능한 것입니다.
selector 그룹짓기
만약 같은 스타일로 보여질 여러 개의 selector가 있다면 다음과 같이 콤마를 써서 한 데 묶을 수도 있습니다.
h1, strong, em, td {
font-family: 굴림;
color: blue;
}
이렇게 해 주면 <h1>, <strong>, <em>, <td> 태그에 담긴 내용은 모두 파란색 굴림체로 보여지게 됩니다. 물론 이 경우에도 그 특정 태그가 원래 갖고 있는 속성은 그대로 유지됩니다. 이를 테면 <h1>은 여전히 큰 글자로 보여질 것이며, <strong>은 굵은 글자로 보여지는 것입니다. 컬러와 폰트만 바뀌는 것입니다. 또는 부가적으로 포매팅을 하고 싶다면 한번 더 정의하면 됩니다. 다음 예를 보세요.
h1, strong, em, td {
font-family: 굴림;
color: blue;
}
h1 {font-style: italic}
h1 은 이제 파란색, 굴림체일 뿐만 아니라 이탤릭체로 보여지게 됩니다. 이렇게 css는 "cascading"이라는 이름답게 폭포수가 흐르듯 계층구조의 특성에 따라 상위 스타일을 상속하게 되어 있기 때문에 객체지향프로그래밍처럼 대단히 우아하게 스타일을 정의해 들어갈 수 있습니다.
축약형 스타일 정의
스타일 정의는 압축해서 짧게 쓸 수도 있습니다.
em {
font-family: 굴림;
font-size: 12pt;
line-height: 14pt;
font-weight: bold;
}
이것은,
em {font: 12pt/14pt bold 굴림}로도 쓸 수 있습니다. line-height에 대해서는 다음 글에서 자세히 다룰 겁니다. 일단은 행간 폭경을 벌려주는 것이라고만 알고 계시기 바랍니다.
슈도클래스(Pseudoclasses)
슈도클래스를 이용하면 html에 기본으로 들어 있지는 않지만 웹브라우져에서는 지원이 되는 부가적인 속성을 만들어 낼 수도 있습니다. 예를 들어, <a> 태그는 link, active, visited 속성이 없습니다. 하지만 실제 웹브라우져는 링크의 상태에 따라 다른 색깔을 보여주고 있습니다. 그래서 다음과 같이 <a> 슈도 클래스를 정의할 수 있습니다. 콜론을 : 사용합니다.
a:link {color: blue}
a:visited {color:red}
a:active {color: white}
이렇게 하면, 방문하지 않은 링크는 파란색, 방문한 링크는 빨간색, 링크를 클릭하면 하얀색으로 바뀝니다.
자주 쓰는 활용을 하나 예로 들어 볼까요? 링크에 밑줄이 없는데 마우스 포인터를 위로 가져가면 색깔이 바뀌면서 밑줄이 생기는 것이 많이 쓰이는데요, 이렇게 합니다.
a:link {color: blue; text-decoration: none;}
a:visited {color:red; text-decoration: none;}
a:active {color: red; text-decoration: none;}
a:hover {color: pink; text-decoration: underline;}
일반적인 링크는 밑줄이 없는 파란색(text-decoration:none)으로 보이다가 마우스 포인터를 링크 위로 가져가면 (hover) 핑크색으로 바뀌면서 밑줄이 생기게 됩니다.(text-decoration:underline)
컨텍스츄얼 실렉터(Contextual Selector)
이것이 매우 중요합니다. 다음의 예를 보세요.
strong i {color:red}위와 같이 몇 개의 selector를 나열하 듯이 쓰는 경우 뒤에 나온 것은 앞에 나온 selector 내에서만 의미를 갖습니다. 위의 스타일 정의는, strong 태그 안에서 나오는 i 태그만 빨간색이 된다는 의미입니다. 즉 i 태그가 strong 태그라는 컨텍스트 내에서만 빨간색이 되는 것입니다. 문자 그대로 selector가 어떤 문맥에 있느냐에 따라 스타일을 다르게 할 수 있습니다.
그렇다면 왜 컨텍스츄얼 실렉터가 중요할까요? 예를 들어 이미지를 링크로 활용할 때 경계선을 감추는 경우를 생각해 봅시다. contextual selector를 이용하면 기존 html 태그처럼 일일이 border="0"을 쓸 필요 없이 다음과 같이 스타일 정의를 해 두는 것으로 모든 게 끝납니다.
a img { border:0; }a 태그 내부에서 img 태그가 나오는 경우 border는 0이 됩니다.
이제, 이것이 xhtml과 무슨 관련이 있는지 생각해 봅시다. xhtml은 html을 xml의 형태로 확장한 것이라고 했습니다. xml처럼 html 태그가 서맨틱스적인 면, 즉, 태그가 감싸고 있는 내용이 어떤 내용인지를 설명하는 식으로 사용하게 하려는 1단계로 xml의 엄격한 형식을 사용하도록 권장한 것입니다. 따라서 xhtml 태그 중 div테그로 페이지의 구성 요소를 가장 큰 범위부터 계층적으로 정의를 한 다음, 그 내부에 들어가는 개별적인 덩어리들을 역시 div class="의미있는이름"로 정의하면 웹페이지가 구조적으로도 깔끔할 뿐만 아니라 개별 의미 덩어리로도 구분될 수 있는 형태가 됩니다. 그리고 바로 여기에 컨텍스츄얼 실렉터를 사용함으로써 스타일까지 문맥에 맞게 계층적으로 정의할 수 있는 것입니다.
예컨데, 어떤 페이지를 크게, 헤더, 제목(대/중/소), 요약설명, 본문, 하부 네비게이션으로 나누었다면, 이들을 가장 큰 단위로 생각하며 각자 클래스를 정의하고, 이들 큰 구성요소의 하부단위 역시 개별적 클래스 정의를 한 다음 이들의 스타일을 문맥에 맞게 정의할 수 있습니다. 만약, "본문" 클래스에서 나오는 링크는 밑줄을 보이도록 하고 네비게이션 클래스에 나오는 링크에서는 밑줄을 보이고 싶지 않다면 컨텍스츄얼 실렉터를 이용해서 다음과 같이 정의할 수 있습니다.
a:link {font-size:10pt; color:#006;text-decoration:underline;}
a:visited {font-size:10pt; color:#006;text-decoration:underline;}
a:active {font-size:10pt; color:#006;text-decoration:underline;}
a:hover {font-size:10pt; color:#69c;text-decoration:underline;}
.navigation a:link {font-size:10pt; color:#309;text-decoration:none;}
.navigation a:visited {font-size:10pt; color:#309;text-decoration:none;}
.navigation a:active {font-size:10pt; color:#309;text-decoration:none;}
.navigation a:hover {font-size:10pt; color:#fc6;text-decoration:underline;}
"navigation" 클래스 내에 나오는 링크는 .navigaton a에서 정의된 스타일로 보여지므로 개별적으로 정의된 컨텍스츄얼 실렉터의 조종을 받게 됩니다. "navigation"이 아닌 나머지는 가장 상위 레벨에서 정의한 스타일대로 보일 뿐입니다.
또는 마우스를 링크 위에 가져갔을 때만 다른 컬러로 보이고 싶다면
.navigation a:hover {font-size:10pt; color:#69c;text-decoration:underline;}이것만 써주면 됩니다. 나머지는 위에서 정의한 것을 그대로 상속하므로 따로 정의할 필요가 없습니다.
이것은 실렉터 그룹짓기로 다음과 같이 더 줄일 수도 있습니다.
a:link, a:visited, a:active {
font-size:10pt; color:#006;text-decoration:underline;
}
a:hover {
font-size:10pt; color:#69c;text-decoration:underline;
}
.navigation a:hover {
font-size:10pt; color:#69c;text-decoration:underline;
}