사진의 갯수가 많거나 원본 사진을 올려야 할 경우 파일의 갯수나 이미지 사이즈의 제한을 받는 경우가 있습니다.
이런 경우 html을 아시는 분들의 경우 해당 이미지를 Paran 등의 블로그에 올려두고 html tag를 이용해 다른곳에서 볼 수 있도록 하곤 합니다.
이미 이런 방법을 사용하시는 분들도 많이 계시지만, 아직 잘 모르시는 분들도 많은것 같습니다.
html은 여러가지의 명령어(tag 라고 합니다)가 있지만 그중에서 다른곳의 이미지를 가져와서 보여질 수 있도록 하는 명령어를 사용하는 방법에 대해 알아보겠습니다.
* 주의사항 : 이 방법으로 타 사이트에 이미지를 올리신 후 이미지를 가져오려면 해당 사이트에서 외부링크를 해용해야 합니다. 이는 이미지를 다른곳에 링크해서 보여줄 경우 해당 사이트의 트래픽(속도저하)이 증가하게 되어 외부링크를 막아 놓은 곳들이 있기 때문입니다. ( ex. Paran에 이미지를 올리고 350D Club에서 보여주려면 Paran에서 이미지 외부링크를 허용해야 합니다. 현재는 허용되고 있는듯 합니다.)
<이미지 올리고 주소 확보하기>
1. 우선 해당사이트에 이미지를 올립니다.
2. 올라간 이미지에 마우스 커서를 두고 오른쪽 버튼을 클릭합니다.
3. 메뉴가 나오면 제일 하단에 있는 "속성"을 선택합니다.
4. 등록정보창이 뜨면 "주소(URL)" 이라고 적힌 부분에 나타난 주소를 마우스로 드래그 해서 선택한 후 CTRL + C 해서 복사합니다.
* 사진이 여러장인 경우 사진을 미리 다 올리신 후 메모장 프로그램을 열어 두고 각각의 사진의 주소를 메모장에 복사해 두시면 편리합니다.
<html 명령어 만들기>
메모장에 복사해 두신 이미지의 주소가 아래와 같다고 가정합니다.
http://blogfile.paran.com/BLOG_228851/200509/1126375202_IMG_0805_s.jpg
http://blogfile.paran.com/BLOG_228851/200509/1126375281_IMG_0814_s.jpg
이제 이미지를 보여주는 html 명령어를 위의 주소에 입혀 주시면 됩니다. 이 때 사용되는 html 명령어(tag)는 <img> tag 입니다. 사용 방법은 아래와 같습니다.
<img src="이미지의주소" width="가로사이즈" height="세로사이즈" border="이미지테두리선두께">
여기에서 뭐가 이리 복잡해!! 라고 생각하시는 분들은 width, height, border 옵션은 생략하시고 그냥 잊어버리시면 됩니다. ^^
그럼 미리 저장해 둔 이미지의 경로에 명령어를 입혀보겠습니다.
<img src="http://blogfile.paran.com/BLOG_228851/200509/1126375202_IMG_0805_s.jpg">
<img src="http://blogfile.paran.com/BLOG_228851/200509/1126375281_IMG_0814_s.jpg">
위와 같은 내용으로 게시판에 글을 쓰시면 다른곳에 올려둔 이미지를 이곳의 게시판에서 보여지도록 할 수 있습니다.
<앗! 이미지가 안보이고 img tag가 그냥 보여요!>
게시판에 글을 쓰실 때 보시면 html 사용 이라는 옵션이 있습니다. 이걸 살포시 클릭하셔야 게시판에 쓰신 글에 html이 적용됩니다.
<앗! 이미지는 보이는데 이미지가 옆으로 죽~붙어서 안이쁘네요>
html에서는 아무리 enter를 눌러서 칸을 늘리더라도 실제 익스플로러에서는 무시됩니다. 왜냐! 칸을 내려라 하는 명령어가 따로 있기 때문입니다.
두개의 명령어가 있습니다. 하나는 <br> 이라는 것인데 이것은 줄바꿈을 의미합니다. 그리고 또 하나는 <p> 인데 이것은 문단나눔을 의미합니다.
이해 하시기 쉽게 <br>은 바로 아랫줄로 내려가고 <p>는 한줄띄고 다음줄로 내려간다고 이해하시면 됩니다.
그럼 위에 만들었던 html코드에 적용해 보겠습니다.
<center>
<img src="http://blogfile.paran.com/BLOG_228851/200509/1126375202_IMG_0805_s.jpg"><br>
사진 1번 설명글<p>
<img src="http://blogfile.paran.com/BLOG_228851/200509/1126375281_IMG_0814_s.jpg"><br>
사진 2번 설명글
</center>
위의 예제에서 <center>는 가운데 정렬하라는 뜻이고 </center>는 여기까지 가운데 정렬 이라는 뜻입니다.
도움이 되셨는지 모르겠네요. ^^;
공개자료실
공개자료실
