웹에 이미지 올리기 - web-e imiji olligi

이미지를 올바르게 표시하기

웹 사이트 HTML에 링크하려는 모든 이미지는 먼저 웹 페이지에 대한 HTML을 보내는 위치와 동일한 위치에 업로드해야합니다. 사이트가 FTP로 연결 되는 웹 서버에서 호스팅되는지 또는 웹 호스팅 서비스를 사용하든 상관 없습니다. 웹 호스팅 서비스를 사용하는 경우 서비스에서 제공하는 업로드 양식을 사용하는 것입니다. 이 양식은 일반적으로 호스팅 계정의 관리 섹션에 있습니다.

이미지를 호스팅 서비스에 업로드하는 것은 첫 번째 단계 일뿐입니다. 그런 다음이를 식별하기 위해 HTML에 태그를 추가해야합니다.

HTML과 같은 디렉토리에 이미지 업로드

사진은 HTML과 동일한 디렉토리에있을 수 있습니다. 그것이 사실 인 경우 :

1. 이미지를 웹 사이트의 루트에 업로드하십시오.
2. HTML에서 이미지를 가리 키도록 이미지 태그를 추가하십시오.
3. HTML 파일을 웹 사이트의 루트에 업로드하십시오.
4. 웹 브라우저에서 페이지를 열어 파일을 테스트하십시오.

이미지 태그의 형식은 다음과 같습니다.

"lunar.jpg"라는 이름의 달 사진을 업로드한다고 가정하면 이미지 태그의 형식은 다음과 같습니다.

높이와 너비는 선택 사항이지만 권장됩니다. 이미지 태그에는 닫기 태그가 필요하지 않습니다.

다른 문서의 이미지에 연결하는 경우 앵커 태그를 사용하고 내부에 이미지 태그를 중첩시킵니다.

하위 디렉토리에 이미지 업로드

일반적으로 이미지 라고하는 하위 디렉토리에 이미지를 저장하는 것이 더 일반적입니다. 해당 디렉토리의 이미지를 가리 키기 위해서는 웹 사이트 루트와의 관계를 알아야합니다.

웹 사이트의 루트는 끝에 디렉토리가없는 URL입니다. 예를 들어 "MyWebpage.com"이라는 웹 사이트의 경우 루트는 http://MyWebpage.com/ 양식을 따릅니다. 끝에 슬래시가 있음을 알 수 있습니다. 이것은 보통 디렉토리의 루트가 표시되는 방법입니다. 하위 디렉토리에는 디렉토리 구조에 앉아있는 위치를 나타내는 슬래시가 있습니다. MyWebpage 예제 사이트의 구조는 다음과 같습니다.

http://MyWebpage.com/ - 루트 디렉토리 http://MyWebpage.com/products/ - 제품 디렉토리 http://MyWebpage.com/products/documentation/ - 제품 디렉토리 http : // 아래의 문서 디렉토리 MyWebpage.com/images/ - 이미지 디렉토리

이 경우 이미지 디렉토리의 이미지를 가리키면 다음과 같이 작성됩니다.

이것을 이미지의 절대 경로 라고합니다.

표시하지 않는 이미지의 일반적인 문제

웹 페이지에 이미지를 표시하는 것은 처음에는 어려울 수 있습니다. 가장 일반적인 두 가지 이유는 HTML이 가리키는 위치에 이미지가 업로드되지 않았거나 HTML이 잘못 작성된 것입니다.

가장 먼저 할 일은 온라인에서 이미지를 찾을 수 있는지 확인하는 것입니다. 대부분의 호스팅 제공 업체는 이미지 업로드 위치를 확인하는 데 사용할 수있는 관리 도구를 제공합니다. 이미지 URL이 정확하다고 생각되면 브라우저에 이미지 URL을 입력하십시오. 이미지가 나타나면 올바른 위치에 있습니다.

그런 다음 HTML이 해당 이미지를 가리키고 있는지 확인하십시오. 가장 쉬운 방법은 방금 테스트 한 이미지 URL 을 SRC 속성에 붙여 넣는 것입니다. 페이지를 다시 업로드하고 테스트하십시오.

이미지 태그의 SRC 속성은 C : \ 또는 file :로 시작하면 안됩니다 . 이 코드는 컴퓨터에서 웹 페이지를 테스트 할 때 작동하지만 사이트를 방문하는 모든 사용자에게는 깨진 이미지가 표시됩니다. 이것은 C : \가 하드 드라이브의 위치를 ​​가리 키기 때문입니다. 이미지는 하드 드라이브에 있으므로 이미지를 볼 때 표시됩니다.

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

(참고할만 한 링크) 이미지  태그법 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 설정해야 그림이 덜 왜곡됩니다.

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

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

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

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

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

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

다보탑의 사진의 주소는  https://sg.cdnki.com/web-e-imiji-olligi---aHR0cDovL3d3dy5jaGEuZ28ua3IvdW5pc2VhcmNoL2ltYWdlcy9uYXRpb25hbF90cmVhc3VyZS90aHVtYi8xNjEyNjczLmpwZw==.webp 입니다. 

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 로 높이를 더 줄이면, 이 그림의 경우 사람들 키가 짧아지는 왜곡현상이 생깁니다. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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