이미지 태그는 웹 제작에 있어서 가장
기본적인 태그입니다. 물론 채팅을 할때나 카페,
동호회를 만들 때도 이미지 태그는 기본이져^^
요즘은 펫게임(ID : tagmania)하는데도 태그가 많이
쓰이던데....거기서도 가장 기본적인 태그가
이미지 태그입니다. 흠.....제가 지금까지
기본이라는 소리를 무려 3번씩이나 할 정도면
얼마나 중요한 기본태그인지 아시겠져^^ 배우기도
아주 쉽습니다. 이미지 불러오는 태그명령어와
배경그림 넣는 태그명령어 2개만 배우면 이미지
태그는 다 배웠다고 할 수 있습니다. 그럼
이제부터 배워볼까요? ^^
※ 그림 나타나게 하는 태그( <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> |
어때요? 이해 되시죠?^^ 만약 속성을
모른다면 이와 같은 것 나타낼 수 없겠죠?^^
알려줄때 외우세용^^ 다 여러분 잘 되라고 하는
거니깐.....하라고 할때 잘 따라하시길......^^
헉... 이건 우리 엄마가 나보고 맨날 하는
소리인데...^^
|
