---

📝 img

웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도의 태그

📌 속성

💡 src

삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹 주소)

✏️ src 속성 확인

• 상대 경로 : 현재 위치를 기준으로 경로 지정
  - .. : 상위 폴더
  - / : 아래, 안쪽, 안에
  

<img src="../images/cats/cat1.jpg">

• 절대 경로 : 웹 이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력

<img src="https://image.dongascience.com/Photo/2020/03/5bddba7b6574b95d37b6079c199d7101.jpg">

💡 width / height

이미지의 크기를 지정하는 속성

✏️ width, height 속성을 이용한 크기 조절(고정/가변 크기)

• 고정 크기 단위(px) : 화면의 크기 상관 없이 지정된 값의 크기를 갖는 단위

    <!-- img 태그는 inline 형식 -->
    <img src="../images/dogs/dog1.jpg" width="300px" height="240px">
    <img src="../images/dogs/dog2.jpg" width="300px" height="240px">
    <img src="../images/dogs/dog3.jpg" width="300px" height="240px">
    <img src="../images/dogs/dog4.jpg" width="300px" height="240px">
    <img src="../images/dogs/dog5.jpg" width="300px" height="240px">

• 가변 크기 단위(%) : 화면이나 영역 기준 사이즈 크기에 따라 크기가 변경되는 단위

    <img src="../images/flowers/flower1.jpg" width="15%" height="240px">
    <img src="../images/flowers/flower2.jpg" width="15%" height="240px">
    <img src="../images/flowers/flower3.jpg" width="15%" height="240px">
    <img src="../images/flowers/flower4.jpg" width="15%" height="240px">
    <img src="../images/flowers/flower5.jpg" width="15%" height="240px">

💡 alt

이미지를 설명하는 속성
-> 이미지가 출력되지 않는 경우 화면에 직접 표시 (+ 웹 접근성)

✏️ alt 속성 확인

<img src="../images/cats/cat5.jpg" width="300px" height="300px" alt="고양이 사진">

---