그누보드 - div 레이아웃 짜기 샘플용 소스 드립니다

div 레이아웃 짜기 샘플용 소스 드립니다 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

div 레이아웃 짜기 샘플용 소스 드립니다 정보

div 레이아웃 짜기 샘플용 소스 드립니다

본문

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Div Layout</title>
<link href="./lay_style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="box">
       <div id="top">
       
       top content
       
       </div>
   <div id="line_w"></div>

       <div id="middle">

          <div class="lefts">
          <div class="left">
         
         middle_left Content
         
          </div>
          </div>

          <div class="midds">
          <div class="midd">
          
         middle_middle Content
         
          </div>
          </div>

          <div class="right">
          
         middle_right Content
         
          </div>
     </div>

       <div id="tail">
         
         tail Content
         
       </div>
</body>
</html>

- 직접 메모장으로 만들었습니다.

시작입니다. 마칩니다. 사이에 넣고싶은 내용넣으시면 됩니다.

#box {margin:0 auto; width:1000px; text-align:center; background:white; color:black;}
/* 아래 코드는 탑의 설정입니다. */
#top {width:100%; text-align:center; background:black; color:white;}
#line_w {width:100%; height:5px; text-align:center; background:white; color:green;}
#middle {width:100%; background:white; color:white; padding:0px 0px 5px 0px;}
/* 아래 코드는 중앙의 왼쪽 컨텐츠 설정입니다. */
#middle .left {width:200px; background:black; color:white;}
#middle .lefts {float:left; width:200px; background:white; padding:0px 5px 0px 0px;}
/* 아래 코드는 중앙의 중앙 컨텐츠 설정입니다. */
#middle .midd {width:590px; background:black; color:white;}
#middle .midds {float:left; width:590px; background:white; padding:0px 5px 0px 0px;}
/* 아래 코드는 중앙의 오른쪽 컨텐츠 설정입니다. */
#middle .right {width:200px; background:black; color:white;}
/* 아래 코드는 tail 영역 설정입니다. */
#tail {width:100%; background:black; color:white;}

CSS 코드입니다. 원하시는 설정을 하시면됩니다. 아 그리고 구분을 위해 현제 블랙으로 bg 가 설정되어있으니 white 로 고치시면됩니다.