레이아웃 도전... 정보
레이아웃 도전...
본문
밑에 테이블 레이아웃에 대해 질문했는데, 답변 감사합니다.
도저히 정리가 안되서 그냥 싹 밀고 css 로 레이아웃을 한번 해볼까 하고 레이아웃을 짰는데, 도저히 어디서 시작을 해야할지 몰라서 고민입니다.
div 는 안써봐서, 몇몇 template 다운받아서 공부해봤는데, 도저히 제가 원하는 레이아웃은 못짜겠더라고요.
레이아웃 양쪽 바깥, 밑쪽 바깥부분에 여백을 남기면서 중앙형식 입니다.
그림 첨부했는데, 조언좀 해주세요!
1과 2는 fixed 고 3과 4번의 길이가 중앙 내용물의 길이에 따라서 늘어나는 형식입니다.
도저히 정리가 안되서 그냥 싹 밀고 css 로 레이아웃을 한번 해볼까 하고 레이아웃을 짰는데, 도저히 어디서 시작을 해야할지 몰라서 고민입니다.
div 는 안써봐서, 몇몇 template 다운받아서 공부해봤는데, 도저히 제가 원하는 레이아웃은 못짜겠더라고요.
레이아웃 양쪽 바깥, 밑쪽 바깥부분에 여백을 남기면서 중앙형식 입니다.
그림 첨부했는데, 조언좀 해주세요!
1과 2는 fixed 고 3과 4번의 길이가 중앙 내용물의 길이에 따라서 늘어나는 형식입니다.
댓글 전체
<div>
//1 3
<div></div>
//중앙
<div></div>
//2 4<div></div>
</div>
이게 기본이겠군요
//1 3
<div></div>
//중앙
<div></div>
//2 4<div></div>
</div>
이게 기본이겠군요
<div style="width:가로길이;text-align:center">
// left 부분
<div style="width:가로길이;float:left">
<div> 1 </div>
<div> 3 </div>
</div>
// center 부분
<div style="width:가로길이;float:left">
contents
</div>
//right 부분
<div>
<div> 2 </div>
<div> 4 </div>
</div>
</div>
이걸 기본으로 해서 width와 height를 잘 지정하면 됩니다..
근데 div 만으로는 한계가 좀 있더군요..
contents 안에는 적절한 table 의 사용도 필요할겁니다..
// left 부분
<div style="width:가로길이;float:left">
<div> 1 </div>
<div> 3 </div>
</div>
// center 부분
<div style="width:가로길이;float:left">
contents
</div>
//right 부분
<div>
<div> 2 </div>
<div> 4 </div>
</div>
</div>
이걸 기본으로 해서 width와 height를 잘 지정하면 됩니다..
근데 div 만으로는 한계가 좀 있더군요..
contents 안에는 적절한 table 의 사용도 필요할겁니다..
css 완성형 예제인데 참고해보세요..
http://sir.co.kr/bbs/board.php?bo_table=pl_css&wr_id=153
http://sir.co.kr/bbs/board.php?bo_table=pl_css&wr_id=153
