![](http://webc.sayclub.co.kr/hpslot-19/hp/blob3/954/79/41/41079954/article/766413658/3/151_RESIZED.jpg)
님께서 혼자 HTML 공부하시느라 여념이,
없으시길레 궁금한게 무엇인지 여쭤 봤더니,
사진위에 글쓰는 방법이 뭔가 질문을 주셨네요.
인터넷에서 사진과 글자는 서로 다른것이지요.
흔히 글자로 된 내용을 "텍스트(TEXT)" 라고 하는데,GIF 나 .JPG 등의 사진이나 그림은 이와는 조금,
다르게 취급됩니다.
1) 일단은 사진위에 글을 "그리면"원하시는 결과를 얻을수 있습니다...
- 흔히 "그림판" 이라고 하는 것들이,TEXT 넣기 기능이 다 있기 때문에,
그림위에 글자를 그리면 간단히 해결되는데,
문제는 그림은 복사 붙여넣기...
이런식으로 해도 그림 그 자체일뿐,
아래한글이나 워드로 가져가서 쓴다거나,
또는 나중에 서체를 변경한다거나 하는 일이 불가능하죠.
그야말로 그림일뿐.
2) 사진을 따로 준비하고,그 사진을 보여주면서 그위에 글자들이,
얹히도록 하는 테크닉을 쓰면,
비슷한 효과를 얻을수 있습니다...
이렇게 써 넣은 글자들은 복사해서 붙여넣기 하면,
글자들만 따로 뽑아내지기 때문에,
나중에 글꼴도 변경할 수 있고,
색깔도 변경할 수 있는등...
여러가지 면에서 이 방식이 널리 사용되죠.
SAMPLE
이 그림을 보시죠.
그림안에 글이 들어있기는 하지만,그림이랑 "합체" 가 되어서,
이미 글이라기 보다는 그림의 일부라고 해야겠지요...
저 글을 나중에 고칠수도 색깔을 바꿀수도 없습니다...
그렇다면 이번엔,
저 그림처럼 사진안에 "글을 그려" 합체시키지 않고,사진을 배경으로 사용하면서 TEXT 상태로 글을,
사진위에 단순히 얹어놓는 방법을 보기로 할까요 ?
( 이전에
"표그리기" 쪽에서 한번 다루어진 내용이지만 ^^ )
태그를 이용한, 사진위에 글쓰기
. 사진 or 그림을 블로그에 미리 첨부해 둔다..
그 위에 글을 쓸 사진이나 그림을 찾아보기해서,
블로그에 첨부해 넣습니다.
- 이때, 별도의 비공개 폴더를 만들어 그쪽에 사진만 따로 첨부해 놓고,
그 사진의 URL 주소를 알아와서 쓸 수도 있고,
- 야후 편집기로 사진을 첨부해서 저장하고,곧바로 그 글을 수정하면서,
HTML 소스편집 아이콘을 눌러,사진이 표시된 부근의 HTML 만 수정하여,
쓸 수도 있습니다.( 직접 둘다 해보시길 .. )
오래된 사진첩에서 한, 전우의 사진을 예제로 들어보겠습니다.^^
( 사진의 출처 : 노루만디 戰史 자료집 -요원은 본디 저렇게 안경처리함)
. 사진위에서 마우스 오른쪽 단추를 눌러, 속성보기를 한다
사진이 인터넷에 저장되면, 속성보기를 해서,저장된 사진의
가로세로 크기를 따로 알아 놓고,URL 을 마우스로 긁어 복사합니다.
( 인터넷에서 복사하는 방법은
복사하기-붙여넣기에서 설명되었죠 )
인터넷에 저장된 사진의 URL 과 가로 x 세로 크기를 알면,
모든 작업은 끝난것이나 마찬가지 입니다.
. 사진의 크기에 꼭맞는 표를 그리고,
그 배경으로 사진을 지정한다.
표 안에는 글을 쓸 수 있으므로,그점을 이용하는 것이죠.
야후블로그 글쓰기화면의 편집기 창에서 글을 쓸 때.
사진의 크기와 꼭 같은 크기의 표를 나타내는 HTML 태그를 써넣고,
그 BackGround 로 사진의 URL 을 지정해 주면 되겠죠.
...어쩌구
...저쩌구
가로크기 Height=세로크기 Background=사진의 URL >
글쓰는 자리...
( HTML 태그는 대소문자와 한자이상 띄워쓰기를,
구분하지 않습니다 )
가로크기,세로크기,사진의 URL 자리에 위에서 적어논 값을 넣고,
글을 일단 저장합니다.
이렇게 저장된 글을 다시 수정하기 해서,
글쓰는 자리 쪽에 적당히 글을 채워넣고,일반 편집기에서 글 쓰듯이,
글자 색상을 주고, 크기를 바꾸고...
등등등 의 작업을 하시면 되겠죠 ^^
이상의 방법으로,직접 샘플을 하나 작성해 보겠습니다.
위에서 설명된 그대로 이고,글을 꾸미기 위해 색상을 주고,굵기를 조절하고,
![]() |
'▩ 강좌 > ▩ 기타. 종합 강좌' 카테고리의 다른 글
강좌모음 (2) | 2011.07.18 |
---|---|
1. 준비한 이미지을 꺼내주세요 (0) | 2011.07.18 |
1. 그림에 글자 넣기 2. 뽀얀 테두리 만... (0) | 2011.07.18 |
♡ 포샵 테크닉 모음 ♡ 기본 도구 익히기 포토 게시... (0) | 2011.07.18 |
[포토샵강좌] 춤추는 하트 (0) | 2011.02.22 |