날나리 강좌. ㅋ 레이아웃 짜기, 열과 height

날나리 강좌. ㅋ 레이아웃 짜기, 열과 height 정보

HTML 날나리 강좌. ㅋ 레이아웃 짜기, 열과 height

첨부파일

columnHeightExample.zip (1.7K) 27회 다운로드 2012-01-09 16:32:44

본문

김군 왈, " 저어기.... 이거 해결되지 않는 것이 있는데... "

A군 왈, " 이제 하산해도 되는데... 모가... 왜...? "

김군 왈, " 이거 left나 right의 높이를 좀 맞게 꽉채울 수는 없어? "

A군 왈, " 어.. 없어.. "

김군 왈, " 헐.. 모 이런것이 다 있노 "

A군 왈, " 없는 것을 어떻게.. ㅎㅎ "

김군 왈, " 아.. .쫌! "

A군 왈, " 알았어.. 앞에 했던 것을 옮기면 이렇게 되지?

<div style="width:960px;margin:0 auto;background:yellow;overflow:hidden;zoom:1">
<div style="float:left;width:260px;background:green">
LEFT
</div>
<div style="float:left;width:500px;">
CONTENT
</div>
<div style="float:left;width:200px;background:red">
RIGHT
</div>
</div>

암만 봐도.. 방법이 없는데... ㅎㅎ

근데 위에 힌트가 있긴 해.

왜 배경을 Content 부분에 주지 않고 부모에다 주었을까?"

김군 왈, " 또 선문답한다. 아우. 좀 편히 말해봐."

A군 왈, " 너 이너서클이라고 들어봤냐?

김군이 변기통을 집에다 거꾸로 걸어놓고 이거 멋지네... 이러던가..,

피아노 연주하겠노라 하면서 사람 불러놓고 가만히 있다 내려오며 침묵의 연주였느니라하면...

미친놈이라는 소리를 듣겠지? "

김군 왈, " 아니 갑자기 머이런 딴소리야.? ㅎ"

A군 왈, " 그러니까 해결방법이 있다고 하기에는 참 초라하나... 널리 사용되는 방법이 있어.

이것이 'faux column'이라 이름이 붙어지고 소개되고 있는데...

그게 참 별거 아니라는 것이지. 다른 방법으로는 자바스크립트를 사용하는 것도 있긴 하고... "

[faux column]

faux는 거짓을 의미한다. faux column은 ALA의 Dan Cederholm에 의해 널리 알려지게 되었는데, 배경 이미지를 삽입하는 것으로 해결한다. 해당 사이드바와 컨텐트 영역에 해당하는 이미지 파일을 만들어 부모 요소에 적용시키는 것이다. 간단히 말해, 배경 그림 파일이다. 어떻게 보면, 보다 복잡한 코드의 삽입내지 CSS의 사용보다는 간결한 편이기도 하다.

faux column은 물론 현실에서 널리 사용된다. 국내 많은 포털도 faux column을 이용하여 배경으로 처리하고 있다.

김군 왈, " 모여.. 아니... 그럼 다 배경파일이었어? "

A군 왈, " 모두는 아니겠지만 대부분 그렇게 사용하고 있지비. ㅎㅎ 자..이제 배경파일 작성과 repeat-y를 이용하여 부모에 적용시면 된다. 어디 한번 작성해봐"

김군 왈, " 아.. 포토샾 켜야 하나? 으흐흐.. 기달려봐

<!doctype html>
<head>
<style>
#wrap {
width:960px;height:300px;margin:0 auto;
background:#fff url('bg.png') repeat-y;
overflow:hidden;zoom:1;
border:1px solid #EFEFEF;
}
#left {
float: left;
width: 240px;
padding: 10px;
display: inline;
}
#content {
float: left;
width: 480px;
padding: 10px;
}
#right {
float: left;
width: 180px;
padding: 10px;
background: red;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">LEFT</div>
<div id="content">CONTENT</div>
<div id="right">RIGHT</div>
</div>
</body>
</html>

아.. 이런 것이었어? 흐흐.. "

A군 왈, "ㅡ.,ㅡ

(아니 작성은 김군이 했는데.. 이거 마치 왜 내가 옮긴듯 내가 힘드냐?)

여튼 위와 같은 방법이 대부분이야. 배경파일이랑 같이 첨부해서 올려놓을께.

또 다른 방법은 자바스크립트를 이용하는 것이야, 한번 짜볼까?"

[자바스크립트의 사용]

;(function($){
var wrapHeight = $('wrap').clientHeight;
var child = ("left content right").split(" ");
for (var i=0; i < child.length ;i++)
{
var _current = $(child[i]);
if ( _current.offsetHeight < wrapHeight) {
_current.style.height = wrapHeight
- (_current.offsetHeight - _current.clientHeight) + "px";
}
}
})(new Function('a', 'return document.getElementById(a)'));

작성하고 보니 내부 요소의 margin을 고려하지 않고 작성했다. 아무래도 margin은 따로 자바스크립트에서 받을 수 있는 방법이 IE에서는 currentStyle을 사용할 수 밖에 없는데 이 경우 px 단위가 아닌 경우 문제가 생긴다..

div로 레이아웃을 짜다보면 일단 안정적인 width를 결정하고 마진대신 패딩을 설정하고 그 내부에서 다시 div로 겹치는 방법이 보다 좋을 수 있다. 이러한 방식 작업을 한다면 위 소스는 통용할 수 있다. 또한 내부의 div는 이제 sidebar가 height가 직접 지정하였기에, 과감히 자식 div에서 이제 height:100%를 적용하여 쓸 수도 있다.

가령 리플을 보여주고 닫는 등 식의 내부 크기가 동적으로 변경된다면 함수로 저장하고 해당 이벤트에 같이 연결하여 작동시키면 될 것이다. (소스코드의 연산을 간단히 정리하면 부모의 height에서 자신의 border가 차지한 부분을 빼면 자신의 height 값이 나온다)

[absolute의 사용]

크기를 재조정할 대상이 다른 content에 비해 항시 작다면 사용할 방법이다. 그러나 IE6은 지원하지 않는다. 이때 부모의 position은 relative로 설정하고, 해당 요소에 관해서 position:absolute와 함게 top:0 과 bottom:0을 사용하면 이에 맞게 height가 조정되어 꽉 채운다. absolute를 사용한 만큼 다른 요소는 이것이 위치할 것과 겹치지 않게 padding이나 margin을 설정해 양보하면 된다.

<div style="width:200px;height:300px;position:relative;">
<div style="position:absolute;background:#0f0;top:0;bottom:0;width:100%">
height 설정 없이 꽉 차는 absolute div
</div>
</div>

----

첨부파일 예제 결과

----

다음 시간에 이어.. 휘리리릭....

날나리 강좌. ㅋ 레이아웃 짜기, 열과 height > 퍼블리셔팁

퍼블리셔팁