[강의] 테이블을 이용한 사진 목록 ...

테이블을 이용한 사진 목록 만들기

<div class="separator" style="clear: both; text-align: left;"> <br /></div> --- 새로운 스타일을 적용 ---- <table align="center" border="1" cellpadding="6" cellspacing="4" style="background-color: #f0f0f0; border: solid 1px #555555; margin-bottom: 20px; margin-top: 20px;"> --- 테이블 속성 지정 --- <tbody> --- 테이블 본문 --- <tr> --- 가로 셀 시작 --- <td align="center" class="imgcell"> --- 셀의 속성 --- <a href="클릭하면 표시할 사진의 URL" target="_blank"> <img border="0" height="높이" src="셀에 표시할 사진의 URL" width="너비" /> </a> </td> <td align="center" class="imgcell"> <a href="클릭하면 표시할 사진의 URL" target="_blank"> <img border="0" height="높이" src="셀에 표시할 사진의 URL" width="너비" /> --- "높이"와 "너비" 중 하나만 적으면 자동으로 비율에 맞도록 크기가 바뀐다. </a> </td> --- 한 줄에 표시 하고 싶은 갯수 만큼 반복해서 적는다. ---- </tr> </tbody> </table>

예)

소스 <div class="separator" style="clear: both; text-align: left;"> <br /></div> <table align="center" border="1" cellpadding="6" cellspacing="4" style="background-color: #f0f0f0; border: solid 1px #555555; margin-bottom: 20px; margin-top: 20px;"> <tbody> <tr> <td class="imgcell" align="center"> <a href="줄 1 셀 1 사진의 URL" target="_blank"><img border="0" src="줄 1 셀 1 사진의 URL" width="100"></a></td> <td class="imgcell" align="center"> <a href="줄 1 셀 2 사진의 URL" target="_blank"><img border="0" src="줄 1 셀 2 사진의 URL" width="100"></a></td> </tr> <tr> <td class="imgcell" align="center"> <a href="줄 2 셀 1 사진의 URL" target="_blank"><img border="0" src="줄 2 셀 1 사진의 URL" width="100"></a></td> <td class="imgcell" align="center"> <a href="줄 2 셀 2 사진의 URL" target="_blank"><img border="0" src="줄 2 셀 2 사진의 URL" width="100"></a></td> </tr> </tbody> </table>


target="_blank"는 사진을 새 창에 엽니다.
imageanchor="1"는 구글 블로거에서는 사진을 필름 스트림 형식으로 보여 주는 창을 엽니다.
사진이 구글 블로거 내에 있는 경우는 target="_blank"가 imageanchor="1"로 작동합니다.
.