인터넷정보

TD에서 한글이 위로 치우치는 문제 해결 트릭

알 수 없는 사용자 2007. 10. 13. 14:28

보통 한글을 테이블의 TD에 쓰면, 한글이 약간 위로 올라가서 민감하신 분들은 눈에 거슬릴 것입니다.
여기 Tip&Tech에도 보면 '번호', '분류', '제목'... 과 같은 문자가 테이블에서 조금씩 위로 올라거서 보이게 됩니다. 그리고 실제 테이블의 높이가 조금씩 작게 출력됩니다.
몇 년 전에 이부분이 왜 그럴까 생각하다가 아래와 같은 사실을 알게 되었는데, 혹 이런 부분에 대해서 눈에 거슬리는 분들은 아래와 같이 하여 해결해 보시기 바랍니다.
정확하게 테이블 중앙에 한글이 위치하며 테블 높이도 원래 크기대로 출력됩니다.
IE, Netscape, ...  모두 동일합니다.

트릭:
1. </font> 태그 뒤에 </td>를 넣지 않고, 다음줄에 넣습니다.
이전:
<td><font size=2>한글</font></td>

이후:
<td><font size=2>한글</font>
</td>

2. </font> 태그 바로 앞에 공백이 와야 할 경우는 공백을  로 대체하고 역시 마찬가지로 1번처럼 합니다.
이전:
<td><font size=2>한글   </font>
</td>

이후:
<td><font size=2>한글 </font>
<td>

3. CSS를 사용할 경우도 마찬가지로 입니다. 하지만, TD class=cssname 처럼하고 cssname에 폰트 관련 요소를 넣어다면 모두 빼고, FONT 관련 CSS만들어서 사용하고 역시 1, 2번 과정처럼 합니다.


ex.
<table border=1>
<tr><td><font size=2>한글</font></td></tr>
<tr><td><font size=2>한글</font> </td></tr>
</table>

반응형

'인터넷정보' 카테고리의 다른 글

HTML 하드코더  (0) 2007.10.13
HTML 하드코더  (0) 2007.10.13
cut - 문자열 자르기  (0) 2007.10.13
cut - 문자열 자르기  (0) 2007.10.13
TD에서 한글이 위로 치우치는 문제 해결 트릭  (0) 2007.10.13
잘못된 테이블 소스 보정 하기  (0) 2007.10.13
잘못된 테이블 소스 보정 하기  (0) 2007.10.13
이미지 크롭  (0) 2007.10.13
이미지 크롭  (0) 2007.10.13
CSS text-indent  (0) 2007.10.13