메뉴 보이기
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 126
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19189
공지 [미분류] 관련 링크 2010.05.23 33820
160 [Script] iframe 자동 리사이즈 6 2007.04.16 13615
Table to DIV 5 2008.12.25 3580
158 [HTML5] 이미지 롤오버 2 2007.04.17 8756
157 DIV와 Table for Layout 에 대한 코딩 이야기 2 2009.01.03 4201
156 [Meta] IE6의 이미지(그림) 툴바 기능 막기, 이미지 도구 모음 막기 2 2003.09.21 5161
155 [HTML5] 레이어1은 보이고 레이어2는 감추기 2 2004.04.23 5503
154 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 후니) 2 2004.05.05 4474
153 [Form] 인풋 폼 이미지로 대체하기 1 2004.05.21 5208
152 [Script] 게시판 등 에서 웹페이지에서 특정 부분 감췄다보여주기 - 레이어 토글 1 2004.06.04 13651
151 [Script] 롤오버 메뉴 만들기 1 2009.01.18 5882
150 [Script] Iframe 크기 내용에 따라 자동조절하기 (by konahn) 1 2007.04.17 9584
149 [PHP] 사이트 테마 기능 구현하기 1 2007.04.18 5555
148 [Script] DIV 레이어 토글 1 2007.04.21 7834
147 [Script] PNG 알파 필터 사용하기 1 2007.04.21 10393
146 [DIV] 이미지 없이 CSS로 둥근 모서리 구현하기 1 2008.12.31 12381
145 [Script] 화면 왼쪽에 숨겨진 레이어 꺼내기 1 2009.01.20 5609
144 [Script] 단축키 핫키로 원하는 동작을 실행하자 1 2013.09.22 4441
143 [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. 1 2009.01.20 5158
142 Show-Hide Layers 클릭한 걸 기억하는 (by 알릭) 1 1 2009.02.03 6895
141 [부트스트랩] #2 부트스트랩의 특징 1 2013.03.04 5649