Tistory 블로그에서도 iframe이 실행됩니다.


하지만 Tistory의 다른 tag 게시물 중 자동 실행되는 동영상이나 음악있을 경우 중복실행(play)되어 시끄러워집니다.
이를 피하기 위해 부득이 Daum 블로그 게시물로 링크합니다. 양해 있으시길 바랍니다.

 


음악,동영상을 인터넷에 올리는 법-embed, href, iframe 사용-<=요걸 클릭하세요

제목: 인터넷 게시판에서 (그림, 사진, 음악, 동영상) 링크하기

 

첨부파일

tag-link.hwp

 

이 첨부파일과 동일한 내용의 자료 파일을 첨부했으니, 필요하신 분은 다운 받아 보세요.

 

 

 

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

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

 

그러나, 어떤 (인터넷) 카페 게시판이나 블로그 게시판에서는

이러한 기능이 없어 게시판 문서 작성 중 그림(사진)을 바로 올릴 수 없는 경우가 있습니다.

 

여기서는 이런 기능이 없는 게시판에서 그림(사진)을 첨부파일로 올리고

게시판에서 바로 보이게 하는 방법을 설명합니다

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

터넷 게시판에서 (그림, 사진, 음악, 동영상) 링크를 위한 첨부파일을 어떻게 올리고 어떻게 링크할 것인가?

주제 A. 그림, 사진을 바로 보이게 링크하기

주제 B. 음악(동영상) 파일을 링크하기

 

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

왜냐하면 다른 사이트에 올려둔 자료의 경우 해당 사이트가 개편되면 주소(URL 링크 주소)가 변경될 수도

있기 때문입니다. 물론 같은 사이트라 할 지라도 사이트가 개편될 때 주소(URL 링크 주소)가 변경되는 수도 있습니다.

 

따라서 인터넷 게시판에서 글을 쓸 때 자료첨부란이 있다면 거기에 첨부자료를 직접 올리는 것이 가장 좋습니다.

경우에 따라 같은 사이트 내의 다른 적당한 장소(,게시판)에 자료를 올린 후 해당 자료를 링크할 수도 있습니다.

 

필요시 해당 사이트 내에 자료를 올릴 만한 장소(, 카페)를 만들기도 합니다.

예를 들면 적당한 커뮤니티(일종의 자신이 만든 카페)게시판 방을 만들고 그 게시판(보관 자료방)에 자신이 사용할 자료를

저장합니다

 

주제 A. 그림, 사진을 바로 보이게 링크하기

 

다른 장소에 자료를 올린 후 해당 자료를 링크할 경우(다른 곳에 자료 저장 후 링크할 때)의 작업 과정입니다.

주의: Tag 내용(link 포함)을 작동시키기 위해서는 문서 내용이 html 상태에서 작성되어야 합니다.

또한 사진(그림)이나 음악, 동영상 사용 시 저작권 관련 유의하셔야 할 것입니다.

, 첨부 파일의 이름은 한글이나 특수 문자를 피하고 영문자로 하는 것이 좋습니다.

(어떤 사이트의 경우 링크시 잘 읽어 보지 못하는 수도 있음)

 

1. 예를 들면 티스토리 https://www.tistory.com/ 사이트나 카페에 자신의 blog를 만듭니다

 

2. 다음, 그 사이트 게시판의 적당한 장소에 첨부자료(그림, 사진, 음악, 동영상)를 저장합니다.

게시판에 따라 첨부할 파일의 크기를 제한하는 경우가 많으므로, 파일 크기가 크면 첨부파일로 올릴 수 없습니다.

따라서 파일 size줄이거나 다른 형태로 변환(가공) 해야 필요도 있습니다.

(참고로 첨부파일에 hwp 문서, 파워포인트 자료 pp~, 일반 txt 문서 압축 파일 등도 올릴 수 있습니다만,

이 경우 링크해서 바로 게시판 내에서 뜨게(보이게) 하지는 못합니다.)

 

3. 해당 첨부 자료의 절대주소(URL 주소)를 알아내는 방법은 첨부파일을 마우스 우클릭해서 바로가기 복사(T)

합니다. 대부분의 경우 해당 자료의 절대주소(URL 주소)가 제대로(full address)로 다 보입니다

 

4. 이렇게 내용(html 문서)을 완성하고 나서(게시판에 따라서 edit mode로 전환하면 tag 가 완성된 모습을 볼 수도

있음)저장한 다음, 해당 게시물이 제대로 tag가 되는지(link실행이 잘 되는 지) 확인해 보시면 되겠습니다.

 

5. Daum 이나 naver 의 카페 게시판에서 자료 링크하실 때는 주의할 점이 있습니다.

Daum 이나 naver 카페에 올려 진 자료를 링크할 경우, 해당 사이트에서 첨부된 사진(그림), 음악 등을 link 하지 못하게

 block(차단)시켜 놓을 수 있기 때문에 해당 자료를 바로가기 복사(T)해서 그대로 링크해서는 안 됩니다.

 

이 경우 자신은 해당 사이트에 들어갔음으로 해당 그림이 보이지만, 다른 사람이 링크된 그 사이트가 아닌 다른 게시판에서

그 자료를 볼 때는 소위 액박으로 보입니다.(소위; ‘액박으로 보일수 있다는 것을 참고로 알아 두십시오).

 

' 우클릭 금지' 해결법은  게시물 링크: 클릭금지(우측 마우스 사용 금지) 해결하는 을  참고 하시기 바랍니다.

 

이런 액박현상을 해결하려면 해당 그림을 일단 자신의 컴에 다운 받은 다음, 다시 자신의 원하는 사이트(: Tistory)

첨부파일로 올린 후 해당 자료를 link시키면(불러오면) 다른 사람도 해당 그림이 보이게 됩니다.

참고로 Daum이나 naver의 불로그에 올린 그림(사진)은 직접 링크해도 그림(사진)이 잘 링크됩니다.(2018.08월 현재).

 

 

  사진(그림) 기본 형식:  HTML 모드에서 아래와 같이 적으면 됩니다.

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

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

 

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

         ? 위치에는 tag가 찾아갈 주소(link할 자료의 URL주소)를 입력합니다.

        크기 조정 옵션은 (width 높이 height)  height=450 width=600 나   width=600 height=450 처럼

        순서는 바뀌어도 상관없습니다.

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

 

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

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

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

 

게시물 작성 시 tip:    

? 위치에 마우스를 두고 절대주소(오른쪽 마우스로 클릭해 복사해둔 그림(사진)의 바로가기)를 붙여넣기

(단축코드 Ctrl-V 도 가능)합니다.

 

가로 그림의 적당한 크기 조정 예: 높이 height=450 width=600,  자는 임의 가로 그림 예로 resize 지정할 때.

세로 그림의 적당한 크기 조정 예 높이 height=600 width=450,  숫자는  임의 세로 그림 예로 resize 지정할 때.

 

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

주제 B. 음악(동영상) 파일을 링크하기

주의: Tag 내용(link 포함)을 작동시키기 위해서는 문서 내용이 html 상태에서 작성되어야 합니다.

또한 사진(그림)이나 음악, 동영상 사용 시 저작권 관련 유의하셔야 할 것입니다.

, 첨부 파일의 이름은 한글이나 특수 문자를 피하고 영문자로 하는 것이 좋습니다.

(어떤 사이트의 경우 링크시 잘 읽어 보지 못하는 수도 있음)

 

음악이나 동영상의 경우 대개 타 사이트에 있는 자료를 링크하는 것이 일반적일 것입니다.

여기에서는 자신이 적당한 인터넷 공간에 첨부자료로 올려놓은 다음, 그것을 링크하는 것에 대한 설명입니다.

 

준비작업: 일단은 첨부파일로 적당한 인터넷 공간에 첨부자료로 노래(동영상)를 올려놓습니다.

링크 작업: 그 올려놓은 자료(파일)를 글을 작성하려는 게시판 글쓰기에서 해당 주소를 링크(연결) 시킵니다.

 

구체적인 방법은 다음과 같습니다.

 

1) 준비 작업을 한 후 그 게시판에 첨부된 파일의  URL 주소(절대주소)를 알아냅니다.

    (첨부파일에 마우스 오른쪽 버튼을 누르면 바로가기 복사(T)가 있습니다.

    그걸 선택하면 첨부파일의 주소가 복사됩니다)

2) 이제는 링크 시킬 차례입니다.

    동영상이나 음악, flash 등의 파일을 링크할 때는 embed 라는 tag(태그)를 사용합니다.

 

   음악이나 동영상 기본 형식 (HTML 모드)

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

   <embed> src="주소tag에 필요한 옵션</embed>

 

   설명:  ? 위치에는 tag가 찾아 주소(link할 자료의 절대주소)를 입력하며,

             ?를 지우고 그 위치에 자료의 절대주소를 입력합니다.

             주소는 주소처럼 큰 따옴표 “ ” 속에 넣거나 작은따옴표 ‘ ’ 속에 기록합니다.

 

여러 가지 옵션들이 있지만 몇 가지 옵션과 간단한 설명을 보겠습니다.

 

링크 하기위해서는 src= “URL 주소(절대주소)src="링크하고자 하는 파일의 URL 주소"

플레이어를 나타내거나 숨기기 위해서는 hidden=

자동으로 플레이가 되게 하기 위해서는 autostart=

플레이 횟수를 결정하는 것은 loop=

 

그 외 다른 tag 옵션은 설명을 생략합니다.

 

실제로 사용해 보면

<embed src="http://www.XXXX.com/YYYY.mp3" hidden="true" autostart="true" loop="3"></embed>

이런 식으로 쓸 수 있습니다. (띄어쓰기에 유의 하십시오)

 

설명:  www.XXXX.com 사이트에 있는 YYYY.mp3 라는 곡을

       플레이어는 숨겨서, 자동으로, 3번 반복해서 플레이하라 는 의미가 되겠습니다.

 

그러면 문제는 www.XXXX.com 사이트에 있는 YYYY.mp3 라는 곡의 위치를 어떻게 알아내느냐 하는 것인데

이미 앞서 URL 주소(절대주소) 찾기에서 설명해 드렸죠?

 

, 미리 게시판에 올려둔 첨부파일(자료)의 바로가기 보기(T)를 참고하여 절대주소를 알아내는 것입니다.

src= “” 속에 바로가기(URL 주소)를 붙여 넣으면 되죠.

src= “” 속에 바로 뒤에 커서를 놓고 ctrl v 를 누르던지 편집메뉴에서 붙여넣기를 하면 됩니다.

 

이렇게 내용(html 문서)을 완성하고 나서(게시판에 따라서 edit mode로 전환하면 tag 가 완성된 모습을 볼 수도 있음)

저장한 다음, 해당 게시물이 제대로 tag가 되는지(link실행이 잘 되는 지) 확인해 보시면 되겠습니다.

 

-음악이나 동영상을 자료실에 올린 후 링크하기- 요약 -

음악이나 동영상의 경우 대개 타 사이트에서 해당 자료를 링크하는 것이 일반적일 것입니다.

여기에서는 자신이 적당한 인터넷 공간에 첨부자료로 올려놓은 다음, 그것을 링크하는 것에 대한 설명 요약입니다.

 

1.우선 음악(동영상) 파일이 자기 컴퓨터(하드디스크)에 저장되어 있어야 합니다.

2. 먼저 적당한 인터넷 게시판(공간)에 첨부파일의 찾아보기를 눌러 음악(동영상)파일 위치를 찾아 올립니다.

3. 첨부파일이 있는 게시판 화면에서 첨부파일 위치에 마우스를 대고 오른쪽 클릭하여 바로가기 복사(T)

     즉 URL 주소 복사를 누릅니다.

    (, 해당 자료의 절대주소가  full로 다 보이는 것이 아니라 생략되는 수도 있으므로 확인 요함)

4. 이제 게시판 글쓰기에서 html 작성 상태에서 내용과 제목 쓰고 완료를 누릅니다.

5. 자기가 쓴 글을 다시 클릭하여 내용(해당 게시물이 제대로 tag가 되는지)을 확인해 봅니다.

 

참고로

첨부파일로 올릴 때 보통의 서버(SMTP POP3)는 그 용량을 2~4MB 정도로 제한하는 경우가 있습니다.

MP3 는 간단한 것도 2메가 넘는 경우가 많으며, 동영상의 경우 첨부용량이 훨씬 크고 저작권 관련 등으로 youtube

올린 후 link하는 경우가 많습니다.

+ Recent posts