티스토리 뷰
2000-12-14
xhtml과 css : 써맨틱스와 스타일의 분리
초기 html은 페이지의 보여지는 면을 규정하는 태그와 내용을 규정하는 태그가 뒤섞여 있어서 내용과 형식이 완전히 분리된 상태가 아니었습니다. 내용과 스타일의 분리가 중요한 이유는 일차적으로 싸이트의 유지관리와 업그레이드가 훨씬 쉬워진다는 측면에서 그렇고, 웹의 미래라고 할 수 있는 semantic web으로 나아가는 데 있어 가장 기초적인 요구조건이 웹 문서의 스타일과 써맨틱스의 분리이기 때문입니다. 하지만 대부분의 html 페이지는 그렇지 못 한 상태에 있고 그 점을 개선하기 위해 웹의 표준을 만들고 전파하는 w3c.org은 html의 차세대 버전인 xhtml(Extensible HyperText Markup Language)을 만들어 혼돈스런 html로부터 차세대 xml로 부드럽게 이행될 수 있게 하고자 했습니다.
xhtml은 xml의 형태로 html을 확장한 것입니다. xhtml 문서형에 맞게 만들어진 문서는 일반적인 웹브라우져 뿐만 아니라 다른 xml 기반 에이젼트에서도 큰 문제 없이 디스플레이하는 것을 목표로 합니다. 가급적 내용은 내용대로 스타일은 스타일대로 확실하게 분리된 쪽으로 페이지를 만드는 것이 제작 및 관리가 쉬워질 뿐만 아니라 훨씬 더 플랫폼 독립적으로, 브라우져 의존성도 낮고 기기 의존성이 낮은 페이지를 만들 수 있습니다.
먼저, 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 sheets 라는 이름에서 볼 수 있듯 한 문서에 적용되는 스타일은 여러 개일 수 있습니다.
이 경우 제일 좁은 범위를 갖는 스타일이 우선권을 갖습니다. 즉,
1. 개별 태그의 스타일 속성
2. 블록 (blockquote, p 같은) 스타일
3. 문서의 head에서 규정한 스타일
4. 외부에서 읽어 들인 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;
}
측정 단위, px, em, 포인트, 파이카
측정 단위는 크게 두 종류가 있습니다. 하나는 상대적인 값이고 하나는 절대적인 값입니다.
상대적인 값에 속하는 것은 px(pixel), em, ex, % 등이 있습니다. 이들은 화면의 크기에 따라 측정단위의 크기도 변하는 것들입니다. 예를 들어, 800x600 해상도에서의 1픽셀 크기와, 1024x768 해상도의 1픽셀 크기는 다릅니다. em이나 ex, 퍼센트 등도 그렇습니다.
반면 절대적인 값들이 있습니다. 우리가 일상적으로 많이 사용하는, 인치(inch)라든지, 센티미터, 밀리미터 등이 여기에 속합니다. 그외에, 포인트(pt, points)와 파이카(pc, paicas)도 절대적 단위입니다. 포인트나 파이카는 귀에는 익숙하지만 정확한 크기를 잘 모르고 쓰는 경우가 많은데요. 정확한 크기를 알고 쓰면 더욱 좋겠죠?
1포인트는 1인치를 72로 나눈 값입니다.( 1pt = 1/72inch )
1파이카는 12포인트입니다.( 1pc = 12pt )
em은 어떤 요소의 일반적인 크기를 의미하는 것으로 만약 <p>를 12pt로 지정했다면 1em은 12pt, 2em은 12x2=24pt를 의미하게 됩니다. 조금 더 엄밀하게 얘기하자면 1em은 그 element에 있는 문자의 높이를 의미합니다.
이와 같은 여러 가지 측정 단위들은 화면상의 여러 요소의 크기를 규정할 때 사용되는데, 간단하게는 폰트 크기에서부터 복잡하게는 특정 블럭(block elements)의 화면상의 위치와 크기를 결정하는 데 사용됩니다.
그러면 폰트 크기에 어떻게 쓰이는지 알아 봅시다.
폰트 크기
예를 들어, 모든 패러그래프를(<p> 와 </p>로 둘러쌓인 부분) 다 10포인트로 하고 싶다면,
p {font-size: 10pt}
가 될 것입니다.
또는 머리말을 나타내는 h2 태그를 '보통'(normal) 싸이즈보다 1.5배 크게 보이는 것으로 설정한다면,
h2 {font-size: 1.5em}
그러면 위에서 얘기한 절대적인 값(이를 테면 point)으로 폰트 크기를 지정하는게 좋을까요, 아니면 상대적인 값(em, %)으로 지정하는게 좋을까요?
화면 해상도에 따라 글자 크기가 조절될 수 있도록 상대적인 크기가 좋지 않느냐는 얘기를 하는 사람도 있지만, 사실상 [구글 크롬에 1024 x 768], .. 등처럼 지금 현재 가장 보편적인 해상도와 웹브라우져를 대상으로 고정 값을 주면 큰 무리는 없을 것 같습니다. 그렇게 하는 게 좋은 또 하나의 이유는 em이나 %의 경우 다소 불안정하다고 알려져 있기 때문입니다. 웹브라우져 호환성 문제도 크고 의도하지 않은 방식으로 디스플레이되는 경우가 많습니다. 현시점의 표준에 해당하는 해상도와 플랫폼을 중심으로 고정 값을 사용하는 게 더 좋은 것 같습니다.
포인트는 한 가지 조심할 점이 있습니다. 매킨토시에서는 똑같은 포인트의 폰트라도 1/3 가량 작아 보입니다. 이런 이유로 해서 픽셀(px)을 쓸것을 추천하는 사람도 있습니다. 픽셀을 쓰고 싶다면, 윈도우즈의 경우 10pt가 13px 정도에 해당된다고 생각하고 쓰면 됩니다. 즉, 모든 패러그래프를 10 포인트 크기로 하고 싶다면,
line-height
line-height는 줄과 줄 사이의 간격을 띄워 주는 css의 속성입니다. 지금 읽고 있는 이 페이지 역시 줄과 줄 사이를 적절하게 띄워 둔 것입니다. 만약 이 페이지를 그냥 "소스보기"로 저장해서 웹브라우져로 다시 보면 굉장히 읽기가 불편하게 줄들이 붙어 있을 것입니다. line-height를 사용했기 때문에 페이지의 가독성이 좋아지는 것입니다.
어떤 문서의 각 줄(line)은 실제 글자가 차지하는 부분과 위 아래 여백(leading이라고 합니다)으로 이뤄져 있습니다.
한 줄이라는 것을 하나의 박스로 생각해 보세요. 그 박스 안에는 실제 글자가 들어 있고, 글자의 위 아래에는 여백이 있는 것입니다. 이러한 박스가 여러 층으로 쌓인 것이 패러그래프(paragraph)입니다.
line-height(한 줄의 크기) = font-size(글자크기) + leading(공백)
위 식에서 보신대로 line-height는 라인의 높이 즉, 그 박스의 높이입니다.
그러므로 line-height를 18px로 지정하고, 그 라인에 쓰이는 폰트 크기는 16px로 지정했다면 18-16 = 2픽셀 만큼의 여백이 남게 됩니다. 그리고 여백은 항상 위 아래 반반씩 가져가게 되므로 글자 위로 1px, 글자 밑으로 1px의 공백(leading)이 생기는 것입니다. 그 결과, 우리 눈에 보이기로는 각 줄의 글자 사이에 간격이 있는 것처럼 보이는 것입니다. 즉, 행간을 벌려주는 것입니다.
이러한 line-height를 지정하는 방법에는 여러 가지가 있습니다. 앞에서 본 것처럼 픽셀(px)로 지정할 수도 있고, %로 지정할 수도 있고 또는 그냥 숫자로만 지정할 수도 있습니다. 예를 들어,
p {font-size: 10pt ; line-height: 120%}
라고 지정했다면, <p> 태그에 의해 둘러쌓인 부분은 모두 10pt 크기의 폰트로 보이게 되고 각 줄의 높이(=line-height)는 10pt x 120% = 12pt가 됩니다. 따라서 12 - 10 = 2pt의 여백이 남게 되고, 이 여백은 위 아래 반반씩 가져가니까 글자 위에 1pt, 글자 아래에 1pt 씩의 여백이 생기는 것입니다.
이번에는 그냥 숫자로만 지정해 볼까요? 퍼센트랑 마찬가지입니다. 120%를 1.2로 지정하는 것일 뿐입니다.
p {font-size: 10pt; line-height: 1.2}
또는 다음과 같이 지정할 수도 있습니다.
p {font: 12pt/14pt 굴림}
line-height 14pt 중에 폰트 크기는 12pt를 차지한다는 의미입니다.
그러면 퍼센트와 숫자 사이의 차이는 없을까요? 있기는 합니다. 이 스타일 지정을 상속(inherit) 할 때 전달되는 값이 약간 다른데 별로 중요하지는 않습니다.
테이블 태그 해킹을 통한 박스
대부분의 웹 페이지에는 여러 형태의 박스, 블럭 형태가 있습니다. 이런 박스들은 table 태그를 이용해서 만드는 것이 보통이었습니다. 하지만 <table> 태그는 문자 그대로 표를 만들기 위해서 개발된 것이었지 웹 페이지의 라이아웃을 정교하기 위해 만들어진 것이 아니었습니다. 과거에는 페이지 상의 덩어리(block)를 배치하고 조절하는 데 활용할 수 있는 태그가 따로 없었기 때문에 어쩔 수 없이 table 태그를 해킹해서 디자인했던 것입니다.
하지만 css가 나오면서 모든 것이 달라졌습니다. css는 화면 상의 디스플레이와 관계되는 모든 것을 아주 정밀하게 조절할 수 있으므로 굳이 table 태그를 해킹하지 않더라도 다양한 표현이 가능해진 것입니다.
div 태그
그렇게 table을 대체하는 용도로 css에서 사용하는 것이 <div>와 <span>입니다. <div>와 <span>은 "grouping element"라 합니다. 여러 요소를 한 데 모아서 조절하는데 사용되기 때문입니다. <span>은 한 줄 내의 어떤 것을 묶어 주는 역할을 합니다. <div>는 줄과 상관없이 독자적으로 묶어 주는 역할을 합니다. 그래서 <span>은 "inline-level element"라 하고 <div>는 "block-level element"라고 합니다.
예를 들어 위에서 설명한 것처럼 .gray라는 class를 다음과 같이 정의했다고 합시다.
.gray {background-color: #ccc;}
이제, 한 문장의(inline) 바탕색을 회색으로 보이게 하고 싶은 부분이 있으면 <span>을 써서 다음과 같이 하면 됩니다.
<p>흰색 : <span class="gray">회색</span></p>
<div>는 이와 달리 여러 줄을 묶는 데 사용됩니다. 다음의 예를 보세요.
<div class="gray">
css와 xhtml를 사용하면<br />
스타일과 내용을<br />
완벽하게 분리할 수 있습니다
</div>
<div> 태그 내에는 또 다른 구성 요소(blockquote, h3, ...)를 넣을 수도 있습니다. 그 경우 가장 가까운 스타일 정의가 우선권을 갖고, 그게 없다면 차례차례로 스타일 적용이 되어서 최종적으로는 가장 크게 둘러싸고 있는 <div> 태그에서 지정한 스타일을 적용하게 됩니다. 따라서 큰 덩어리를 <div>로 묶어서 화면상의 위치등을 지정한 다음 그 내부에서 또다른 <div>를 써서 점점 더 정밀한 스타일을 정의해 들어가면 폭포수가 흐르듯(cascading) 스타일을 논리적으로 규정할 수가 있습니다. css의 마력은 거기에 있습니다.
border, padding
기존에 <table> 태그를 이용해서 구현했던 정교한 디자인은 어떻게 css로 구현할 수 있을 지 자세히 알아 봅시다.
먼저, <div> 태그를 이용해서 묶어준 부분의 경계선과 여백을 어떻게 설정하는지를 중심으로 알아 봅시다.
| table 태그 | css |
| border | border-width:thin/medium/thick border-style: none/groove/inset/outset/dotted/dashed/double border-color: |
| cellpadding | padding |
| table 바깥 여백 | margin-top margin-right margin-bottom margin-left |
| width | width |
| align | float, text-align |
| bgcolor (table,tr,td) | background-color |
위 표에서 본 것처럼 <table>의 특성 하나가 모두 css로도 구현 가능합니다.
테이블의 폭경, border 의 두께, 색깔, 종류, 테이블 경계와 글자 사이의 간격(padding), 테이블 색깔 등을 css만으로 완벽하게 조절할 수 있습니다.
이런 식으로 합니다.
.boxSample1 { width: 20%;
float:right;
text-align:center;
border-width:thin;
border-style:groove;
border-color:#333;
padding:3pt;
background-color:#eee;
margin:2em;}
위와 같이 스타일 정의가 되었다면 박스를 만드는 것은 간단하죠. <div class="boxSample1">박스 샘플 1</div> 처럼 묶어 주면 됩니다.
위 스타일 정의를 자세히 알아 봅시다.
1. width 는 <table>의 width와 똑같습니다. 숫자(픽셀)나 퍼센트로 지정할 수 있습니다.
2. float은 <img> 태그의 align과 비슷합니다. 화면의 어느 쪽에 '떠다니느냐'는 것입니다. <img>의 align 처럼 right, left 등으로 설정할 수 있습니다. 위의 예에서는 right으로 했기 때문에 박스가 본문의 오른쪽에 배치된 것입니다.
3. text-align은 <div> 태그 내에 들어있는 텍스트, 다른 구성요소(이미지,..)의 위치를 잡을 때 사용합니다. right, left, center의 세 가지 속성을 부여할 수 있습니다.
4. border-width, border-style, border-color는 박스 경계선의 폭경과 스타일, 색깔을 규정합니다.border-width의 속성에는 thin, thick이 있습니다.border-style은 groove, inset, outset 등의 속성이 있습니다. 경계선을 안으로 볼록하게 할 것인지 밖으로 볼록하게 할 것인지 등을 설정하는 것입니다.
5. padding은 <table>의 cellpadding처럼 박스 내에 담긴 부분과 경계선 사이의 여백을 가리킵니다. css에서는 이를 상하좌우 각각 설정할 수도 있습니다. 이런 식입니다. padding-right, padding-left, padding-top, padding-bottom. 이 점은 위에서 본 border도 마찬가지입니다.border-top-style, border-bottom-color 등의 형태가 가능합니다.
6. background-color는 배경색 설정입니다. table bgcolor, td bgcolor, tr bgcolor를 대체합니다.
7. margin은 박스 바깥 쪽과 박스 사이의 간격입니다. padding과의 차이점을 주의하세요. padding은 박스 내의 여백이고 margin은 박스 바깥의 여백입니다. 위에서는 글자 2자 정도로 벌린 것으로 설정했으므로 주변 텍스트의 오른쪽을 흐르면서(float:right) 텍스트와는 margin에서 지정한 만큼 떨어져 있는 것입니다.margin은 margin-left, margin-right, margin-top, margin-bottom을 각각 설정할 수 있습니다.
물론 위 스타일 정의를 한 줄로 쓰셔도 됩니다. 읽기 좋게 하기 위해 줄을 나눈 것일 뿐입니다.
css에는 이 문서에서 다룬 것보다 훨씬 더 많은 다양한 property가 있으므로 웹에 있는 레퍼런스 자료를 참조하면 다양한 스타일 정의가 아주 손쉽게 가능합니다.
'프로그래밍' 카테고리의 다른 글
| 펄(Perl)의 배열(array), 리스트(list) 그리고 문맥(context) (0) | 2020.07.29 |
|---|---|
| 펄(Perl), ASP, PHP, JSP 비교 : Server Side Scripting Languages (0) | 2020.07.23 |
| 메타 태그 (Meta Tag) (0) | 2020.07.03 |
| 프로그래밍 언어의 간단한 역사 (0) | 2020.07.02 |
| 펄(Perl)의 사용자 입력처리: <> 연산자와 chomp (0) | 2020.06.30 |