DIV 레이아웃 구현 문의.

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
댓글 게시
qwer999
게시물: 5
참여됨: 2006 03 16 03:08 53
연락:

DIV 레이아웃 구현 문의.

게시물 작성자 qwer999 » 2006 03 16 03:28 40

http://www.pink-hman.com/pink/1111.jpg

DIV를 이용해서 이런 레이아웃의 홈페이지를 짜려고 하는데 문제가 좀 있네요.

중간에 하얀부분이 컨텐츠 영역인데, 이 부분에 컨텐츠가 브라우저 크기에 도달하지 못하면 거기서 하얀색 영역이 끝난다는게 문제입니다.

지금 제 지식으론 <body>밑에 바로 height 100%짜리 테이블을 추가해서 하얀색 배경 이미지를 넣던가, 저걸 통이미지-_-로 저장해서 가운데 정렬로 body에 백그라운드로 넣는 방법 밖에는 떠오르질 않고있습니다.

div 가 height 100%만 지원되면 간단하게 해결될것 같습니다만 검색을 해봐도 지금은 별 방법이 없는것 같군요.

혹시 body에 가로반복이미지 하나. 가운데 고정 이미지 하나 이런식으로 백그라운드를 두번 겹쳐서 넣을수있는 핵같은건 없을까요?

hiphapis
서포터즈
서포터즈
게시물: 179
참여됨: 2005 02 25 16:03 12
위치: Heaven
연락:

Re: DIV 레이아웃 구현 문의.

게시물 작성자 hiphapis » 2006 03 16 10:21 49

qwer999 씀:중간에 하얀부분이 컨텐츠 영역인데, 이 부분에 컨텐츠가 브라우저 크기에 도달하지 못하면 거기서 하얀색 영역이 끝난다는게 문제입니다.
무슨말씀이신지, 이해가 잘 안가네요..ㅎㅎ;
qwer999 씀:혹시 body에 가로반복이미지 하나.

반복의 경우는 background-repeat 을 참고하시면 될 것 같고..
qwer999 씀:가운데 고정 이미지 하나 이런식으로 백그라운드를 두번 겹쳐서 넣을수있는 핵같은건 없을까요?

div를 하나 더 만드셔서, 이 div에 background 정의 하시면 될 것 같은데요..
웹표준이 취미인 개발자
God Has Not 4Got
http://hiphapis.net

qwer999
게시물: 5
참여됨: 2006 03 16 03:08 53
연락:

게시물 작성자 qwer999 » 2006 03 16 12:05 00

아; 제 설명이 좀 바보같군요. ㅠㅠ

http://www.pink-hman.com/pink/567.html

제가 원하는건 이런 페이지에서 하얀색 div가 contents의 길이에 상관없이 무조건 브라우저 끝까지 내려오게 만드는것 입니다.

코드: 모두 선택

<!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/ 이런식으로 오브젝트를 중앙에 두는것도 불가능한것 아닌가요?

hiphapis
서포터즈
서포터즈
게시물: 179
참여됨: 2005 02 25 16:03 12
위치: Heaven
연락:

게시물 작성자 hiphapis » 2006 03 16 12:21 16

qwer999 씀: 제가 원하는건 이런 페이지에서 하얀색 div가 contents의 길이에 상관없이 무조건 브라우저 끝까지 내려오게 만드는것 입니다.
아, 이해했습니다 :)
현석님의 강좌 링크드릴께요..
(흠..제가 이렇게 링크 드려도 될런지..;;)

http://hyeonseok.com/pmwiki/index.php?n=Css.Height
qwer999 씀:div는 왜 height 100%가 안먹히는 건가요! ㅠㅠ
그렇다면 http://www.pink-hman.com/pink/ 이런식으로 오브젝트를 중앙에 두는것도 불가능한것 아닌가요?
http://hyeonseok.com/pmwiki/index.php?n=Css.Position
웹표준이 취미인 개발자
God Has Not 4Got
http://hiphapis.net

oragi
게시물: 37
참여됨: 2005 10 24 18:45 46
위치: 이세상의 가장 구석진 곳 ...
연락:

게시물 작성자 oragi » 2006 03 16 12:33 04

div는 절대적인 높이를 지정하지 않으면 내용물의 높이만을 가지게 됩니다.
상대적인 높이를 지정할시엔 상위 Element의 절대적(!)높이를 기준으로
높이가 구현되죠.

여기에 브라우져 화면의 100% 높이를 유지하는 레이아웃이 구현되 있으니
참고하시면서 작업하세요.
결국 모든 것을 해야 하는 것은 나 자신이다...

댓글 게시

누군가 접속

유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 3 손님들