초보가 CSS레이아웃에대해 질문드립니다.

[Xtrus]

안녕하세요

질문이 있어 이렇게 글 남깁니다.

TABLE 중첩 레이아웃 을 버리려고 노력중인데요...

DIV로 처음 짠 홈피가 DIV 중첩이라..(TABLE처럼..)

이를 고쳐보려고 합니다.

----------------------------------------------
| |
----------------------------------------------
| | |
| | |
----------------------------------------------

이렇게 레이아웃을 나누고 싶을때

테이블로는 테이블 안에 테이블 뭐 이런식으로 하지만.

DIV는 따로 DIV태그를 이용해서 3블럭을 만든후

예를들어
<div></div>
<div></div>
<div></div>

각각의 위치를 left, 나 top을 이용해서 정해줘야 하는건가요?

만약 그렇다고 한다면

가운데정렬이 된상태의 위와 같은 레이아웃은

어떤식으로 해줘야 좋은 방법이 되는지 여쭙고 싶습니다.

허접한글 읽어주셔서 감사합니다.

[visualer]

위 레이아웃 입니다..^^;;
<pre>
----------------------------------------------
| |
----------------------------------------------
| | |
| | |
----------------------------------------------
</pre>

[leejin0]

위 레이아웃 입니다..^^;;
<pre>
----------------------------------------------
| |
----------------------------------------------
| | |
| | |
----------------------------------------------
</pre>

제 블로그의 구성과 비슷한 것 같군요. 게다가 전체 중앙정렬이라는 것도 같고요.

http://optic.egloos.com 입니다. 글은 썩 재밌는 글은 아니니까 과감하게 무시!!

개인적으로 Web Developer 확장을 이용하시는 편이 소스 분석에 도움이 되실 것입니다.

CSS가 미칠 듯이 많거든요.

[hyeonseok]

CSS 레이아웃을 적용하시려면 기존과는 다른 개념으로 접근을 해야 합니다.

먼저 XHTML 을 레이아웃과 무관하게 작성 하십시오.

레이아웃을 고민하지 마시고, 문서 내용을 가장 잘 구분 할 수 있게 XHTML 을 작성하시기 바랍니다.
그러고 CSS 로 잘 구분된 XHTML 에 디자인을 입히세요.
이 과정에서 블록 select 에 문제가 발생 할 수 있습니다. 이 문제는 CSS Selector 를 잘 연구해 보시고, 그래도 안되면 javascript 를 생각해 보시고, 그래도 안되면 UI 가 잘못 된 것이 아니가 고민해 보시고 XHTML 에 추가 div 를 넣어서 해결해 보세요.

XHTML 을 CSS 에 잘 바인딩 되도록 작성하는 것은 순전히 경험에서 오는 것 같습니다. 하지만 레이아웃을 잘 작성하기 위해서 XHTML 을 작성해서는 안됩니다. 지금 단계에서는 레이아웃 생각 하지 마시고, 완벽한 XHTML 작성을 고민해 보시는 것이 좋습니다.