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 영역시작입니다. -->
top content
<!-- Top 영역 마칩니다. -->
</div>
<div id="line_w"></div>
<div id="middle">
<div class="lefts">
<div class="left">
<!-- m_left 영역시작입니다. -->
middle_left Content
<!-- m_left 영역 마칩니다. -->
</div>
</div>
<div class="midds">
<div class="midd">
<!-- m_middle 영역시작입니다. -->
middle_middle Content
<!-- m_middle 영역 마칩니다. -->
</div>
</div>
<div class="right">
<!-- m_right 영역시작입니다. -->
middle_right Content
<!-- m_right 영역 마칩니다. -->
</div>
</div>
<div id="tail">
<!-- tail 영역시작입니다. -->
tail Content
<!-- tail 영역 마칩니다. -->
</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 로 고치시면됩니다.
<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 영역시작입니다. -->
top content
<!-- Top 영역 마칩니다. -->
</div>
<div id="line_w"></div>
<div id="middle">
<div class="lefts">
<div class="left">
<!-- m_left 영역시작입니다. -->
middle_left Content
<!-- m_left 영역 마칩니다. -->
</div>
</div>
<div class="midds">
<div class="midd">
<!-- m_middle 영역시작입니다. -->
middle_middle Content
<!-- m_middle 영역 마칩니다. -->
</div>
</div>
<div class="right">
<!-- m_right 영역시작입니다. -->
middle_right Content
<!-- m_right 영역 마칩니다. -->
</div>
</div>
<div id="tail">
<!-- tail 영역시작입니다. -->
tail Content
<!-- tail 영역 마칩니다. -->
</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 로 고치시면됩니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 7개
(제가 자주 이용한다는..ㅡ.ㅡㅋ)
http://html.nhndesign.com/naver_common_layout_ui_library