컴퓨터 뉴불펜 그림 링크 설명서
2008.10.16 01:01
1. 편집기(에디터)에서 태그없이 바로 그림 URL로 그림 넣기
글쓰기를 하시면 아래그림의 아이콘을 클릭하시면 대륙운영자의 엠팍처럼 파일의 위치를 넣는 창이 나타납니다.
외부링크기이기때문에 '주소' 칸에 외부 링크의 URL을 입력하세요. 그럼 조금있으면 외부 링크 이미지가 조그맣게
위의 회색바탕 부분에 나타납니다. (위 그림에서는 저희집 고양이가 나타났죠)
(그 위 칸의 '파일' 부분은 '찾아보기'로 자기 컴퓨터 내에 있는 파일을 우리 사이트로 올리는 용도입니다)
그런 다음에 정렬방식을 선택한 후에 확인 누르세요.
그러면 입력한 그림이 편집기 (에디터에 나타날 겁니다) 그 다음에는 워드하시듯이 나머지 문구 넣으세요.
그림을 더 추가하시려면, 위의 과정을 반복하면 됩니다. 상단의 '그림넣기' 아이콘을
클릭하고, URL 넣고, 확인하고...
2. HTML의 <IMG> 태그 이용하기
자, 다음은 HTML을 조금 아시는 분이 <IMG> 태그를 이용하는 방법입니다.
아래 그림의 맨 하단을 보세요. '에디터 상태'라는 부분이 'TEXT'라고 되어 있죠.
원래는 'HTML'로 되어 있는데, 'TEXT'로 바꾼 상태입니다.
'TEXT'로 바뀌어진 상태에서 편집기 창에다 <IMG src="http://로 시작하는 URL"> 형식의
<IMG> 태그를 입력하시면 됩니다.
자, HTML 태그를 입력했으니 제대로 나오는지 확인해봐야겠죠.
이제 아래 그림처럼 '에디터 상태'를 'HTML'로 바꿉니다.
그림이 들어간 걸 확인할 수 있죠. 그 다음에 평소 편집기 사용하듯이 눈에 보이는 대로 사용하시면 됩니다.
자, 이제 링크 마구마구 거세요. 대륙운영자의 엠팍에다가 파일 올려놓고 여기다가 링크거는 방법도 있겠군요.
3. 자기 컴퓨터의 파일을 베팍의 외부사이트에 올려놓고는 링크 걸기
여태까지는 이미 인터넷 상에 올려져 있는 그림들을 링크하는 법이었습니다. 그럼
현재 자기 컴퓨터에 있는 자기만의 파일을 올리는 법은?
물론 간단하게 위의 예제처럼 글쓰기 맨 밑에 있는 '파일첨부' 기능을 이용하실 수
있습니다. 잘 모르시는 분들은 저걸 쓰시면 간편해서 좋습니다.
하지만!!! 저 기능은 우리 사이트 내부에 많은 일을 시키게 되어 사이트를 느리게 만들고,
비용을 많이 나가게 하는 부작용이 있습니다. (전문용어로 트래픽이 늘어난다라고
합니다.)
이에 '이미지업로드(외부)' 기능을 이용하는 법을 설명드리겠습니다.
이 방법은 다소 불편하지만, 우리 사이트의 트래픽을 줄여서 모두들 쾌적한 베팍생활을
하게 만드는 장점이 있습니다. 조금 어렵더라도 한 번 배워두시면 우리 모두에게 도움이
됩니다. 배웁시당~~~
그럼 시작합니다. 일단은 자기의 컴퓨터에 그림 파일이 있어야겠지요.
그 다음에는 아래 그림을 봐주세요.
'이미지업로드 (외부)' 옆에 있는 '찾아보기' 버튼을 클릭해서 자기 컴퓨터에 있는
이미지 파일을 선택합니다.
자, 파일을 선택하고 '열기' 버튼을 누르면 아래 그림처럼 옆의 회색칸에 그림 파일의 위치가 입력된 상황으로 바뀝니다.
(그림에서는 E: 드라이브에 있는 샤로 사진.jpg 라는 파일로 선택됐죠)
이제 동그라미 친 Upload 버튼을 누르세요.
그러면 아래 그림과 같이 새로운 창 (혹은 탭)이 하나 뜨게 됩니다. 여기가 바로
우리가 그림을 올린 외부 사이트입니다.
무슨 암호와 같은 것이 잔뜩 있고, 중간에 제가 올린 그림 (샤로 그림이져) 파일의 Thumbnail(요약 이미지)이 보이죠.
여기에서 중요하게 볼 것은 붉은 색으로 표시한 밑에서 두 번째 칸의 'Hotlink for Websites'라는 부분입니다.
바로 우리가 방금 올린 이미지의 태그가 담겨 있습니다.
해당 칸을 클릭하면 전체가 선택됩니다. Ctrl + C로 복사하세요. 그런 후에 메모장을 열어 붙여넣기 (Ctrl + V)를 하면
아래와 같은 태그가 나타납니다.
위의 태그들중 우리에게 필요한 건 저 URL 입니다. 즉, 맨 처음에 나타나는 <IMG SRC="">의
따옴표 안에 들어 있는 http:// 로 시작되는 부분이죠. 저것만 다시 복사해서는 이 글의 첫번째 방법으로 배운
URL 로만 링크걸기를 써도 되겠죠? 기억이 안난다 싶으면 아래 그림 보세요.
위는 그 예제입니다. (오로지 <IMG SRC="">의 따옴표 안에 들어 있는 http:// 로 시작되는 부분만 넣으셔야 합니다.)
그럼 이번에는, 2번 방법과 같이 태그를 직접 넣는 법을 해볼까요? 아래 그림을 봐주세요.
에디터 상태는 'TEXT'로 바꿔주셔야 합니다. 그런 다음에 외부 사이트에서 복사했던 전체 태그를 다 넣습니다.
처음 외부 사이트에서 복사한 걸 그대로 붙여넣기 한 후에 에디터 상태를 'HTML'로 바꿔 보세요.
아래 그림처럼 미리보기가 됩니다.
복사한 그대로의 전체 태그를 그대로 사용하면 붉은 색 표시처럼 ImageShack 이라는 외부 사이트 링크도 동시에 걸게 되죠.
요 부분 없이 하려면 어떻게 하면 될까요? 맨 처음 나타나는 <IMG 로 시작해서 alt="Image Hosted by ImageShack.us"> 까지
복사하세요. 뒤의 </a><br/> 이후는 다 없애는 거죠. 아래 그림처럼요.
자, 위의 그림 보면 <IMG 로 시작해서 alt="Image Hosted by ImageShack.us">로 끝나는 단 한 줄만 남겼습니다.
이 태그의 결과는 아래와 같습니다.
위에 있던 예제와 같은 Free Image Hosting at ImageShack 라는 문구의 링크가 없어졌네요.
어느 방식을 사용할 것인가는 각자의 마음입니다. 그림 링크 사용에 도움이 되면 좋겠네요.
1차 개정판은 여기까지입니다.
다음 개정판때에는 동영상 올리는 방법이 될 것 같습니다. 집필(
) 시간은 좀 더 걸리겠네요.
글쓰기를 하시면 아래그림의 아이콘을 클릭하시면 대륙운영자의 엠팍처럼 파일의 위치를 넣는 창이 나타납니다.
외부링크기이기때문에 '주소' 칸에 외부 링크의 URL을 입력하세요. 그럼 조금있으면 외부 링크 이미지가 조그맣게
위의 회색바탕 부분에 나타납니다. (위 그림에서는 저희집 고양이가 나타났죠)
(그 위 칸의 '파일' 부분은 '찾아보기'로 자기 컴퓨터 내에 있는 파일을 우리 사이트로 올리는 용도입니다)
그런 다음에 정렬방식을 선택한 후에 확인 누르세요.
그러면 입력한 그림이 편집기 (에디터에 나타날 겁니다) 그 다음에는 워드하시듯이 나머지 문구 넣으세요.
그림을 더 추가하시려면, 위의 과정을 반복하면 됩니다. 상단의 '그림넣기' 아이콘을
클릭하고, URL 넣고, 확인하고...
2. HTML의 <IMG> 태그 이용하기
자, 다음은 HTML을 조금 아시는 분이 <IMG> 태그를 이용하는 방법입니다.
아래 그림의 맨 하단을 보세요. '에디터 상태'라는 부분이 'TEXT'라고 되어 있죠.
원래는 'HTML'로 되어 있는데, 'TEXT'로 바꾼 상태입니다.
'TEXT'로 바뀌어진 상태에서 편집기 창에다 <IMG src="http://로 시작하는 URL"> 형식의
<IMG> 태그를 입력하시면 됩니다.
자, HTML 태그를 입력했으니 제대로 나오는지 확인해봐야겠죠.
이제 아래 그림처럼 '에디터 상태'를 'HTML'로 바꿉니다.
그림이 들어간 걸 확인할 수 있죠. 그 다음에 평소 편집기 사용하듯이 눈에 보이는 대로 사용하시면 됩니다.
자, 이제 링크 마구마구 거세요. 대륙운영자의 엠팍에다가 파일 올려놓고 여기다가 링크거는 방법도 있겠군요.
3. 자기 컴퓨터의 파일을 베팍의 외부사이트에 올려놓고는 링크 걸기
여태까지는 이미 인터넷 상에 올려져 있는 그림들을 링크하는 법이었습니다. 그럼
현재 자기 컴퓨터에 있는 자기만의 파일을 올리는 법은?
물론 간단하게 위의 예제처럼 글쓰기 맨 밑에 있는 '파일첨부' 기능을 이용하실 수
있습니다. 잘 모르시는 분들은 저걸 쓰시면 간편해서 좋습니다.
하지만!!! 저 기능은 우리 사이트 내부에 많은 일을 시키게 되어 사이트를 느리게 만들고,
비용을 많이 나가게 하는 부작용이 있습니다. (전문용어로 트래픽이 늘어난다라고
합니다.)
이에 '이미지업로드(외부)' 기능을 이용하는 법을 설명드리겠습니다.
이 방법은 다소 불편하지만, 우리 사이트의 트래픽을 줄여서 모두들 쾌적한 베팍생활을
하게 만드는 장점이 있습니다. 조금 어렵더라도 한 번 배워두시면 우리 모두에게 도움이
됩니다. 배웁시당~~~
그럼 시작합니다. 일단은 자기의 컴퓨터에 그림 파일이 있어야겠지요.
그 다음에는 아래 그림을 봐주세요.
'이미지업로드 (외부)' 옆에 있는 '찾아보기' 버튼을 클릭해서 자기 컴퓨터에 있는
이미지 파일을 선택합니다.
자, 파일을 선택하고 '열기' 버튼을 누르면 아래 그림처럼 옆의 회색칸에 그림 파일의 위치가 입력된 상황으로 바뀝니다.
(그림에서는 E: 드라이브에 있는 샤로 사진.jpg 라는 파일로 선택됐죠)
이제 동그라미 친 Upload 버튼을 누르세요.
그러면 아래 그림과 같이 새로운 창 (혹은 탭)이 하나 뜨게 됩니다. 여기가 바로
우리가 그림을 올린 외부 사이트입니다.
무슨 암호와 같은 것이 잔뜩 있고, 중간에 제가 올린 그림 (샤로 그림이져) 파일의 Thumbnail(요약 이미지)이 보이죠.
여기에서 중요하게 볼 것은 붉은 색으로 표시한 밑에서 두 번째 칸의 'Hotlink for Websites'라는 부분입니다.
바로 우리가 방금 올린 이미지의 태그가 담겨 있습니다.
해당 칸을 클릭하면 전체가 선택됩니다. Ctrl + C로 복사하세요. 그런 후에 메모장을 열어 붙여넣기 (Ctrl + V)를 하면
아래와 같은 태그가 나타납니다.
위의 태그들중 우리에게 필요한 건 저 URL 입니다. 즉, 맨 처음에 나타나는 <IMG SRC="">의
따옴표 안에 들어 있는 http:// 로 시작되는 부분이죠. 저것만 다시 복사해서는 이 글의 첫번째 방법으로 배운
URL 로만 링크걸기를 써도 되겠죠? 기억이 안난다 싶으면 아래 그림 보세요.
위는 그 예제입니다. (오로지 <IMG SRC="">의 따옴표 안에 들어 있는 http:// 로 시작되는 부분만 넣으셔야 합니다.)
그럼 이번에는, 2번 방법과 같이 태그를 직접 넣는 법을 해볼까요? 아래 그림을 봐주세요.
에디터 상태는 'TEXT'로 바꿔주셔야 합니다. 그런 다음에 외부 사이트에서 복사했던 전체 태그를 다 넣습니다.
처음 외부 사이트에서 복사한 걸 그대로 붙여넣기 한 후에 에디터 상태를 'HTML'로 바꿔 보세요.
아래 그림처럼 미리보기가 됩니다.
복사한 그대로의 전체 태그를 그대로 사용하면 붉은 색 표시처럼 ImageShack 이라는 외부 사이트 링크도 동시에 걸게 되죠.
요 부분 없이 하려면 어떻게 하면 될까요? 맨 처음 나타나는 <IMG 로 시작해서 alt="Image Hosted by ImageShack.us"> 까지
복사하세요. 뒤의 </a><br/> 이후는 다 없애는 거죠. 아래 그림처럼요.
자, 위의 그림 보면 <IMG 로 시작해서 alt="Image Hosted by ImageShack.us">로 끝나는 단 한 줄만 남겼습니다.
이 태그의 결과는 아래와 같습니다.
위에 있던 예제와 같은 Free Image Hosting at ImageShack 라는 문구의 링크가 없어졌네요.
어느 방식을 사용할 것인가는 각자의 마음입니다. 그림 링크 사용에 도움이 되면 좋겠네요.
1차 개정판은 여기까지입니다.
다음 개정판때에는 동영상 올리는 방법이 될 것 같습니다. 집필(
) 시간은 좀 더 걸리겠네요.
