[코딩 15] HTML 이미지 링크 걸기

코딩의 즐거움/HTML 2020. 10. 23. 12:00

로고를 누르면 메인페이지로 이동하게 만드는 법.

굉장히 쉽다.

a 태그 안에 img 태그를 넣어주면 된다.

일단 웹페이지에 이미지를 불러오기 위해서 경로 설정을 먼저 해준다.

폴더 이름이나 이미지 이름은 변경해도 된다.

coding 폴더 > 이미지링크걸기.html

coding 폴더 > images 폴더 > naver.jpg (이미지이름.확장자)

<a href="홈페이지 주소"><img src="상대경로/이미지명.확장자" alt="대체 텍스트" /></a>

하이퍼링크 태그인 a 태그 안에 이미지 태그인 img 태그를 적어서

이미지를 눌렀을 때 a링크가 적용이 되어 홈페이지로 이동하게 된다.

이미지에 보면 빨간색으로 밑줄이 그어진 target="_blank" 속성은

현재창이 아닌 새 창에서 네이버 홈페이지를 열어준다.

a 태그의 속성으로 a 태그 안에 적어주면 된다.

저장 후 웹페이지를 열어보면 위와 같이 나올 것이다.

이미지를 클릭해보면 네이버 홈페이지로 이동하는 걸 볼 수 있다.

굉장히 쉽지만 또한 굉장히 유용하다.

이렇게 공부한 태그를 조합해서 응용하면 된다.

더 보러가기

COMIZLE COMIZLE