메뉴 보이기
Profile
이온디

2008.12.25

Table to DIV

조회 수 3580 추천 수 0
출처 및 URL http://miniwini.com/miniwinis/bbs/index....p;id=57690 
소스 <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> 
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파일을 담아두었습니다.

Profile
0
Lv

5개의 댓글

Profile
이온디
2008.12.25
<DIV id="corner_spacer_left"></DIV>
<DIV id="book_location"></DIV>
<DIV id="the_first_bookcase"><IMG src="./images/logo.png"></DIV>
<DIV id="corner_spacer_right"></DIV>
<DIV id="bookshelf"><IMG src="./images/the_first_bookcase_05.png"></DIV>
<DIV id="top_spacer"></DIV>

<DIV id="tiny_spacer_leftt"><IMG src="./images/the_first_bookcase_07.png"></DIV>
<DIV id="left_headnote"></DIV>
<DIV id="right_headnote"></DIV>
<DIV id="tiny_spacer_rightt"><IMG src="./images/the_first_bookcase_10.png"></DIV>

로고 부분은 wrap에서 따로 빼시고요.

<DIV id="wrap">
<DIV id="middle">
<DIV id="left_spacer">1<IMG src="./images/the_first_bookcase_11.png"></DIV>
<DIV id="19px_margin_left">2<IMG src="./images/the_first_bookcase_12.png"></DIV>
<DIV id="left_page">3</DIV>
<DIV id="18px_margin_left">4<IMG src="./images/the_first_bookcase_14.png"></DIV>
<DIV id="18px_margin_right">5<IMG src="./images/the_first_bookcase_15.png"></DIV>
<DIV id="right_page">6</DIV>
<DIV id="19px_margin_right">7<IMG src="./images/the_first_bookcase_17.png"></DIV>
<DIV id="right_spacer">8<IMG src="./images/the_first_bookcase_18.png"></DIV>
</DIV>
<DIV id="end">
<DIV id="tiny_spacer_leftb"><IMG src="./images/the_first_bookcase_19.png"></DIV>
<DIV id="left_footnote"></DIV>
<DIV id="right_footnote"></DIV>
<DIV id="tiny_spacer_rightb"><IMG src="./images/the_first_bookcase_22.png"></DIV>
<DIV id="bottom_spacer"><IMG src="./images/the_first_bookcase_23.png"></DIV>
</DIV>
</DIV>

그럼 이렇게 middle과 end로 보이게 되거든요.

wrap에 width, height을 넣어주고, middle와 end에서 clear:both 속성을 지워주고,

파일명과 class명을 알아보기 편하게 바꿔주시고,
예를 들어 the_first_bookcase_22.png로 되어있는데 이게 어느 부분인지 알기 어렵거든요.
또, class명도 19px_margin_right라고 하기 보다는 이 위치를 적어줘야 할 것 같아요.
Profile
이온디
2008.12.25

이대로 하실려면 이것을 map으로 삼고, class명도 위에 나타나있듯이, #11, #12...로 하시는 게 편하실 듯 합니다.
괜히 #19px_margin_right 으로 하기 보다 말이죠.
Profile
이온디
2008.12.25
corner_spacer_left → 1
book_location 2
the_first_bookcase, 3
corner_spacer_right, 4
bookshelf, 5
top_spacer, 6
tiny_spacer_leftt, 7
left_headnote, 8
right_headnote, 9
tiny_spacer_rightt, 10
left_spacer, 11
19px_margin_left, 12
left_page, 13
18px_margin_left, 14
18px_margin_right, 15
right_page, 16
19px_margin_right, 17
right_spacer, 18
tiny_spacer_leftb, 19
left_footnote, 20
right_footnote, 21
tiny_spacer_rightb, 22
bottom_spacer, 23

#2 { width: 394px; height: 85px; float: left; }
#3 { width: 357px; height: 85px; float: left; }
#5 { width: 823px; height: 16px; clear: both;}
#middle { width: 823px; height: 428px; clear: both; }
#end {width: 823px; height: 17px; clear: both; }
#1 { width: 36px; height: 85px; float: left; }
#4 { width: 36px; height: 85px; float: left; }
#6 { width:823px; height: 19px; }
#23 { width: 823px; height: 17px; }
#11 { width: 17px; height: 428px; float: left;}
#18 { width: 17px; height: 428px; }
#8 { width: 395px; height: 18px; float: left; background-image: URL('images/the_first_bookcase_08.png'); }
#9 { width: 394px; height: 18px; float: left; background-image: URL('images/the_first_bookcase_09.png'); }
#20 { width: 395px; height: 17px; float: left; background-image: URL('images/the_first_bookcase_20.png'); }
#21 { width: 394px; height: 17px; float: left; background-image: URL('images/the_first_bookcase_21.png'); }
#7 { width: 17px; height: 18px; float: left; }
#10 { width: 17px; height: 18px; float: left; }
#19 { width: 17px; height: 17px; float: left; }
#22 { width: 17px; height: 17px; float: left; }
#12 { width: 19px; height: 428px; float: left; }
#17 { width: 19px; height: 428px; float: left; }
#14 { width: 18px; height: 428px; float: left; }
#15 { width: 18px; height: 428px; float: left; }
#13 { width: 358px; height: 428px; float: left; background-image: URL('images/the_first_bookcase_13.png'); }
#16 { width: 357px; height: 428px; float: left; background-image: URL('images/the_first_bookcase_16.png'); }
Profile
이온디
2008.12.25
그리고 id는 모두 class로 변경하였습니다. id로 작업해봤는데 스타일이 안 먹히는 것 같더군요. -.-a
Profile
이온디
2008.12.25
@이온디
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0060)http://movengroove.hosting.paran.com/the_first_bookcase.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml">

이거 때문이더군요;
에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
80 리다이렉트 방식에 대해서..... 2009.01.04 3605
79 DIV와 Table for Layout 에 대한 코딩 이야기 2 2009.01.03 4201
78 크로스브라우징 팁 정리 2 2009.01.01 4178
77 Rounded Corners 2008.12.31 3403
76 이미지 없이 CSS로 둥근 모서리 구현하기(1) 2008.12.31 3198
75 Rounded corners without images 1 2008.12.31 3202
74 [DIV] 이미지 없이 CSS로 둥근 모서리 구현하기 1 2008.12.31 12379
73 CSS 강좌 2일차 : display : inline(혹은 block, none) 2008.12.27 9006
72 구글 인덱스 코드 2008.12.25 3022
Table to DIV 5 2008.12.25 3580
70 [Script] 입력폼에 배경 넣기 2008.12.22 4461
69 [Script] onload="allblur()" 2007.11.10 4677
68 [Script] 레이어를 이용한 서브 메뉴 2007.09.10 6106
67 [미분류] 태터에 제로보드 넣기 & Next, Prev 버튼 감추기 (by SkyRejoice) 2007.08.27 11303
66 [HTML5] pre 태그랑 xmp 태그의 차이점 1 2007.08.20 9668
65 [Script] 스위칭 탭 2007.08.19 3913
64 [Script] 최소/최대화 버튼 없는 군더더기 없는 새창 띄우기 2007.04.22 6164
63 [Script] PNG 알파 필터 사용하기 1 2007.04.21 10392
62 [Script] DIV 레이어 토글 1 2007.04.21 7834
61 [PHP] 사이트 테마 기능 구현하기 1 2007.04.18 5552