묻고답하기
이 답변 되는 건가요?
2010.06.09 00:22
http://www.xpressengine.com/18799632
새로 만드는 홈피에서 좌측 메뉴 부분에 쭈욱~~~ 노란색 띠를 넣어둬야 해서요
저번에는 테이블태그로 어쩔 수 없이 했는데
DIV 안에서 해결 할 수 있는 방법이 있을 것 같아... 찾아보던 중
질답게시판에 이걸 찾고 해보는 중인데요...
오늘 하루 종일 해봐도 안됩니다 ㅠㅠㅠ
플롯 속성을 둔 하위 DIV를 품고 있는 모체 DIV 에 높이를 정확히 지정해두지 않으면... 백그라운드가 안 깔리던데요...
높이를 지정하면, 컨텐츠 높이가 가변이니... 어떻게 할 수가 없어지고...
이거, 헛다리 짚었나 해서... 함 물어봅니다.
되는 건가요? 혹시 이런 방법으로 불가능 하다면......
오늘 하루 종일 전 삽질했습니다 ㅠㅠㅠㅠㅠㅠㅠ
다시 테이블 태그를 써야하는 ....... 건가... ㅠ
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
자바 스크립트를 이래저래 쓰면 우측에 특정 레이어와 좌측의 레이어 높이를 통일시키겠지만...
레이아웃에 자바스크립트를 복잡하게 해두면 왠지 깔끔하지 못하죠..;;;
저 같은 경우에 어떻게 해결했냐면요.
(설명을 말로하자니 너무 복잡해서 소스로 적어볼게요.)
<!-- layout.html 파일 -->
<div id="contentBody">
<div class="LeftSide"> <!-- 왼쪽 사이드 쪽 레이어입니다. -->
왼쪽 사이드 내용
</div>
<div class="RightBody"> <!-- 오른쪽 본문 부분 레이어이죠... -->
오른쪽 본문내용
</div>
</div>
<!-- layout.html 파일 끝 -->
<!-- default.css CSS파일 시작 -->
....생략
body { margin:0; padding:0; background-color:#ffffff; }
#contentBody { width:870px; margin:0 auto 0 auto; background:url(../images/default/leftside_bg.gif) repeat-y left; }
#contentBody .LeftSide { float:left; width:170px; margin-right:20px; }
#contentBody. RightBody { float:right; width:680px; }
....생략
<!-- default.css CSS파일 소스끝 -->
뭐 대충 이런식으로 짜서했는데요. 위에 CSS 소스보시면 #contentBody 레이어 부분에 배경이미지를 세로로 반복되게 주었죠.
오른쪽의 본문내용이 높이가 커지든.. 왼쪽에 사이드가 높이가 더 커지든간에 가장 높은 레이어에 만큼
두 레이어를 포함하고 있는 #contentBody의 높이가 늘어나면서 그에 맞게 배경이미지도 적용됩니다.
이때 왼쪽 사이드 부분 폭넓이가 170px 라고 선언했죠.
그래서 저는 배경이미지 가로폭을 170px 로 하고 세로는 1px 로 해서 세로로 반복배경 되도록 처리 한거구요.
내용이 좀 복잡한거 같은데 이해가 가실런지 .... 몇번 읽어보면 무슨 말인지 이해 갈거에요.
솔직히 이런 방법 말고는 복잡하디 복잡한 자바스크립트로 도배를 해야해서 ㅎㅎㅎ
고작 요만한 글 적는데 시간이 이만큼이나 흘렀네 헉....
지금 제가 제작 하다가.... 안 되고 있는 홈피는
www.judang.net
이에요