2008년 10월 20일
SEO에 적절한 DIV Layout 예
SEO에 적절한 레이이웃이라면 본문이 가장 처음(위)에 위치하도록 HTML의 레이아웃을 구성하는 것이다.
가장(?) 간단한 레이아웃 예를 2단과 3단으로 나누어 소개한다.
다양한 방법이 존재 하며, 내부의 코딩에 따라 아래의 레이아웃이 유지 되지 않을 수도 있다.
난 div와 css를 이용하여 레이아웃 구성이 이해가 안될 때가 가끔 있다.-.-;;
2단 레이아웃
CSS파일
div.main {
float: right;
width: 80%;
}
div.left {
width: 20%;
}
HTML파일
<html>
<body>
<div class="main">
주요 컨텐츠 내용
</div>
<div class="left">
왼쪽 영역의 내용
</div>
</body>
</html>
3단 레이아웃
CSS파일
div.main {
position: relative;
width: 100%;
}
div.center {
margin-left: 100px;
margin-right: 200px;
}
div.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
}
div.right {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
HTML파일
<html>
<body>
<div class="main">
<div class="center">
가운데 영역의 내용
</div>
<div class="left">
왼쪽 영역의 내용
</div>
<div class="right">
오른쪽 영역의 내용
</div>
</div>
</body>
</html>
가장(?) 간단한 레이아웃 예를 2단과 3단으로 나누어 소개한다.
다양한 방법이 존재 하며, 내부의 코딩에 따라 아래의 레이아웃이 유지 되지 않을 수도 있다.
난 div와 css를 이용하여 레이아웃 구성이 이해가 안될 때가 가끔 있다.-.-;;
2단 레이아웃
CSS파일
div.main {
float: right;
width: 80%;
}
div.left {
width: 20%;
}
HTML파일
<html>
<body>
<div class="main">
주요 컨텐츠 내용
</div>
<div class="left">
왼쪽 영역의 내용
</div>
</body>
</html>
3단 레이아웃
CSS파일
div.main {
position: relative;
width: 100%;
}
div.center {
margin-left: 100px;
margin-right: 200px;
}
div.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
}
div.right {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
HTML파일
<html>
<body>
<div class="main">
<div class="center">
가운데 영역의 내용
</div>
<div class="left">
왼쪽 영역의 내용
</div>
<div class="right">
오른쪽 영역의 내용
</div>
</div>
</body>
</html>
# by | 2008/10/20 22:24 | 자료 | 트랙백
