CSS 스토리

1. XHTML - What & Why?
원래 이 글의 목적은 CSS에 대한 이야기입니다만, XHTML을 빼놓고 CSS를 이야기하는 건 뭔가 허전합니다. 그래서 먼저 간단하게 짚고 넘어갑니다.
사실 XHTML의 핵심내용은 너무 간단해서 열줄 정도로 정리할 수도 있습니다. 중요한 것은 왜 XHTML을 써야하는가겠지요.
일단 XHTML이 무언가에 대해서부터.
XHTML은 eXtensible HyperText Markup Language의 약자입니다. HTML을 대체하기 위한 목적으로 만들어졌고, HTML 4.01 규약에 "거의" 준합니다. 쉽게 말하자면 XHTML은 HTML의 XML 버전이라고 생각하시면 되고 일반 HTML에 비해 좀더 명확하고 구조적인 특징을 가지고 있습니다.
2000년 1월에 W3C의 공식 표준으로 지정된 이후 HTML의 표준이라하면 XHTML 1.0을 가리킵니다. 당연히 최근의 모든 HTML 브라우저는 XHTML 1.0을 완벽히 지원하고 있습니다.(지원해야만 합니다.)

그러나, 대부분의 브라우저는 일반 HTML을 써도 상관없습니다. 게다가 HTML 문법이 상당히 느슨하기 때문에 어쩌면 XHTML의 딱딱한 규정을 지키는 것이 오히려 번거로울 수도 있습니다. 그렇다면 왜 굳이 HTML대신 XHTML을 써야 할까요?

- XHTML은 XML의 일종입니다.
사실 국내에서 웹 페이지 제작은 "IE를 통해 사용자가 눈으로 보는 것"을 목적으로 만들어집니다. 따라서 일단 눈으로 보이는 부분만 멀쩡하면 내부적으로 HTML 문서가 어떻게 구성되어있든 아무도 신경쓰지 않지요.
뭐가 문제가 되냐구요? HTML의 재활용과 생산성의 문제입니다. 일반적인 관습대로 작성된 HTML 문서는 내용과 디자인, 문서구조가 모두 뒤범벅이 되어있습니다. 디자인을 바꾸려면 일일이 HTML문서를 수정해줘야 합니다. 내용이나 문서구조 역시 마찬가지. 당연히 크로스 브라우징이나 크로스 플랫폼은 아예 염두에 두지 않습니다. HTML 문서가 반드시 "사람의 눈"에만 보이는 것은 아닐 수도 있습니다. 어떤 어플리케이션의 입력데이터로 HTML이 사용될 수도 있고, 때로는 상이한 플랫폼과 환경에서 해석되어야 할 수도 있습니다.
기존의 HTML 습관으로는 이러한 변화에 대처하기 힘들죠. 그래서 똑같은 내용이라고 하더라도 모바일 환경을 위해서 따로 만들고, PDA버전을 위해 따로 만들고, 심지어는 같은 PC환경이라도 브라우저 버전별로 따로 만들기도 합니다.
단순한 디자인의 문제라구요? 이런 문제도 있습니다. 어떤 회사의 PR 사이트를 만들면서 영어와 중국어 버전이 각각 필요할 때. 이런 경우에도 각각의 페이지를 다 따로 만들어줘야합니다. 어떤 사이트의 페이지를 읽어와서 재가공해야할 경우 일일이 해당 페이지를 분석해서 페이지별로 파싱해줘야합니다. 왠지 뭔가 굉장히 효율이 낮은 작업을 하고 있다는 생각 안드세요?

XHTML은 XML의 HTML 버전입니다. 즉, XML이라는 소리입니다. XML은 잘 아시다시피 데이터 교환을 위해 데이터의 내용과 구조, 형식을 분리 정의하는 규약입니다. 이러한 XML을 지원하는 어플리케이션, 브라우저라면 어디에서나 XHTML은 통용될 수 있습니다. 제대로 작성된 XHTML문서는 크로스 브라우징이나 크로스 플랫폼에 대해 신경쓰지 않아도 됩니다. XML을 지원하는 어플리케이션에서도 별다른 작업없이 바로 입력 데이터로 쓸 수 있습니다. 뒤집어 말하자면, XHTML문서만 제대로 만들어도 별도의 XML문서를 생성할 필요가 없습니다.

- XHTML은 구조화된 문서를 만들어줍니다.
당연한 이야기지만, XML의 규격을 따르게 되니 저절로 "구조화된" 문서로 만들어집니다. 구조화된 문서의 특징은 "가독성"이 높아집니다. 여기서 "가독성"이란 단지 생성된 코드를 사람이 읽기 편하다는 뜻뿐만 아니라, 다른 기계나 프로그램도 읽기 수월합니다. 만약 디자인 부분을 CSS로 분리해낸다면 훨씬 더 간단해집니다. 지금까지 만들어온 일반적인 HTML 코드를 떠올려보세요. 아마도 실제 내용보다 디자인 요소가 차지하는 부분이 더 클 겁니다. 파일의 용량이 커짐은 물론, 도대체 이 HTML문서가 뭘 하는 문서인지, 무엇을 보여주려고 하는 문서인지 사람의 눈으로 브라우저에서 띄워보기 전까지는 파악할 방법이 없습니다. 무엇이 컨텐츠인지, 무엇에 대한 컨텐츠인지, 사람이 한번 해석해서 파싱문법을 가르쳐주지 않으면 기계나 프로그램으로서는 알 수가 없습니다.
XHML과 CSS를 사용함으로써 훨씬 가벼워진 페이지를 만들어낼 수 있습니다. 잘 구조화된 XHTML 문서는 수정이나 재활용도 훨씬 쉬워집니다.

2. XHTML - How?
XHTML의 규약은 매우 단순(?)합니다. 위에서 XHTML이 무엇이며, 왜 써야하는지에 대해 설명한 것을 보면 엄청나게 거창할 것 같지만 사실, 김빠질 정도로 단순하죠.

1) 모든 엘리먼트들은 반드시 완벽하게 중첩되어야 합니다.
일반 HTML문서라면 <b><i>테스트</b></i> 처럼 쓰더라도 아무 문제가 없습니다만, XHTML 문서는 반드시 <b><i>테스트</i></b>처럼 중첩구조가 완벽해야합니다. HTML에서는 가끔 닫는 태그를 빼먹어도 별 문제없이 동작하지만, XHTML에서는 </xxx>처럼 닫는 태그들을 반드시 사용해야 합니다. 특히 <p>태그를 사용할 때라든가, 문서 마지막에 </html>쓰는 것 같을 때 주의해야겠지요.

2)모든 태그와 속성들은 소문자를 사용합니다.
<DIV NAME="xxx"> 처럼 쓰면 안되고 반드시 <div name="xxx">처럼 써야합니다. 물론 대문자로 쓰더라도 해석은 됩니다만 어플리케이션 호환성을 위해 반드시 소문자로 쓰는 습관을 들입시다.

3)홀로 쓰이는 단독 태그들도 반드시 닫겨야 합니다.
Empty Element라고 불리우는 단독 태그들 - br, hr, img 등등... - 은 쌍으로 열리고 닫기지 않는데 어떻게 하냐구요... <br />, <hr />, <img src="xxx" />처럼 써야합니다. /앞의 공백은 붙여주시는 쪽을 권장합니다.

4)속성값을 줄 때에는 반드시 겹따옴표로 묶어줍니다.
즉, <table width=100>은 틀린 XHTML 문법이며, <table width="100"> 처럼 써야만 합니다.

5)단축형 속성값은 쓸 수 없습니다.
즉 <option selected> 대신 <option selected="selected">처럼 써야만 합니다.

6) name 속성대신 id 속성을 사용합니다.
<input name="password" /> 대신 <input id="password" />처럼 사용합니다. name과 id의 가장 큰 차이점은 하나의 문서내에서 동일한 name값을 가지는 엘리먼트들이 있어도 상관없지만, id값은 같은 문서에서 동일한 id값을 가질 수 없습니다.
조금 다른 이야기지만 JavaScript에서 문서내의 객체에 접근할 때, 이런 엘리먼트의 name을 바로 오브젝트나 프로퍼티처럼 쓰는 경우가 있는데, 잘못된 습관입니다. (IE가 나쁜 버릇은 전부 들이게 만든다는... -_-a) 예를 들어 password.value 처럼 쓰는 것은 옳지 않습니다. 이럴 경우에는 getElementsByName이나 getElementById 같은 메쏘드를 써서 해당 오브젝트를 반환받아 써야합니다. 즉, getElementById('password').value 처럼 쓰는 것이 옳습니다.

당분간은 옛날 브라우저와의 호환을 위해 id와 name을 동시에 쓰는 쪽을 권장합니다.

7)lang 속성의 사용
만약 문서내에 특정 언어로 쓰여진 부분이 있다면, lang 속성을 이용해 언어를 구분해줍니다.
<div lang="no" xml:lang="no">Heia Norge!</div>
노르웨이어로 쓰여진 부분이라면 이런 식으로 처리한다는 예입니다.

8)<!DOCTYPE>의 사용.
실제로 이 <!DOCTYPE>은 XHTML 문법에는 포함되지 않습니다. 이것은 해석기나 브라우저로 하여금 이후 이어지는 문서가 XHTML이며 어떤 DTD(Document Type Definition)에 의해 해석되어야하는 지를 지정해주는데 이용됩니다. 통상 Strict, Transitional, Frameset의 세 종류가 있으며, Strict는 엄격한 XHTML문법을 따르고 CSS와 같이 이용될 때 쓰입니다. Transitional은 틀린 XHTML 문법이 있어도 HTML문법에 준해서 오류를 허용할 때 쓰입니다. Frameset은 말그대로 HTML의 frame을 이용할 때 쓰입니다. 각각의 경우에 대해 아래의 내용을 문서의 가장 첫줄에 적어주시면 됩니다. (기왕 XHTML을 만드는 것, 되도록이면 Strict를 쓰도록 합시다.)

Strict :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

다음은 이러한 XHTML 규칙에 따라 생성된 XHTML 코드의 예입니다. 아마 겉으로 보기에는 일반 HTML과 별 차이를 못느끼실지도. ^_^;

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>


생각보다는 간단하죠?

Strict DTD에서는 사용할 수 없는 HTML 태그들이 있습니다.
<applet> : 애플릿을 이용하기 위해서는 <object> 를 대신 쓰세요.
<frame>, <frameset>, <noframes>: Frameset DTD로 선언하지 않으면 사용할 수 없습니다.
<center>, <font>, <basefont>, <s>, <strike>, <u> : 이러한 "디자인 요소"들은 사용할 수 없습니다. 디자인과 관련된 부분은 모두 CSS에서 처리하도록 합니다.
<iframe> : XHTML 문서에서는 iframe을 사용하지 않습니다. 구조화된 문서를 만드는데 방해됩니다.
<dir>, <menu> : 역시 사용하지 않습니다. (HTML 4.01에서도 삭제되었죠. ^_^)

속성에 대해서도 조금 설명..
class, id, style, title은 대부분의 태그에서 사용되는 핵심 속성입니다. class는 클래스규칙이나 스타일규칙을 적용하는 속성이며, id속성은 해당 엘리먼트를 다른 엘리먼트와 구분짓게 하고, style은 인라인 스타일을 적용할 때 쓰입니다. title은 해당 엘리먼트에 대한 설명으로 보통 툴팁 도움말을 띄울 때 쓰죠.
보통 다음처럼 씁니다.
<div id="greeting" class="main_text" style="border:1px solid #F00;margin:5px" title="Hello, World">
Hello World
</div>
물론 필요없는 속성은 생략해도 되죠.
이 밖에 텍스트 출력방향을 지정해주는 dir속성과 사용되는 문자코드를 지정해주는 lang속성이 있으며,
엘리먼트에 키보드 단축키를 지정해주는 accesskey 속성과 탭 인덱스 순서를 지정해주는 tabindex 속성이 올 수 있습니다.

휴.. 너무 길어졌네요. ^_^ XHTML의 이벤트 속성은 DHTML이나 JavaScript규약에 준하니 그 쪽을 참고하시면 됩니다.

XHTML에 대해서는 이쯤 해서 마치고, 다음부터는 실제로 CSS를 이용한 디자인에 대한 이야기를 하겠습니다. 어떻게 하면 문서를 디자인으로부터 해방시킬까에 대한 내용이 될 것 같네요. 참, 그전에 아주 간단한 CSS 요약 정리정도는 들어갈 듯.

1. CSS?
CSS란 Cascading Style Sheets의 약자입니다. HTML 4.0 이후부터 Style을 사용하므로써 HTML 문서와 디자인을 분리시키는 것이 가능해졌습니다. Style이란 HTML 요소들이 어떻게 디스플레이될 것인가에 대한 정의를 말합니다.

원래 HTML은 문서의 구조와 내용을 나타내기 위해 만들어진 규약입니다만, 브라우저가 발달하면서 점차 디자인에 이용되는 태그들이 많아졌습니다. 그러다보니 이제는 주종이 바뀌어서, 내용이나 구조는 어찌 되었건간에 디자인과 관련된 분량이 더 많아졌습니다. 이러한 문제점을 해결하기 위해 HTML 4.0에서부터 적용되기 시작한 것이 CSS입니다.

CSS의 등장으로 인해 HTML에서 디자인적인 요소가 분리될 수 있음으로써 얻는 이득은 매우 많습니다. 우선 작업시간이 단축됩니다. 문서가 간결해지며 기계나 프로그램으로 문서해독이 용이합니다. 수정시간도 단축되며 제대로 구조화된 HTML문서와 결합된 CSS를 사용함으로써 문서의 구조와 내용의 변경이 아니라면 원본 문서를 건드리지 않고 디자인 부분은 얼마든지 자유자재로 변경이나 적용이 가능합니다.

실제로 우리는 현장에서 일할 때 이런 요구를 많이 받습니다.
"음... 아무리 봐도 본문에 글씨 색이 마음에 안들어. 검은색 대신 회색으로 바꿔보는 게 어떨까?"
자, 이러면 난리가 납니다. 한 두페이지로 이루어진 사이트라면 모를까, 몇 백 페이지로 된 사이트... CSS를 전혀 쓰지 않았다면 <font color="black">으로 된 부분을 모두 찾아서 <font color="gray">로 바꿔줘야 합니다.
다행히(?) 요즘 기초적인 CSS는 디자이너나 개발자들도 조금은 알고 있어서 CSS 변경으로 한큐에 일괄 변경하는 꼼수 정도는 다들 알고 계실 겁니다.

그러나 CSS로 이런 것도 가능할까요?
"음.. 아무래도 상단 배너 이미지는 빼버리는 게 낫겠군. 그리고 지금 오른쪽에 있는 메인 메뉴들은 상단으로 올려서, 3단으로 구성된 페이지를 2단으로 만들어보는 건 어떨까? 로그인 박스는 메뉴밑에 한줄로 표현하고..."
결론부터 말하자면 가능합니다. 단, TABLE로 페이지 레이아웃을 잡은 경우라면 대략 난감. TABLE은 "표"를 표현하라고 있는 거지, 사이트 디자인하기 위해 레이아웃잡으라고 있는 태그는 아닙니다. 만약 TABLE을 써서 디자인을 했다면 위와 같은 요구를 받는다면 골치아파지죠.

다시 강조하지만, 문서의 구조와 내용을 바꾸는 경우가 아니라면, 디자인은 얼마든지 CSS만으로 구성이 가능합니다. 전제 조건은 하나. 문서가 잘 구조화되어있을 것.(그래서 CSS 이야기를 하기전에 XHTML에 관해 먼저 썰을 풀었던 거지요.)

2. 문서의 구조? 내용?
하나의 HTML문서를 이루는 성분으로는 구조, 내용, 디자인이 있습니다.
구조란 이 문서의 형식, 구성요소들을 말합니다. 메인메뉴가 있고, 서브메뉴가 있고, 네비게이션영역이 있고, 로그인박스가 있고, 헤드라인이 있고, 컨텐츠가 있고... 하는 것들이 문서의 구조를 가리킵니다.
내용이란 이 구조를 통해 실제로 전달하고자 하는 데이터라고 생각하시면 됩니다.
그리고 디자인이란 이러한 구조와 내용을 가진 문서가 실제로 브라우저 등을 통해 어떻게 보여지느냐에 관한 것입니다.
예를 들어, 어떤 문서에 박스기사를 삽입하는 것은 문서의 구조를 변경시키는 것입니다.
이 박스기사에 올림픽에 관한 글이 들어가야한다면 그것은 문서 내용에 관한 영역이됩니다.
이 박스기사가 브라우저 출력시에 어느 위치에 어떤 식으로 보일 것인가를 결정하는 것이 디자인입니다.

CSS가 만능은 아닙니다. 구조와 내용에 대해서는 건드릴 수 없습니다. 하지만 그것이 어떻게 표현될 것인가 하는 부분은 CSS의 전문 영역입니다. (역시 꼼수를 써서 구조와 내용조차도 "눈속임"을 통해 건드릴 수 있기도 합니다. ^_^;;)

3. Cascading
Style은 알겠는데 Cascading?
Cascading은 사전적 의미로는 "다단화하기" 쯤으로 번역됩니다. 한글로는 적절히 한단어로 표현하기 어렵네요. 폭포가 계단처럼 연결되어서 차례로 내려오는 것을 가리키는 말입니다.
좀더 풀어 설명하자면, Cascading Style Sheets란, Style Sheets들이 단계적으로 중첩되어 적용됨을 뜻합니다. OO적 개념에 익숙하신 분이라면 "상속"이라는 개념으로 받아들이셔도 됩니다.

Style은 크게 4가지 층위로 Cascading됩니다.
1. 브라우저 디폴트
2. External Style Sheet (<head>안에 <link> 태그로 외부에서 링크됩니다.)
3. Internal Style Sheet(<style>이라는 태그를 써서 문서안에서 정의됩니다.)
4. Inline Style (각 태그에 style=""이라는 속성을 이용해 정의됩니다.)
숫자가 클 수록 우선권이 높습니다. 따라서 <table style="border:none">일 경우 Inline Style인 border:none이 브라우저에서 디폴트값으로 정해진 것에 우선해서 적용되는 것입니다. 실제로 문서에 적용될 때는 위의 네가지 층위의 Style이 모두 합쳐져서 한개의 "Virtual Style"로 적용되어 문서내에서 사용됩니다. 그러므로 Inline Style로 border:none이 적용되었지만 다른 부분은 다른 층위에서 적용된 스타일을 따르게 됩니다.

가끔 include를 써서 외부 html문서를 현재 문서안에 불러왔을 때 디자인이 바뀐다는 질문을 종종 받는데 그 이유는 이러한 이유에서입니다. 특별한 경우가 아니라면 External Style Sheet만을 이용하는 것을 권장합니다.

4. CSS 기초문법
CSS의 문법은 selector, property, value의 세가지 요소로 구성됩니다.
selector {
property:value;
}
selector는 CSS의 스타일을 지정하는 이름입니다. selector는 일반적으로 HTML태그, class 이름, id 이름 등이 올 수 있습니다.
p { /* HTML 태그의 예 */
text-align:left;
}
.paragraph { /* class속성으로 쓸 경우의 예. 앞에 dot(.)가 붙음. */
text-align:right;
}
#main_contents { /* id속성으로 쓸 경우의 예. 앞에 #이 붙음. */
text-align:center;
}

실제 HTML에서 사용할 때는 다음 처럼...
<p>
Test
</p>
<p class="paragraph">
Test2
</p>
<p id="main_contents">
Test3
</p>

원래 class selector는 앞에 적용되는 HTML 태그를 붙여 표현하는게 맞지만 생략해도 됩니다. 위의 .paragraph는 p.paragraph에서 p태그가 생략된 예입니다. 왜 생략을 하냐하면 이 스타일이 반드시 <p>에서만 쓰이지 않을 수도 있기 때문입니다. 그러므로 <div class="paragraph">처럼 써도 통용되도록 하기 위해 일반적으로 HTML 태그는 생략하여 정의합니다. 반대로 HTML태그를 붙여서 정의한다면 각각의 HTML 태그별로 같은 class 이름이지만 다른 형태의 스타일을 지정할 수 있습니다.
id selector도 역시 앞에 HTML태그를 붙여야 하지만 생략가능합니다. class와의 차이라면, id로 정의된 스타일은 오직 한 엘리먼트에서만 사용될 수 있습니다. 예를 들어
<div id="main_contents">
어쩌구저쩌구..
</div>
...
<div id="main_contents">
궁시렁 궁시렁...
</div>
처럼 쓰면 안됩니다. (div#main_contents 처럼 써봤자 안통합니다. 이런 경우라면 class를 써야겠지요?)

만약 여러개의 selector에 동일한 스타일을 부여하고 싶다면 (,)를 사용해서 표현할 수 있습니다.
h1, h2, h3, h4, h5, p.title, #subject { /* 여러개의 style을 한꺼번에 정의할 경우의 예. */
text-decoration:underline;
}

property와 value는 항상 쌍으로 쓰이며, 각 쌍간의 구분은 세미콜론(;)로 구분합니다. 하나의 property에 value값은 여러개가 올 수 있으며 value값간의 구분은 컴마(,)로 구분합니다. 또 value값이 두개 이상의 단어로 이루어졌다면 겹따옴표(")로 묶어줘야 합니다.
body {
font-size:10px;
font-family:tahoma, 굴림, "sans serif";
line-height:150%;
}

하위 selector에 대한 스타일 정의시에는 공백(빈칸)으로 나열합니다.
.main p { /* .main이라는 클래스 안쪽에서 쓰인 <p> 의 경우라는 뜻입니다. */
font-color:red;
}

이 경우에..

<div class="main">
<p>
여기에 쓰인 글은 붉은 색으로 나올테지만...
</p>
</div>
<p>
main클래스 밖에 쓰인 이곳은 붉은 색이 아니랍니다. ^_^;
</p>

이미 눈치채셨겠지만 주석은 /* ~ */로 처리합니다.

일단 여기까지가 기본적인 CSS에 대한 이야기입니다. 시간이 많다면 각 property와 허용되는 value값, 그에 따른 효과등을 일일이 설명해야겠지만 거듭 밝히듯이 강좌가 아닌 관계로 이 정도만 정리합니다. w3c.org 등에서 좀 더 자세한 CSS 규칙을 보실 수 있습니다.
며칠 후에 쓸 세번째 꼭지서부터는 실제 CSS를 이용하여 디자인하기 위해 필요한 기술 및 레이아웃 잡는 법. 재밌는 CSS 활용 팁 등에 대해 다루게 될 겁니다.

일단, 여기 예로 든 것들은 CSS나 XHTML Validator를 돌리지 않은 예입니다. 혹시 일부러 돌려보고 에러난다고 우기시면 울어버릴지도. -_-a 급하게 예를 만드느라 에러만 안나면 그냥 썼습니다. 양해해주세요.



1. Full CSS 디자인을 위한 준비.
1) 완성될 문서의 구조가 먼저 잡혀있어야 합니다.
대개의 경우 페이지의 레이아웃은 먼저 잡혀있기 마련입니다. 이것을 얼마나 논리적으로 잘 쪼개느냐가 구조화된 문서로 가는 지름길입니다.
일단 분할의 기본은 사각형입니다.
현재 PHP스쿨의 메인 화면을 예로 든다면...
- 상단헤더(로고 + 우측 배너 광고)
- 검색 바
- 좌측 메뉴단
- 스폰서 링크단
- 중앙 컨텐츠단
- 하단 푸터

등으로 나뉠 수 있습니다.
이렇게 각각을 분할해도 좋고... 좀더 체계적이길 원한다면

- 상단헤더
- - 로고부문
- - 배너 광고 부문

- 중단 컨텐츠
- - 검색바
- - 메인 섹션
- - - 좌측 섹션
- - - - 메뉴
- - - - 스폰서 링크
- - - 우측 섹션
- - - - Notify
- - - - Survey
- - - - 중앙 광고 1
- - - - News
- - - - Downloads
...

이런 식으로 좀 더 계층구조를 명확히 나누는 방법도 있습니다.
각각이 장점이 있는데, 동일한 층위의 레이어로 분할한 경우에는 CSS 디자인시 포지셔닝에 대해 훨씬 자유로울 수 있습니다. 대신 일일이 absolute로 포지션을 지정해줘야하는 귀찮음이 있죠.
계층별로 세분화한 경우에는 absolute보다는 relative로 포지션을 잡아야하죠. 이 경우의 장점은 보다 상위 계층의 레이어의 포지션을 바꿔도 하위 계층의 레이어는 상위 계층의 레이어를 중심으로 배열이 되기 때문에 덩어리로 움직일 때 좋습니다. 완전히 디자인 구조가 바뀌어야 한다면(예를 들어 메뉴 중 일부를 떼어다가 상단에 붙인다던가 할 경우..) 전자겠지만, 어느정도 틀이 있고 그 선에서 디자인의 변경이 들어간다면 후자쪽이 훨씬 나은 방법입니다.

실제적으로 분할했을 경우에는 각각의 부분을 <div>로 잡아주시면 됩니다. 예를 들면 다음처럼이겠죠.
<div id="top_header">
<div class="logo">
로고 부분...
</div>
<div class="banner">
배너 광고부분..
</div>
</div>
...

그럼 여기에서 CSS positioning에 대해 알아보고 넘어가야겠지요?
모든 HTML 엘리먼트(태그라고 생각하시면 되요.)는 position이라는 CSS 속성을 지닙니다.
static, relative, absolute, fixed의 네가지 속성이 있는데, fixed는 사용되지 않습니다.
static은 position을 따로 지정하지 않았을 경우의 엘리먼트의 위치를 따릅니다. top이나 left같은 위치 이동 속성을 줄 수가 없지요.
relative는 현재 엘리먼트보다 상위 엘리먼트를 기준으로, 현재 엘리먼트의 위치에서의 상대좌표에 의한 위치 지정을 하게 합니다.
absolute는 페이지 좌표(브라우저 좌표)를 기준으로 한 절대좌표의 위치 지정입니다.
일단 예를 보죠.

http://eouia.net/temp/css1.html

소스보기를 해서 style 부분을 봅시다.
test이라고 표시된 빨간 박스는 relative로 지정했고, test2라고 표시된 녹색 박스는 absolute로 지정했습니다. 소스를 보시면 아시겠지만 test class의 상위 엘리먼트는 <body>입니다. 현재 편의상 body를 margin:0px, padding:0px로 잡아 좌표의 기준점을 브라우저의 좌상단모서리로 잡았습니다.
absolute 속성은 이해하기 쉽습니다. 무조건 브라우저의 좌상단 모서리를 기준으로 삼아 top만큼 아래로, left만큼 오른쪽으로 이동한 위치가 좌표점이 됩니다. 그래서 test2 녹색 박스는 브라우저 좌상단을 기준으로 (10px,10px) 이동한 위치에 표시되었습니다.
relative 속성은 다른데, 현재 엘리먼트가 속한 상위 엘리먼트(이 경우에는 body)속에서 자신이 원래 위치했어야할 좌표에서 top만큼 아래로, left만큼 오른쪽으로 이동한 위치가 좌표점이 됩니다. 그래서 test 빨간 박스는 body안에서의 자신의 원래 자리 (지금의 경우에는 body의 기준 좌표점이 브라우저 좌상단 기준과 동일하므로 0px, 0px)에서 top과 left만큼 이동한 50px, 50px에 위치하고 있습니다.

한번 body의 margin을 바꿔서 body의 기준 좌표점이 브라우저 좌상단 모서리와 일치하지 않도록 해보겠습니다.

http://eouia.net/temp/css2.html

body에 margin:50px, 10px를 주어 기준 좌표점이 브라우저 좌상단으로부터 50px, 10px 만큼 이동한 경우입니다. 앞의 예와 비교해보면 absolute 속성의 녹색박스의 위치는 그대로인데, relative 속성의 빨간박스는 50px, 10px 만큼 이동한 것을 아실 수 있습니다. 즉, 상위 엘리먼트인 body의 기준좌표에 relative 속성의 하위 엘리먼트가 연동하는 것을 보실 수 있습니다.

absolute 포지셔닝을 하실 때 주의점은 상위 엘리먼트가 absolute 포지셔닝이 아니라면 포지셔닝이 제대로 먹지 않을 수도 있습니다. 즉, absolute로 위치 지정을 하려면 상위 엘리먼트도 absolute로 위치 지정이 되어야만 합니다. body의 경우 최상위 엘리먼트이기에 따로 absolute로 지정하지 않아도 absolute로 지정되어 있습니다.

사실 이렇게 강제적인 포지셔닝의 지정은 개인적으로는 별로 마음에 들지 않습니다. 일반 로컬 어플리케이션을 작성하셨던 분들이야 이렇게 강제로 좌표지정해서 디스플레이하시는게 익숙하시겠지만.
저로서는 absolute는 거의 쓰지 않고, relative도 아주 특별한 경우가 아니라면 자제합니다. 그럼 어떻게 위치를 맞추냐구요? 잘 구조화한 후 width와 height, margin(그리고 아주 특별한 경우에는 float) 속성만 가지고도 충분히 위치를 잡을 수 있습니다.

2) 분할의 기준은 수평선.
다시 문서 구조화의 이야기로 돌아가서. 문서의 레이아웃을 div로 분할하실 때 사각형으로 분할하시라고 말씀드렸지만, 그 기준이 되는 것은 수평선입니다. 먼저 수평으로 레이아웃을 분할하신 뒤, 요소에 따라 수직으로 재분할, 다시 그 안에서 수평으로 분할, 다시 수직 분할...
말로는 이해가 어려우실 테니 그림을 보죠.

http://eouia.net/temp/cssimage1.jpg

왼쪽과 같은 구조의 문서를 레이아웃 잡기 위해서는 오른쪽 처럼 분할하는 게 일반적입니다. 우선 붉은 색처럼 수평 기준으로 삼단으로 분할한 후, 각각의 안에서 수직 기준으로 푸른색으로 분할, 다시 그 안에서 수평 기준으로 녹색으로 분할.... 개발자 분들은 구조화에는 나름대로 일가견이 있으실 테니 그림만 보셔도 무슨 뜻인지 아실 겁니다.
이렇게 분할한 후 각각을 div 태그로 싸주시면 되지요. (노파심에 말씀드리지만, id와 class를 부여안하시고 <div>만 덜렁 써주심 안되요. ^_^)

문서 전체의 구조화라든가 form에서 각 요소들의 구조화라든가.. 전부 마찬가지입니다.

3) form 디자인...
다음은 이런 식으로 구조화한 form의 예입니다.

http://eouia.net/temp/css3.html

디자인은 허접.. T_T 일부러 알아보기 쉽게 하기 위해 색깔을 넣었습니다. 촌스럽지만 양해해주시고... 역시 소스보기를 먼저 해보세요. 실제로 문서내에 들어있는 내용이 매우!! 간략한 것을 알 수 있습니다. 왜냐하면 디자인 요소들을 전부 빼버림으로 인해
table등은 하나도 쓰지 않고, fieldset과 label만 가지고 디자인했습니다. 사실 label대신 div를 쓰셔도 됩니다만, label은 form 컨트롤의 라벨을 위해 존재하는 태그이니 이왕이면 label을.
잠깐 삼천포로 빠져서 label을 사용함으로써 얻는 이득을 설명...

<input type="radio" name="sex" id="male">
<label for="male">"섹스"를 "매일"해서 "male"??</label>

label 태그는 클릭하면 label for로 연결된 컨트롤을 클릭한 효과를 줍니다. radio버튼이나 checkbox에서 매우 유용하겠죠?
이외에도 label을 쓰는 이유는 기계나 프로그램이 해당 컨트롤이 무엇에 관한 컨트롤인지 이해하기 쉽다는 장점이 있죠.

fieldset은 여러가지 용도로 쓰이지만, 대부분 form 안에서 컨트롤간의 구분을 위해 쓰입니다. border:none 속성을 주지않으면 border가 디폴트로 들어가니까 주의하세요.

사실 이 소스만 제대로 이해하셔도 제가 이야기할 것의 절반 이상이 끝납니다만, 차차 이야기하도록 하고, 여기에서는 float이라는 속성에 대해 더 알아보죠.
float은 현재 엘리먼트 다음에 나오는 엘리먼트 기준으로 현재의 엘리먼트를 어디에 위치시킬까를 결정합니다.
위에서 분할의 기준을 수평선으로 잡는다고 했는데, 하나의 수평 블록안에 여러개의 엘리먼트를 위치하는데 display:inline과 span 태그와 함께 유용하게 쓰입니다.
지금의 예처럼 .fld_name 클래스에 float:left; 속성을 준 경우 다음에 나오는 .fld_password 클래스의 "왼쪽"에 .fld_name 클래스를 위치한다는 뜻입니다. 그럼 float:right;로 줬다면 어떻게 되었을까요?
눈치빠른 분은 답을 아시겠지만.. .fld_name클래스가 .fld_password 클래스의 "오른쪽"에 위치하게 됩니다.
.fld_password 이후에는 더이상 이러한 float 속성이 필요없으니 .fld_password클래스에는 float:clear;를 줘서 더이상 float이 적용되지 않도록 했습니다.
보통 float속성은 다른 엘리먼트와 영역이 겹칠 경우 왼쪽과 오른쪽 어느쪽으로 배열할지를 결정하는데 쓰입니다.


4) 디자인과 컨텐츠를 구별합시다.
좋은 CSS 디자인을 위해서 조심해야 할 몇가지 명제가 있는데 그 중 하나가
"img 태그를 남발하지 않는다."
라고 할 수 있겠네요.
img 태그를 쓰지 말라는 이야기는 아닙니다. 신문기사에 들어가는 사진같은 "컨텐츠"라면 img 태그를 쓰는게 당연하죠.
하지만 단지 페이지 장식을 위해, 버튼 이미지를 위해 img 태그를 쓰는 건 삼가해주세요.
대신 background-image:url(); 속성을 사용하세요. 위의 폼 예제에서 버튼 부분이 바로 그렇게 되어있습니다.
단지 디자인을 위한 img 태그는 문서의 재활용에 아주 심각한 문제를 일으킵니다. 소스가 복잡해지는 것은 물론이고, CSS 를 이용해서 크로스 플랫폼용 문서를 만들때에도 문제가 됩니다.
img 태그를 안썼다면 CSS에 몇줄 추가하는 것만으로 프린트용 버전을 만든다거나, Aural 페이지를 만든다거나 할 수 있는데, img가 들어가면 이게 말짱 꽝입니다.
background-image:url(); 속성은 모든 엘리먼트에 다 추가할 수 있습니다. div같은 일반 태그 뿐만 아니라, 각종 form 컨트롤이라든가..
그외에도 재밌는 활용이 많죠. 요건 다음 기회에 소개하도록 하구요, 어쨌거나 디자인과 관련된 부분은 모두 과감하게 CSS에게 일임하세요.

(출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&page=1 )

글쓴이 : eouia