Table to DIV

이온디 2008.12.25 3842 5
hozzyLayout.png

우선 만들고자 하는 형태는 위와 같습니다. 
그럼 어떻게 만들어야 할까요? 이렇게 모두 다 자르고 만들기엔 너무 복잡해지겠죠?;;

hozzyTable.jpg

아랫쪽의 디자인을 가만히 살펴보시면 각 모서리가 라운딩 처리되어있고
가운데에도 배경이 들어가있습니다.

<div class="wrap">
<div class="header">
<div class="top_left"></div>
<div class="top_center"></div>
<div class="top_right"></div>
</div>
<div class="content">
<div class="left_section">1<br />1</div>
<div class="right_section">2</div>
</div>
<div class="footer">
<div class="bottom_left"></div>
<div class="bottom_center"></div>
<div class="bottom_right"></div>
</div>
</div>

우선 전체를 감싼 뒤, 헤더, 컨텐트, 푸터로 나누었습니다.
그리고 헤더와 푸터는 왼쪽, 가운데, 오른쪽으로 나누었고,
컨텐트는 왼쪽섹션과 오른쪽 섹션으로 나누었습니다. 
(관리자 권한이다 보니깐 소스가 먹혀버리네요. 위에 소스 칸에 따로 다시 입력해놓았습니다.)

<style>
div {border:0px solid black;}
.wrap {width:790px;height:400px;background: url(bg_section_boundary.png) repeat-y center;}
.header {width:790px;height:5px;overflow:hidden;}
.content {width:790px;height:390px;}
.footer {width:790px;height:5px;overflow:hidden;}

.left_section {float:left;width:50%;height:100%;background: url(bg_vertical.png) repeat-y -5px;}
.right_section {float:right;width:50%;height:100%;background: url(bg_vertical.png) repeat-y right ;background-position:390px;}

.top_left {float:left;width:5px;height:5px;background: url(bg_corner.png);}
.top_center {float:left;width:780px;height:5px; background: url(bg_horizon.png);}
.top_right {float:left;width:5px;height:5px; background: url(bg_corner.png) right top;}

.bottom_left {float:left;width:5px;height:5px;background: url(bg_corner.png) left bottom;}
.bottom_center {float:left;width:780px;height:5px; background: url(bg_horizon.png) bottom;}
.bottom_right {float:left;width:5px;height:5px; background: url(bg_corner.png) right bottom;}
</style>

스타일 시트는 위와 같고요, 사용된 이미지는 
bg_section_boundary.png bg_section_boundary.png
bg_vertical.png bg_vertical.png
bg_horizon.png bg_horizon.png
bg_corner.png bg_corner.png
(1px 짜리는 잘 안 보이시겠지만 파일명 옆에 그림 첨부되었습니다.)

이렇게 4개입니다. 
섹션 바운더리는 가운데 배경이고, wrap에서 center 옵션을 줘서 나타내었습니다.
bg_vertical과 bg_horizon은 각각 top_center&bottom_center 그리고 left_section&right_section의 배경에서 포지션 옵션을 주었습니다.
또, bg_corner.png 는 배경 포지션을 잡아주고 .top_left, .top_right, .bottom_left, .bottom_right 에서 사용되었습니다.

그림파일과 html파일을 담아두었습니다.

댓글 5

목록 보기
댓글을 작성하려면 로그인하세요.
  • 이온디 2008.12.25 09:51 수정 중
    <div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="corner_spacer_left">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="book_location">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="the_first_bookcase">&lt;IMG src="./images/logo.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="corner_spacer_right">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="bookshelf">&lt;IMG src="./images/the_first_bookcase_05.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="top_spacer">&lt;/DIV></div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="tiny_spacer_leftt">&lt;IMG src="./images/the_first_bookcase_07.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="left_headnote">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="right_headnote">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="tiny_spacer_rightt">&lt;IMG src="./images/the_first_bookcase_10.png">&lt;/DIV></div><div><br></div><div>로고 부분은 wrap에서 따로 빼시고요.</div><div><br></div><div><div>&lt;DIV id="wrap"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="middle"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="left_spacer">1&lt;IMG src="./images/the_first_bookcase_11.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="19px_margin_left">2&lt;IMG src="./images/the_first_bookcase_12.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="left_page">3&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="18px_margin_left">4&lt;IMG src="./images/the_first_bookcase_14.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="18px_margin_right">5&lt;IMG src="./images/the_first_bookcase_15.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="right_page">6&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="19px_margin_right">7&lt;IMG src="./images/the_first_bookcase_17.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="right_spacer">8&lt;IMG src="./images/the_first_bookcase_18.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="end"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="tiny_spacer_leftb">&lt;IMG src="./images/the_first_bookcase_19.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="left_footnote">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="right_footnote">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="tiny_spacer_rightb">&lt;IMG src="./images/the_first_bookcase_22.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;DIV id="bottom_spacer">&lt;IMG src="./images/the_first_bookcase_23.png">&lt;/DIV></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>&lt;/DIV></div><div>&lt;/DIV></div><div><br></div><div>그럼 이렇게 middle과 end로 보이게 되거든요.</div><div><br></div><div>wrap에 width, height을 넣어주고, middle와 end에서 clear:both 속성을 지워주고,</div><div><br></div><div>파일명과 class명을 알아보기 편하게 바꿔주시고,</div><div>예를 들어 the_first_bookcase_22.png로 되어있는데 이게 어느 부분인지 알기 어렵거든요.</div><div>또, class명도 19px_margin_right라고 하기 보다는 이 위치를 적어줘야 할 것 같아요.</div></div>
  • 이온디 2008.12.25 09:57 수정 중
    <img editor_component="image_link" src="files/attach/images/20240/302/162/hozzyTable.jpg" width="825" height="602"><br><div>이대로 하실려면 이것을 map으로 삼고, class명도 위에 나타나있듯이, #11, #12...로 하시는 게 편하실 듯 합니다.</div><div>괜히 #19px_margin_right 으로 하기 보다 말이죠.<span class="Apple-tab-span" style="white-space:pre"> </span></div>
  • 이온디 2008.12.25 10:07 수정 중
    corner_spacer_left → 1<br><div>book_location 2<br></div><div>the_first_bookcase, 3</div><div>corner_spacer_right, 4<br></div><div>bookshelf, 5<br></div><div>top_spacer, 6<br></div><div>tiny_spacer_leftt, 7<br></div><div>left_headnote, 8<br></div><div>right_headnote, 9<br></div><div>tiny_spacer_rightt, 10<br></div><div>left_spacer, 11<br></div><div>19px_margin_left, 12<br></div><div>left_page, 13<br></div><div>18px_margin_left, 14<br></div><div>18px_margin_right, 15<br></div><div>right_page, 16<br></div><div>19px_margin_right, 17<br></div><div>right_spacer, 18<br></div><div>tiny_spacer_leftb, 19<br></div><div>left_footnote, 20<br></div><div>right_footnote, 21<br></div><div>tiny_spacer_rightb, 22<br></div><div>bottom_spacer, 23<br></div><div><br></div><div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#2 { width: 394px; height: 85px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#3 { width: 357px; height: 85px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#5 { width: 823px; height: 16px; clear: both;}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#middle { width: 823px; height: 428px; clear: both; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#end {width: 823px; height: 17px; clear: both; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#1 { width: 36px; height: 85px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#4 { width: 36px; height: 85px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#6 { width:823px; height: 19px; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#23 { width: 823px; height: 17px; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#11 { width: 17px; height: 428px; float: left;}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#18 { width: 17px; height: 428px; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#8 { width: 395px; height: 18px; float: left; background-image: URL('images/the_first_bookcase_08.png'); }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#9 { width: 394px; height: 18px; float: left; background-image: URL('images/the_first_bookcase_09.png'); }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#20 { width: 395px; height: 17px; float: left; background-image: URL('images/the_first_bookcase_20.png'); }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#21 { width: 394px; height: 17px; float: left; background-image: URL('images/the_first_bookcase_21.png'); }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#7 { width: 17px; height: 18px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#10 { width: 17px; height: 18px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#19 { width: 17px; height: 17px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#22 { width: 17px; height: 17px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#12 { width: 19px; height: 428px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#17 { width: 19px; height: 428px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#14 { width: 18px; height: 428px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#15 { width: 18px; height: 428px; float: left; }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#13 { width: 358px; height: 428px; float: left; background-image: URL('images/the_first_bookcase_13.png'); }</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>#16 { width: 357px; height: 428px; float: left; background-image: URL('images/the_first_bookcase_16.png'); }</div></div>
  • 이온디 2008.12.25 10:28 수정 중
    그리고 id는 모두 class로 변경하였습니다. id로 작업해봤는데 스타일이 안 먹히는 것 같더군요. -.-a
  • 이온디 2008.12.25 10:37 수정 중
    <div>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></div><div>&lt;!-- saved from url=(0060)http://movengroove.hosting.paran.com/the_first_bookcase.html --></div><div>&lt;HTML xmlns="http://www.w3.org/1999/xhtml"></div><div><br></div><div>이거 때문이더군요;</div>