<img src="./images/pizza.jpg" alt="피자">
- 문서에 이미지를 삽입한다.
src: 이미지 경로를 지정한다.alt: 이미지의 대체 텍스트를 입력한다.width/height: 이미지의 크기를 지정한다.<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>image</title> </head> <body> <img src="./pizza-jpg.jpg" alt="피자" width="400" > <img src="http://placehold.it/500x250" alt="" width="250"> </body> </html>
width(가로) 크기를 400까지 줄이면 비율에 맞게 height(세로)도 같이 줄어든다.
상대경로:현재 웹페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
- ./image/photo.jpg
- ../image/photo.jpg
절대경로: 실제 그 이미지가 위치한 곳의 전체 경로
gif:256색으로 제한적, 애니메이션과 투명이미지 가능
jpg:높은 압축률과 자연스러운 색상 표현
png:jpgd와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원한다.
Project Oriented Learning 🔥