웹디자인,컴퓨터

첫화면 육아교육 웹디자인 요리메모 한자쓰기

웹디자인,포토샵,그누보드,제로보드,동영상제작 관련 메모 >>

작지만 커다란 이미지 blank.gif	2008-04-27 15:33:39

	홈페이지


작지만 커다란 이미지, blank.gif !!! 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 파일을 삽입하면 되는겁니다. 예를 들어볼까요? <td><p><img src=images/blank.gif border=0 width=1 height=2></p></td> 위와 같은 식으로 하면, 높이가 2인 셀이 생성됩니다. 물론 공백기호가 들어가지 않았기 때문에 높이는 이미지파일의 크기에 따릅니다. 이렇게 되면, 넷스케이프에서도 동일하게 적용이 됩니다. 2. 수평선 그리기 물론 수평선에 관한 태그가 있긴 합니다만, 가끔 사용하기에 적절하지 못한 때가 있습니다. 아래 예제를 통해 차이점을 알아보도록 하죠. hr 태그를 사용한 예: 제목 -------------------------------------------------------------------------------- 본문 테이블을 이용한 예: 제목 본문 위 두가지의 차이점이 무엇인 것 같습니까? 바로, hr 태그를 사용한 경우, 선 위아래로 여백이 들어가게 됩니다. 하지만, 때로는 이러한 여백이 없어야 할 때가 있습니다. 그럴 때 바로 테이블 태그를 사용하는데, 그 안에 blank.gif를 삽입합니다. 테이블 태그를 사용한 예제의 소스를 보면, <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <p>제목</p> </td> </tr> <tr> <td bgcolor="black"> <p><img src="img/blank.gif" width="1" height="1" border="0"></p> </td> </tr> <tr> <td> <p>본문</p> </td> </tr> </table> 위처럼, blank.gif 가 들어가 있는 걸 볼 수 있습니다. 왜냐하면 밑줄이 되는 셀의 높이를 1로 표현하기 위해서입니다. (만일 height 값을 3을 주면 높이 3의 수평선이 나타나겠죠?) 3. 아주 세세한 부분의 모양까지 커버한다~!!! 가끔 html을 이용해 문서를 만들다보면, 태그나 스타일만으로는 조절되지 않는 부분들이 있습니다. 아주 미세한 부분이지만, 미세한 차이에 따라 디자인은 크게 좌지우지되기 마련입니다. 예를 들어보죠... 동해물과 백두산이 동해물과 백두산이 위 두 표의 차이점이 무엇인 것 같습니까? 잘 모르겠다구요? 자세히 보세요... 위에 있는 표의 경우, 글씨의 세로정렬이 정확하게 가운데가 아닙니다. 약간 위쪽으로 쏠려 있지요... 반면에 아래쪽에 있는 테이블의 글씨는 정확하게 가운데에 위치해 있습니다. 바로, blank.gif를 이용했기 때문입니다. 아래 표의 태그를 볼까요? <table border="1" cellpadding="3" cellspacing="0" width="100%"> <tr> <td height="30"> <p align="center"><img src=img/blank.gif border=0 width=1 height=5><br>동해물과 백두산이</p> </td> </tr> </table> 바로 높이 5픽셀의 blank.gif 이미지를 넣었기 때문입니다!!! blank.gif를 이용해 조절할 수 있는 건 응용해보면 무척 많답니다... 줄간격, 좌우여백... 등등... 자, 그럼 마음대로 되지 않던 웹디자인, blank.gif를 이용해서 좀 더 세련되고 세밀하게 해보세요!!!

번호	제목	일자
62	[웹디자인tip] 인클루드 다른도메인으로 바로 가기.	2008-04-27
61	[웹디자인tip] 노프레임 페이지 배경음악 안 끊기게.	2008-04-27
60	[BBS_Tip] 웹에디터 기능의 제로보드 게시판 스킨	2008-04-27
59	[웹디자인tip] 새창 키워서 열기	2008-04-27
	[웹디자인tip] 작지만 커다란 이미지 blank.gif	2008-04-27
57	[웹디자인tip] 새창열기	2008-04-27
56	[웹디자인tip] 아이프레임 페이지에 맞게	2008-04-27
55	[웹디자인tip] 이미지 위에 글자 쓰기.	2008-04-27
54	[웹디자인tip] 타이핑 효과	2008-04-27
53	[웹디자인tip] 점선 소스.	2008-04-27
52	[웹디자인tip] 오늘의 날짜 소스.	2008-04-27
51	[웹디자인tip] 자신의계정 용량 알기	2008-04-27
50	[인터넷,컴퓨터] 웹에서 글쓰다 날라갔을 때.	2008-04-27
49	[인터넷,컴퓨터] 프로그램 추가 삭제시,	2008-04-27
48	[웹디자인tip] 아이프레임 자리 도트 꾸미기.	2008-04-27
47	[웹디자인tip] 링크 점선 없애기	2008-04-27
46	[웹디자인tip] 글자가 출렁이는 효과.	2008-04-27
45	[웹디자인tip] 스르르 열렸다 사라지는 매뉴	2008-04-27
44	[웹디자인tip] 아이프레임 태그 없이 글상자 만들기	2008-04-27
43	[웹디자인tip] 예쁜 계산기	2008-04-27
42	[웹디자인tip] 스크롤바 스타일~	2008-04-27
41	[웹디자인tip] 간단한계산기	2008-04-27
40	[웹디자인tip] 질문에 답하는 스크립트 만들기.	2008-04-27
39	[웹디자인tip] 웹페이지 모든 글자를 같은 크기로	2008-04-27
38	[웹디자인tip] 테이블 표를 링크 걸기	2008-04-27