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

1. <img> 예제 - 이미지 추가
2. <img> 정의
3. <img> 구문
4. <img> 속성
5. <img> 예제 - src 속성 제외한 나머지 속성 제거 정규표현식
6. <img> 예제 - 이미지 엑박해결
7. <img> 예제 - 이미지 일부 자르기
8. <img> 예제 - div 안 이미지가 상자 꽉 차게
9. <img> 예제 - 기본 확대 + 마우스 오버 시 확대
10. <img> 예제 - 링크 허버 시, 이미지 노출
11. <img> 예제 - 이미지 무조건 한줄에 하나씩 배치
12. <img> 예제 - 이미지 주소를 base64 코드로 사용하기
13. <img> 예제 - 이미지 반응형 처리

<img> 예제 - 이미지 추가 

<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 두 개의 필수 속성을 지님. 
• alt 속성은 이미지 태그가 안될 때 대신 보여줄 내용임, 
• 커서 위치 시 뜨는 문구는 alt 속성이 아닌 title 속성 이용.
• 이미지 파일명은 한글 사용 금지. (※ 영문,숫자,언더바(_) 이용 권장)

4. 
HTML5에서는 align, border, hspace, longdesc, vspace 속성을 지원 안 함.

 

5. 
HTML4.01과 HTML5에서는 종료 태그없이 사용하나, 
XHTML에서는 끝에 /를 붙여 사용해야 함. (예) <img src=" " />

 

<img> 구문

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

     

---

cf. [XHTML 경우]

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

 

<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>

 

<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>

결과보기

<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>

 

결과보기

<img> 예제 - 이미지 무조건 한줄에 하나씩 배치

 

<style>

#hz img {display:block; margin-bottom:10px;}

</style>

 

<div>

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

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

<div>

  

<div id="hz">

  <img src="https://i.imgur.com/YrkG5xB.gif">

  <img src="https://i.imgur.com/YrkG5xB.gif">

</div>

 

결과보기

<img> 예제 - 이미지 주소를 base64 코드로 사용하기

※ https://www.base64-image.de/ 사이트에서 이미지를 base64코드로 변환 후, 아래 검은색 코드 부분에 넣으시면 됨. (※ 리눅스 터미널에서 base64 your_image.png 명령어로도 base64 코드로 변환 가능함.)

 

• <img src="data:image/png;base64,PNG_IMG_BASE64_CODE" alt="PNG 이미지">
• <img src="data:image/jpeg;base64,JPEG_IMG_BASE64_CODE" alt="JPG 이미지">
• <img src="data:image/gif;base64,GIF_IMG_BASE64_CODE" alt="GIF 이미지">

 

---

PS. 이미지주소를 base64 코드 사용 시 장단점

[장점]

• HTTP 요청 수 감소: 외부 이미지 파일을 로드하는 대신 HTML에 이미지를 인라인으로 포함시킴으로써, 웹 페이지의 HTTP 요청 수를 줄일 수 있음. 특히 작은 이미지의 경우, 외부 파일을 로드하는 것보다 Base64로 인코딩된 이미지를 사용하는 것이 효율적임.
• 페이지 로딩 속도 향상: 외부 이미지를 로드하는 대신 이미지 데이터를 HTML에 포함시키면, 웹 페이지의 로딩 속도 향상될 수 있음. 외부 이미지 파일을 다운로드하는 추가 네트워크 요청이 없어지기 때문임.
• 이미지 소스의 보호: Base64로 인코딩된 이미지를 사용하면 외부 이미지 파일의 경로를 노출시키지 않고 이미지를 사용할 수 있음. 따라서 이미지 소스의 보안을 강화할 수 있음.
• 이미지 요청을 줄임: 외부 이미지 파일을 로드하는 대신 HTML에 이미지를 인라인으로 포함시키면, 이미지 요청을 줄일 수 있음. 이는 웹 페이지의 성능을 향상시키고, 대역폭을 절약할 수 있음.

[단점]

• 이미지 용량 증가 
• 캐싱 불가 
• HTML 파일 크기 증가 

 

<img> 예제 - 이미지 반응형 처리

 

<img src="https://picsum.photos/600/600/?random" alt="랜덤이미지" style="max-width:100%;">

결과보기