보통 현재의 웹사이트에서 다른 사이트로 이동을 할 때에 a href 태그를 통해 링크를 거는데요.
이를 조금더 예쁘게 보이도록 html 이미지 링크걸기 방법을 쓰곤 하는데요. 예제를 통해 이 방법을 알아보도록 하겠습니다.
보통 ahref 태그를 쓰면 다른 사이트링크가 텍스트형태로 표기되는데요.
이를 이미지로도 표기할 수가 있습니다. 바로 텍스트가 들어가는 부분에 이미지를 삽입하면 됩니다.
위의 소스는 일반적인 ahref 태그를 통하여 구글 링크를 생성한 html 파일입니다.
이를 html 파일로 저장후에 실행시킨 모습인데요.
위의 구글 페이지 이동을 누르면 해당 페이지로 이동합니다.
1. html 이미지 링크걸기 예제
이미지 링크를 걸고 싶으시면 저 텍스트가 들어가는 부분에 이미지를 삽입하면 되는데요.
ahref 태그 사이의 텍스트가 들어가는 부분에 위와 같이 이미지 태그를 삽입하면 됩니다.
이미지 태그 : <img src =”URL”>
링크 태그사이에 있던 텍스트 글자가 이미지로 바뀌는 것이라고 생각하시면 됩니다.
위의 이미지 링크를 삽입한 html 소스코드를 실행한 모습인데요.
별그림이 나타나고 이에 마우스 커서를 갖다 댄 모습입니다.
링크가 제대로 걸려 마우스가 손바닥으로 바뀌고 밑의 작업표시줄에는 구글 사이트의 주소가 표시되고 있습니다.
2. 새창으로 열기
보통 옵션없이 a태그를 쓰게 되면 해당 페이지에서 바로 다른 페이지로 이동이 되는데요.
이를 새창으로 띄우려면 옵션을 하나 추가하시면 됩니다.
ahref 태그에 target=”_black” 옵션을 추가하시면 해당 창에서 링크를 클릭하면 새창으로 해당 페이지가 열리게 됩니다.
html 이미지 링크걸기 예제와 새창열기 방법에 대해서 알아보았는데요.
이 역시 html 사용에 있어 기본중에 기본이니 깊이 익혀두시면 좋을것 같습니다.
답글 남기기