묻고답하기
XHTML 맞게 만들려고하는데요.. div 로 틀을 잡는게 맞나요?;
2009.02.19 00:23
한동안 테이블로만 레이아웃을 잡다가 제로보드 xe통해서 xhtml 웹표준을 알게되었는데요..
그래서 어차피 하는거 xhtml 에 맞게 제작하는걸 공부해보려고하는데요..
div 로만 틀을 잡는게 맞는지 궁금해서요..
아래 소스는 제가 테스트겸 작성해본건데요..
아래소스에서 쓸대없는거나 바꿔야 할 점 있으면 알려주셨으면 합니다...
미리보기는 http://hds.ddns.co.kr/finehome/cs_server/cs_main.php 이거구요..
아래는 소스 입니다.. 스타일시트는 소스를 한번에 보여드리다보니 같이 넣은겁니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="메인" />
<title>테스트</title>
<style type="text/css">
body {
color:white;
background-color:#666666;
margin:0px;
text-align:center;
}
#bodyWrap {
padding:0px;
text-align:center;
width:981px;
height:auto;
background-color:#F5F5F5;
}
#header {
padding:0px;
width:100%;
height:190px;
background-image:url(home_image/toplogo.jpg);
background-repeat:no-repeat;
}
#bar_bg {
padding:0px;
width:979px;
height:22;
border-style:none solid;
border-color:black;
border-width:1px;
}
.bar_bg2 {
width:977px;
height:100%;
border-style:none solid;
border-color:white;
border-width:1px;
background-image:url(home_image/top_bg.gif);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<!--전체 틀(bodyWrap)-->
<div id="bodyWrap">
<!-- 탑 로고(header)-->
<div id="header">
</div>
<!-- 로고 밑 바 이미지-->
<!-- 좌우 테두리가 검정색 안에 흰색 테두리를 넣느라고 레이어를 두개를 썼는데 다른 쉬운 방법 있으면 알려주세요~-->
<div id="bar_bg">
<div class="bar_bg2">
</div>
</div>
</div>
</body>
</html>
오히려 테이블보다 더 쉽죠. 대신 <div>의 id(#)와 class(.)를 열심히 활용하시면 됩니다~
#header {~}에서 background-image:url 보다는 background:url 이 오히려 용량을 적게먹겠죠
background-color:# 보다는 background:#
그리고
#header { padding:0px; width:100%; height:190px; background-image:url(home_image/toplogo.jpg); background-repeat:no-repeat;}
이부분을 (0은 픽셀을 쓰지 않아도 인식)
#header { padding:0; width:100%; height:190px; background:url('home_image/toplogo.jpg) no-repeat;}
오히려 더 짧아졌죠?
.bar_bg2 { width:977px; height:100%; border-style:none solid; border-color:white; border-width:1px; background-image:url(home_image/top_bg.gif); background-repeat:repeat-x;}
=>
.bar_bg3 { width:977px; height:100%; border:1px #fff; border-style:none solid border-width:1px; background:url(home_image/top_bg.gif) repeat-x;}
이렇게 쓰시는게 더 좋겠죠?
나머진 열심히 응용을;;;;;;;;;
수고하세요