2단 레이아웃을 만들어 보았다.

뭔가 3단은 너무 메인화면이 작은 느낌이라 나는 늘 2단 레이아웃을 사용하는 편이다.

블로그의 레이아웃을 보아도 2단으로 되어있음을 알 수 있을 것이다.

JSP 작업을 하다가 만든 것이므로 예시는 확장자는 JSP 로 되어있다.

먼저 큰 틀을 잡아보자.

일반적으로 header, left, content, footer 네 부분으로 구성되는게 보통이다.

 header

  left

  content

                        footer


나는 다음과 같이 이 페이지를 구성하였다.

<div id="wrap">                            <!-- 전체를 감싸는 랩퍼 -->
       <div id="header">                  <!-- 헤더 영역 -->
       </div>
       <div id="left">                        <!-- left 영역 -->
       </div>
       <div id="contentWrap">            <!-- content 를 감싸는 랩퍼 -->
                <div id="contentheader"> <!-- content 의 헤더 -->
                </div>
                <div id="content">           <!-- content 영역 -->
                </div>
       </div>
       <div id="footer">                     <!-- footer 영역 -->
       </div>
</div>


header, left, content, footer 외에 wrapper 가 들어가 있다.

내가 wrapper 라는 것을 넣은 이유는 무엇일까?

나는 레이아웃이 깨지는 것을 방지하기 위해 wrapper 를 사용했다.

wrapper 없이 레이아웃을 디자인 했을 때 각 영역들이 유동적으로 줄어들고 늘어나고 했지만

마냥 늘이고 줄일 수 있다면 웹페이지가 보기 흉해질 것이므로 wrapper 를 사용하여 고정 값을

지정해 주었다.

이미지를 올려서 설명해야 하는데 너무 귀찮다 ㅡㅡ;;

css 를 한번 볼까?

/* BORDER 가 left, contentWrap, content 에 들어가서 6px 을 추가, 추후 줄일 것 */
/* 1106px = left(250px) + padding-left(15px) +
   contentWrap(820px) + padding-contentWrap(15px) + border(6px)
   보더는 임시로 넣은 것이다. 레이아웃이 제대로 잡혔나 확인하기 위해서...  
   세 부분에 사방으로 1px 보더가 잡혀서 6px 을 더 잡았다. */

#wrap {                    
 width : 1106px;
}                     
#contentWrap {
 float : right;
 width : 820px;
 border : solid 1px;
 padding : 15px;
}

#header {
 height: 127px;
 background: #ffffff;
 border : solid 1px;
}

#left {
 float : left;
 width : 250px;
 text-align : center;
 background : #ffffff;
 border : solid 1px;
}
#left div {
 padding : 15px;
}

#content {
 width : 100%;
 height : 400px;
 text-align : left;
 border : solid 1px;
}

#contentheader {
 height : 30px;

}
#footer{
 clear : both;
 height: 30px;
 background: #ffffff;
 text-align : center;
 border : solid 1px;
 width : 100%;

}
#footer div {
 padding : 15px;
 font-weight : 900;
 }

이렇게 하여 나온 화면은 다음과 같다.


사용자 삽입 이미지

깔끔하게 나왔당.^^;

헤더와 푸터는 height 가 고정되어 있고, left 와 contentWrap 은 height 를 유동적으로 해 놓았음을 볼 수 있다.

창 크기를 줄여도 wrapper 가 width 를 fix 된 길이로 잡고 있기 때문에 left 나 content 가 줄어들지 않고

단지 브라우저에 스크롤바가 생기게 된다.

레이아웃을 제대로 만들어 보자는 생각으로 해봤는데 이게 괜찮은지 잘 모르겠다.^^;

책을 많이 읽어서 보다 안정적이고 이상적인 레이아웃을 만들어보자...




Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

  1. BlogIcon 에어림 2008.05.24 01:55 신고  댓글주소  수정/삭제  댓글쓰기

    레이아웃.. 골 아프다 정말

  2. BlogIcon 에어림 2008.05.24 01:55 신고  댓글주소  수정/삭제  댓글쓰기

    레이아웃.. 골 아프다 정말

  3. BlogIcon Nike Air Max Shoes 2012.05.04 16:38  댓글주소  수정/삭제  댓글쓰기

    http://www.nikejordanairmaxshoes.com/ Nike Air Max Shoes http://www.nikejordanairmaxshoes.com/ Air Max Shoes http://www.nikejordanairmaxshoes.com/ Nike Air Max http://www.nikejordanairmaxshoes.com/ nike jordan air max http://www.nikejordanairmaxshoes.com/ nike air jordon http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run-sale-id-187.html Barefoot Nike Free Run http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run--2-sale-id-321.html Barefoot Nike Free Run+ 2 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run--3-sale-id-322.html Barefoot Nike Free Run+ 3 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Run-sale-id-323.html Barefoot Nike Free Run http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Free-Run-3-0-V2-sale-id-324.html Barefoot Free Run 3.0 V2 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Free-Run-3-0-V3-sale-id-325.html Barefoot Free Run 3.0 V3 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-5-0-V4-sale-id-326.html Barefoot Nike Free 5.0 V4 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-7-0-sale-id-327.html Barefoot Nike Free 7.0 http://www.nikejordanairmaxshoes.com/cheap-Barefoot-Nike-Free-Tr-Fit-sale-id-328.html Barefoot Nike Free Tr Fit http://www.nikejordanairmaxshoes.com/cheap-Dual-Fusion-St-2-sale-id-329.html Dual Fusion St 2 http://www.nikejordanairmaxshoes.com/cheap-Air-Max-sale-id-330.html Air Max http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2009-sale-id-331.html Nike Air Max 2009 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2011-sale-id-332.html Nike Air Max 2011 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2012-sale-id-333.html Nike Air Max 2012 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-24-7-sale-id-334.html Nike Air Max 24-7 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-87-sale-id-335.html Nike Air Max 87 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-89-sale-id-336.html Nike Air Max 89 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-90-sale-id-337.html Nike Air Max 90 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-91-sale-id-338.html Nike Air Max 91 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-93-sale-id-339.html Nike Air Max 93 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-95-sale-id-340.html Nike Air Max 95 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-180-sale-id-341.html Nike Air Max 180 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-360-sale-id-342.html Nike Air Max 360 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-2010-sale-id-343.html Nike Air Max 2010 http://www.nikejordanairmaxshoes.com/cheap-Nike-Max-Alpha-2012-sale-id-344.html Nike Max Alpha 2012 http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-ACG-sale-id-345.html Nike Air Max ACG http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Tailwind--4-sale-id-346.html Air Max Tailwind +4 http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Classic-BW-sale-id-347.html Air Max Classic BW http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Griffey-sale-id-348.html Air Max Griffey http://www.nikejordanairmaxshoes.com/cheap-Air-Max-LTD-sale-id-349.html Air Max LTD http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Skyline-sale-id-350.html Air Max Skyline http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Terra-Ninety-sale-id-351.html Air Max Terra Ninety http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-Tn-sale-id-352.html Nike Air Max Tn http://www.nikejordanairmaxshoes.com/cheap-Air-Max-Zenyth-sale-id-353.html Air Max Zenyth http://www.nikejordanairmaxshoes.com/cheap-Air-Max-2009-Heels-sale-id-354.html Air Max 2009 Heels http://www.nikejordanairmaxshoes.com/cheap-Nike-Air-Max-Barkley-sale-id-355.html Nike Air Max Barkley http://www.nikejordanairmaxshoes.com/cheap-Nike-Lunar-sale-id-356.html Nike Lunar http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarGlide--3-sale-id-367.html Nike LunarGlide+ 3 http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarGlide--2-sale-id-368.html Nike LunarGlide +2 http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarGlide---sale-id-369.html Nike LunarGlide + http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarElite--sale-id-370.html Nike LunarElite+ http://www.nikejordanairmaxshoes.com/cheap-LunarEclipse--2-sale-id-371.html LunarEclipse+ 2 http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarEclipse--sale-id-372.html Nike LunarEclipse+ http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarMX--sale-id-373.html Nike LunarMX+ http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarSwift-sale-id-374.html Nike LunarSwift http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarHaze-sale-id-375.html Nike LunarHaze http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarFly--2-sale-id-376.html Nike LunarFly+ 2 http://www.nikejordanairmaxshoes.com/cheap-Nike-Lunaracer--2-sale-id-377.html Nike Lunaracer+ 2 http://www.nikejordanairmaxshoes.com/cheap-Lunar-Orbit-Nd-sale-id-378.html Lunar Orbit Nd http://www.nikejordanairmaxshoes.com/cheap-Lunar-Rejven8-Mid-sale-id-379.html Lunar Rejven8 Mid http://www.nikejordanairmaxshoes.com/cheap-Nike-LunarElite--2-sale-id-380.html Nike LunarElite+ 2 http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-sale-id-357.html Air Jordan http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-2012-sale-id-381.html Air Jordan 2012 http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-2011-sale-id-382.html Air Jordan 2011 http://www.nikejordanairmaxshoes.com/cheap-Jordan-Melo-M7-sale-id-383.html Jordan Melo M7 http://www.nikejordanairmaxshoes.com/cheap-Jordan-Fly-Wade-II-sale-id-384.html Jordan Fly Wade II http://www.nikejordanairmaxshoes.com/cheap-Jordan-Alpha-Trunmer-sale-id-385.html Jordan Alpha Trunmer http://www.nikejordanairmaxshoes.com/cheap-Jordan-Heels-sale-id-386.html Jordan Heels http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-III-3--sale-id-387.html Air Jordan III(3) http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-V-5--sale-id-388.html Air Jordan V(5) http://www.nikejordanairmaxshoes.com/cheap-Air-Jordan-IV-4--sale-id-389.html Air Jordan IV(4) http://www.nikejordanairmaxshoes.com/cheap-Jordan-Retro-XI-11--sale-id-390.html Jordan Retro XI(11) http://www.nikejordanairmaxshoes.com/cheap-Jordan-3-5-Spiziker-sale-id-391.html Jordan 3.5 Spiziker http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-sale-id-358.html Nike Shox http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-R4-sale-id-392.html Nike Shox R4 http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-NZ-sale-id-393.html Nike Shox NZ http://www.nikejordanairmaxshoes.com/cheap-Nike-Shox-Turbo-sale-id-394.html Nike Shox Turbo http://www.nikejordanairmaxshoes.com/cheap-Air-Force-1-sale-id-359.html Air Force 1 http://www.nikejordanairmaxshoes.com/cheap-Air-Force-1-Heels-Hi-Top-sale-id-395.html Air Force 1 Heels Hi-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-SB-sale-id-360.html Nike Dunk SB http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Heels-Lo-Top-sale-id-396.html Nike Dunk Heels Lo-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Heels-Hi-Top-sale-id-397.html Nike Dunk Heels Hi-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Block-Heels-sale-id-398.html Nike Dunk Block Heels http://www.nikejordanairmaxshoes.com/cheap-Nike-Dunk-Block-Heels-Hi-Top-sale-id-399.html Nike Dunk Block Heels Hi-Top http://www.nikejordanairmaxshoes.com/cheap-Nike-Zoom-sale-id-361.html Nike Zoom http://www.nikejordanairmaxshoes.com/cheap-Hyperdunk-2011-Low-sale-id-400.html Hyperdunk 2011 Low http://www.nikejordanairmaxshoes.com/cheap-Zoom-Kobe-VI-sale-id-401.html Zoom Kobe VI http://www.nikejordanairmaxshoes.com/cheap-Zoom-Rookie-sale-id-402.html Zoom Rookie http://www.nikejordanairmaxshoes.com/cheap-Lebron-VIIII-9-sale-id-403.html Lebron VIIII 9 http://www.nikejordanairmaxshoes.com/cheap-Zoom-Kobe-VII-sale-id-404.html Zoom Kobe VII http://www.nikejordanairmaxshoes.com/cheap-Air-GO-LWP-sale-id-405.html Air GO LWP http://www.nikejordanairmaxshoes.com/cheap-Zoom-Lebron-VII-sale-id-406.html Zoom Lebron VII http://www.nikejordanairmaxshoes.com/cheap-Football-Soccoer-sale-id-363.html Football Soccoer http://www.nikejordanairmaxshoes.com/cheap-Tiempo-Legend-IV-sale-id-365.html Tiempo Legend IV http://www.nikejordanairmaxshoes.com/cheap-Nike-MERCURIAL-sale-id-366.html Nike MERCURIAL http://www.nikejordanairmaxshoes.com/cheap-Nike-Trail-Blazer-sale-id-364.html Nike Trail Blazer