index 페이지 한개문서로 모두 출력하는 소스. 깨짐현상 불허용!! > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

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개

<div> 레이아웃 레이아웃 하는데.. 인덱스페이지 구성할때쓰는 아이디값 적용 방법부터해서 완전 난해 하였습니다. 그런데.. 간단한 것들을 조합하여 기본 틀을 짜놓은 div 소스입니다.

기존 Table 로 불러와서 연결했던것이 이렇게 한번에 해결할수있으니 참 좋습니다.
http://html.nhndesign.com/naver_common_layout_ui_library

레이아웃은 기본적으로 네이버의 웹표준 가이드를  참고하시는게 가장 도움이 많이 되죠 ..
참고로 id 값은 한 페이지에서 한 번 사용을 원칙으로 합니다. 접근성 문제죠.
자주 사용하는 것들은 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>
전체 14 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT