HTML_이미지 태그

https://coding-diary100.tistory.com/29

HTML_기본개념

 

 

 

기본개념은 따로 정리해 놓았다.

사용 Tool: vscode

이미지 태그   

 

1. 비트맵 이미지

- 픽셀이 모여 만들어진 정보의 집합
- 레스터 이미지라고도 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵 등 툴로 편집
- 확대하면 깨짐

2.벡터 이미지   

-애니메이션 같은 뚜렷한 이미지에 많이 사용한다.
-수학적 정보의 형태들이 만들어내는 결과물
-이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
-확대 및 축소를 해도 이미지가 깨지지 않음
-일러스트 같은 툴로 편집

 

이미지의 포맷

 

jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포맷
- 손실 압축 -> 압축할수록 데이터를 잃음
- 표현 색상 (24비트,약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합

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

png
- gif 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원 ->투명도도 지원
-  W3C 권장 포맷

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

 

 

 

이미지 태그

- 이미지를 브라우저에 출력
- 인라인 태그(컨텐츠 크기 만큼만 영역을 사용)

 

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

※이미지를 대신할 문장을 리더기가 읽기 때문에 이부분에 설명을 쓰는것도 좋다.

 

 

이미지는 현재 디렉토리에 있는것을 불러온것이다. (그렇지 않다면 경로명을 넣어주어야 한다.)

 

 

결과물