이미지들 사이 빈틈이나 여백 없애는 방법
<!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>
'인터넷정보' 카테고리의 다른 글
| 유튜브 안전모드 메시지 에러 해결법 (0) | 2010.09.07 |
|---|---|
| 제로보드용 모바일웹 페이지 게시판 (0) | 2010.08.17 |
| Windows 작업관리자 띄우기 (0) | 2010.04.13 |
| Javascript Event 일람 (0) | 2010.04.09 |
| 세로로 찍은 동영상 가로로 변경 전환해 보기 (0) | 2010.02.02 |
| 풀 브라우징 휴대폰 모바일의 User Agent명(브라우저명)은? (0) | 2009.12.24 |
| 유투브 웹상 음성이나 영상으로 다운하기 (0) | 2009.12.16 |
| 폰트목록 (0) | 2009.06.25 |
| 한글, 한자, 영문 폰트 (0) | 2009.06.25 |
| float / clear / overflow / direction / unicode-bidi (0) | 2009.05.15 |
