[Web/HTML] HTML - 이미지 삽입하기

✏️ 이미지를 삽입하는 <img> 태그

// 웹 문서에 이미지를 삽입할 때 사용하며 src와 alt속성을 가지고 있음

<img src="images/tangerines.jpg" alt="레드향">

✏️ src 속성과 alt 속성

// src속성 : 이미지 파일의 경로를 지정, 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않음
             웹 문서 파일과 이미지 파일이 같은 폴더에 있다면 간단히 이미지 파일의 이름만 적으면 이미지를 화면에 나옴
// alt속성 : 화면 낭독기 등에서 이미지를 대신해서 읽어줄 텍스트를 입력해줌, 인터넷이 불안정하거나 이미지 파일 경로를
             잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우에는 이미지 대신 alt속성에 입력한 텍스트가 나타남

 

✏️ 웹에서 사용하는 이미지 파일 형식

GIF(graphic interchange format) : 표시할 수 있는 색상 수는 최대 256가지, 다른 이미지 형식에 비해 파일 크기가 작아서 아이콘이나 볼릿 등 작은 이미지에 사용
JPG/JPEG(joint photographic experts group) : GIF보다 색상과 명암을 다양하게 표현 가능, 이미지를 수정하고 저장하는 작업을 할 경우 화질이 떨어질 수 있음
PNG(portable network graphics) : 네트워크용으로 개발된 파일 형식. 색상을 다양하게 표현 가능하고 투명한 배경도 만들 수 있어 웹에서 가장 많이 사용

 

✏️ 이미지 크기를 지정하는 width, height 속성

width 속성 : 이미지의 너비를 지정 가능
height 속성 : 이미지의 높이를 지정 가능
둘 중 하나만 지정해도 자동으로 크기가 맞춰짐

✏️ 이미지의 크기를 표현하는 단위

% : 이미지 크기의 값을 현재 웹 브라우저 창의 너비와 높이를 기준으로 결정
px : 이미지 크기의 값을 정적으로 결정