이미지들 사이 빈틈이나 여백 없애는 방법
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
img {width:200px; border:solid 1px #000;}
#img_margin {
clear:both;
width:100%;
}
#img_margin img {display:block; float:left;}
</style>
</head>
<body>
코딩 작업을 하다보면 이런 문제점이 생기죠. (복사해서 실행해 보세요) <br /><br />
No. 1 처럼 이미지 태그를 사용시 margin 값 즉, 이미지와 이미지 사이에 공간이 생긴다.<br />
No. 2 처럼 이미지 태그를 한줄로 나열시 스페이스 공간은 없어진다.
(단점은 링크태그등 코딩시 길게 한줄로 나열 되어서 보기가 어렵다)<br />
No. 3 처럼 display:block; float:left; 속성을 주면 사이띄기 공간은 해결된다.<br /><br />
포인트 : HTML 시작태그에 DOCTYPE을 선언 해주고, 이미지에 display:block; float:left; 속성을 넣는다.<br />
<br />
No. 1
<div id="">
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
</div>
<br /><br />
No. 2
<div id="">
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" /><img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" /><img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" /><img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" /><img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
</div>
<br /><br />
No. 3
<div id="img_margin">
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
<img src="http://blogfiles15.naver.net/20100405_30/camelots_1270447279242_S8Gqs5_jpg/7686253472.jpg" />
</div>
</body>
</html>