이미지 위에 글올리기 총정리

우리가 사용하는 이미지는 오직 그림으로서의 역할만 하는데 테이블 이미지(배경)는 이미지 안에 글을 쓸 수 있습니다. 먼저 이미지 하나를 가지고 오겠습니다. 예) 위의 이미지는 글을 쓰는데 분위기를 살려주는 역할만 담당하지요 이 그림속에 글을 넣기 위해서는 이 그림을 배경으로 바꾸어 주어야만이 그림속에 글을 쓸 수 있답니다 그럼, 이미지 태그를 보겠습니다. (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) 자,이제 어떤 모양이 나올까요 안녕 하세요 컴과 태그방에 오신걸 환영합니다 이젠 글씨를 위로 올려 볼까요.. 글씨 움직이는 태그는 마퀴태그란거 잘 아시죠.. 이번에는 마퀴의 기본만 잠시 보여드리죠.. (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) (marquee direction=up scrdldelay=1 scrollamount=1) (SPAN style="COLOR:333333;FILTER:shadow(color=green);height:15px") (pre)(font color=ffffff face="바탕" size=3)(ul) 안녕 하세요 컴과 태그방에 오신걸 환영합니다. ♡ ♥ (/marquee)(/SPAN) (/td)(/tr)(/table) 그럼 결과를 볼까요.. 안녕 하세요 컴과 태그방에 오신걸 환영합니다. ♡ ♥ 이상 이미지위에 글씨를 직접쓰는 테이블태그에 대하여 조금이나마 여러분에게 도움이 되었으면 하는 바람으로 적어 보았읍니다.. PS: 글 내용중 ( ) 는 < > 를 대신한것입니다... 이미지주소중 93&fileid=1?dt 는 제대로 표현이 안되네요...