5. 이미지 태그 | |
이미지 태그는 웹 제작에 있어서 가장 기본적인 태그입니다. 물론 채팅을 할때나 카페, 동호회를 만들 때도 이미지 태그는 기본이져^^ 요즘은 펫게임(ID : tagmania)하는데도 태그가 많이 쓰이던데....거기서도 가장 기본적인 태그가 이미지 태그입니다. 흠.....제가 지금까지 기본이라는 소리를 무려 3번씩이나 할 정도면 얼마나 중요한 기본태그인지 아시겠져^^ 배우기도 아주 쉽습니다. 이미지 불러오는 태그명령어와 배경그림 넣는 태그명령어 2개만 배우면 이미지 태그는 다 배웠다고 할 수 있습니다. 그럼 이제부터 배워볼까요? ^^ ※ 그림 나타나게 하는 태그( <img src="이미지주소"> ) 위에 보라색으로 나타나있는 것이 이미지 태그입니다. 간단하죠?^^ 자....그럼 직접 해볼까요? ^^ 태그연습장에 아래 소스를 넣고 실행시켜 보세요.... <img src="http://tagmania.net/img/filter1.gif"> 짠~! 하구 철도원 아저씨가 나타날겁니다.^^ 흠....그럼 이제 그림 나타나게 하는 태그는 다 배운 것입니다. 여기서 약간 몇 가지 속성만 알고 있으면 이미지 태그를 더 잘 할 수 있습니다. 바로 이미지의 가로세로 길이, 간격 및 테두리 두께 등을 조절 할 수 있는데요......아래 표를 보시죠^^
☜ 여기 아저씨는 조금 전에 그 철도원 아저씨네요...^^ 근뎅 조금 전이랑은 약간 다르다고 느껴지지 않나요? 그져....조금 전에 태그연습장에서 했을 땐 그림 주위에 검은 테두리가 없었는데 지금껀 있져...^^ 바로 위에서 배웠던 border 속성을 이용한 것입니다. 또 다른 속성도 사용했는데....아마 관찰력이 뛰어나신 분은 아셨을 겁니다. 바로 hspace과 vspace 속성도 사용했답니다. ※ 특강 - 이미지 주소 알아내기 이미지 주소보는 법은 이제 알았으니 이미지 태그 속성에 관한 아주 중요한 틱을 하나 가르켜 드리져.....우리가 보통 이미지와 글자를 같은 줄에 넣을 땐 글자와 이미지가 한줄에 같이 들어가기 때문에 이미지 옆으로 한줄 밖에 쓸 수가 없습니다. 이해가 되실런지...안되면 아래 예제를 각각 실행시켜보세요..^^
어때요? 이해 되시죠?^^ 만약 속성을 모른다면 이와 같은 것 나타낼 수 없겠죠?^^ 알려줄때 외우세용^^ 다 여러분 잘 되라고 하는 거니깐.....하라고 할때 잘 따라하시길......^^ 헉... 이건 우리 엄마가 나보고 맨날 하는 소리인데...^^ |
'웹디자인' 카테고리의 다른 글
[홈페이지제작 강좌] HTML 기본강좌 (특수문자) (1) | 2010.01.19 |
---|---|
[홈페이지제작 강좌] HTML 기본강좌 (춤추는 글자 3) (0) | 2010.01.19 |
[홈페이지제작 강좌] HTML 기본강좌 (춤추는 글자 2) (0) | 2010.01.19 |
[홈페이지제작 강좌] HTML 기본강좌 (춤추는 글자) (0) | 2010.01.19 |
[홈페이지제작 강좌] HTML 기초강좌(이미지 태그 2) (0) | 2010.01.19 |