이런 레이아웃은 어떻게 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개 / 댓글 4개
#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 -->뭐 이런식으로 구성하지면 될것 같습니다만
이건 더 공부하면 쉽게 될듯한데 남에소스로 구현하면 아무도움도 안됩니다. 아주 기초입니다.
작업한 현재 헤더 소스의 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; }
스스로 기본 구조를 짜신 후
뜻대로 안되는 경우
해당 소스 전체를 올린 후
어느 부분이 잘 안된다.. 라고 질문을 올리셔야
답변 받을 수 있을듯 합니다.
현재 질문은 전체 소스를 짜서 답변 드려야 하는 상황으로 보이니
답변이 없는것 아닐까요?
답변을 작성하려면 로그인이 필요합니다.
알려주신대로 하니 레이아웃은 잡혔네요..
그런데, 또 문의드려도 될까요? 죄송하지만, 알려주신 건 헤더에 좌측 카테고리나 배너 뿐 아니라 우측에 들어갈 내용까지 넣은거잖아요.
작업완료 후에 헤드, 인덱스, 테일로 나누어서 영카트 파일에 각각 붙여넣어야하잖아요..
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 초짜라다보니...에휴..이해부탁드립니다.