5차 - 태크 기초 강의

그럼 오늘은 배경 그림위에 글이 올라 가게 해보겠읍니다. 배경위에 글을 나타내는건 또 다른 명령을 사용해야해요. 전번에 table에 대하여 배우셨읍니다 배경 그림은 table 이나 td 에서 주소를 넣어주면 됩니다 명령어는 background 입니다 그리고 font를 넣어주면 되죠 배운데로 한번 해보겠읍니다 위의 그림의 등록 정보를 보시고 주소를 복사 하세요 그림 소스보기 아시져?(그림위에 마우스를 놓고 우측 버튼 클릭하시고 다시 속성에 왼쪽 클릭하면 나와요) 그리고 그림의 크기도 적어 놓아야 합니다. 그런 다음 이렇게 하세요 (table background="그림 주소" "width="넓이" height="높이" border=10) 이렇게 나오겠죠 (table background=https://t1.daumcdn.net/blogfile/fs3/17_19_35_7_03Y7B_IMAGE_1_167.JPG?original&filename=167.JPG"width=518 height=362 border=10)) 그다음엔 (tr)(td)를 넣어 가로와 세로를 만들어 줍니다. 이제 부터는 글자의 명령을 넣어 줍니다 글자는 색을 흰색으로하고 크기는 3정도로 해볼까요 (font color=white size=3) 그리고 넣고 싶은 글을 여기에 넣어요 그다음엔 위의 모든 명령을 마무리 한다고 해줘야지요 명령의 역순으로 (/font)(/td)(/tr)(/table) 예를 볼까요 예제보기 정리를 해보면 이렇게 되죠 (table background="https://t1.daumcdn.net/blogfile/fs3/17_19_35_7_03Y7B_IMAGE_1_167.JPG?original&filename=167.JPG"width=518 height=362 border=10) (tr)(td) (font color=white size=3) 홀로서기 1 (br)(br) 지은이 : 서정윤(br)(br) 기다림은(br) 만남을 목적으로 하지 않아도 좋다.(br) 가슴이 아프면(br) 아픈채로,(br) 바람이 불면(br) 고개를 높이 쳐들면서,(br) 아득한 미소.(br) (/font)(/td)(/tr)(/table) 이렇게 하면 밑의 그림이 나옵니다 결과보기 홀로서기 1 지은이 : 서정윤 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로, 바람이 불면 고개를 높이 쳐들면서, 아득한 미소. 글이 움직이지 안으니 좀 그렇죠 글을 움직일려면 marquee를 넣어서 글을 위로 움직이게하고 속도는 좀 느리게 해볼까요 또 글이 너무 왼쪽으로 치우쳤죠 중앙 정열 할려면 center을 넣어 줘야 하고 글자가 너무 가느니깐 좀 굵게 할려면 b도 넣어야 겠어요 자 한번 해보죠 예제보기 최종적으로 정리 하면 이렇게 됩니다 (table background="https://t1.daumcdn.net/blogfile/fs3/17_19_35_7_03Y7B_IMAGE_1_167.JPG?original&filename=167.JPG" width="518" height="362" border=10) (tr)(td)

(marquee direction=up scrollamount=1) (font color=white size=3)(center) (b) 홀로서기 1(br)(br) 지은이 : 서정윤(br)(br) 기다림은(br) 만남을 목적으로 하지 않아도 좋다.(br) 가슴이 아프면(br) 아픈채로,(br) 바람이 불면(br) 고개를 높이 쳐들면서,(br) 아득한 미소.(br) (/b)(/center)(/font)(/marquee)(/td)(/tr)(/table)

이렇게 하여 결과를 한번 보죠

결과보기

홀로서기 1 지은이 : 서정윤 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로, 바람이 불면 고개를 높이 쳐들면서, 아득한 미소.

영상글방에 올린것과 같은 모양이 되었죠

여러분도 이제 멋지게 구상하여 한번 올려 보세요

알아 둬야 할것들
1. 바탕에 그림없이 색만 표시할때는 background를 하면 안되고
반드시 bgcolor="원하는 색"하여야하고 바탕에
그림을 넣을때는 지금 배우신대로 해야합니다

2. img src="그림주소" 하여 width와 height를 조절하면 그림
크기를 마음대로 해도 되었지만 table 의 background로할때,
다시말하면 바탕그림으로 할때는 크기조절을 하면
원본에 손상이 갑니다

예를들어 설명하죠

예제보기
원본의 그림 크기가 width=518 height=362 인데
그림의 크기를 몰라서 원본의 크기보다 크게해봅시다
width=600 height=450 쯤 해볼까요

결과보기

홀로서기 1 지은이 : 서정윤 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로, 바람이 불면 고개를 높이 쳐들면서, 아득한 미소.

크기가 늘어 나는게 아니라 중복되어 나타나지요

img src 에서는 크기를 조절하면 원본 그대로
확대 축소가 되지만 바탕으로 설정하여 확대 하면 원본이 중복되고
축소하면 그림이 축소한만큼 없어집니다
이 속성을 이용할수도 있죠.
필요 없는 부분을 잘라내는 효과를 볼수있어요
예를 보죠

예제보기
원본의 그림 크기가 width=518 height=362 인데 그림의 크기를
몰라서 원본의 크기보다 조금 작게 해봅시다
width=480 height=300 쯤 해볼까요

결과보기

홀로서기 1 지은이 : 서정윤 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로, 바람이 불면 고개를 높이 쳐들면서, 아득한 미소.

밑 부분의 배가 보기 싫군요.없에버리죠

예제보기
조금 더작게 해봅시다 width=400 height=250 쯤 해봅니다

결과보기

홀로서기 1 지은이 : 서정윤 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로, 바람이 불면 고개를 높이 쳐들면서, 아득한 미소.

예제보기
오른쪽 나무가지가 좀 지저분해보이죠.
이건 잘라내고 밑의 배를 넣어 볼까요.
그림이 옆으로 긴것보다 상하로 길게해봐요
width=300으로 줄이고 height=362 는 원본 그대로 해보죠
글 크기를 조금 줄여야겠네요

결과보기

홀로서기 1 지은이 : 서정윤 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로, 바람이 불면 고개를 높이 쳐들면서, 아득한 미소.

바로위의 예와 비교해보세요.
느낌이 전혀 틀리죠? 이렇게 응용하면 같은 그림이라도
사용하는 사람에 따라 전혀 다른 느낌으로 나타낼수있어요

지금까지는 태그의 기초를 이야기 해 드렸습니다.
울님들께서 이해 하시는데 도움이 되셨는지 몰겠네요
허접한 강의 익히신다고 5차동안 애 쓰셨습니다(_ _)
다음 강의 부터는 여태까지 배운것으로 응용[제탕 한번 해볼께요]..^^*
기초가 튼튼해야 이해가 빨라지니까
지난 5차 동안 말씀 드린것을 충분히 연습 또 연습 하셔서
태그에 도사가 되어요,,,