백그라운드가 해상도에 맞게 늘어나는 방법에 대해서... 정보
백그라운드가 해상도에 맞게 늘어나는 방법에 대해서...
본문
아직도 프로그래밍쪽은 영 꽝인지라...
아무리 생각해도 답이 안나와서...
이곳에 전문가 님들께 조언을 구하고자 합니다.
다름이 아니라 영카트로 제작된 맨 밑에 깔릴 가로 100%의 큰테이블이 있습니다.
나머지는 작업은 모두 이 안에서 이루어 지는 것이고요.
테이블은 내용에 따라서 상하가 자동으로 늘어 나잖아요.
그런데 백그라운드는 그렇지가 않고요~ ^^;
때문에 패턴을 사용하거나 세로 5000픽셀정도의 무한급 사이즈를 만들었었죠.
그런데 이번에 사용할 백그라운드 이미지는 보시는 바와 같이...
상단은 하늘색이고 하단은 녹색입니다.
내용의 길이가 각각 틀리기때문에 해상도에 맞춰서 흰색부분만 늘어나게 하려는게 목적인데요.
우선 하늘색과 흰색부분을 만들어 놓고서... 5000픽셀 정도로...
그 상태에서 녹색부분만 내용의에 맞춰서 하단에 자동으로 깔리는 방법이 있을듯 하고...
두번째로는 그게 불가능하면 임의로 만들어둔 하늘색, 흰색. 녹색으로 채워진
1500픽셀 정도의 배경이미지를 세로 100% 형식으로 늘리는 방법이라던가...
이런 좋은 방법이 없을까요? 물론 이런 디자인을 어디서 본듯하기는 한데...
저 혼자서는 도저히 못해서 이곳에 조심스레 질문을 드려봅니다~ ㅠ.ㅠ
도와주시면 저도 도움드릴수 있는쪽에서 도와드릴게요~ ㅠ.ㅠ
디자인이나 플래쉬등... 웹소스도 200GB가량 있는데 이런거 공유라도... ㅠ.ㅠ
댓글 전체
^^;;
도움이 되실지 모르겠습니다...
제가 그냥 꼼수를 부려봤습니다.
방법은 상단 백그라운드 이미지를 푸른색에서 흰색까지만 세로 사이즈를 현재 1100 에서 800정도로 (하단 녹색부분을 제외한만큼...) 만듭니다. 그리고 페이지 바탕 자체를 그라디언트 효과를 줍니다.
<style>
body{filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=blue)'}
</style>
요런식으로...원하는 형태가 나올지 모르겠으나 조금 응용하면 가능할지 모르겠습니다.
또하나
테이블을 사용하여 백그라운드 주실때 테이블을 상단,바디,하단 이렇게 3개부분으로 나누고
상단엔 푸른색 백그라운드를 하단엔 초록 백그라운드를 주시고 내용이 바디 부분에 들어가게 작업하시면
가운데는 흰색이니 늘어나도 되지 않을까요?
이건 작업이 좀 손도많이 가고 힘들것 같네요...^^
이곳에 계신분들이 좋은 결과를 주시리라 믿습니다.
도움이 되실지 모르겠습니다...
제가 그냥 꼼수를 부려봤습니다.
방법은 상단 백그라운드 이미지를 푸른색에서 흰색까지만 세로 사이즈를 현재 1100 에서 800정도로 (하단 녹색부분을 제외한만큼...) 만듭니다. 그리고 페이지 바탕 자체를 그라디언트 효과를 줍니다.
<style>
body{filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=blue)'}
</style>
요런식으로...원하는 형태가 나올지 모르겠으나 조금 응용하면 가능할지 모르겠습니다.
또하나
테이블을 사용하여 백그라운드 주실때 테이블을 상단,바디,하단 이렇게 3개부분으로 나누고
상단엔 푸른색 백그라운드를 하단엔 초록 백그라운드를 주시고 내용이 바디 부분에 들어가게 작업하시면
가운데는 흰색이니 늘어나도 되지 않을까요?
이건 작업이 좀 손도많이 가고 힘들것 같네요...^^
이곳에 계신분들이 좋은 결과를 주시리라 믿습니다.
답변감사드립니다. 저도 현재 임시로 테이블을 3개로 나누어서... 상단(하늘) 중앙(흰색) 하단(녹색) 이런식으로 코딩을 해두었는데... 영카트에서는 main.php 파일을 이런식으로 코딩하게 되면.. 회원가입, 게시판, FAQ, 장바구니 등등 잡다구니한 파일들까지 모두 그런식으로 바꾸어 주어야 할것 같아서요. 고정되어 사용하는 head와 tail 파일에만 소스를 써서 하는 방법을 찾으면 좋을것 같아서요.
그리고 그래디언트 소스는 정말 좋은데요... ^^; 상단의 하늘색에서 흰색으로 내려간 맨 아래부분과 그래디언트 먹은 부분의 경계면이 조화가 잘 안되는것 같아요.
간단한것 같은데 은근히 골치아프네요~ 아무튼 답변 정말 감사드립니다.
그리고 그래디언트 소스는 정말 좋은데요... ^^; 상단의 하늘색에서 흰색으로 내려간 맨 아래부분과 그래디언트 먹은 부분의 경계면이 조화가 잘 안되는것 같아요.
간단한것 같은데 은근히 골치아프네요~ 아무튼 답변 정말 감사드립니다.
최선의 방법은 아니지만 참고하세요.
원하시는 그대로는 안되고 아래 초록색 부분이 tail 부분에 들어갈 만큼의 길이라면 가능해요.
백그라운드를 2가지로 나누어서 이미지화합니다. 위의 것은 하늘색부터 흰색까지(그라데이션 부분 포함) 저장을 하고요,
그리고 tail 안의 테이블에 흰색부터 초록색 끝까지 그라데이션 된 이미지를 배경으로 깔아줍니다.
그런 후 스타일을 써서 높이를 고정시켜 줍니다.
예를들어 이미지의 높이가 100이라 할 때,
style="background-repeat:no-repeat;background-position:0px 100px" 로 고정시켜 주면 가능해요... 헥헥
원하시는 그대로는 안되고 아래 초록색 부분이 tail 부분에 들어갈 만큼의 길이라면 가능해요.
백그라운드를 2가지로 나누어서 이미지화합니다. 위의 것은 하늘색부터 흰색까지(그라데이션 부분 포함) 저장을 하고요,
그리고 tail 안의 테이블에 흰색부터 초록색 끝까지 그라데이션 된 이미지를 배경으로 깔아줍니다.
그런 후 스타일을 써서 높이를 고정시켜 줍니다.
예를들어 이미지의 높이가 100이라 할 때,
style="background-repeat:no-repeat;background-position:0px 100px" 로 고정시켜 주면 가능해요... 헥헥
레이어를 사용해서 이렇게 하면 어떨까요..
1*3으로 된 테이블(배경 테이블)을 만들어서 위에는 파란색 패턴 이미지를 넣고
중앙은 흰색 컬러 지정, 하단은 녹색 패턴 이미지 넣은 후 전체 테이블과 겹치게 배열한 후
전체 테이블이 로드된 후에 자바스크립트로 전체 테이블의 크기를 구해서
배경 테이블의 중앙 크기를 늘려줍니다.
1*3으로 된 테이블(배경 테이블)을 만들어서 위에는 파란색 패턴 이미지를 넣고
중앙은 흰색 컬러 지정, 하단은 녹색 패턴 이미지 넣은 후 전체 테이블과 겹치게 배열한 후
전체 테이블이 로드된 후에 자바스크립트로 전체 테이블의 크기를 구해서
배경 테이블의 중앙 크기를 늘려줍니다.
푸~~
덕분에 좋은 공부 했네요..
여기저기 알아보면서 겨우 참고 소스 만들어 봤습니다.
그런데 ie에서는 td 태그의 반복이미지가 되는데 fire fox 에서는 반복이 안되네요..
<html>
<head><title>table resize</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
timer = null; // 타이머
sizeH = 0; // 최대치 초기화
speed = 10; // 갱신속도
function setHeight() {
myObj = document.getElementById("varSize"); // 개체의 구성 요소 가져옴
mainObj = document.getElementById("mainSize"); // 개체의 구성 요소 가져옴
curHeight = parseInt(myObj.style.height); // 오브젝트의 현재 높이를 구함
sizeH = parseInt(mainObj.style.height); // 오브젝트의 현재 높이를 구함
sizeH = sizeH-40;
myObj.style.height = (sizeH - curHeight) + curHeight; // 증가
if(curHeight < sizeH) { // 최대치보다 작으면
myObj.style.height = (sizeH - curHeight) + curHeight; // 증가
timer = setTimeout("setHeight(sizeH)", speed);
// speed 만큼의 시간이 지난 후에 다시 함수 호출
}
else clearTimeout(timer); //최대치 이상이면 그만
}
//-->
</SCRIPT>
</head>
<body>
<div id="layer1" style="position:absolute; left:10px; top:0px; background-color:#FFFF00; z-index:1;">
<table cellpadding="0" cellspacing="0" border="1" style="font-size:12px; font-family:'굴림', Gulim;position:absolute;top:0px; ">
<tr>
<td width=400 height=40 background="http://sir.co.kr/img/menu_off_gnuboard3.gif" style="background-repeat:repeat">.</td>
</tr>
<tr>
<td id="varSize" style="width:400; height:20;">.</td>
</tr>
<tr>
<td width=400 height=80 style="background-image:url('http://sir.co.kr/img/menu_off_gnuboard3.gif'); background-repeat:repeat;">.</td>
</tr>
</table>
</div>
<div id="layer2" style="position:absolute; left:50px; top:0px; background-color:#FFFFFF;z-index:2;">
<table border="1" style="background: #000000; ">
<tr>
<td width="111">a</td>
<td width="111">b</td>
</tr>
<tr>
<td id="mainSize" style="width:111; height:200;" rowspan="2" >a2</td>
<td width="111">b2-1</td>
</tr>
<tr>
<td width="111" height=100 >b2-2</td>
</tr>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
setHeight();
</SCRIPT>
</body>
</html>
덕분에 좋은 공부 했네요..
여기저기 알아보면서 겨우 참고 소스 만들어 봤습니다.
그런데 ie에서는 td 태그의 반복이미지가 되는데 fire fox 에서는 반복이 안되네요..
<html>
<head><title>table resize</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
timer = null; // 타이머
sizeH = 0; // 최대치 초기화
speed = 10; // 갱신속도
function setHeight() {
myObj = document.getElementById("varSize"); // 개체의 구성 요소 가져옴
mainObj = document.getElementById("mainSize"); // 개체의 구성 요소 가져옴
curHeight = parseInt(myObj.style.height); // 오브젝트의 현재 높이를 구함
sizeH = parseInt(mainObj.style.height); // 오브젝트의 현재 높이를 구함
sizeH = sizeH-40;
myObj.style.height = (sizeH - curHeight) + curHeight; // 증가
if(curHeight < sizeH) { // 최대치보다 작으면
myObj.style.height = (sizeH - curHeight) + curHeight; // 증가
timer = setTimeout("setHeight(sizeH)", speed);
// speed 만큼의 시간이 지난 후에 다시 함수 호출
}
else clearTimeout(timer); //최대치 이상이면 그만
}
//-->
</SCRIPT>
</head>
<body>
<div id="layer1" style="position:absolute; left:10px; top:0px; background-color:#FFFF00; z-index:1;">
<table cellpadding="0" cellspacing="0" border="1" style="font-size:12px; font-family:'굴림', Gulim;position:absolute;top:0px; ">
<tr>
<td width=400 height=40 background="http://sir.co.kr/img/menu_off_gnuboard3.gif" style="background-repeat:repeat">.</td>
</tr>
<tr>
<td id="varSize" style="width:400; height:20;">.</td>
</tr>
<tr>
<td width=400 height=80 style="background-image:url('http://sir.co.kr/img/menu_off_gnuboard3.gif'); background-repeat:repeat;">.</td>
</tr>
</table>
</div>
<div id="layer2" style="position:absolute; left:50px; top:0px; background-color:#FFFFFF;z-index:2;">
<table border="1" style="background: #000000; ">
<tr>
<td width="111">a</td>
<td width="111">b</td>
</tr>
<tr>
<td id="mainSize" style="width:111; height:200;" rowspan="2" >a2</td>
<td width="111">b2-1</td>
</tr>
<tr>
<td width="111" height=100 >b2-2</td>
</tr>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
setHeight();
</SCRIPT>
</body>
</html>
헉... 소스가 정말 기네요~ 뭔지는 잘모르겠지만 감사드립니다. 한참 연구해봐야겠네요~ ^^;