웹마스터 팁
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
감사합니다..그동안 테이블 상하간격이 맞질않아성..어케할까 많이 고민했던 부분입니다~~고마워요
제목 | 글쓴이 | 날짜 |
---|---|---|
오늘 시험문제인 카드맞추기 게임..^^ [12] | {동준짱} | 2002.05.18 |
테이블 정렬. 상하로 딱 가운데에 맞춰지지 않을때... [2] | :: N.styLE :: | 2002.05.18 |
DHTML의 시작 - Form에 대해 (3) - Button, Select 엘리먼트 [1] | Legend | 2002.05.16 |
ActiveX control... [4] | ☆봄비ㆀ | 2002.05.11 |
iframe태그.. HTML문서안에 또하나의 HTML문서.. [9] | 신종은 | 2002.05.09 |
DHTML의 시작 - Form 예제 (폼처리 HTML) | Legend | 2002.05.09 |
하이텔에서 가져오는 서울특별시와 광역시 날씨 [3] | 김희섭 | 2002.04.30 |
배경음악과 동영상 삽입 <embed> [7] | 제이지라 | 2002.04.26 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
DHTML의 시작 - Form에 대해 (2) - input 엘리먼트 [5] | Legend | 2002.04.18 |
DHTML의 시작 - Form에 대해 (1) [2] | Legend | 2002.04.14 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
이미지에 DHTML로 테두리를 만들어보자..포토샵 저리가라~~ [4] | ZipShin | 2002.04.11 |
DHTML의 시작 - HTML 구조 및 자바스크립트 객체지정법 [4] | Legend | 2002.04.11 |
투명한 아이프레임 [15] | 파야 | 2002.04.04 |
점선테이블..만들기 [6] | 각설탕 | 2002.03.31 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
유군 스타일 웹사이트 제작법 [15] | 유군-_-)/ | 2002.03.20 |
스크롤바 색상을 이쁜것만 모와요 [6] | ZipShin | 2002.03.16 |
인코딩 정보 일본어, 중국어, 스페인어 [3] | 탐그루 | 2002.03.16 |