이미지 태그
비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- 레스터 이미지라고도 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵 등 툴로 편집
백터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집
jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
gif
- 이미지 파일내에 이미지 및 문자열 같은 정보도 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
- 8비트(256색상) 컬러만 지원
- 비손실 압축
png
- gif의 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원
- W3C 권장 포멧
webp
- jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
- gif 같은 애니메이션 지원
- 알파 채널 지원(손실, 비손실)
- 가장 완벽한 포멧
이미지 태그
- 이미지를 브라우저에 출력
- 인라인 태그(컨텐츠 크기 만큼만 영역을 사용)
<img src='이미지가 위치하는 주소 또는 파일 경로' alt='이미지를 대신할 문장'>무료로 png 이미지를 얻을 수 있는곳
7,300,000+ free and premium vector icons, illustrations and 3D illustrations
Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.
www.iconfinder.com
파일 경로 작성 방법
절대 경로(물리적 경로)
- URL 주소 : https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png
- 드라이브 : C:\hhj\html\day1\sea1.png (웹 사이트 개발시 사용하지 않음)
상대경로
- 이미지가 HTML 문서와 같은 디렉토리에 있는 경우
<img src="파일명">, <img src="./파일명">- 이미지가 하위 디렉토리에 있는 경우
<img src="디렉토리명/파일명">, <img src = "./디렉토리명/파일명">- 이미지가 상위 디렉토리에 있는 경우
<img src="../파일명">, <img src="./../파일명">- 이미지가 상위 디렉토리의 하위 디렉토리에 있는 경우
<img src = "../하위디렉토리명/파일명">, <img src="./../하위디렉토리명/파일명"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 태그</title>
</head>
<body>
<h2>이미지 태그</h2>
<img src="images/sea1.png" alt="바다1이미지">
<img src="../sea2.png" alt="바다2이미지">
<img src="../fish/sea3.png" alt="바다3이미지">
<img src="sea4.png" alt="바다4이미지">
<img src="sea5.png" alt="바다5이미지">
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음 로고">
</body>
</html>
