• Q&A
  • 회원가입
  • 로그인

[image] HTML - <img> 태그 ★ - 이미지태그 (= img태그) ※ 이미지 일부 자르기, ※ 링크 허버 시, 이미지 노출/표시/보이기/보이게

8,339  
목차
  1. <img> 예제 - 이미지 추가
  2. <img> 정의
  3. <img> 구문
  4. <img> 속성
  5. <img> 예제 - src 속성 제외한 나머지 속성 제거 정규표현식
  6. <img> 예제 - 이미지 엑박해결
  7. <img> 예제 - 이미지 일부 자르기
  8. <img> 예제 - div 안 이미지가 상자 꽉 차게
  9. <img> 예제 - 기본 확대 + 마우스 오버 시 확대
  10. <img> 예제 - 링크 허버 시, 이미지 노출

 

<img> 예제 - 이미지 추가 

 

<img src="http://cfile10.uf.tistory.com/original/243DB6495275DBA920EB23" alt="홈짱닷컴 (homzzang.com)" height="42" width="42">


결과 보기

※ 원래 이미지 주소는 jpg, gif 등 형식이나, 티스토리 경우엔 이미지 확장자 없이 사용됨.
 

<img> 정의

 

이미지 추가

 


 

1. 
웹페이지에 이미지를 직접 넣는 게 불가능해, 
<img src="이미지 주소" alt="이미지 대체 문구"> 형식처럼 링크로 넣음.

타 웹문서로 링크를 걸 때는 
아래처럼 <a> 태그 시작 태그와 종료 태그 사이에 <img> 태그를 넣으면 됨.

<a href="타 웹페이지 주소"><img src="이미지 주소" alt="이미지 대체 문구"></a>

2. 
반응형 이미지
이미지는 해당 이미지 크기 만큼의 공간을 차지하며, width와 height 속성을 이용해 크기를 조정 가능.
만약, 가로 길이와 세로 길이 중 하나만 조정하면, 나머지 값은 정의된 값에 비례해 자동으로 증감함.
즉,  선택자 {width: 100%; height:auto; max-width:○○px, min-width:○○px}


※ 주의 태그 요소와 스타일시트의 정의가 다른 경우, 스타일시트의 값이 우선 적용됨.

<style type="text/css">
img {width:100%; height:auto;}
</style>

<img src=http://cfile7.uf.tistory.com/image/2411FE4C51B59E391B92F4 border=0 width=1000px height=500px>

결과보기


3. 
이미지 태그는 src와 alt 두 개의 필수 속성을 지님. 

4. 
alt 속성은 이미지 태그가 안될 때 대신 보여줄 내용임, 
커서 위치시 뜨는 문구 창은 alt 속성이 아닌 title 속성 이용해야 함.

5. 
HTML5에서는 align, border, hspace, longdesc, vspace 속성을 지원 안 함.
 
6. 
HTML4.01과 HTML5에서는 종료 태그없이 사용하나, 
XHTML에서는 끝에 /를 붙여 사용해야 함. (예) <img src=" " />

 


<img> 구문

 
<img src="이미지 주소" alt="이미지 대체 문구">
     

cf. [XHTML 경우]

<img src="이미지 주소" alt="이미지 대체 문구"/>
 
 

<img> 속성

 속성  속성값
 쓰임새 
 개요
 src  URL 주소
 이미지 주소 (필수) ※  ource의 약자
 
 alt  글자
 이미지 태그 안 될 때 대신 띄울 내용 (필수). 웹접근성
 검색엔진최적화(SEO)에 도움.
 
 width  px 단위
 이미지의 가로 길이 
 
 height  px 단위
 이미지의 세로 길이 
 
 border  px 단위
 이미지 테두리의 두께 
 HTML5 : X
 align
 top(상단)
 middle (중단)
 bottom (하단)
 left (왼쪽)
 right(오른쪽) 
 이미지를 다른 요소들과의 관계에서
 어느 쪽에 정렬시킬 것인지 결정.
 HTML5 : X
 vspace  px 단위
 상단과 하단 요소로부터의 여백 
 HTML5 : X
 hspace  px 단위
 좌측과 우측 요소로부터의 여백 
 HTML5 : X
 ismap  ismap
 이미지를 서버 쪽 이미지맵으로 정의 
 
 usemap  #mapname
 이미지를 유저 쪽 이미지맵으로 정의
※ 주의
 usemap 속성값을 적을 때는 꼭, 
 mapname 앞에 붙여줘야 함. 
 
 longdesc  URL 주소
 이미지에 대한 설명이 길 경우
 별도의 문서에 적어 링크를 걸음 
 HTML5 : X
 crossorigin  anonymous
 use-credentials
 교차 출처를 허용하는 제3자 사이트로부터의
 이미지들이 캔버스와 함께 사용되도록 허용. 
 HTML5 추가
※ <img> 태그는 전역속성이벤트속성 지원.
 

<img> 예제 - src 속성 제외한 나머지 속성 제거 정규표현식

 

https://homzzang.com/b/php-1071

 

 

<img> 예제 - 이미지 엑박해결

 

https://homzzang.com/b/free-4633

 

 

<img> 예제 - 이미지 일부 자르기

방법1

 

<style>

div {

  border:1px solid red; 

  display:inline-block;

  width:25px; height:25px;

  overflow:hidden;

  position:relative;

}

img {

  position:absolute;

  left:-60%;

  top:-60%;

}

</style>

 

<div>

  <img src='https://i.imgur.com/PQNhCln.gif'>

</div>

 

결과보기


방법2 (신리 님)

 

<style>

div {

    text-align: center; 

    overflow: hidden; 

    border:1px solid red;

    display:inline-block;

    width:25px;height:25px;

}


img {

    position: relative; 

    left: 100%; 

    margin-left: -210%;

    margin-top:-50%;

}

</style>

 

<div>

  <img src='https://i.imgur.com/PQNhCln.gif'>

</div>

 

결과보기


방법3

 

CSS (clip) 속성 이용

https://homzzang.com/b/css-116

 

 

<img> 예제 - div 안 이미지가 상자 꽉 차게

 

img 태그에 display:block 속성 적용해 블럭 요소로 변경.

 


[예제]

 

<div><img src="logo.png" style="display: block" /></div>

 

몰라무서워 님 (201218) https://sir.kr/g5_tip/14975
 

<img> 예제 - 기본 확대 + 마우스 오버 시 확대

 

<style>

.img { display: block; width: 200px; height: 300px; overflow: hidden; float: left; }

.img1 img { display: block; width: 100%; height: 100%; }

.img2 img { display: block; width: 100%; height: auto; transform: scale(1.7); }

.img3 img { display: block; width: 100%; height: auto; transition: transform 0.25s ease-in-out; }

.img3 img:hover { transform: scale(1.7); }

.img4 img { display: block; width: 170%; height: auto; position: relative; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }

</style>

 

<div class="img img1"><img src="https://i.imgur.com/hYQgQKQ.jpg" alt=""></div>

<div class="img img2"><img src="https://i.imgur.com/hYQgQKQ.jpg" alt=""></div>

<div class="img img3"><img src="https://i.imgur.com/hYQgQKQ.jpg" alt=""></div>

<div class="img img4"><img src="https://i.imgur.com/hYQgQKQ.jpg" alt=""></div>


결과보기

PS. 주의: 300px 부분을 auto로 수정 시, 빨간 코드 부분 결과가 바뀜.
Big1 님 (210226) https://sir.kr/qa/401809
 

<img> 예제 - 링크 허버 시, 이미지 노출

 

<style>

.hz {padding: 100px;}

.hz a {position:relative;}

.hz a img {position:absolute; left:-60px; top:-15px; display:none; z-index:99;}

.hz a:hover img {display:block;}

</style>

 

<div class="hz">

     <a href="#">홈짱<img src="https://i.imgur.com/PQNhCln.gif"/></a>

</div>

 

결과보기



찾아주셔서 감사합니다. Since 2012