img 태그에 border=0을 넣지말자~!

이미지 태그에 border 값을 설정하지 않은 상태에서 그 이미지에 하이퍼링크를 걸게 되면 이미지 주변에 경계선이 생기게 된다. 이를 방지하기 위해 <img src="..." border="0">과 같이 border 값을 설정해 준다. 하지만 이런 이미지가 한 둘이 아니고 여러 개일 때 매번 <img> 태그에 border 속성을 넣어 주는 것도 불편한 일일 뿐만 아니라 그 만큼 텍스트 사이즈도 늘어나게 된다.

예를 들어 보자.

<a href=...><img src=img/temp.gif ></a>
위 태그를 사용하면 temp.gif파일을 웹페이지에서 보게 되면 테투리가 생기게 된다

링크가 걸린이미지에 경계선이 나타나는 것을 원하는 사람은 아무도 없을것이다.(물론 때에 따라 다르겠지만 대부분은 말이다) 경계선을 없애기 위해 대부분의 사람들은 밑의 소스 처럼 border=0을 추가 할 것이다

<a href=...><img src=img/temp.gif border=0></a>


앞에서도 잠깐 설명했지만, 이런 링크 걸린 이미지가 많아질 경우 위와 같이 사용하는 것보다는 다음과 같이 스타일을 정의하여 사용하는 것이 훨씬 더 좋은 방법이다.

---------------------------------------------------------------
<style>
IMG {border: none;}
</style>
...
...
...
<a href="img/temp.gif"><img src="/images/title/title_187.gif"></a>
---------------------------------------------------------------

위와 같이 IMG 태그에 대한 스타일을 미리 정의하면 모든 IMG 태그에는 border="0"을 준 것과 동일한 효과가 적용된다.

출처: korea.internet.com