웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
테이블 정렬. 상하로 딱 가운데에 맞춰지지 않을때...
2002.05.18 22:13
현재의 NZEO 3차 스킨에서도 그렇지만 라인이 위아래에 있을때 상하 균형이 맞지 않는 경우가 허다합니다.
이건 정교한 웹디를 추구하시는 분들한테도 골치거리일텐데요.
블럭을 잡아보시면 블럭 위쪽으로 치우쳐 있음을 알수있습니다.
즉 (입력된 글꼴+아래쪽 여백) 이 결과는 바로 위쪽으로 치우치는 글입니다.
제 나름대로는 이렇게 해결합니다.(단, 세로 간격은 23px란 가정하에, line-height:150%;가 적용된 상태에서 작성합니다)
1. (변수는 단지 수치를 대신할 뿐입니다.)
<table width=<?=$width?> border=0 cellspacing=0 cellpadding=0>
<tr><td height=23 style=padding-top:3px;>그리고 글을 입력해 보세요.</td></tr></table>
위쪽으로 치우치기 때문에 패딩을 줘서 아래로 내렸습니다.
2. (NZEO 2차스킨에서 사용하던 방법)
<table width=<?=$width?> border=0 cellspacing=0 cellpadding=0>
<tr><td height=23><img src=t.gif width=1 height=3 align=absmiddle><br>그리고 글을 입력해 보세요.</td></tr></table>
존재하지 않는 이미지를 이용한 방법입니다.(화면상에는 보이지 않습니다)
블럭을 잡아보시면 위쪽에 자그마한 점이 같이 잡히는데 이 점이 존재하지 않는 이미지입니다.
align=absmiddle을 넣지 않으면 예상치 못한 결과를 초래합니다.
3.
<table width=<?=$width?> border=0 cellspacing=0 cellpadding=0>
<tr><td height=23>그리고 글을 입력해 보세요. <img src=t.gif width=1 height=13></td></tr></table>
이미지를 이용했습니다만 방법이 다르죠.
이번에는 위와 반대로 align=absmiddle을 뺐습니다.
이건 정교한 웹디를 추구하시는 분들한테도 골치거리일텐데요.
블럭을 잡아보시면 블럭 위쪽으로 치우쳐 있음을 알수있습니다.
즉 (입력된 글꼴+아래쪽 여백) 이 결과는 바로 위쪽으로 치우치는 글입니다.
제 나름대로는 이렇게 해결합니다.(단, 세로 간격은 23px란 가정하에, line-height:150%;가 적용된 상태에서 작성합니다)
1. (변수는 단지 수치를 대신할 뿐입니다.)
<table width=<?=$width?> border=0 cellspacing=0 cellpadding=0>
<tr><td height=23 style=padding-top:3px;>그리고 글을 입력해 보세요.</td></tr></table>
위쪽으로 치우치기 때문에 패딩을 줘서 아래로 내렸습니다.
2. (NZEO 2차스킨에서 사용하던 방법)
<table width=<?=$width?> border=0 cellspacing=0 cellpadding=0>
<tr><td height=23><img src=t.gif width=1 height=3 align=absmiddle><br>그리고 글을 입력해 보세요.</td></tr></table>
존재하지 않는 이미지를 이용한 방법입니다.(화면상에는 보이지 않습니다)
블럭을 잡아보시면 위쪽에 자그마한 점이 같이 잡히는데 이 점이 존재하지 않는 이미지입니다.
align=absmiddle을 넣지 않으면 예상치 못한 결과를 초래합니다.
3.
<table width=<?=$width?> border=0 cellspacing=0 cellpadding=0>
<tr><td height=23>그리고 글을 입력해 보세요. <img src=t.gif width=1 height=13></td></tr></table>
이미지를 이용했습니다만 방법이 다르죠.
이번에는 위와 반대로 align=absmiddle을 뺐습니다.
댓글 2
-
umin
2002.05.21 02:58
무식해서 그런지 잘 못알아 먹겠다는 -_-;;; -
icolor
2002.10.01 15:33
감사합니다..그동안 테이블 상하간격이 맞질않아성..어케할까 많이 고민했던 부분입니다~~고마워요
제목 | 글쓴이 | 날짜 |
---|---|---|
iframe태그.. HTML문서안에 또하나의 HTML문서.. [9] | 신종은 | 2002.05.09 |
ActiveX control... [4] | ☆봄비ㆀ | 2002.05.11 |
DHTML의 시작 - Form에 대해 (3) - Button, Select 엘리먼트 [1] | Legend | 2002.05.16 |
나왔다 드러갔다하는 메뉴.. [15] | Mr. JH | 2002.05.17 |
테이블 정렬. 상하로 딱 가운데에 맞춰지지 않을때... [2] | :: N.styLE :: | 2002.05.18 |
오늘 시험문제인 카드맞추기 게임..^^ [12] | {동준짱} | 2002.05.18 |
Input, Textarea, Radiobutton, Checkbox등 disabled 옵션. [3] | 카멜롯™ | 2002.05.20 |
▶ 마우스 오른쪽 누르기 막힌거 뚫는법 [25] | ★쿠쿠로 | 2002.05.22 |
MSN.. 추가하기, 채팅하기.. (출처.. 수정) [11] | 하놈 | 2002.06.05 |
홈페이지의 대문에서 스크롤바 없애기 [10] | keymove | 2002.06.15 |
웹강의 할떄 소스 보이기 할떄 쓰는 특수문자!! [4] | 류™ | 2002.06.16 |
스크롤바 색상 변경 ...! [6] | 오빠야™ | 2002.06.17 |
Filters and Transitions .... [4] | 점퍼워니 | 2002.06.17 |
이쁜 css 파일1 [1] | HomeBox™ | 2002.06.17 |
[re] 이쁜 css 파일2 [3] | t(T^T)t_Man. | 2005.01.07 |
이쁜 css 파일2 [6] | HomeBox™ | 2002.06.17 |
TEXTAREA 스크롤바 뒤집기 [4] | ZipShin | 2002.06.20 |
메타태그(Meta)의 모든것 [11] | ZipShin | 2002.06.20 |
로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 [8] | 이성영 | 2002.06.20 |
제로보드 가입폼에 css쉽게 적용하기 | {동준짱} | 2002.06.26 |