우리가 사용하는 이미지는 오직 그림으로서의 역할만 하는데
테이블 이미지(배경)는 이미지 안에 글을 쓸 수 있습니다.
먼저 이미지 하나를 가지고 오겠습니다.
예) 위의 이미지는 글을 쓰는데
분위기를 살려주는 역할만 담당하지요
이 그림속에 글을 넣기 위해서는
이 그림을 배경으로 바꾸어 주어야만이
그림속에 글을 쓸 수 있답니다
그럼, 이미지 태그를 보겠습니다.
이미지 태그는 img src 라고 알고 있습니다
이 이미지 태그를 배경 태그로 바꾸려면
img src 를 table background 라는 태그로 바꾸어 주어야 합니다
그럼 태그를 바꾸어 보겠습니다
img src 라는 이미지 태그를
table background 라는 배경 태그로 바꾸었습니다
그런데 여기에서 아주 중요한 것이 있답니다
그것은 이미지의 원래 크기 를 반드시 써 주어야 하지요
등록 정보에 가서 이 이미지의 크기를 알아 보겠습니다
620 X 465라고 되어 있네요
그럼 가로는 width 라고 하고 세로는 height 라고 하니
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
이제 이것을 아까의 태그 맨 뒤에 넣어 줍시다
안녕 하세요
기초태그교실에 오신걸
환영합니다
이렇게 하시면 가장 기본인 테이블 이미지 배경 태그가
완성 되는 것입니다
음악을 넣고 싶으시면
아래에 음악 태그를 넣으시면 되지요
그럼 태그를 실행에 옮겨 보겠습니다
여기서 br은 줄바꾸기 입니다.
안녕 하세요
기초태그교실 에 오신걸
환영합니다
그림위에 글씨가 쓰여졌지요
글씨를 쓰면서 조건을 바꿔 보겠습니다.
먼저 글의 태그는 font 라고 하였지요
글씨의 크기를 4로 해 볼까요
size=4
글씨의 색깔은 그냥 핑크로 하지요
color= magenta
글씨의 모양은 바탕체로 합시다
face=바탕
자, 글자 태그를 만들어 봅시다
(font size=4 color=magenta face=바탕)
그리고 br 대신 글자태그앞에 태그를 넣겠습니다
pre태그는 자판에서 자기가 글씨를 적는대로
보여지는 소스입니다..
이제 이 태그를 아까의 태그에 넣겠습니다
안녕 하세요
기초태그교실에 오신걸
환영합니다
이해가 되지요
그럼 실행 시키겠습니다
안녕 하세요
기초태그교실에 오신걸
환영합니다
처음하고는 많이 다르지요
이제 무엇이 있을까요
글이 쓰이는 위치가 있네요
만약 가운데에 쓰고 싶으면 center 를
왼쪽에서 한칸을 띄워서 쓰고 싶으면 ul를 쓴다고 했습니다
모든것은 실습이 원칙입니다
먼저 ul 를 한번 썼을 때 변화를 볼까요
안녕 하세요
기초태그교실에 오신걸
환영합니다
안녕 하세요
기초태그교실에 오신걸
환영합니다
안녕 하세요
기초태그교실에 오신걸
환영합니다
이번에는 ul을 두번 넣어 보겠습니다.
안녕 하세요
기초태그교실에 오신걸
환영합니다
차이점이 보이지요..이런 식으로 ul 를 사용해 보십시요
다음에는 그냥 center 로 명령을 내리겠습니다
안녕 하세요
기초태그교실에 오신걸
환영합니다
center 로 명령을 하니 글자 배열이 어수선 하지요
글씨는 이런 모양으로 배열할 경우도 있고
그냥 가지런히 배열해야할 때도 있지요
그럼으로 ul 과 center 를 잘 사용해서
멋진 작품을 만드어 보세요
그럼 이번에는 맨 오른쪽에 글을 쓰는 법을 배우겠습니다
오른쪽에 글을 정렬하고 싶을 때에는 td align=right
를 쓰면 됩니다
요것도 실습을 해야겠지요
안녕 하세요
기초태그교실에 오신걸
환영합니다
자,이제 어떤 모양이 나올까요
안녕 하세요
기초태그교실에 오신걸
환영합니다
이젠 글씨를 위로 올려 볼까요..
글씨 움직이는 태그는
마퀴태그란거 잘 아시죠..
이번에는 마퀴의 기본만 잠시 보여드리죠..
그럼 결과를 볼까요..
이상 이미지위에 글씨를 직접쓰는
테이블태그에 대하여
조금이나마 여러분에게 도움이 되었으면
하는 바람으로 적어 보았읍니다..