HTML10. IMG TAG

1. img 태그: 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그

<img src="./pizza.jfif" alt="피자" width = "200">

 

 

 

2. src 속성

-img의 필수 속성으로 이미지의 경로를 나타내는 속성

 

3. alt 속성

-이미지의 대체 텍스트를 나타내는 속성

-대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성

-src속성과 더불어 반드시 들어가야 하는 속성

 

4. width/height 속성

-이미지의 가로/세로 크기를 나타내는 속성

-값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됨

-width/height는 선택적 속성이지만 이미지의 크기가 고정적이라면  width/height 속성을 선언하는 것이 성능적 측면에서 좋음

-이 속성이 없으면 이미지는 원본 크기대로 노출되며, 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞게 자동으로 비율 변경

-반명 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경됨

 

5. 상대경로와 절대경로

-src속성에는 이미지의 경로가 들어가며, 이미지의 상대경로, 절대경로가 있음

-상대경로는 현재 웹페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로

-절대경로는 실제 그 이미지가 위치한 곳의 전체 경로

 

상대경로 *상대경로에서 ./는 페이지가 있는 편재 폴더를 나타냄

<img src = "./pizza.jfif" alt = "pizza">

절대경로

<img src = "C:\Users\user\Desktop\BOOSTCOURSE_HTML_CSS\pizza.jfif" alt = "pizza">

 

6. 이미지  파일 형식

gif: 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식

jpg: 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식 (but 투명은 지원 x)

png: 이미지 손실이 적으며 투명, 반투명을 모두 지원하는 형식