웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 레이어로 홈페이지를 만들어 봅시다 본문

웹프로그램밍 자료실/알짜자료 골드팁

[해피CGI][cgimall] 레이어로 홈페이지를 만들어 봅시다

해피CGI윤실장 2016. 10. 25. 09:46

최근 대형 포탈사이트등 조금 크다하는 사이트들은 사이트의 로딩속도를 올리기위해서 레이어로 홈페이지를
만들곤 합니다.

2단배열 혹은 3단배열 홈페이지를 레이어로 레이아웃을 만들기를 알아보도록 하겠습니다.

요약

<style type="text/css">
body{text-align:center;}
#wrapper{width:700px;border:1px solid #eee; margin:20px auto;}
#sub,#body,#sidebar{float:left;}
#sub,#sidebar{wisth:150px;}
#body{width:400px;height:450px;}
#head{height:80px;background:#eee;}
#foot{clear:both;height:30px;background:#eee;}
</style>

<body>

<div id="wrapper">
 <div id="head">상단</div>
 <div id="sub">좌측 부분</div>
 <div id="body">중앙부분</div>
 <div id="sidebar">우측 부분</div>
 <div id="foot">하단부분</div>
</div>

</body>

레이어는 좌표값과 정렬따위는 없습니다.
모두 부모레이어에 속성되며, 좌에서 우로 정령을 해주는값이 상단의 파란색 칠한 값 float:left; 며,
그 아래에 오는 하단부분은 그 아래로 내리는 clear:both; 을 사용하면 내려갑니다.

레이어의 중앙정렬은 text-align:center;

ps. 레이어를 만들때 특정위치에 2개의 레이어 혹은 그이상의 레이어를 합쳐서 보여줄때 사용자의 환경에 따라
레이어의 위치가 바껴버리면, 곤란하죠. 이럴때는 레이어의 포지션을 position:relative 로 만드신후 그안에 position:absolute 의 레이어들을 만들어 좌표를 0,0으로 잡으시면, 브라우저의 0,0위치가 아닌 먼저 position:relative
으로 잡은 레이어가 시작하는곳부터 출력이 됩니다. 실재 작업을 할때 상당히 유용합니다^^;

 

 

 

 

 

 

홈페이지바로가기 

저작자표시

'웹프로그램밍 자료실 > 알짜자료 골드팁' 카테고리의 다른 글

[해피CGI][cgimall] 다중 파일첨부여부 자바스크립트로 테스트하기  (0) 2016.11.02
[해피CGI][cgimall] [php] 프레임사용중인곳에 새로고침시 현재페이지 불러오기  (0) 2016.10.31
[해피CGI][cgimall] [HTML]지정한 테이블폭 강제로 못벗어나게 하기  (0) 2016.10.27
[해피CGI][cgimall] Perl 과 PHP의 실전 속도 차이는?  (0) 2016.10.21
[해피CGI][cgimall]모바일 및 리스트형 템플릿 파일에 적용하면 유용한 ellipsis 소스  (0) 2016.10.19
공유하기 링크
'웹프로그램밍 자료실/알짜자료 골드팁' Related Articles more
Comments