[스크랩] 이미지 위에 글올리기 총정리

우리가 사용하는 이미지는 오직 그림으로서의 역할만 하는데

테이블 이미지(배경)는 이미지 안에 글을 쓸 수 있습니다.

먼저 이미지 하나를 가지고 오겠습니다.



예) 위의 이미지는 글을 쓰는데

분위기를 살려주는 역할만 담당하지요

이 그림속에 글을 넣기 위해서는

이 그림을 배경으로 바꾸어 주어야만이

그림속에 글을 쓸 수 있습니다.

그럼, 이미지 태그를 보겠습니다.


(img src="http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg ")
동산마술사 무지개동산 홈페이지에 있는 그림입니다.

이미지 태그는 img src 라고 합니다.

이 이미지 태그를 배경 태그로 바꾸려면

img src 를 table background 라는 태그로 바꾸어 줍니다.

그럼 태그를 바꾸어 보겠습니다


(table background="http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg  ")


img src 라는 이미지 태그를

table background 라는 배경 태그로 바꾸었습니다

그런데 여기에서 아주 중요한 것이 있습니다.

그것은 이미지의 원래 크기 를 반드시 써 주어야 합니다.

등록 정보에 가서 이 이미지의 크기를 알아 보겠습니다

620 X 465라고 되어 있네요

그럼 가로는 width 라고 하고 세로는 height 라고 하니

width=620 height=465 로 써서

아까 태그의 맨 뒤에 써 주면 되겠습니다


(table background=" http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg"
width=620 height=465)


그 다음으로

테이블 태그에는 여러 조건들이 있읍니다

예를들어, 테두리의 두께, 테두리 색깔,

칸과 칸의 간격, 칸과 내용물과의 간격등등..

그러한 조건들을 만들어

또 위의 태그에 넣어 주면

멋진 테이블 배경이 만들어 집니다.

그럼 테이블의 조건을 만들어 볼까요

물론 이러한 조건들은 여러분의 머리로 만들어야 합니다

테이블의 조건을 만들어 봅시다

먼저, 테두리의 두께 border 가 있지요

이 테두리의 두께를 만들지 않을려면 0 으로 하면 되지요

여기서는 7정도로 하겠습니다

border=7

그리고 테두리 색깔은 #9400D3 로 해 볼까요

bordercolor=#9400D3


다음에는 칸과 칸 사이의 간격cellspacing 이 있지요

여기서는 약 10정도로 해 볼까요

cellspacing=10

다음에는 칸과 내용물과의 간격cellpadding

(여기서는 테두리와 글씨와의 간격이 되겠지요..) 가 있네요

한 15정도로 해 볼까요

cellpadding=15

그럼, 이렇게 만든 내용을 정리 합시다

border=7 cellspacing=10 cellpadding=15

이제 이것을 아까의 태그 맨 뒤에 넣어 줍시다


(table background=" http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg "
width="620" height="465" border=7 bordercolor=#9400D3
cellspacing=10 cellpadding=15)
(tr)
(td)
안녕 하세요(br)
컴과 태그방에 오신걸(br)
환영합니다(br)

동산마술사
(/td)(/tr)(/table)


이렇게 하시면 가장 기본인 테이블 이미지 배경 태그가

완성 되는 것입니다

음악을 넣고 싶으시면

(/td)(/tr)(/table)아래에 음악 태그를 넣으시면 되지요

그럼 태그를 실행에 옮겨 보겠습니다

여기서 br은 줄바꾸기 입니다.

안녕 하세요 컴과 태그방에 오신걸 환영합니다 동산마술사

 

그림 위에 글씨가 쓰여졌지요

글씨를 쓰면서 조건을 바꿔 보겠습니다.

먼저 글의 태그는 font 라고 하였지요

글씨의 크기를 4로 해 볼까요

size=4

글씨의 색깔은 그냥 핑크로 하지요

color= magenta

글씨의 모양은 바탕체로 합시다

face=바탕

자, 글자 태그를 만들어 봅시다

(font size=4 color=magenta  face=바탕)

그리고 br 대신 글자태그앞에 (pre)태그를 넣겠습니다

pre태그는 자판에서 자기가 글씨를 적는대로

보여지는 소스입니다..

이제 이 태그를 아까의 태그에 넣겠습니다


(table background=" http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg"
width="620" height="465" border=7 bordercolor=#9400D3
cellspacing=10 cellpadding=15)
(tr)
(td)
(pre)(font size=4 color=magenta face=바탕)
안녕 하세요
컴과 태그방에 오신걸
환영합니다

동산마술사
(/td)(/tr)(/table)


이해가 되지요

그럼 실행 시키겠습니다

 

안녕 하세요 컴과 태그방에 오신걸 환영합니다 동산마술사

처음하고는 많이 다르지요

이제 무엇이 있을까요

글이 쓰이는 위치가 있네요

만약 가운데에 쓰고 싶으면 center 를
왼쪽에서 한칸을 띄워서 쓰고 싶으면 ul를 쓴다고 했습니다

모든것은 실습이 원칙입니다

먼저 ul 를 한번 썼을 때 변화를 볼까요

(table background=" http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg "
width="620" height="465" border=7 bordercolor=#9400D3
cellspacing=10 cellpadding=15)
(tr)
(td)
(pre)(font size=4 color=magenta face=바탕)(ul)
안녕 하세요
컴과 태그방에 오신걸
환영합니다
(/td)(/tr)(/table)

 

안녕 하세요 컴과 태그방에 오신걸 환영합니다 동산마술사

 

 

(table background=" http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg"
width="620" height="465" border=7 bordercolor=#9400D3
cellspacing=10 cellpadding=15)
(tr)
(td)
(pre)(font size=4 color=magenta face=바탕)(ul)(ul)
안녕 하세요
컴과 태그방에 오신걸
환영합니다
(/td)(/tr)(/table)

이번에는 ul을 두번 넣어 보겠습니다.

안녕 하세요 컴과 태그방에 오신걸 환영합니다 동산마술사

 

 

 

차이점이 보이지요..이런 식으로 ul 를 사용해 보십시요

다음에는 그냥 center 로 명령을 내리겠습니다

안녕 하세요 컴과 태그방에 오신걸 환영합니다 동산마술사

 

 

center 로 명령을 하니 글자 배열이 어수선 하지요

글씨는 이런 모양으로 배열할 경우도 있고

그냥 가지런히 배열해야할 때도 있지요

그럼으로 ul 과 center 를 잘 사용해서

멋진 작품을 만드어 보세요

그럼 이번에는 맨 오른쪽에 글을 쓰는 법을 배우겠습니다

오른쪽에 글을 정렬하고 싶을 때에는 td align=right

를 쓰면 됩니다

요것도 실습을 해야겠지요

(table background=" http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg "
width="620" height="465" border=7 bordercolor=#9400D3
cellspacing=10 cellpadding=15)
(tr)
(td align=right)
(pre)(font size=4 color=magenta face=바탕)
안녕 하세요
컴과 태그방에 오신걸
환영합니다
(/td)(/tr)(/table)

자,이제 어떤 모양이 나올까요

안녕 하세요 컴과 태그방에 오신걸 환영합니다 동산마술사

 

이젠 글씨를 위로 올려 볼까요..
글씨 움직이는 태그는
마퀴태그란거 잘 아시죠..
이번에는 마퀴의 기본만 잠시 보여드리죠..

(table background="http://www.rainbowhill.co.kr/new/data/file/board3/sunsets_003.jpg "
width=620 height=465 border=7 bordercolor=#9400D3
cellspacing=10 cellpadding=15)
(tr)
(td)
(marquee direction=up scrdldelay=1 scrollamount=3)
(SPAN style="COLOR:333333;FILTER:shadow(color=green);height:15px")
(pre)(font color=ffffff face="바탕" size=3)(ul)

안녕 하세요

컴과 태그방에

오신걸 환영합니다.

♡
동산마술사
♥



(/marquee)(/SPAN) 
(/td)(/tr)(/table)
그럼 결과를 볼까요..

 

안녕 하세요 컴과 태그방에 오신걸 환영합니다. ♡ 동산마술사 ♥

 

이상 이미지위에 글씨를 직접쓰는
테이블태그에 대하여
조금이나마 여러분에게 도움이 되었으면
하는 바람으로 적어 보았읍니다..


PS: 글 내용중 (  ) 는 <  > 를 대신한것입니다...

맨 밑의 이미지를 복사해 가져가서 [HTML]로 붙어넣기하여

글과 이미지를 바꾸는 연습을 해 보세요.

위의 설명을 한꺼번에 알게 될 것입니다. 동산마술사

 

 

출처 : 너에게 편지를

글쓴이 : 동산마술사 원글보기

메모 :