mwultong Blog ... 프로그래밍 / 계산기

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

 
Friday, June 09, 2006

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


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


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



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



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

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

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

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


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

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




예제



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


결과:
구글 로고







관련 게시물:

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




tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

<< Home RSS 2.0 feed

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