CODEDRAGON ㆍDevelopment/Web, WWW
<img> 태그
· HTML문서에 이미지를 삽입하는 태그.
· 닫지 않는 태그 (빈 태그)
· 인라인태그로 이미지바로 옆에 다른 요소가 나란히 배치됩니다.
· src 속성에 이미지파일이 있는 경로를 반드시 표시해야 하며 width(가로), height(세로) 속성으로 이미지의 크기를 설정합니다.
· 이미지삽입한후 CSS 를 이용하거나 HTML5의 Canvas API를 이용해서 이미지를 꾸밀 수도 있습니다.
|
태그 |
속성 |
|
<img> 태그 |
src alt width height align border hspace vspace |
|
배경 그림과 관련된 <body> 태그 |
background bgproperties |
HTML문서에 이미지 삽입 형식
|
<img src="리소스경로" alt="설명" width="가로길이" height="세로높이"> |
|
속성 |
설명 |
|
src |
· 이미지 경로를 지정 · 이미지파일의 경로는 웹문서 파일의 위치를 기준으로 정해집니다. |
|
width |
· 너비 |
|
height |
· 높이 · width, height 속성을 사용하지 않으면 원본 이미지 크기로 출력 |
|
alt |
· 대체텍스트를추가해주는속성 · 그림을 표시하지 못할 경우 문자열만 보여주기 위해 사용 · 음성합성기술을 이용한 스크린리더(또는Text-to-speech) 소프트웨어에서 사용하는 속성 |
|
title |
· 마우스 오버시 작은 설명상자를 표시해 주는 속성 |
|
|
|
|
hspace |
· horizon space · 문서에 넣을 이미지의 가로 간격(공간)을 조절할 수 있게 하는 속성 |
|
vspace |
· vertical space · 문서에 넣을 이미지의 세로 간격(공간)을 조절할 수 있게 하는 속성 |
|
border |
· 문서에 넣을 이미지의 테두리 두께를 조절할 수 있게 하는 속성 · 0∼∞의 수치를 입력하여 테두리의 두께를 지정 · 0으로 지정하시면 이미지 주위에 테두리가 없도록 표현 · 숫자를 큰 값으로 지정할수록 테두리는 두껍게 표현 |
※ 간격: 그림과 글자사이 공간의 너비를 의미
이미지의 너비와 높이를 지정
· width 속성과 height 속성을 사용
· 이 속성을 지정해주지 않으면 기본적으로 이미지 자체의 너비와 높이로 표시됩니다.
|
<img src="이미지경로" width="너비(가로)" height="높이(세로)"> |
|
<img src="dragon.jpg" width="100" height="200"> |
이미지에 링크선 제거하기
· 이미지에 링크가 걸린 경우 링크가 걸린 이미지라는 표시로 이미지의 주위에 1픽셀로된 경계선이 기본적으로 표시되는 경우 디자인상 경계선을 보이게 하거나 숨길 필요도 있습니다.
· 이미지의 경계선을 숨기기 위해 border 속성을 0으로 지정해주면 됩니다.
|
<a href="url경로"><img src="이미지경로" border="0"></a>
|
'Development > Web, WWW' 카테고리의 다른 글
| form field의 속성, <form> 요소, <input> 태그 형식 (0) | 2017.06.09 |
|---|---|
| <form> 구성, <form> 태그의 속성 (0) | 2017.06.09 |
| <hr>, horizontal rule, 가로 선 (0) | 2017.06.08 |
| Color 프로퍼티, color속성 값 지정 (0) | 2017.06.08 |
| L V H A - link 스타일 지정 순서 (0) | 2017.06.08 |