※ 그림 나타나게 하는 태그( <img src="이미지주소"> )
위에 보라색으로 나타나있는 것이 이미지 태그입니다. 간단하죠?^^ 자....그럼 직접 해볼까요? ^^ 태그연습장에 아래 소스를 넣고 실행시켜 보세요....
<img src="http://tagmania.net/img/filter1.gif">
짠~! 하구 철도원 아저씨가 나타날겁니다.^^ 흠....그럼 이제 그림 나타나게 하는 태그는 다 배운 것입니다. 여기서 약간 몇 가지 속성만 알고 있으면 이미지 태그를 더 잘 할 수 있습니다. 바로 이미지의 가로세로 길이, 간격 및 테두리 두께 등을 조절 할 수 있는데요......아래 표를 보시죠^^
| 속 성 | 기 능 |
| width="수치" | 넣은 수치만큼 이미지의 가로 너비를 조정해주는 속성입니다. |
| height="수치" | 넣은 수치만큼 이미지의 세로 높이를 조정해주는 속성입니다. |
| hspace="수치" | 이미지의 가로 간격(공간)을 주는 속성입니다. 여기서 간격이란 하나의 이미지와 글자 사이의 공간의 너비를 말하는 겁니다. 이해 되실런지.....^^> |
| vspace="수치" | 이미지의 세로 간격(공간)을 주는 속성입니다. 가로간격이란 마찬가지져...^^ 이건 세로간격..^^ |
| border="수치" | 이미지의 테두리 두께를 나타내줍니다. border="0" 일 경우에는 테두리가 나타나지 않고 1부터 테두리가 나타나져...^^ |
☜ 여기 아저씨는 조금 전에 그 철도원 아저씨네요...^^ 근뎅 조금 전이랑은 약간 다르다고 느껴지지 않나요? 그져....조금 전에 태그연습장에서 했을 땐 그림 주위에 검은 테두리가 없었는데 지금껀 있져...^^ 바로 위에서 배웠던 border 속성을 이용한 것입니다. 또 다른 속성도 사용했는데....아마 관찰력이 뛰어나신 분은 아셨을 겁니다. 바로 hspace과 vspace 속성도 사용했답니다.
※ 특강 - 이미지 주소 알아내기
여기서 잠시 특강이 있겠습니다. 태그 초보분들이 맨날 질문하는 건데요...이미지 주소를 알아내는 방법에 대해서 알아보겠습니다. 먼저 위에 철도원 아저씨를 가지고 설명드리져^^ ① 마우스 커서(화살표)를 철도원아저씨 그림위에 놓는다. ② 그림 위에 마우스 커서를 올려 놓은 상태에서 오른쪽 마우스 버턴을 살포시 한번만 누른다. ③ 마우스 오른족 버턴을 누름과 동시에 메뉴표가 쫘악~ 나올 것이다. 거기서 "등록정보" 를 선택한다. ④ 그러면 바로 여러분들이 찾아 헤메던 이미지의 "주소(URL)" 이 나올 것이다. ⑤ 주소를 마우스로 블록설정해서 복사한다...그런 다음 이미지 태그에 넣는다.... ⑥ 그러면 실행가 동시에 이미지가 나올 것이다...이미지가 큰거면 조금 오래 걸릴 수도 있다....
이미지 주소보는 법은 이제 알았으니 이미지 태그 속성에 관한 아주 중요한 틱을 하나 가르켜 드리져.....우리가 보통 이미지와 글자를 같은 줄에 넣을 땐 글자와 이미지가 한줄에 같이 들어가기 때문에 이미지 옆으로 한줄 밖에 쓸 수가 없습니다. 이해가 되실런지...안되면 아래 예제를 각각 실행시켜보세요..^^
이미지 주소보는 법은 이제 알았으니 이미지 태그 속성에 관한 아주 중요한 틱을 하나 가르켜 드리져.....우리가 보통 이미지와 글자를 같은 줄에 넣을 땐 글자와 이미지가 한줄에 같이 들어가기 때문에 이미지 옆으로 한줄 밖에 쓸 수가 없습니다. 이해가 되실런지...안되면 아래 예제를 각각 실행시켜보세요..^^
| <html> <head></head> <body> <img src="http://tagmania.net/img/filter1.gif">여기에서는 이미지 옆으로 한 줄밖에 들어갈 수 없져...그래서 보기도 않좋고....웹페이지 만들때도 차지하는 공간도 많아지겠죠^^ </body> </html> |
<html> <head></head> <body> <img src="http://tagmania.net/img/filter1.gif" border="1" hspace="5" vspace="3" align="left">그러나 여기를 보면 이미지 옆으로 여러 줄이 들어갈 수 있져...그리고 이미지와 글자사이에 간격도 일정하게 있구요..그래서 보기좋게 쓰여지는 거져^^ 또한 이미지에 테두리도 있네용^^ 어때요? 방금 전보다 훨씬 낮죠?^^ </body> </html> |
어때요? 이해 되시죠?^^ 만약 속성을 모른다면 이와 같은 것 나타낼 수 없겠죠?^^ 알려줄때 외우세용^^ 다 여러분 잘 되라고 하는 거니깐.....하라고 할때 잘 따라하시길......^^ 헉... 이건 우리 엄마가 나보고 맨날 하는 소리인데...^^
그림 나타내는 태그를 배웠으니 이제 배경그림 넣는 것만 배우면 되겠네요^^ 배경 넣는 것은 그냥 이미지태그보다 글자 수가 좀 더 많기는 한데....간단하기는 마찬가지 입니다. 그럼 배워보도록 하죠^^
※ 배경그럼 넣기 ( <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> |
'그룹명 > 사회' 카테고리의 다른 글
| [스크랩] 1072. 민족지도자 이상재 선생의 외침 (0) | 2007.06.30 |
|---|---|
| [스크랩] 한자이름에서 한자만 떼어냈다 (0) | 2007.06.30 |
| [스크랩] HTML 기초강좌 - 사운드태그 (0) | 2007.06.30 |
| [스크랩] HTML 기초강좌 -기본문법태그 (0) | 2007.06.30 |
| [스크랩] HTML 기초강좌 - text태그 (0) | 2007.06.30 |