본문 바로가기

웹디자인

[홈페이지제작 강좌] HTML 기초강좌(이미지 태그 2)

 5. 이미지 태그 (2)
  그림 나타내는 태그를 배웠으니 이제 배경그림 넣는 것만 배우면 되겠네요^^ 배경 넣는 것은 그냥 이미지태그보다 글자 수가 좀 더 많기는 한데....간단하기는 마찬가지 입니다.  그럼 배워보도록 하죠^^
 
 ※ 배경그럼 넣기 ( <body background="이미지주소"> )
   다시 보니깐 그냥 이미지 태그보다 더 간단하네요^^ 웹페이지나 채팅방에서 배경그림을 넣을 때 위와 같은 태그를 사용할 수 있습니다. 물론 대부분 명령어들이 바껴서 채팅방에서는 위의 태그가 적용되는 곳은 이제 별루 없을 겁니다. 대신 일반 홈페이지나 카페, 동호회, 클럽, 펫게임 등 커뮤니티에서 대문꾸시는데는 사용하실 수 있습니다.
자...옆에 돌담이미지가 있네요^^ 이 돌담 이미지의 주소를 배경그림 넣는 태그에 넣어서 태그연습장에서 실행시켜보세요. 물론 이미지 주소 보는 법을 전 페이지에서 배웠으니 하실 수 있겠져?^^ 실행을 시켜보면 온 화면이 돌담으로 가득 찰 겁니다. 바로 정해진 이미지가 배경이미지로 화면 전체에 깔려지게 되는거죠^^ 이해 되시죠? ^^  위에 태그 말구 다른 방법으로도 배경이미지를 넣을 수 있는데요...바로 <script> 태그를 이용하시면 됩니다. 그 방법은 바로 이렇게 하시면 되져.......☞ <style>BODY{background:url('이미지주소')}</Style>  실행시켜보면 앞에 태그하고 같은 기능을 한 다는 걸 알 수 있을 겁니다.
   자~! 여기서 또 한가지 신기한 틱입니다. 여러분들 인터넷 서핑하면서 이런거 자주 보셨을 겁니다. 스크롤바를 움직여도 배경이미지는 그대로 고정되어 있는 것........ 본적 있나요?^^ 못 보셨다면 ☞예제를 한번 보시져^^ 것두 태그를 이용한 건데요....이렇게 하시면 됩니다.☞<BODY BACKGROUND="배경이미지주소" BGPROPERTIES="fixed"> 음...너무 간단하네요^^

※ 배경색 넣기
(<body bgcolor=색명나 RGB코드> ) or (<style>body{background:색명;}</style>)
   이제 배경색을 넣는 방법을 배워보죠^^ 배경색넣는 것은 위에서 배운 배경이미지 넣는 방법하구 같습니다. 단지...다른게 있다면 이미지주소 대신 색명을 넣는 거죠..^^ 색명(色名)을 넣을 때는 "녹색","빨강색" 이렇게 넣는 게 아니구요....영어로 "green", "red" 이런 식으로 넣는 겁니다. 또한 RGB코드는 ☞여기를 누르면 RGB색상표가 나올 겁니다. 거기서 해당 색상의 색상코드를 선택해서 태그에 넣으면 됩니다.
 예컨데..이런 식으로 하는 거져^^☞ <body bgcolor="green"> 간단하죠?^^ 

 ※ 이미지 태그 예제
 아래 소스들은 이미지태그가 어떻게 사용되는지 보여주기 위해서 적어 놓은 것입니다. 오래된거라 실행시켜보시면 안되는 것들이 많이 있을 텐데요...... 태그가 잘못된게 아니라 서버측에서 이미지가 삭제된거니..... 착오없으시길...

<IMG SRC=http://myhome.shinbiro.com/~powerguy/ohmovie.gif>오양은 없다
<img src=http://web-pd.com/banner/soouri.gif>쉬리당~~
<IMG SRC=http://web-pd.com/banner/booking.gif>부킹에서2차까지!
<img src=http://pro.kacl.co.kr/star/stct/lee.jpg>대중 교통을 이용합시다...^^
<img src=http://pro.kacl.co.kr/star/stct/poongkum.jpg>내 마음의 풍군...^^
<img src=http://parody.co.kr/neoboard/upload/webpd/smell.gif>남자의 향기...^^
<img src=http://parody.co.kr/neoboard/upload/parody/www.parody.co.kr-적당히.gif>스타는 적당히 해요...^
<img src=http://pro.kacl.co.kr/star/stct/wangcho.jpg>왕초란?
<IMG SRC=http://web-pd.com/banner/ok-car01.gif>보험하나드실라우?
커피 광고 : <IMG src=http://www.coffeemania.co.kr/img/main_img.gif>
카스 맥주 : <IMG SRC=http://www.cass.co.kr/images/cf9906.gif>
<IMG src=http://stat.yonsei.ac.kr/~sg4030/image/d23.jpg>로미오와 줄리엣
<IMG src=http://stat.yonsei.ac.kr/~sg4030/image/d2.jpg>
<img src=http://sweetflower.co.kr/flowers/case_a.jpg>꽃다발
비트 : <img src=http://anu.andong.ac.kr/~sonata3/images/beat.gif>
<img src="http://myhome.netsgo.com/inicom/Anipuppy.gif">헥헥~~
절하는 화면 : <img src="http://hometopia.com/image/ani-a/ani-415.gif">
<IMG SRC=http://203.250.64.34/~yally/backup/image/man/사람26.gif>노래한곡트까요?
<img src=http://www-personal.engin.umich.edu/~doolyii/22-1.jpg>둘리당
노랑 머리 : <IMG src=http://www.inkorea.com/movie/199906/노랑머리/image/yhair-p5.jpg>
아이 러브 유 : <img src="http://home.taegu.net/~sanya/iloveu.gif">
토끼가 디디알 하는 화면 : <img SRC=http://members.tripod.com/elwing/images/tokiddr.gif>