msang48

[스크랩] 이미지위에 글올리기 (종합정리)

yjh09 2006. 8. 17. 09:28
    우리가 사용하는 이미지는 오직 그림으로서의 역할만 하는데 테이블 이미지(배경)는 이미지 안에 글을 쓸 수 있습니다. 먼저 이미지 하나를 가지고 오겠습니다. 예) 위의 이미지는 글을 쓰는데 분위기를 살려주는 역할만 담당하지요 이 그림속에 글을 넣기 위해서는 이 그림을 배경으로 바꾸어 주어야만이 그림속에 글을 쓸 수 있답니다 그럼, 이미지 태그를 보겠습니다. <img src="http://pds17.cafe.daum.net/download. php?grpid=15e3Y&fldid=2SUG&dataid=93&fileid=1&regdt= 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&regdt= 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&regdt= 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&regdt= 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&regdt= 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&regdt=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&regdt= 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&regdt= 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&regdt= 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><ul><ul> <center> 안녕 하세요 기초태그교실에 오신걸 환영합니다. ♡ ♥ </marquee></SPAN> </td></tr></table> 그럼 결과를 볼까요..
          안녕 하세요 기초태그교실에 오신걸 환영합니다. ♡ ♥
    이상 이미지위에 글씨를 직접쓰는 테이블태그에 대하여 조금이나마 여러분에게 도움이 되었으면 하는 바람으로 적어 보았읍니다..
    출처 : 너에게 편지를
    글쓴이 : 바람난 산적 원글보기
    메모 :