Wiki

개요

• 이미지에 링크가 걸릴 경우 이미지에 테두리를 주고 싶을 때
  • 그런데 그 테두리를 준다는 것이 브라우저마다 똑같게 보이지는 않으므로 다음처럼 소스를 써줘야 한다.

CSS

.img_left a:link img, 
.img_right a:link img, 
.img_center a:link img {
	border:1px solid #4FC2D0;
	}

.img_left a:visited img,  
.img_right a:visited img, 
.img_center a:visited img {
	border:1px solid #c0c0c0;
	}

.img_right a:hover img, 
.img_left a:hover img, 
.img_center a:hover img {border : 1px solid #000;}

.img_left   { float: left; margin: 4px 15px 4px 0;}
.img_right  { float: right;  margin: 4px 0 4px 15px;}
.img_center {display: block; text-align : center;}
.img_center a img  { margin : 0 auto;display : block;	padding :4px;}
.img_right a img, 
.img_left a img {
	vertical-align: bottom;
	border-width: 0;
	padding :4px;
}

html

1. 왼쪽 정렬

   <div class="img_left">
   	<a href="주소">
   		<img src="이미지 주소" alt="예제 이미지" width="얼마" height="얼마" />
   	</a>
   </div>
   

2. 오른쪽 정렬

   <div class="img_right">
   	<a href="주소">
   		<img src="이미지 주소" alt="예제 이미지" width="얼마" height="얼마" />
   	</a>
   </div>
   

3. 가운데 정렬

   <div class="img_center">
   	<a href="주소">
   		<img src="이미지 주소" alt="예제 이미지" width="얼마" height="얼마" />
   	</a>
   </div>
   

4. 갤러리처럼 여러 그림 링크

   <div class="img_left">
   	<a href="주소1"><img src="이미지1 주소" alt="예제 이미지" width="얼마" height="얼마" /></a>
   	<a href="주소2"><img src="이미지2 주소" alt="예제 이미지" width="얼마" height="얼마" /></a>
   	<a href="주소3"><img src="이미지3 주소" alt="예제 이미지" width="얼마" height="얼마" /></a>
   	<a href="주소4"><img src="이미지4 주소" alt="예제 이미지" width="얼마" height="얼마" /></a>
   	<a href="주소5"><img src="이미지5 주소" alt="예제 이미지" width="얼마" height="얼마" /></a>
   </div>
   

관련 링크

• CSS TEST