다음(Daum) 블로그나 카페 게시판 글쓰기 메뉴에는 삽입 이미지를 포스팅할 때 크기조절과 간단한 편집기능을 갖춘 '포토 업로더' 가 제공됩니다
★ Error & Tip
포토업로더 역시나 '어도비 플레시'로 만들어진 기능으로써, 마이크로소프트 익스플로러에 최적화 되었습니다. MS IE에서는 모니터 크기에 포토업로더 창크기가 자동으로 맟춰지는데 반해 MS IE 이외의 브라우저,특히나 크롬 브라우저에서 가장 흔히 생기는 오류는 아래 그림처럼 포토업로더 창이 모니터 창에 자동으로 맞춰지지 않고 하단이 짤려서 모니터 아래로 기능메뉴가 숨어버리는 황당한 현상이 생깁니다. (특히나 요즘의 16:9 가로폭 와이드 모니터 에서는 백발백중 생기는 현상) 이럴 때는 마우스를 포토업로더 창 경계부위에 대면, 포토업로더 창 크기 조절이 활성화 됩니다. 포토업로더 창의 경계부위를 마우스로 드레그로 잡아내려서 세로높이크기를 확~ 줄여버린 다음에, 창 하단의 기능메뉴들을 볼 수 있도록 이번엔 다시 마우스로 포토업로더 헤드를 잡아서 위로 끌어당겨 옮기면 됩니다
아래 그림설명] 글쓰기(편집)메뉴 창 맨 왼쪽에 [사진]메뉴를 클릭하면 [포토 업로더] 창이 뜨고 그 [포토 업로더]메뉴에는 크기조절은 물론 간단한 이미지 편집기능까지 제공합니다 ▼
그러나 이번 설명에서는, 이미 포스팅된 게시물의 이미지를 다른 본문 글쓰기에 복사하여 붙여넣기 할 때 원하는 크기로 수정해서 붙여넣는 방법을 설명 하고자 합니다. 특히나 썸네일 (Thumbnail) 이미지를 편집할 때 필수적인 설명 입니다.
다음(Daum) 게시판의 '글쓰기(편집기)' 기능의 '외부컨텐츠' 메뉴는 외부 동영상 삽입뿐만 아니라 '이미지 크기조절' 기능으로도 탁월합니다.
※'이미지 크기조절'은 마이크로소프트 익스플로러 브라우저에서는 마우스 드레그 만으로도 간편하게 조절이 가능합니다만, 여기엔 문제가 있습니다.
1. 눈짐작 마우스 드레그로는 가로 세로 크기 이미지의 원래비율을 정확히 유지할 수가 없습니다.
2. 더 큰 문제가 뭐냐면, 익스플로러 브라우저에서 마우스 드레그로 조절한 이미지는 여타 표준 웹 브라우저 - 즉 크롬 이나 애플 아이폰 모바일 화면에서는 왜곡되거나, 크기조절이 전혀 반영되지 않고 원래 포스팅 크기로 보여지게 됩니다 - 한마디로 '야매' 짓을 한 겁니다. 이유는? 마이크로소프트 익스플로러 브라우저 자체가 [비표준 야매 웹] 이기 때문 입니다.
따라서 가장 확실하게 이미지 크기를 조절하려면 'HTML언어' 를 사용하여 수정하는 것이 확실합니다. 이 경우 '외부컨텐츠' 메뉴에서 'HTML 소스' 교정 기능이 매우 요긴 합니다
이미지 크기 편집에 사용하는 [HTML언어] 는 아래의 딱 한줄만 기억하고 사용하면 됩니다
<img src=" " width= " 100 " height= " 100 " >
쌍따옴표 " " 3 곳에 들어가는 것이 순서대로 1) 이미지의 인터넷 주소 URL, 2) 가로크기 3) 세로크기 입니다.
상기 한줄만 긁어다가 '메모장'에 복사해두고 사용하시면 됩니다
* [HTML언어]는 '띄어쓰'기 나 '줄바꿈' 에 전혀 구애받지 않으므로 간격에 신경쓸 필요 없습니다.
* 그러나, 이미지의 인터넷 주소 (=URL) 는 띄어쓰기로 " " 쌍 따옴표 안에 집어 넣으면 안됩니다.
* 인용 따옴표는 반드시 쌍따옴표 " " 를 권장합니다. 외따옴표 ' '는 먹히는 곳도 있고 아닌 곳도 있고 불규칙하므로 권장하지 않습니다.
* 이미지의 가로' 나 세로크기 변경하려면, 쌍 따옴표 " " 안에 있는 숫자 (예: 100) 를 고쳐주면 됩니다
아래 그림과 같이 설명 시작합니다
먼저 이미지가 있는 곳 어디서나 '이미지URL' 을 추출 복사 합니다. 가장 흔하게 구하는 곳이 구글 이미지 검색에서 맘에 드는 이미지의 URL을 추출할 수 있습니다.
다음 카페의 본문 게시판 하단의 댓글칸 포스팅 이미지 에서도 [이미지 URL]을 추출할 수 있습니다.
▶댓글 이미지 가보기 - http://cafe.daum.net/knowhowup/Dnrx/203
▲ 해당 이미지에 마우스를 대고 오른쪽 버튼 클릭 메뉴에서 [이미지 URL 복사] 메뉴를 클릭 ( MS- IE 경우는 [속성] 창 하단에서 이미지 URL을 복사) 해서 우선 '메모장' 에다가 복사해 놓습니다.
이렇게 복사해온 아래의 [이미지의 URL]
을 기억해 둔
<img src=" " width=" 100 " height=" 100 " > 의 쌍따옴표 - " " - 사이에 넣으면 아래와 같습니다
<img src=" http://cfile273.uf.daum.net/R474x0/135E6B444FFDFA4221F604 " width=" 100 " height=" 100 " >
이로써, 가로 세로 100 x 100 픽셀크기의 썸네일 (Thumbnail) 이미지로 작게 압축 시키는 HTML소스 코드가 만들어 졌습니다.
★ Tip: <img src=" " width=" 100 " height=" 100 " > HTML언어를 사용하면 대형크기 이미지도 가로세로 크기 뿐만 아니라, 파일용량 크기도 비례해서 줄이기 때문에 로딩속도를 빠르게 할 수 있습니다.
반대로 원본크기가 작은 이미지를 <img src=" " width=" 1000 " height=" 1000 " > 식으로 크기를 확대 할 수도 있습니다. 그러나 원본이 작은 이미지를 크게 키우면 화질 퀄리티가 매우 나빠집니다.
1. '외부컨텐츠' 메뉴의 'html소스' 창에다가 상기에 수정한 'HTML 이미지 소스' 를 붙여 넣습니다
▼
2. 확인 버튼 클릭전에, 이미지를 포스팅할 본문위치를 정하고 마우스로 커서 표정 합니다 ( * 본문 빨간 세로bar 표식 위치)
3. '외부컨텐츠' 창 하단의 '확인'을 누르면, 본문에 마우스 커서에서 미리 정해둔 위치에 조절된 크기의 이미지가 삽입포스팅 됩니다.
▲ 위 그림처럼, 텍스트 단락 3칸 정도를 커버할 정도로 이미지를 확대조절하려면, '외부컨텐츠' 메뉴의 html 소스 입력 창에서,
<img src=" " width=" 100 " height=" 100 " >의 가로폭은 그대로 두고 세로높이 크기 수치를 height=" 300 " 으로 수정한 후에 [확인] 으로 본문에 삽입등록하면 됩니다.
▲ 위 그림처럼, 삽입 이미지를 텍스트 단락 3칸 좌측으로 정렬 시키려면
이미지를 클릭 지정한 후 '글쓰기 창' 의 메뉴에서 '좌측 줄흐름' 메뉴로 정렬시키면 됩니다
■ 아프로만 / 2013-02-03
노하우업 카페/ 멀티미디어 - http://cafe.daum.net/knowhowup/FsQ1/3