이미지 위에 글올리기

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

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

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



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

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

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

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

그림속에 글을 쓸 수 있답니다

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


(img src="http://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.jpg")


이미지 태그는 img src 라고 알고 있습니다

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

img src 를 table background 라는 태그로 바꾸어 주어야 합니다

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


(table background="http://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.jpg")


img src 라는 이미지 태그를

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

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

그것은 이미지의 원래 크기 를 반드시 써 주어야 하지요

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

620 X 465라고 되어 있네요

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

width=620 height=465 로 써서

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


(table background="http://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.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://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.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://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.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://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.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://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.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://pds17.cafe.daum.net/download.
php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1?dt=
20060815113053&disk=15&grpcode=jhl1134&dncnt=N&.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)

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

안녕 하세요 컴과 태그방에 오신걸 환영합니다