[html] 이미지 <img> 태그, 경로 작성 방법

이미지 태그

<img src="이미지가 위치하는 주소 또는 파일경로(파일명)" alt="이미지를 대체할 문자">

 

*파일 경로 작성 방법*

1. 절대 경로

고유한 경로를 사용. http:// https:// (file 경로는 사용하지 않음)

D:\kaite\HTML\Day3\hamster2.png

 예 ) <img src="https://www.iconfinder.com/static/img/logo/black.svg?7cfe2038c8" alt="이미지 로고">

 

2. 상대 경로 - 복습 중요***

이미지를 삽입할 HTML 문서를 기준으로 경로를 사용합니다.(보통 상대 경로를 많이 사용함)

(1) 이미지가 HTML 문서와 같은 폴더에 있는 경우 -> 파일명 또는 ./파일명 

 예 ) <img src="./hamster2.png" alt="햄스터2">

(2) 이미지가 images 하위폴더에 있는 경우 -> images/파일명 또는 ./images/파일명

(3) 이미지가 상위폴더에 있는 경우 -> ../파일명

(4) 이미지가 상위폴더 images에 있는 경우 ->../images/파일명

---

알고 넘어가기

비트맵과 벡터이미지

 

비트맵 : 비트맵은 각 픽셀이 모여 만들어진 정보의 집합으로 "레스터 이미지"라고도 부릅니다.

픽셀 화면에 렌더링합니다. 그림판, 포토샵등 툴로 편집이 가능(깨지고, 점으로 이뤄진 것)

 

벡터 이미지 : 이미지가 가지고 있는 점, 선, 면의 위치, 색상등의 정보를 가지고 있으며 그를 화면에 렌더링합니다. 확대 및 축소를해도 이미지가 깨지지 않는다. 일러스트 같은 툴로 편집할 수 있다.

 

jpg(jepg)

압축률이 훌륭하여 사진이나 예술분야에 많이 사용됩니다.(복붙하면 이미지가 망가짐 알아두장)

 - 손실 압축

 - 표현 색상()24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합

 - 가장 널리 쓰이는 이미지 포멧

 

GIF

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있습니다.

여러 이미지를 합쳐서 움직이는 이미지를 만들 수 있다.

 - 비손실 압축(복붙해도 손실이 없다)

 - 8비트(256색상만 사용) 컬러만 지원

 - 여저장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)

 

PNG

GIF의 대체 포멧으로 개발되었습니다.

바탕을 투명으로 처리가 가능함.

 - 비손실 압축

 - 8비트, 24비트 컬러 이미지 처리

 - W3C 권장 포멧

 - 알파 채널 지원(투명도)

 

WEBP

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포멧입니다.

 - 완벽한 손실 / 비손실 압축 지원

 - GIF같은 애니메이션 지원

 - 알파 채널 지원(손실, 비손실 모두)

 - 완벽한 포멧