컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post IE 6의 '이미지 도구 모음' 상자를, 완전히 제거하는 메타 태그; (meta Tag) ...아스키 코드 (ASCII Code / ASCII Table), 아스키 그래픽 문자 보기[Perl] 파일의 CRC (CRC32) 값 구하기 펄 스크립트[Perl Tk] 도스창 없이, 펄 Tk 스크립트 실행하기; 명령프롬프트창 안 나오게 하기...[게임] 도스박스(DOSBox) 설정 파일, dosbox.conf 에서 설정한 것[포토샵] .png (PNG: Portable Network Graphics) 이미지란?[QnA] 하드 디스크에서 물리적 에러가 발생했는데요[QnA] 한글 유니코드 폰트 (Unicode Font) 는?비주얼베이직에서, 큰따옴표/작은따옴표 출력 [VB/VBS/VBScript/VBA][QnA] 포토샵을 실행하면 컴퓨터가 자꾸 다운(먹통)이 됩니다: Adobe Photosh...

[HTML-CSS] 그림/사진 태그인 img 태그의 속성

Friday, June 09, 2006

img 태그는 웹페이지에 그림 즉 이미지를 표현하는데 사용됩니다. 웹페이지에 그림이 없으면 무슨 맛이겠습니까. 따라서 img 태그는 가장 중요한 태그 중의 하나입니다.


img 태그의 가장 일반적인 사용법:
<img src="그림 파일 주소" alt="설명문" />



img 태그(Tag)에 사용되는 속성들



src : 웹 서버에 올린 그림 파일의 주소 즉 URL 입니다. 이미지 태그에서 가장 중요한 속성입니다.

alt : 어떤 이유로 해서 그림이 나오지 못할 때, 대신 나올 설명문입니다. IE(인터넷 익스플로러)에서는 alt 도 title처럼 말풍선을 출력하는데 이것은 표준이 아닌 것으로 알고 있습니다. 그림에 대한 말풍선이 필요하면 title를 추가해야 합니다.

title : 그림으로 마우스를 가져가면 나오는 툴팁(말풍선)에 들어갈 문자열입니다.

border : 그림의 테두리입니다. 그런데 그림에는 테두리가 없는 것이 보통이기에 일반적으로 border="0" 을 지정합니다.


width 와 height : 그림의 가로 세로 크기를 픽셀 단위로 지정하는 것입니다. 만약 그림이 나오지 않을 경우, 브라우저는 여기서 지정한 만큼의 빈 공간을 만들어 줍니다. 비교적 큰 그림의 경우, 이 속성을 지정하지 않으면 그림이 이상하게 나오는 경우가 있습니다.

또한 이 속성을, 그림의 실제 크기와 다르게 지정하면 그림의 크기를 조절할 수도 있습니다. 즉 확대/축소할 수 있지만 이러면 그림이 거칠게 나오는 단점이 있습니다.




예제



코드:
<img src="http://www.google.co.kr/logos/Logo_60wht.gif" width="176" height="77" alt="구글 로고" title="말풍선" />


결과:
구글 로고







관련 게시물:

[HTML] title(타이틀;말풍선) 속성과, img 태그의 alt 속성의, 차이점



더 읽기: HTML/CSS/JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top