Page 1 of 1
DIV 레이아웃 구현 문의.
Posted: 2006 03 16 03:28 40
by qwer999
http://www.pink-hman.com/pink/1111.jpg
DIV를 이용해서 이런 레이아웃의 홈페이지를 짜려고 하는데 문제가 좀 있네요.
중간에 하얀부분이 컨텐츠 영역인데, 이 부분에 컨텐츠가 브라우저 크기에 도달하지 못하면 거기서 하얀색 영역이 끝난다는게 문제입니다.
지금 제 지식으론 <body>밑에 바로 height 100%짜리 테이블을 추가해서 하얀색 배경 이미지를 넣던가, 저걸 통이미지-_-로 저장해서 가운데 정렬로 body에 백그라운드로 넣는 방법 밖에는 떠오르질 않고있습니다.
div 가 height 100%만 지원되면 간단하게 해결될것 같습니다만 검색을 해봐도 지금은 별 방법이 없는것 같군요.
혹시 body에 가로반복이미지 하나. 가운데 고정 이미지 하나 이런식으로 백그라운드를 두번 겹쳐서 넣을수있는 핵같은건 없을까요?
Re: DIV 레이아웃 구현 문의.
Posted: 2006 03 16 10:21 49
by hiphapis
qwer999 wrote:중간에 하얀부분이 컨텐츠 영역인데, 이 부분에 컨텐츠가 브라우저 크기에 도달하지 못하면 거기서 하얀색 영역이 끝난다는게 문제입니다.
무슨말씀이신지, 이해가 잘 안가네요..ㅎㅎ;
qwer999 wrote:혹시 body에 가로반복이미지 하나.
반복의 경우는 background-repeat 을 참고하시면 될 것 같고..
qwer999 wrote:가운데 고정 이미지 하나 이런식으로 백그라운드를 두번 겹쳐서 넣을수있는 핵같은건 없을까요?
div를 하나 더 만드셔서, 이 div에 background 정의 하시면 될 것 같은데요..
Posted: 2006 03 16 12:05 00
by qwer999
아; 제 설명이 좀 바보같군요. ㅠㅠ
http://www.pink-hman.com/pink/567.html
제가 원하는건 이런 페이지에서 하얀색 div가 contents의 길이에 상관없이 무조건 브라우저 끝까지 내려오게 만드는것 입니다.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin:0;
background-image:url(bg.jpg);
height:100%;
}
.contents {
background-color:#FFFFFF;
width: 200px;
}
-->
</style>
</head>
<body>
<div class="contents">contents</div>
</body>
</html>
코드는 이렇습니다.
div는 왜 height 100%가 안먹히는 건가요! ㅠㅠ
그렇다면
http://www.pink-hman.com/pink/ 이런식으로 오브젝트를 중앙에 두는것도 불가능한것 아닌가요?
Posted: 2006 03 16 12:21 16
by hiphapis
qwer999 wrote: 제가 원하는건 이런 페이지에서 하얀색 div가 contents의 길이에 상관없이 무조건 브라우저 끝까지 내려오게 만드는것 입니다.
아, 이해했습니다
현석님의 강좌 링크드릴께요..
(흠..제가 이렇게 링크 드려도 될런지..;;)
http://hyeonseok.com/pmwiki/index.php?n=Css.Height
http://hyeonseok.com/pmwiki/index.php?n=Css.Position
Posted: 2006 03 16 12:33 04
by oragi
div는 절대적인 높이를 지정하지 않으면 내용물의 높이만을 가지게 됩니다.
상대적인 높이를 지정할시엔 상위 Element의 절대적(!)높이를 기준으로
높이가 구현되죠.
여기에
브라우져 화면의 100% 높이를 유지하는 레이아웃이 구현되 있으니
참고하시면서 작업하세요.
