출처 : http://blog.naver.com/maglitt/60053112481

기본레이아웃

 

 

마크업(markup)

 

1.시작 단계에서 고려할점

 

디자인, css에 우선하여 페이지의 구성요소, 그룹에 적합하게 분리하여 적합한 태그 id, span으로 마크업한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Simple CSS Layout</title>
</head>
<body>
<div id="head">Site Top Area</div>
<hr>
<div id="sub">Site Left Area</div>
<hr>
<div id="body">Main Content Area
</div>
<hr>
<div id="foot">Site Bottom Area</div>
</body>
</html>

 

 

 

CSS 

body {

margin: 0;

padding: 0;

}

브라우저 마다 다른 body값의 통일 

hr {

display: noen;

}

각부분을 구분지어 주는 역활을 하므로

디자인상 화면에 나타나지 않도록 display:none; 시켜준다.

#head {

height: 170px;

background: #eee;

}

상단 로고, 메뉴 등은 고정된 높이를 갖는 경우가 많다.

따라서 높이를 지정하고 배경색만 지정해준다.

#sub {

postioin: absolute;

top: 170px;

left: 0;

width: 160px;

background: #c4e8fd;

}

1. 일정한 높이를 가지고 있는 경우

2. head 부분 바로 아래 , 왼쪽에 위치시킨다. (top: 170px; left: 0;)

3. main content영역과 겹치는 현상

#body

padding-left: 170px;

width: 700px;

min-height: 400px;

background: #ffff80;

}

1. 왼쪽 메뉴와 겹침 현상 방지를 위해 padding-left 지정

    margin값을 사용하지 않은 이유는 Side Left를 포함한

    body전체에 배경을 지정하기 위해서이다.

2. Main Content 높이가 Side left가 낮을 경우

   배경 footer가 Side Left에 가리는 것을 방지하기 위해서

   최소 높이 지정

<결과>

 

 

 

 

relative 와 absolute의 관계 

 

absolute position 을 relative position과 함께 사용할 경우

보다 자유롭게 offset 설정가능(하위 absolute position의 offset 기준은 더 이상 브라우저가 아닌

상위 relative postion에 있다.)

 

 <div id="board_list" class="freeboard_item">
 <ul id="board_list_item">
  <li>
   <div class="number">26</div>
   <div class="title">title</div>
   <div class="name">name</div>
   <div class="date">date</div>
   <div class="hits">hits</div>  
  </li>
  <li>
   <div class="number">26</div>
   <div class="title">title</div>
   <div class="name">name</div>
   <div class="date">date</div>
   <div class="hits">hits</div>  
  </li>
  <li>
   <div class="number">26</div>
   <div class="title">title</div>
   <div class="name">name</div>
   <div class="date">date</div>
   <div class="hits">hits</div>  
  </li>
 </ul>
 </div>

 

 #board-list-item li {
position: relative;
width: 548px;
border-bottom: 1px solid #EBDDD4;
color: inheret;
}
#board-list li div.number,
#board-list li div.date,
#board-list li div.hits {
top: 7px;
}
#board-list li div.title {
padding-top: 7px;
padding-bottom: 5px;
}
#board-list div.number {
position: absolute;
left: 0;
width: 79px;
text-align: center;
}
#board-list div.title {
margin-left: 90px;
width: 297px;
}
#board-list div.date {
position: absolute;
right: 57px;
width: 92px;
text-align: center;
}
#board-list div.hits {
position: absolute;
right: 0;
width: 57px;
text-align: center;
}
div.freeboard-item div.name {

position: absolute;
top: 10px;
right: 150px;
width: 55px;
height: 1.5em;
text-align: center;
overflow: hidden;
}
div.freeboard-item div.title {
width: 252px !important;
}


+ Recent posts