사진위에 글씨 넣는 법

인터넷에서 사진과 글자는 서로 다른것이지요. 흔히 글자로 된 내용을 "텍스트(TEXT)" 라고 하는데, .GIF 나 .JPG 등의 사진이나 그림은 이와는 조금 다르게 취급됩니다. 1) 일단은 사진위에 글을 "그리면" 원하시는 결과를 얻을수 있습니다. - 흔히 "그림판" 이라고 하는 것들이 TEXT 넣기 기능이 다 있기 때문에, 그림위에 글자를 그리면 간단히 해결되는데, 문제는 그림은 복사 붙여넣기... 이런식으로 해도 그림 그 자체일뿐, 아래한글이나 워드로 가져가서 쓴다거나, 또는 나중에 서체를 변경한다거나 하는 일이 불가능하죠. 그야말로 그림일뿐. 2) 사진을 따로 준비하고, 그 사진을 보여주면서 그위에 글자들이 얹히도록 하는 테크닉을 쓰면, 비슷한 효과를 얻을수 있습니다. 이렇게 써 넣은 글자들은 복사해서 붙여넣기 하면, 글자들만 따로 뽑아내지기 때문에, 나중에 글꼴도 변경할 수 있고, 색깔도 변경할 수 있는등... 여러가지 면에서 이 방식이 널리 사용되죠. <DIV style="BORDER-RIGHT: dimgray 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: dimgray 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 13px; PADDING-BOTTOM: 8px; BORDER-LEFT: dimgray 1px solid; COLOR: #333; WORD-BREAK: break-all; LINE-HEIGHT: 140%; PADDING-TOP: 8px; BORDER-BOTTOM: dimgray 1px solid; FONT-FAMILY: gulim,dotum,seoul,arial,verdana; BACKGROUND-COLOR: #eee">SAMPLE</DIV> 이 그림을 보시죠. 그림안에 글이 들어있기는 하지만, 그림이랑 "합체" 가 되어서, 이미 글이라기 보다는 그림의 일부라고 해야겠지요. 저 글을 나중에 고칠수도 색깔을 바꿀수도 없습니다. <IMG height=79 alt="야후에서 좋은일을 하고 있네요.." src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F27782%2Fimg_27782_1462517_9%3F1103446670.gif" width=110 border=1></A> 그렇다면 이번엔, 저 그림처럼 사진안에 "글을 그려" 합체시키지 않고, 사진을 배경으로 사용하면서 TEXT 상태로 글을 사진위에 단순히 얹어놓는 방법을 보기로 할까요 ? <DIV style="BORDER-RIGHT: dimgray 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: dimgray 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 13px; PADDING-BOTTOM: 8px; BORDER-LEFT: dimgray 1px solid; COLOR: #333; WORD-BREAK: break-all; LINE-HEIGHT: 140%; PADDING-TOP: 8px; BORDER-BOTTOM: dimgray 1px solid; FONT-FAMILY: gulim,dotum,seoul,arial,verdana; BACKGROUND-COLOR: #eee"><TABLE> 태그를 이용한, 사진위에 글쓰기  </DIV> <IMG alt="-= IMAGE 3 =-" src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F27782%2Fimg_27782_156396_2%3F20040205004707.gif" border=0>. 사진 or 그림을 블로그에 미리 첨부해 둔다 그 위에 글을 쓸 사진이나 그림을 찾아보기해서 블로그에 첨부해 넣습니다. - 이때, 별도의 비공개 폴더를 만들어 그쪽에 사진만 따로 첨부해 놓고,    그 사진의 URL 주소를 알아와서  쓸 수도 있고, - 야후 편집기로 사진을 첨부해서 저장하고, 곧바로 그 글을 수정하면서,   HTML 소스편집 아이콘을 눌러, 사진이 표시된 부근의 HTML 만 수정하여   쓸 수도 있습니다. ( 직접 둘다 해보시길 .. )   오래된 사진첩에서 한, 전우의 사진을 예제로 들어보겠습니다.^^   <IMG hspace=5 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F1453440%2Fimg_1453440_1463160_0%3F1106232866.jpg" vspace=5 border=0>    ( 사진의 출처 : 노루만디 戰史 자료집 - 요원은 본디 저렇게 안경처리함) <IMG alt="-= IMAGE 4 =-" src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F27782%2Fimg_27782_156396_3%3F20040205004707.gif" border=0>. 사진위에서 마우스 오른쪽 단추를 눌러, 속성보기를 한다 사진이 인터넷에 저장되면, 속성보기를 해서, 저장된 사진의 가로세로 크기를 따로 알아 놓고, URL 을 마우스로 긁어 복사합니다. <IMG alt="-= IMAGE 10 =-" src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F27782%2Fimg_27782_1463022_9%3F1106234139.jpg" border=0> 인터넷에 저장된 사진의 URL 과 가로 x 세로 크기를 알면, 모든 작업은 끝난것이나 마찬가지 입니다. <IMG alt="-= IMAGE 5 =-" src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F27782%2Fimg_27782_156396_4%3F20040205004707.gif" border=0>. 사진의 크기에 꼭맞는 표를 그리고, 그 배경으로 사진을 지정한다. 표 안에는 글을 쓸 수 있으므로, 그점을 이용하는 것이죠.  야후블로그 글쓰기화면의 편집기 창에서 글을 쓸 때. 사진의 크기와 꼭 같은 크기의 표를 나타내는 HTML 태그를 써넣고, 그 BackGround 로 사진의 URL 을 지정해 주면 되겠죠. <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD> <IMG height=54 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F27782%2Fimg_27782_209138_0%3F20040304223905.gif" width=454 border=0></TD></TR> <TR> <TD width=454 background=http://kr.img.blog.yahoo.com/ybi/1/69/64/gofinds/folder/27782/img_27782_209138_1?20040304223905.gif> <TABLE cellSpacing=0 cellPadding=10 border=0> <TBODY> <TR> <TD>...어쩌구 ...저쩌구 <BODY style="FONT-SIZE: 10pt; FONT-FAMILY: 굴림"> <TABLE border=0 cellspacing=0 cellpadding=0> <TBODY> <TR>          <TD Width=가로크기 Height=세로크기 Background=사진의 URL >           글쓰는 자리...          </TD> </TR> </TBODY> </TABLE> </BODY></HTML></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD> <IMG height=30 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Ffolder%2F27782%2Fimg_27782_209138_2%3F20040304223905.gif" width=454 border=0></TD></TR></TBODY></TABLE> ( HTML 태그는 대소문자와 한자이상 띄워쓰기를 구분하지 않습니다 ) 가로크기,세로크기,사진의 URL 자리에 위에서 적어논 값을 넣고, 글을 일단 저장합니다. 이렇게 저장된 글을 다시 수정하기 해서, 글쓰는 자리 쪽에 적당히 글을 채워넣고, 일반 편집기에서 글 쓰듯이, 글자 색상을 주고, 크기를 바꾸고...등등등 의 작업을 하시면 되겠죠 ^^ <DIV style="BORDER-RIGHT: dimgray 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: dimgray 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 13px; PADDING-BOTTOM: 8px; BORDER-LEFT: dimgray 1px solid; COLOR: #333; WORD-BREAK: break-all; LINE-HEIGHT: 140%; PADDING-TOP: 8px; BORDER-BOTTOM: dimgray 1px solid; FONT-FAMILY: gulim,dotum,seoul,arial,verdana; BACKGROUND-COLOR: #eee">이상의 방법으로, 직접 샘플을 하나 작성해 보겠습니다. 위에서 설명된 그대로 이고, 글을 꾸미기 위해 색상을 주고, 굵기를 조절하고,  <MARQUEE> 태그까지 넣어서 글을 움직이게까지 해보면, <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=424 background=http://kr.img.blog.yahoo.com/ybi/1/69/64/gofinds/folder/1453440/img_1453440_1463160_0?1106232866.jpg height=269> <MARQUEE scrollAmount=1 scrollDelay=100 direction=up loop=ture> <DIV align=right>노루만디 상륙가.   <A href="http://kr.blog.yahoo.com/gofinds" target=_blank> <IMG alt=마스크ed로그 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fkr.img.blog.yahoo.com%2Fybi%2F1%2F69%2F64%2Fgofinds%2Fhome%2Fimgnick%3F1081847625" align=absMiddle border=0></A>    Floats and the   airplane which floats.   Fly fly   height height fly   our airplane   ...   </DIV></MARQUEE></TD></TR></TBODY></TABLE> 이렇게 되겠죠 ? 다른분들도 직접 한번썩 해보시기들 ... </DIV> "