레이아웃 질문

레이아웃 질문

QA

레이아웃 질문

본문

5c7fc11d3a76f4494acd4584cb1967d8_1424920519_4038.jpg

그누보드 tail 부분을

이런 레이아웃 으로 만들고 싶습니다.

이 질문에 댓글 쓰기 :

답변 3


<div id="tail" style="width:100%;height:300px">
</div>
    </div>
 <div id="layout_02" style="background:#f15a2b;width:60%;height:150px;float:right;">
    </div>
    <div style="claer:both"></div>
  <div id="layout_03" style="background:#ee1c25;width:100%;height:150px;float:left;">
    </div>       
</div>​

이런 레이아웃 형식으로 하시면 되지 않을까.. 싶네요. 스타일시트는 내용 설명 편의상 인라인으로 지정했습니다. 

 

CSS Code

body{_text-align:center}
#wrap{width:600px;margin:0 auto;_text-align:left}
#header{width:100%}
#container{width:100%;display:inline-block}
#container:after{display:block;clear:both;content:''}
.snb{float:left;width:180px}
#content{float:right;width:400px}
#footer{width:100%}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{_width /**/:620px;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
#header{margin-top:10px}
#header,#container{padding:15px;border:2px solid #bfbfbf;background:#e5e5e5}
#header,#container{width:auto}
.snb,#content{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#content{width:380px;height:200px}
#footer{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}

HTML Code

<div id="wrap">
	<p>#wrap</p>
	<!-- header -->
	<div id="header">
		<p>#header</p>
	</div>
	<!-- //header -->
	<!-- container -->
	<div id="container">
		<p>#container</p>
		<!-- snb -->
		<div class="snb">
			<p>.snb</p>
		</div>
		<!-- //snb -->
		<!-- content -->
		<div id="content">
			<p>#content</p>
		</div>
		<!-- //content -->
	</div>
	<!-- //container -->
	<!-- footer -->
	<div id="footer">
		<p>#footer</p>
	</div>
	<!-- //footer -->
</div>

이런 레이아웃을 말하시는건가요??               출처 : 네이버 널리

<div id="tail" style="width:100%;height:300px">
     <div id="layout_01" style="background:#fcae3f;width:40%;height:150px;float:left;">
     </div>
     <div id="layout_02" style="background:#f15a2b;width:60%;height:150px;float:right;">
     </div>
     <div style="claer:both"></div>
     <div id="layout_03" style="background:#ee1c25;width:100%;height:150px;float:left;">
    </div>  
</div>​

이 코드로 하세요. 위에 적은 코드는 그냥 작업한 내용에서 복사 붙여 넣기 했더니 내용이 이상하게 나오네요.

답변을 작성하시기 전에 로그인 해주세요.
전체 106
QA 내용 검색

회원로그인

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