제목: 이미지(그림,사진)을 인터넷에 올리는 방법 -사용 예-


(참고할만 한 링크) 이미지  태그법 tag 법   : https://brunch.co.kr/@xhrkdl2000/42


(내용 순서)

A. 이미지(그림,사진)-링크하는 법(올리는 법)


[요약]

Daum 카페 게시판이나 블로그, Tistory 블로그에서는 아래 그림에서 보이는 바와 같이,

사진이나 그림, 동영상, 외부 컨텐츠를 게시물 작성시 바로 올릴 수가 있습니다.


그러나, 어떤 (인터넷) 카페 게시판이나 블로그 게시판에서는 이러한 기능이 없어 게시판 문서 작성 중

그림(사진)을 바로 올릴 수 없는 경우가 있습니다. 


[게시판 글쓰기할 때 그림(사진)을 게시판에서 바로 보이게 하는 방법]

 1. 일단 원하는 그림이나 사진이 있는 곳(인터넷 포탈이나 게시판 또는 블로그)으로 갑니다.

     참고로  원하는 자료가 없을 경우에는 자신이 가지고 있는 자료(그림,사진 등)을 올리고(첨부파일 또는 삽입하고),

     해당 자료를  link하는 경우도 있습니다.

     이 경우 게시글 작성 도중 올린 첨부파일은  (적어도 한 번) 저장을 해야 첨부파일의 URL 주소가 생성됩니다.


 2. 원하는 그림이나 사진의 URL 주소 알아 내기

    원하는 그림이나 사진 또는 첨부파일에다 우측 마우스를 클릭합니다.

    (어떤 게시판이나, 블로그에서는 우측 마우스 사용 금지가 되어 있는 곳도 있습니다.

    ' 우클릭 금지' 해결법은  다음  링크: 우클릭금지(우측 마우스 사용 금지) 해결하는 법 을  참고하세요.)


 3. 그림(사진)에서 오른쪽 마우스를 누릅니다. 

   3-1.'우클릭 금지' 안된 경우에는  바로가기 보기 복사(T)를 사용할 수 있습니다.
   3-2. 이것이 불가능한 경우에도 등록정보 중 속성(R)을 보면 주소가 보이는 수가 많습니다.

          만약, 속성(R)을 볼 수 없을 경우,  링크: 우클릭금지(우측 마우스 사용 금지) 해결하는 법을 참고하세요.


         http://www.~~어쩌구 저쩌구~ .  요놈이 바로 "위치주소"입니다.    

         아이쿠~  어떤 분들은 위치 주소를 확인하고는 일일이 적고 계시네요.

         그러지 말고, 복사하는 방법을 배우셨잖아요? 

         마우스로 일단 범위 지정하시고 마우스 오른쪽 버튼으로 복사 또는 "ctrl" + "c"키를 사용해서

         메모장으로 옮기세요. 아셨죠? 그런 다음  붙여넣기는 ctrl-v 로 붙여넣기로 하면 되죠.

===================================================================================

아래 설명한 tag 예를 참고하여 tag를 만들어보세요.

(자신이 tag를 실제 사용할 때는 영상이나 음악 이미지의 '주소'만 바꿔주면 됨)


A. 이미지(그림,사진)-링크하는 법, 올리는 법

  (참고: 먼저 게시글 인터넷 게시판에서 (그림, 사진, 음악, 동영상) 링크하기 참고하시기 바랍니다.)

대부분의 경우 인터넷 검색으로  자료(그림, 사진, 음악, 동영상)가 있는 곳에 가서 해당 자료의 URL주소를 알아내서  

해당 자료가 보이게(실행되게) tag 작성을 하는 게 일반적입니다.

하지만 자신이 갖고 있는 자료(그림, 사진, 음악, 동영상)를 인터넷 게시판에 직접 올려야하는 경우도 있습니다.


이미지(그림, 사진)을 (인터넷) 카페 게시판이나 블로그 게시판에서 보이게하는 tag작성법입니다.

(참고로 Daum 카페 게시판과 블로그 게시판과 Tistory 블로그에서는,

게시판 문서 작성 중 그림(사진)을 바로 올릴 수 있있으므로  아래와 같은 작업이 필요없습니다.)

 

사진이나 그림등을 삽입할 때 사용하는 태그는 < 로 시작하고 > 로 끝나야 하며, HTML 모드에서 아래와 같이 적으면 됩니다.

HTML 모드에서 tag 형식.     

  <IMG src="?" </IMG> 또는

  <IMG src="?"  height=450  width=600></IMG> 


설명: 사진이나 그림등을 삽입할 때 사용하는 태그는 < 로 시작하고 >로 끝나야 하며, 대소,문자 구별하지 않습니다.        

        ? 위치에는 tag가 찾아갈 절대주소(link할 자료의 URL주소)를 입력합니다.  *절대주소 = full address(찾아가야 할 완전한 주소 )

        (width , 높이 height)  크기 조정 옵션: height=450 width=600 나 width=600 height=450 처럼 순서는 바뀌어도 상관없습니다.

      참고로 가로 그림은  width=600 height=450 로, 세로 그림은 width=450 height=600 설정해야 그림이 덜 왜곡됩니다.


        srcsource의 약자로서 삽입할 이미지의 위치 또는 URL주소를 지정합니다.

        imgimage의 약자로 지정한 위치에 있는 자료을 불러와서 디스플레이 시키라는 명령어입니다.

        뒤쪽의 </img> img tag가 끝났다는 표시로 꼭 적지 않아도 됩니다.


A-예1) 다보탑의 사진의 인터넷 주소를 찾을 때

문화재청 홈페이지에 들어가서 다보탑을 검색하여 다보탑 사진을 찾아, 우측마우스 클릭하여

다보탑 사진의 주소를 확인해 봅니다. 속성(R)에 그림의 인터넷주소(URL 주소)가 보입니다.

다보탑의 사진의 주소는  http://www.cha.go.kr/unisearch/images/national_treasure/thumb/1612673.jpg 입니다. 


tag 작성 시 HTML  모드(mode)에서 작성되어야 합니다.

HTML  mode에서

<img width="400" src="http://www.cha.go.kr/unisearch/images/national_treasure/thumb/1612673.jpg" ></img>

로 입력한 후 edit 모드로 보면 다보탑 그림(사진)이 보입니다.


A-예2) 는  아래 tag 내용을 HTML에서 작성한 결과 나타나는(보이게 되는) 그림입니다.

<img width="764" src="https://t1.daumcdn.net/cfile/blog/99BBBC4C5B3DC28004" data-filename="The Raft of the Medusa.jpg"></img>

(참고로  tag 내에서는 tag 명령어 width=" 나  height= 쓰여지는 위치는 상관없으며, 크기 설정이 없는 경우에는

 (여기서는  height=  내용 생략됨), 해당 파일이 갖고 있는 원본 속성(원본 크기)을 그대로 반영하게 됩니다.)


다음 그림은 A-예2) 내용을 HTML에서 입력 시킨 결과 나타나는(보이게 되는) 그림으로 크기가 좀 큽니다.

 (그림출처: 인터넷 서핑에서)


          그림은 너무 커서 부담스러우니 크기를 조금 줄여 보겠습니다.

            그림 크기 조절하는 법은 이미 배웠죠?  다시 해당 게시물을 보려면 다음 링크를 클릭하세요.

            링크: 사진,그림을 인터넷(게시판,블로그)에 올리려면?


그림 크기 조절하는 법 얘기가 나왔으니, 그림 크기 조절하는 법을 한번 실습해 보죠.


원래 작성된 tag

<img width="764" src="https://t1.daumcdn.net/cfile/blog/99BBBC4C5B3DC28004" data-filename="The Raft of the Medusa.jpg"></img>  에서  width=600 height=450 를 추가하면 그림을 축소할 수가 있습니다.


(참고로  tag 내에서는 tag 명령어 width=  height= 쓰여지는 위치는 상관없습니다.)

원하는 size로 숫자를 지정하며 그 숫자가 커질수록 그림도 커집니다.


HTML에서  다음  tag 내용 처럼 width=600 height=450 을 추가합니다.

참고로 가로 그림은  width=600 height=450 로, 세로 그림은 width=450 height=600 설정해야 그림이 덜 왜곡됩니다.

만약  width=600 height=300 로 높이를 더 줄이면, 이 그림의 경우 사람들 키가 짧아지는 왜곡현상이 생깁니다. 

<img src="https://t1.daumcdn.net/cfile/blog/99BBBC4C5B3DC28004" data-filename="The Raft of the Medusa.jpg"  width=600 height=450 ></img>


이 처럼 작성하였을 때 실제 나타나는(보이게 되는) 그림입니다.

이렇게 size를 입력하면  그림(사진)크기를 조절할 수 있습니다.


 A-예4)  tag 연습 하나 더 추가해 봅니다. 아래 tag 중 주소는 아래 춤추는 아가씨 그림의 인터넷 주소입니다.
<img src="http://files.hanmail.net/hanmail/s_img/character-mail/char/2_1660_/2_1660_3.gif"> </img>


그림 주소를 확인한 다음 (익숙해진 분들은 위의 tag 내용을 drag한 다음

 Ctrl+c 로 복사한 다음  Ctrl+v 로 붙여넣기 하면 되겠죠)

게시판의 글쓰기(HTML 상태에서)에 집어넣고 Edit 모드로 보세요.

그러면 아래와 같이 춤추는 아가씨 이미지가 보이면 성공입니다.

  

===================================================================================

그런데,  (인터넷 검색해도) 원하는 자료가 없을 경우에는,  

자신이 갖고 있는 자료(그림,사진,음악,동영상 등)을 첨부파일로 올린다음, 이것을 link 링크하는 경우가 있습니다.


이럴 경우 첨부파일을 어떻게 올리고 어떻게 링크할까요? 

일단, 가능하면 게시물을 링크하려는 같은 사이트 내에 첨부자료를 보관하고 링크하는 것이 좋습니다.


왜냐하면 다른 사이트에 올릴 경우 해당 사이트가 개편되면 주소(URL 링크  주소)가 변경될 수도 있기 때문입니다.

물론 같은 사이트라 할 지라도 사이트가 개편될 때  URL 주소가 변경되는 경우도 있습니다.


참고로,  게시글 작성 도중 올린 첨부파일은  (적어도 한 번) 저장을 해야 첨부파일의 URL 주소가 생성됩니다.

이어서 자료(그림, 사진, 음악, 동영상)가 있는 곳에 가서 해당 자료의 URL주소를 알아내서 해당 자료가 보이게(실행되게)



HTML 모드에서 tag 작성을 하면 됩니다.


자, img 태그는 여기까지 하겠습니다.


 음악,동영상을 인터넷에 올리는 방법 -사용예)는 별도 게시물로 올립니다. 바로  가려면 다음을 클릭하세요!    

클릭!=>   음악,동영상을 인터넷에 올리는 법-embed, href, iframe 사용-

+ Recent posts