레이아웃 잡을때요..

[홍총각]

Code: Select all

---------------------------------

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

---------------------------------

위와 같은 레이아웃을 잡을 때요..
(또는 더 복잡한 모양일 수도 있구요..)

어떻게 하는 것이 바람직할까요?

float/position.. absolute/relative ..??
어떤 방법으로 하는게 효율적일까요?

그리고, div는 중첩해서 사용하는게 좋을지..
아니면 중첩하지 않고 사용하는게 좋을지..

중첩하게 되면 다른 모양으로 바꾸려면 약간의 제약이 있을것도 같고..

나름대로 연습해 보면서도..
어떤 방법이 더 좋을지 잘 모르겠네요..

여러분은 어떤 방식을 더 선호하시나요?

[eouia]

다른 분들은 다른 생각일지는 모르겠지만, 정답은 없다고 보구요,
레이아웃이 어떻게 생겼을지에 따른다기 보다는, 문서의 구조가 어떠냐에 따라 달려있다고 봅니다.
일단 문서의 구조가 확정되면, 그에 따라 CSS로 디자인입히는 거니, 같은 레이아웃이래도 문서의 구조에 따라 다르게 접근할 수 밖에 없죠. (반대로, 레이아웃 디자인에 맞춰 문서를 구성하는 것은 바람직하지 않습니다.)
물론 CSS2에 한계가 아직은 있다보니 세세한 디자인을 위해 약간의 구조를 추가할 수는 있겠죠. 그러나 가변폭-높이 이미지보더 박스를 제외하고 굳이 디자인때문에 구조를 변경하거나 추가할 거는 없더군요. 이경우도 저는 되도록 가변폭-넓이 박스를 사용하지 않거나, 혹은 고정폭-가변높이 / 가변폭-고정높이 박스로 대체하거나, 혹은 JavaScript를 붙여 동적으로 이미지보더를 붙이거나.. 하는 식으로 처리합니다.

결론부터 말하자면, div가 중첩이 되건, 어떤 positioning을 쓰건 그건 디자이너가 결정할 문제가 아니라, 문서의 기획단계에서 어떤 구조의 문서를 만들어내느냐에 달려 있겠지요.

[홍총각]

eouia 답글 고맙습니다..

제 질문이 역시 "우문"이었나 보군요..
결론은 케이스 바이 케이스..

제겐 아직 이 케이스 바이 케이스가 난감합니다.. T.T
연습 단계이다보니..


그런데요.. eouia님..

혹은 JavaScript를 붙여 동적으로 이미지보더를 붙이거나.. 하는 식으로 처리합니다.

이건 어떻게 하는지 여쭤봐도 될까요?
createElement() 메쏘드를 사용해서 이미지를 생성해서 붙인다는 건가요..?
자세히 좀 설명해주시길 부탁드립니다..

[eouia]

http://css.macple.com/forum/showthread.php?t=177
를 참조하세요.
createElement()를 쓰는게 옳겠지만 이 예는 대충 동작하는 예시를 보이기 위해서 그냥 innerHTML을 썼습니다. 원리는 아마 이해하실겁니다.

[eouia]

비슷한 효과를 볼 수 있는 방법으로
현석님이 만드신 것도 있습니다.
http://hyeonseok.com/home/archive_javas ... geLayering

[홍총각]

eouia님 고맙습니다.

이렇게 빨리 답글 달아주시다니..

고맙습니다. ^^