Translate

레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시
레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시

2016년 11월 21일 월요일

[강의] Dropbox를 이미지 호스트로 사용하기 ...

1.
Dropbox에 저장된 사진의 공유 링크 주소를 얻는다.


2.
"?dl=0"을 "?raw=1"로 바꾼다.


예)

공유할 사진의 주소
https://www.dropbox.com/s/kbq4qfb3ppa2wp4/Girl0028.jpg?dl=0

HTML 이미지 소스 주소 코드
<img src="https://www.dropbox.com/s/kbq4qfb3ppa2wp4/Girl0028.jpg?raw=1" />




소스 코드
<a href="https://www.dropbox.com/s/kbq4qfb3ppa2wp4/Girl0028.jpg?dl=0" rel="nofollow" target="_blank"><img src="https://www.dropbox.com/s/kbq4qfb3ppa2wp4/Girl0028.jpg?raw=1" /></a>


.

2016년 11월 14일 월요일

[강의] 블로그 내용 접기/펼치기 ...

<a href="javascript:void(0)" name="aa" onclick="this.nextSibling.style.display=(this.nextSibling.style.display==&#39;none&#39;)?&#39;block&#39;:&#39;none&#39;;">[열기]</a> <DIV style='display:none'> 내용 <a href="#aa" onclick="this.parentNode.style.display=&#39;none&#39;;">[닫기]</A> </DIV> 블로그의 일부 "내용"을 접거나 펴기 ... .

2015년 9월 30일 수요일

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

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

<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"로 작동합니다.
.