테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

레이아웃 질문 채택완료

따라하기 10년 전 조회 3,778
답변 3
목록

그누보드 tail 부분을

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

#그누보드5 #영카트5 #css #레이아웃
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
p
port
10년 전

</p><p><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>​</p><p>

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

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

p
port
10년 전

</p><p><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>​</p><p>

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

᠋
CSS Code

</p><div>body{_text-align:center}</div><div>#wrap{width:600px;margin:0 auto;_text-align:left}</div><div>#header{width:100%}</div><div>#container{width:100%;display:inline-block}</div><div>#container:after{display:block;clear:both;content:''}</div><div>.snb{float:left;width:180px}</div><div>#content{float:right;width:400px}</div><div>#footer{width:100%}</div><div>
</div><div>/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */</div><div>div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}</div><div>#wrap{_width /**/:620px;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}</div><div>#header{margin-top:10px}</div><div>#header,#container{padding:15px;border:2px solid #bfbfbf;background:#e5e5e5}</div><div>#header,#container{width:auto}</div><div>.snb,#content{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}</div><div>#content{width:380px;height:200px}</div><div>#footer{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}</div><div>
HTML Code
</div><div><div id="wrap"></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><p>#wrap</p></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><!-- header --></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><div id="header"></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><p>#header</p></div><div><span class="Apple-tab-span" style="white-space:pre">	</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><!-- //header --></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><!-- container --></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><div id="container"></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><p>#container</p></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><!-- snb --></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><div class="snb"></div><div><span class="Apple-tab-span" style="white-space:pre">			</span><p>.snb</p></div><div><span class="Apple-tab-span" style="white-space:pre">		</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><!-- //snb --></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><!-- content --></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><div id="content"></div><div><span class="Apple-tab-span" style="white-space:pre">			</span><p>#content</p></div><div><span class="Apple-tab-span" style="white-space:pre">		</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><!-- //content --></div><div><span class="Apple-tab-span" style="white-space:pre">	</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><!-- //container --></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><!-- footer --></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><div id="footer"></div><div><span class="Apple-tab-span" style="white-space:pre">		</span><p>#footer</p></div><div><span class="Apple-tab-span" style="white-space:pre">	</span></div></div><div><span class="Apple-tab-span" style="white-space:pre">	</span><!-- //footer --></div><div></div></div><div>
이런 레이아웃을 말하시는건가요??               출처 : 네이버 널리
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인