이미지 태그
닫는 태그가 없는 빈 태그이다.
<!--예시-->
<img src="./images/pizza.png" alt="피자">들어가는 속성
- src : 이미지 경로를 지정하는 소스(src) 속성이 필수 속성으로 들어간다.경로는 상대경로와 절대경로가 있다.
- 상대경로 : 현재 웹 문서의 페이지를 기준으로 상대적으로 위치를 나타내는 경로로, 불러오는 페이지의 위치에 따라서 주소가 달라질 수 있다.
예) ../ : 상위폴더로 한 번 이동하는 명령- 절대경로는 어느 페이지에서 불러오더라도 항상 같은 주소를 가지게 된다.
예) C:/로 시작하거나, http:// 로 시작한다.
- alt : 이미지의 대체 텍스트를 입력하는 속성이다. 대체 텍스트는 이미지를 설명하는 글로, 일반적인 상황에서 노출되진 않지만, 시각 장애인들이 사용하는 스크린 리더기와 같은 보조기기가 대체 텍스트 속성을 읽어주거나,서버에서 이미지를 가져오지 못하는 경우 대체 텍스트가 노출되기도 한다. 필수 속성으로 들어간다.
- width/height : 가로, 세로 크기를 지정하는 속성들이다. 선택적인 속성이다. 보통 이미지의 크기는 화면 크기에 따라 유동적으로 변하는 경우가 많아서 CSS를 통해 제어하는데, 이미지의 크기가 고정적이라면 이 속성을 사용하는게 성능적으로 좋다.
이미지 크기를 정하지 않으면 실제 이미지 파일의 크기대로 나온다.
둘 중 하나에만 값을 주면 다른 하나는 알아서 원본 이미지의 비율을 유지한 상태로 같이 줄어들게 된다.
이미지 확장자 포맷
- gif : 색이 제한적이지만 용량이 작고, 애니메이션과 투명이미지를 지원한다.
투명이미지란? 그림이나 사진의 배경이 되는 부분이 이미지 크기만큼 정해진 색으로 나오는것이 아니라 브라우저색이 그림의 배경색에 투영되어 보이는것을 말한다.
- jpg : 전통적으로 웹에서 가장 많이 사용하는 포맷으로, 자연스러운 색상 표현이 가능하고, 압축률이 높아서 용량도 적절하다.
- png : jpg와 비교했을 때 이미지 손실이 없고 가장 높을 퀄리티의 이미지를 표현 가능하나, 용량이 크다. 투명과 반투명을 지원한다.
반투명이란? 투명도 값에 따라 배경이 이미지의 뒤로 투영되어 보이는것을 말한다.
