앵겨의 HTML + CSS2010. 6. 21. 18:01

포스트 내용중에 다른 페이지로의 링크가 걸린 부분은 전부 현재페이지에서 이동되게 되어 있습니다.

현재창을 유지한채 새창(또는 새탭)으로 보시고 싶은 분들은 아래의 방법으로 이용하시기 바랍니다.

이래저래 서핑도중 좌우가 다른 bg를 가진 레이아웃을 원한다는 질문글을 봐서...
한번 도전!!!

처음 생각했던것 보다 쉽게 나오지는 않았습니다.
여튼 조건을 나름 정리를 해보니 이러합니다.

  1. 좌우 background image(혹은 color)가 서로 다를 것
  2. 실제 컨텐츠는 좌우 가운데 정렬일 것(당연한건가?)
대략 위와같이 정리가 됩니다.
최초에는 아래와 같이 작성을 했었습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 좌우가 다른 배경과 가운데 정렬 </title>
    <style type="text/css">
    <!--
        html, body{height:100%; margin:0;}
        #wrap{position:relative; width:100%; height:100%; text-align:center;}
        .lbg{position:absolute; left:-450px; top:0; width:50%; height:100%; background:url(back_img_lbg.gif) repeat-x top left;}
        .rbg{position:absolute; right:-450px; top:0; width:-50%; height:100%; background:url(back_img_rbg.gif) repeat-x top right;}
        #container{position:relative; width:900px; height:100%; margin:0 auto; background:#bbb}
    -->
    </style>
</head>

<body>
<div id="wrap">
    <div id="container">컨텐츠</div>
    <div class="lbg"></div>
    <div class="rbg"></div>
</div>
</body>
</html>

위와 같이 작성한 페이지는 여기서 확인하시면 됩니다.
보시면 아시겠지만 왼쪽은 제대로 표현이 됩니다만 오른쪽이 실제 width를 준 만큼 표현이 되어 버립니다.
즉 right:-50%가 먹지 않는다는 거죠. 어떠한 방법을 동원해도 안되더군요.
그래서 이건 안되는 방법인가 보다!!라는 결론을 내리고 다른 방법을 동원하기로 했습니다.
그 방법은 아래와 같습니다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 좌우가 다른 배경과 가운데 정렬 </title>
    <style type="text/css">
    <!--
        html, body{height:100%; margin:0;}
        #wrap{position:relative; width:100%; height:100%; background:url(back_img_rbg.gif) repeat-x top right;}
        .lbg{position:absolute; left:-450px; top:0; width:50%; height:100%; background:url(back_img_lbg.gif) repeat-x top left;}
        #container{position:relative; width:900px; height:100%; margin:0 auto; background:#bbb}
    -->
    </style>
</head>

<body>
<div id="wrap">
    <div id="container">컨텐츠</div>
    <div class="lbg"></div>
</div>
</body>
</html>

기존에 있던 .rbg에 들어 갈 background image를 #wrap에 들어가고 그외는 달라진게 사실상 없습니다.
어쩌면 그전에 표현을 올바르게 하지 못했던 소스보다 좀 더 간결해서 보기도 좋군요.
이 방법으로 테스트 해봤을때 의도한대로 제대로 표현이 됐습니다.
확인은 여기서 하세요.

그외의 방법이 있다면 댓글 또는 피백 부탁드리겠습니다.
참!!테스트 브라우저는 FF 3.6.3, IE 6, 7, 8, Safari 5.0(7533.16), Opera 10.53, Google 크롬 5.0.375.70입니다.
Posted by 앵겨