index 페이지 한개문서로 모두 출력하는 소스. 깨짐현상 불허용!! 정보
index 페이지 한개문서로 모두 출력하는 소스. 깨짐현상 불허용!!본문
<!--
인덱스,메인 페이지 수정을 위한 기본 레이아웃 구조소스입니다.
본 소스는 기초 초급자를 위한 소스이며,
Table 사용에 한계를 느낀분들.. 소스가 복잡해 까먹는 일이 허다 한분들을 위한 소스입니다.
또한 중간중간 <!-- --!> 가 있어 구분구분 알아서 소스를 입력해사용할수있습니다.
<div id="<style>#name</style>"></div> 로 구분되며
id 값을 원하는것에 지정하면 됩니다.
또한 같은 ID값으로 지정된 디자인은 Style에서 값만 수정하면, 같은 id값이 한번에 수정됩니다.
또한 속도가 Table 레이아웃보다 빠릅니다.
Head,index,tail 을 나눌필요없이 한번에 해도 오류가 없는 소스로서, 입문자가 느끼기에는 부담이 적은 소스입니다.
원하는 스킨을 원하는곳에 적용시키면 멋지게 사용할수있습니다.
본 내용은 '내컴퓨터' 가 작성하였습니다.
가장 기본적인 소스로 멋진홈페이지 만들길 기대하겠습니다.
--!>
<!-- Div 레이아웃에 지정할 디자인을 입력하는곳입니다. ID출력값 --!>
<style>
#01 { float:top; }
#top { float:top; width:1000px; background-color:blue; height:200px; }
#left { float:left; width:220px; background-color:green; height:100%; }
#center { float:left; width:560px; background-color:orange; height:100%; }
#right { float:left; width:220px; background-color:yellow; height:100%; }
#tail { width:1000px; background-color:#AFEDFF; height:115px; }
</style>
<!-- 마침 --!>
<!-- 메인이 시작됩니다. --!>
<!-- 최상단레이아웃을 입력하시오 --!>
<div id="top"> 최상단입니다. </div>
<!-- 마침 --!>
<!-- 기타 상단을 넣으세요 --!>
<div>기타상단</div>
<!-- 마침 --!>
<!-- 왼쪽메뉴를 입력하십시오 --!>
<div id="left"><center>왼쪽메뉴</center></div>
<!-- 마침 --!>
<!-- 중간메뉴를 입력하십시오 --!>
<div id="center"><center>중간입니다.</center></div>
<!-- 마침 --!>
<!-- 오른쪽메뉴를 입력하십시오 --!>
<div id="right">오른쪽입니다.</div>
<!-- 마침 --!>
<!-- 마지막 저작권표시나 임의 표시를 입력하십시오 카피라이트 추천 --!>
<div id="tail"><center>하단입니다.</center></div>
<!-- 마침 --!>
<!-- 홈페이지의 내용이 모두 끝났습니다. --!>
1
댓글 5개
기존 Table 로 불러와서 연결했던것이 이렇게 한번에 해결할수있으니 참 좋습니다.
레이아웃은 기본적으로 네이버의 웹표준 가이드를 참고하시는게 가장 도움이 많이 되죠 ..

자주 사용하는 것들은 class로 적용해서 사용합니다.
스타일 적용시
# 이녀석이 id 라면
. 이녀석이 class 죠
예를들어
<style type="text/css">
.test { width: 100px; border: 1px solid red; }
</style>
<div class="test">하나</div>
<div class="test">둘</div>
<div class="test">셋</div>