img

• 이미지를 불러오는 태그
• 속성 src="" 를 사용해 "" 사이에 사이트 주소나, 이미지 경로를 집어넣으면 사진을 불러올 수 있다.
• display : inline-block; 속성을 가지고 있어서 글자화 되어 있다.
• 이미지를 여러개 넣으면 화면이 허락하는 한에서 이미지가 여러개 들어갈 수 있다.
• img는 닫는태그가 없어 자식을 가질 수 없다.
• 이미지는 고유비율을 가지고 있다.
• 태그에 width 속성을 주면 넓이에 따라서 높이의 길이도 변한다.
  이것은 이미지의 비율을 유지하기 위해서이다.
• 높이를 지정하면 그 길이만큼 길어지거나 짧아지지만 비율을 잃어버린 만큼 이미지가 깨져보인다.

object-fit: contain;

• img태그에 속성을 주면 해당 태그 안에서 비율을 유지한다.
• 높이를 입력하더라도 화면유지하기 위해 높이의 속성이 적용되지 않는다.
• 대신 태그 안에서 유격이 생겨버림

object-fit: cover;

• 이미지가 커지면서 좌우를 자르더라도 div 태그의 높이를 맞춤