이런 레이아웃은 어떻게 div 구조를 정의해야하나요?
본문
현재 쇼핑몰 디자인 완료 되었는데요.
div 구조를 짤려는데 좀 까마득한데 어떻게 div를 짜야할지 모르겠네요.
현재 우선 상단의 헤더쪽과 하단의 풋쪽은 코딩은 했는데요.
헤더는 좌측의 카테고리와 그 밑에 배너까지 코딩해야할것 같은데.
왜냐면, 상단 쪽과 좌측 부분은 서브 페이지 들어가서도 항상 쓰일테니깐요..
맞나요?
컨테이너쪽은 내용이나 게시판이 들어가는 부분이라..
헤더부분과 컨테이너를 어떻게 나누어야할지 잘 모르겠네요,.
메뉴 코딩 끝나는 부분에서 가로로 1100px 가운데을 주고 좌,우측으로 나눠야하는건가요?
<div class="gnb"> ==> 메뉴 div 코딩
.....
<div>
-------------------------------
<div class="sider"> ==>
<div class="left_sider">좌측</div>
<div class="right_sider">우측 컨테이너</div>
</div>
----------------------------------
그런데, 위와 같이 코딩 하자니 컨테이너 들어가는
<div id="container"> <div>
위와 같은 컨테이너 div 섹션이 있는데..어떻게 처리야해야할지 모르겠네요.
div 학습한지 몇개월 밖에 안되어서 저런 레이아웃은 잘 모르겠는데요.ㅜㅜ
고수님들 답변 부탁드립니다.
답변 5
#header .area .sider .left_sider{
float: left;
width: 30%;
position: relative !important; /* 안 넣어도 됩니다 */
}
#header .area .sider .right_sider{
float: right;
width: 70%;
position: relative !important; /* 안 넣어도 됩니다 */
}
#container .area { clear: both;margin:0; padding:0; } /* clear: both; 꼭 필요 */
<!-- S : Sider -->
<div class="sider">
<div class="left_sider">
<div>상품카테고리</div>
<div>배너1</div>
<div>배너2</div>
</div>
<div class="right_sider">
<div>메인슬라이드</div>
<div>베스트 상품 타이틀</div>
<div>컨테이너</div>
<div>추천 상품 타이틀</div>
<div>컨테이너</div>
</div>
</div>
<!-- E : Sider -->
뭐 이런식으로 구성하지면 될것 같습니다만
답변은 감사합니다.
알려주신대로 하니 레이아웃은 잡혔네요..
그런데, 또 문의드려도 될까요? 죄송하지만, 알려주신 건 헤더에 좌측 카테고리나 배너 뿐 아니라 우측에 들어갈 내용까지 넣은거잖아요.
작업완료 후에 헤드, 인덱스, 테일로 나누어서 영카트 파일에 각각 붙여넣어야하잖아요..
shop.head.php, index.php, shop.tail.php 여기 파일에요.
..소스를 한참보고 있긴한데요. 각각 나누어서 붙여넣을려면 어떻게 나눠야할지도 좀 헷갈리고 잘 모르겠네요ㅡㅡ;
혹시 헤더파일을 최상단의 <div id="wrap"> 부터 시작해서, <div class="left_sider"> 해당부분까지 넣고,
인덱스는 <div class="right_sider"> 해당부분을 넣고..
그러니깐 아래 부분만요.
<div class="right_sider">
<span>메인슬라이드</span>
<span>공지사항</span>
<div>베스트 상품 타이틀</div>
<div>컨테이너</div>
<div>추천 상품 타이틀</div>
<div>컨테이너</div>
</div>
테일은 저 코딩 바로 밑에 소스부터 시작해서 끝나는 wrap의 닫는 대크까지 넣으면 되는건가요?
서브 페이지 넘어갈 때에 우측 부분에 노출될 내용과 게시판이 노출되면 되거든요.
제가 언급한 방식이 좀 틀리면 죄송하지만 다시한번 답변주세요..
div 초짜라다보니...에휴..이해부탁드립니다.
스스로 기본 구조를 짜신 후
뜻대로 안되는 경우
해당 소스 전체를 올린 후
어느 부분이 잘 안된다.. 라고 질문을 올리셔야
답변 받을 수 있을듯 합니다.
현재 질문은 전체 소스를 짜서 답변 드려야 하는 상황으로 보이니
답변이 없는것 아닐까요?
그렇군요..알겠습니다. 소스를 올리겠습니다. css 정의한 소스하고 html 소스 파일 올리면 되는거죠?
작업한 소스를 아래 댓글로 넣었습니다.
작업한 현재 헤더 소스의 css와 html 소스를 아래에 남깁니다.
아래 소스에서 진하게된 부분처럼 넣어야하는지 어떻게 넣어야하는지 잘 모르겠네요.
--------- html 소스 ------------
<!-- S : WRAP -->
<div id="wrap">
<!-- S : HEADER -->
<div id="header">
<div class="area">
<!-- S : TOP1 --->
<div class="top1_box">
<!-- S : LNB --->
<div class="lnbbox">
<div class="lnb">
<ul>
<li>홈</li>
<li>|</li>
<li>로그인</li>
<li>|</li>
<li>마이페이지</li>
<li>|</li>
<li>장바구니</li>
<li>|</li>
<li>주문배송조회</li>
<li>|</li>
<li>즐겨찾기추가</li>
</ul>
</div>
</div>
<!-- E : LNB --->
</div>
<!-- E : TOP1 --->
<!-- S : TOP2 --->
<div class="top2_box">
<div class="sidebox">
<!-- S: LOGO -->
<div class="logo"><img src="img/main/logo.png" alt="로고" /></div>
<!-- E: LOGO -->
<!-- S: SERACH FORM -->
<div class="srch">
<div>검색 <input type="text" size="20" /></div>
</div>
<!-- S: SERACH FORM -->
</div>
</div>
<!-- E : TOP2 --->
<!-- S : GNB --->
<div class="gnb">
<div class="gnbbox">
<div class="gnbname">
<ul>
<li>회사소개</li>
<li>이용안내</li>
<li>견적의뢰</li>
<li>상품구매후기</li>
<li>커뮤니티</li>
<li>커뮤니티</li>
</ul>
</div>
</div>
</div>
<!-- E : GNB --->
<!-- S : Sider -->
<div class="sider">
<div class="left_sider">좌측부분</div>
<div class="right_sider">우측부분</div>
</div>
<!-- E : Sider -->
</div>
<!-- E : HEADER -->
<!-- S : CONTAINER -->
<div id="container">
<!-- S : Contens BOX -->
<div class="area"></div>
</div>
<!-- E : CONTAINER -->
<!-- S : FOOTER -->
<div id="footer">
<!-- S : FOOT LNB -->
<div class="foot_lnb_area">
<div class="area">
<ul>
<li>
<a href="#">홈</a>
</li>
<li>
<a href="#">회사소개</a>
</li>
<li>
<a href="#">고객센터</a>
</li>
<li>
<a href="#">쇼핑몰이용약관</a>
</li>
<li>
<a href="#">개인정보취급방침</a>
</li>
</ul>
</div>
</div>
<!-- E : FOOT LNB -->
<!-- S : ADDRESS -->
<div class="foot_address">
<div class="foot_logo"><br>
<img src="img/main/footer_logo.png" alt="로고">
</div>
<div class="address">
회사정보
</div>
</div>
<!-- E : ADDRESS -->
</div>
<!-- E : FOOTER -->
</div>
<!-- E : WRAP -->
---------- css 소스 -------------
/* LAYOUT */
#wrap { }
#header { height:185px; z-index:99999; }
#container { }
#footer { border-top:1px solid #b6b6b6; }
/* HEADER */
#header .area { margin:0; padding:0; }
#header .area .top1_box .lnbbox {position:relative; width:1100px; margin:0 auto;}
#header .area .top1_box .lnbbox .lnb { position:absolute; width:386px; height:10px; left:770px; top:7px; }
#header .area .top1_box .lnbbox .lnb ul { margin:0; padding:0; }
#header .area .top1_box .lnbbox .lnb li { list-style:none; float:left; margin-left:5px; text-decoration:none; font-family:나눔고딕; font-size:10pt; }
#header .area .top2_box { height:97px;}
#header .area .top2_box .sidebox {position:relative; width:1100px; margin:0 auto;}
#header .area .top2_box .sidebox .logo { position:absolute; top:18px; }
#header .area .top2_box .sidebox .srch { position:absolute; top:55px; right:59px; float:left; }
/* GNB */
#header .area .gnb { height:40px; background:url(../img/main/menu_bg.png); background-position:right;}
#header .area .gnb .gnbbox {position:relative; width:1100px; margin:0 auto; }
#header .area .gnb .gnbbox .gnbname {
position:absolute;
top:10px;
text-decoration:none;
font-family:나눔고딕;
font-size:12pt;
}
#header .area .gnb .gnbbox .gnbname ul { margin:0; padding:0; }
#header .area .gnb .gnbbox .gnbname li { list-style:none; float:left; padding-left:7px; margin:0 90px 0 18px; text-decoration:none; font-family:나눔고딕; font-size:12pt; color:#FFF; }
/* 전체 사이드바 */
#header .area .sider { position:relative; width:1100px; margin:0 auto;margin-top:50px;}
#header .area .sider .left_sider{ }
#header .area .sider .right_sider{ }
/* 상품 카테고리 */
/* CONTAINER */
#container .area { margin:0; padding:0; }
#container .area .sub_contes { position:relative; width:1100px; margin:0 auto;}
/* FOOTER */
#footer .foot_lnb_area { height:34px; border-bottom:1px solid #b6b6b6; }
#footer .foot_lnb_area .area { position:relative; width:1100px; margin:0 auto; }
#footer .foot_lnb_area .area ul { margin:0px; padding-left:200px; }
#footer .foot_lnb_area .area li { list-style:none; float:left;margin-right:10px; }
#footer .foot_lnb_area .area a,
#footer .foot_lnb_area .area a:hover { font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; font-size:12px; line-height:34px; color:#858585; text-decoration:none; }
#footer .foot_address { overflow:hidden; position:relative; width:1100px; height:140px; margin:0 auto; }
#footer .foot_address .foot_logo { position:absolute; left:0px; top:5px; }
#footer .foot_address .address { margin:27px 0 0 200px; font-family:'Nanum Gothic', 'NanumGothic', '나눔고딕'; font-weight:bold; font-size:13px; line-height:16px; color:#565656; }
파일 분리는 작업자가 원하는 방식대로 하면 됩니다만
기준은 있기 마련이지요
예를 들어 상단에 항상 노출되어야 하는 부분은 head 쪽 소스에 작업하는게 일반적입니다
body 쪽, 즉 컨텐츠가 들어갈 내용은 각각 분리하여 작업한 후
index 쪽에서 필요에 따라 include 해서 사용하구요
tail 쪽에는 하단에 출력할 내용과 관계된 부분만을 작업합니다
보통 그렇게들 작업합니다만
그누보드 소스구조를 따라 작업하시는게 좋겠습니다
이건 더 공부하면 쉽게 될듯한데 남에소스로 구현하면 아무도움도 안됩니다. 아주 기초입니다.
네..그러고싶은데..ㅡㅡ; 공부하면서 나름 하다하다 포기해서 위에 로고스님이 알려주신대로 해볼려고해요..div 코딩 왜이리 머리아픈지 모르겠네요..테이블이면 한방으로 끝내는데 요즘 웹표준 코딩이 대세잖아요..안할수도 없네요.ㅡㅡ;.
