웹프로그래밍 HTML (6) 이미지요소

📋오늘의 목표📋

HTML의 주요태그인 이미지요소에 대해서 알아보자!

이미지 요소

<img>태그

<img src ="./이미지링크" alt="피자">

이미지 삽입을 위한 태그, 빈태그로 종료태그가 없다.

📄이미지태그의 속성값

src: 이미지 경로를 지정한다.(필수)
alt: 이미지 대체 텍스트를 지정한다.(필수)
width,height: 텍스트의 크기를 지정한다.(선택)

✌️실습하기

네이버에 있는 뚱꼬 이미지를 사용하겠다.
https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Ff9%2F11%2Fc2%2Ff911c2c94eb21395334f5f661f57370e.jpg&type=sc960_832

<img src ="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Ff9%2F11%2Fc2%2Ff911c2c94eb21395334f5f661f57370e.jpg&type=sc960_832" alt="뚱꼬" width= "200">

👉결과 화면

📄상대경로와 절대경로

- 상대경로: 현재위치를 기준으로 나타내는 경로
- 절대경로: 실제 이미지가 위치한 곳의 경로

✔️절대 경로 나태내기

1. 로컬 PC에 저장된 이미지
- `C:\Users\사용자이름\Pictures\MyImg.jpg`

2. 서버 호스트에 저장된 이미지
- `http://www.나의도메인.com/images/MyImg.jpg` ,`/images/MyImg.jpg`

✔️상대경로 나타내기

1. html 문서와 이미지 파일이 현재 동일한 폴더에 있을때	
-`MyImg.jpg`, `./MyImg.jpg`

2. 파일이 현재 폴더의 images폴더에 있을때	
- `images/MyImg.jpg` ,`./images/MyImg.jpg`

3. 파일이 현재 폴더의 한단계 위의 폴더에 있을때
- `../MyImg.jpg`

4. 파일이 현재 폴더 한단계 위의 폴더 images폴더에 있을때
- `../images/MyImg.jpg`

➕경로표시 방법

`./` : 현재 파일
`../`: 한 단계 위의 폴더로 이동

📄이미지 파일 형식

• gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
• jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
• png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

🏅오늘 배운 점🏅

흥미롭다.