HTML <img> Element

1. img element

---

HTML 페이지에서 이미지를 보여주기 위한 요소입니다.

---

2. img의 src 속성

• 폴더(서버)에 가지고 있는 이미지를 표현하거나
• 인터넷상에 존재하는 모든 이미지를 표현할 수 있습니다. (저작권 문제 조심해야 합니다.)

 

아래와 같이 이미지 파일을 가지고 있는 경우

src 속성을 사용하여 불러올 수 있으며, alt는 이미지가 없을 경우 나올 텍스트입니다. 또한 "./"는 현재 폴더를 의미하며, "../"는 상위 폴더를 의미합니다.

<img src="./free.jpeg" alt="이미지가 없어요." />
<img src="./nothing.jpeg" alt="이미지가 없어요." />

 

또한 기존의 엘리먼트들과 다르게 style 속성을 명시적으로 적어주지 않아도 width, height 설정이 가능합니다.

<img src="./free.jpeg" width="1000px" height="1000px" alt="이미지가 없어요." />

마지막으로, 인터넷상에서 이미지 url을 복사하여 바로 적용 가능합니다. 다만 해당 url에서 이미지 자원이 없어진다면 엑박으로 뜨겠죠?

<img src="https://slp-statics.astockcdn.net/static_assets/staging/22spring/free/browse-vector-categories-collections/Card4_399895799.jpg?width=580" alt="" />