html 이미지 불러오는 방법, img 태그 속성를 이용하자!

html에서 a 태그를 써서 링크를 만들 수 있고 img 태그를 써서 이미지를 불러올 수 있습니다. 또한, 이 두 개의 태그를 섞어서 이미지를 클릭했을 때 다른 페이지로 이동할 수 있습니다. 즉, 중첩하여 사용자에게 더 다양한 기능을 제공할 수 있습니다.


그래서 오늘은 img 태그 속성을 이용하여 html 이미지를 불러오는 방법에 대해 알아보겠습니다.


링크 역할하는 a 태그의 많이 쓰는 속성들 살펴보기


html img 태그 속성


img 태그와 관련하여 한가지 예제로 시작하겠습니다.


tistory.png이라는 사진의 이름을 경로 불명(엑스박스)이 떴을 때 tistory_logo라는 이름이 나오게하고 폭은 꽉 차게 길이는 200px만큼의 사진을 불러오고 싶을 때,

<img src="tistory.png" alt="tistory_logo" width="100%" height="200px">

라고 코드를 작성할 수 있습니다. 


a 태그와 비교했을 때, img 태그는 닫힌 태그(/>)가 없다는 사실을 알았습니다.


a 태그에서 필수로 써야 하는 속성이 href라면, img 태그는 src 속성을 필수로 써야합니다. 왜냐하면 src속성은 이미지의 경로를 나타내는 속성이고 이 속성을 이용하여 이미지를 불러오기 때문입니다.


img 태그에서 많이 쓰이는 속성 4가지를 소개하겠습니다.


src : 이미지를 불러오는 경로를 설정하는 속성

alt : 이미지가 보이지 않는 환경에서 이미즈를 대신할 텍스트를 설정하는 속성

width : 이미지의 폭을 설정하는 속성

height : 이미지의 길이를 설정하는 속성


앞서 img 태그와 a 태그 혹은 그 이상 쓸 수 있다고 했습니다. 그럼 네이버 로고를 이용하여 네이버로 이동하는 코드를 작성해봅시다.

네이버 로고의 위치는 https://s.pstatic.net/static/www/img/2018/sp_search.svg 입니다.


먼저 img 태그를 먼저 작성하여 이미지가 나오는지 확인해봅시다.

<img src="https://s.pstatic.net/static/www/img/2018/sp_search.svg">

라고 쓸 수 있습니다.


여기서 이미지를 클릭하려면 어떻게 해야 할까요?


img 태그를 감싸줘야 하지 않을까요? 그래야 이미지가 클릭 가능한 상태로 될 테니까요.

<a href="https://www.naver.com"><img src="https://s.pstatic.net/static/www/img/2018/sp_search.svg"></a>


이렇게 하면 이미지를 클릭할 때 정상적으로 네이버로 이동하는 것을 보실 수 있습니다.


요약


  • img 태그는 src, alt, width, height 속성들이 있다.
  • 모든 body 영역의 태그는 중첩해서 기능을 구현할 수 있다.
  • 이미지를 클릭하여 다른 페이지로 이동하는 코드를 작성하려면 <a><img></a>로 감싸주면 된다.





직접 해보기


1. 아래의 이미지를 다운로드 받고 html 파일에 가로 300px, 세로 300px의 조건으로 이미지 불러오기



2. 1을 바탕으로 이미지를 클릭했을 때 새 창으로 포털 사이트 다음으로 이동하는 코드 작성하기

이 글을 공유하기

댓글

Designed by JB FACTORY