HTML - 이미지태그

이미지 태그<img>

 

인라인 태그(자기 크기만큼 사용)

<img src="이미지가 위치하는 주소 또는 파일경로" alt="이미지를 대신할 문장">

 

✔ 파일 경로 작성 방법

• 절대 경로(풀내임)
  • 고유한 전체 경로
  • http, https, file에 대한 경로
  • file 경로는 주로 사용하지 않음

ex)

<img src="https://image.zdnet.co.kr/2022/01/13/61e3c984200896c68044c2cd3b90dea3.jpg" alt="아이폰">

 

• 상대경로
  • 이미지가 HTML문서와 같은 폴더에 있는 경우

ex)

<img src="./apple1.png" alt="사과">

• 이미지가 하위 폴더에 있는 경우

ex)

<img src="폴더명/apple1.png" alt="사과">
<img src="./폴더명/apple1.png" alt="사과">

• 이미지가 상위 폴더에 있는 경우

ex)

<img src="../파일명">
<img src="./../파일명">

• 이미지가 상위 폴더의 하위폴더에 있는 경우

ex)

<img src="../하위폴더명/파일명">
<img src="./../하위폴더명/파일명">

 

 

---

 

비트맵과 벡터이미지

 

• 비트맵 이미지
  • 픽셀이 모여 만들어진 정보의 집합
  • "레스터 이미지"라고 부름
  • 픽셀 단위로 화면에 렌더링함
  • 그림판, 포토샵등 툴로 편집

 

• 벡터이미지
  • 수학적 정보의 형태들이 만들어내는 결과물
  • 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
  • 확대 및 축소를 해도 이미지가 깨지지 않음
  • 일러스트 같은 툴로 편집

 

비트맵 이미지들

 

• jpg(jpeg)
  • 압축률이 훌륭해서 사진이나 예술분야에 많이 사용
  • 가장 널리 쓰이는 이미지 포멧
  • 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
  • 손실 압축

 

• gif
  • 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
  • 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
  • 8비트(256색상) 컬러만 지원
  • 비손실 압축

 

• png
  • gif의 대체 포멧으로 개발
  • 8비트, 24비트 컬러 이미지 처리
  • w3c 권장 포멧
  • 알파 채널 지원

 

• webp
  • jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
  • gif 같은 애니메이션 지원
  • 알파 채널 지원(손실, 비손실)
  • 완벽한 포멧

 

브라우저 호환성 확인

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

무료 png 이미지 사이트

https://www.iconfinder.com/

7,575,000+ free and premium vector icons, illustrations and 3D illustrations