web과 관련된 팁 중 첫번째... blank.gif 에 관해서 설명을 하도록 하겠습니다.
제가 만든 홈이나 스킨 이미지 디렉토리를 보면, 예외없이 blank.gif 라는 파일이 있습니다. 브라우저나 이미지뷰어 프로그램으로 보아도 아무 것도 없는 --- 사실은 1 * 1 픽셀의 투명이미지 --- 이미지가 왜 그렇게 많이 쓰인 걸까요? 사실 blank.gif의 사용에 대해서 알게 된 건 채리님을 통해서입니다. 처음 스킨을 만들 당시, 넷스케이프에서도 익스플로러와 동일하게 보이게 하기 위해 blank.gif 를 사용하는 방법을 알게 되었거든요.. 그리고, 그 후 시간이 지나면서 blank.gif를 엄청 다양하게 사용할 수 있다는 걸 알게 되었답니다. 자, 그럼 blank.gif를 어디에 사용할 수 있을까요? 하나씩 알아보도록 하죠..~!!!
1. 넷스케이프에서도 동일하게~!!!
나모나 드림위버 등을 이용해서 테이블을 생성해 보면, 셀(td) 안에는 항상 문단기호(p)가 들어가는 걸 알 수 있습니다. 기본적으로, td 안에는 무언가 내용이 들어가야 한다는 거죠.. 만일 그 안에 아무런 내용도 넣지 않으면 자동으로 (공백)이 들어갑니다. 그런데, 이 라는 기호가 문제가 될 때가 있답니다. 의 크기 (높이)는 기본적으로 웹페이지의 글자크기에 영향을 받습니다. 웹페이지에서 일반적인 글자크기는 10포인트이고, 따라서 공백의 크기도 10포인트가 됩니다. 그런데, 셀의 높이를 10포인트보다 작게, 약 2-3 픽셀 정도로 하려면 어떻게 해야 할까요?
처음엔, 아예 를 지워 버리거나 <p></p> 태그를 지워 버리고, 그냥 <td> ~ </td> 의 형태로 놓아두었었답니다. 그런데, 익스에서는 이렇게 하면 정상적으로 출력이 되지만(사실, 정상적으로 출력되는 게 아니랍니다.), 넷스케이프에서는 표 모양이 아주 이상하게 되고 맙니다.
이럴 땐 blank.gif를 사용하면 됩니다. 즉, 원하는 높이의 blank.gif 파일을 삽입하면 되는겁니다. 예를 들어볼까요?
위처럼, blank.gif 가 들어가 있는 걸 볼 수 있습니다. 왜냐하면 밑줄이 되는 셀의 높이를 1로 표현하기 위해서입니다. (만일 height 값을 3을 주면 높이 3의 수평선이 나타나겠죠?)
3. 아주 세세한 부분의 모양까지 커버한다~!!!
가끔 html을 이용해 문서를 만들다보면, 태그나 스타일만으로는 조절되지 않는 부분들이 있습니다. 아주 미세한 부분이지만, 미세한 차이에 따라 디자인은 크게 좌지우지되기 마련입니다.
예를 들어보죠...
동해물과 백두산이
동해물과 백두산이
위 두 표의 차이점이 무엇인 것 같습니까? 잘 모르겠다구요? 자세히 보세요... 위에 있는 표의 경우, 글씨의 세로정렬이 정확하게 가운데가 아닙니다. 약간 위쪽으로 쏠려 있지요... 반면에 아래쪽에 있는 테이블의 글씨는 정확하게 가운데에 위치해 있습니다. 바로, blank.gif를 이용했기 때문입니다. 아래 표의 태그를 볼까요?
