메일폼 작성시에 이미지안에 여러 링크가 있고 이 이미지들이 서로 여백없이 이어진 경우 어떻게 style을 잡아야 할지에 대한 내용이다.
가끔 포토샵으로 메일폼 이미지를 만든 후에 이미지를 나눠 html로 저장해서 프로그래머에게 주는 경우 써먹 을 수 있는 방법이다.
먼저 HTML 태그 구조를 아래처럼 해준다.
| <html> <head> <title>타이틀</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> 내용 </body> </html> |
이제 문제가 되는 여러 이미지가 서로 이어붙여하는 경우 아래 같은 경우다.
여러개 이미지 사이에 여백없이 이어 붙어야 하는 경우
<table width="770" height="1720" border="0" cellpadding="0" cellspacing="0"> </td> </tr> </table> |
위 코드처럼 table태그와 tr태그, td 태그 등에 style에 padding, margin을 0으로 조정해준다.
img태그에는 추가로 border와 vertical-align을 추가하도록 한다. 특히 vertical-align은 여백을 없애주므로 꼭 넣어야 한다.
그래도 이미지 사이사이에 여백이 생긴다면, img 태그 대신에 background를 사용해서 이미지를 백그라운드로 해준다.
<td colspan="3" style="margin: 0; padding: 0; width: 770px; height: 13px; background: url(이미지주소);"></td> |
여기서 링크가 문제 생기는 경우가 있는데 이미지맵을 사용해서 링키를 사용한 경우 img태그에만 사용이 가능하므로
background로 이미지를 처리하지 않도록 한다.
'Web Programings > HTML' 카테고리의 다른 글
| [HTML] 태그에 hidden값 주기 (0) | 2012.08.31 |
|---|---|
| [HTML] 여러가지 이벤트 (0) | 2012.08.20 |