[Web Crawler] HTML 기본태그 (4)

HTML Image (이미지)

 

웹 페이지에는 텍스트, 링크 뿐만 아니라 많은 이미지들이 존재한다. HTML에서 이미지를 삽입하려면 <img>tag를 사용해야 한다. <img> tage는 image의 약어이며, END TAG가 없는 empty tag이다.

 

<img src="url" alt="대체 텍스트">

src : source의 약자로, 이미지가 있는 URL주소를 입력합니다. alt : alternative의 약자로, URL주소가 틀리거나 어떠한 에러로 인하여 이미지가 사용자에게 보여지지 않을때 대체로 보여줄 텍스트를 입력합니다.

<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODEyMTdfMjIz%2FMDAxNTQ1MDI1MTQwMDYy.aK7FI6-4Pu8nmPzXrCLLTJ471S-R0V4lkVF1XJBoh8wg.oU9I5Yx59Ep1uEfh1hmXDpiB2Qz-1IVAo6h5mRFbkc0g.PNG.wdb10004%2F1919.png&type=b400" alt="HTML 이미지">
# 가져오고 싶은 이미지가 있으면 이미지를 오른쪽 마우스 클릭후 이미지 주소복사를 누른후 src에 붙여넣기 한다.

 

결과화면의 왼쪽은 웹 페이지에 정상적으로 이미지가 삽입된 상황이고, 오른쪽은 절대경로가 잘못되어 웹 페이지에 이미지가 삽입되지 못하고 alt 즉, 대체 텍스트가 나온 상황이다.

 

width속성, height속성

 

width와 height를 통해 이미지 너비와 높이를 조절할 수 있다.

 

<img src="url" alt="대체 텍스트" width="숫자" height="숫자">

<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODEyMTdfMjIz%2FMDAxNTQ1MDI1MTQwMDYy.aK7FI6-4Pu8nmPzXrCLLTJ471S-R0V4lkVF1XJBoh8wg.oU9I5Yx59Ep1uEfh1hmXDpiB2Qz-1IVAo6h5mRFbkc0g.PNG.wdb10004%2F1919.png&type=b400" alt="HTML 이미지" width="100" height="100">

 

이미지에 링크 설정

 

링크를 이미지에도 설정해줄 수 있다. 즉, 이미지를 클릭하면 해당 페이지가 열린다.

 

<a href="URL"><img src="URL" alt="대체 텍스트" width="숫자" height="숫자"></a>

<a href="https://wikidocs.net/">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODEyMTdfMjIz%2FMDAxNTQ1MDI1MTQwMDYy.aK7FI6-4Pu8nmPzXrCLLTJ471S-R0V4lkVF1XJBoh8wg.oU9I5Yx59Ep1uEfh1hmXDpiB2Qz-1IVAo6h5mRFbkc0g.PNG.wdb10004%2F1919.png&type=b400" alt="HTML 이미지" width="100" height="100"> </a>

 

https://wikidocs.net/86351

6.HTML Image