시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크
jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
> 커뮤니티 > 골드팁 상세보기
커뮤니티 구인구직
사이트등록
현재접속자 새로고침
게시판타이틀 골드팁 / 상세보기
트위터로 보내기 미투데이로 보내기 싸이월드 공감
추천수 734 | 조회수 25,524 | 등록일 2008-04-11 16:33:33

닉네임

jenoba

제목

레이어로 홈페이지를 만들어 봅시다
내용

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

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
으로 잡은 레이어가 시작하는곳부터 출력이 됩니다. 실재 작업을 할때 상당히 유용합니다^^;

추천스크랩소스보기 목록
이전게시글 [HTML]지정한 테이블폭 강제로 못벗어나게 하기 2007-12-18 00:42:22
다음게시글 모바일 및 리스트형 템플릿 파일에 적용하면 유용한 ellipsis 소스 2013-08-14 16:40:34