HTML a href 링크태그 img src 이미지 태그 사용 방법을 알아보자
아마도 html에서 가장 흔하게 사용되는 태그는 바로 링크태그와 이미지 태그라고 생각합니다. 링크 태그는 <a> 태그이며 항상 href 가 같이 따라붙게 되는 경우가 흔하죠. 이미지 태그도 마찬가지 입니다. 이 둘이 같이 병행해서 쓰이는 경우도 많은데 보통 사진에 바로가기 링크를 걸 때 쓰입니다. 어떤 식으로 활용하는지 가장 기초적인 방법을 알아보도록 하겠습니다.
참고로 가장 기본이 되는 방법에 대해서만 작성했습니다. a 태그와 img src에 대한 다양한 활용법에 대해서는 앞으로 배워가면서 알게되면 그때마다 바로 업데이트 하도록 하겠습니다. 만약 이제 막 시작하신 분들이시라면 오른쪽 카테고리에서 HTML 로 들어가셔서 처음부터 살펴보시는것을 권장합니다.
텍스트에 링크걸기
본문 <body> 안쪽에 구글 바로가기 글씨와 링크를 걸어보겠습니다. 위에 표시된대로 작성해 주시면 될 것 같습니다. 기본 구조는 다음과 같습니다.
<a href="링크주소">텍스트</a>
간단한 구조입니다. 우리가 신경써야 할 것은 href 는 무조건 클릭시 이동하는 인터넷 주소라는 것 입니다. 그리고 텍스트는 자유 입니다.
그러나 위의 방법대로 진행하면 현재 열려있는 웹페이지에서 이동하게 됩니다. 새 창에서 열리게 하고 싶다면 위의 빨간줄이 표시된 target="_blank" 태그만 추가하여 사용하시면 됩니다.
이제 수정한 웹문서를 저장하시고 한번 실행해 보세요. 보시는 것 처럼 구글 바로가기 글씨가 생성되어 있으며, 클릭하시면 새 창이 열리며 구글 홈페이지로 이동되는것을 확인하실 수 있으실 겁니다.
이미지에 링크걸기
이제 이미지에 링크를 걸어보겠습니다. 하나만 더 신경써서 추가해주시면 될 것 같습니다. img src 태그를 사용하시면 되는데 기본 구조는 다음과 같습니다.
<a href="URL주소" target="_blank"><img src="이미지 주소" alt=""></a>
그렇습니다. 아까 위에서 배워본 텍스트가 들어갈 자리에 이미지 태그가 대신 들어갔다는것을 확인할 수 있습니다. 저는 구글 이미지를 퍼와서 직접 업로드 하는 방법을 선택했습니다. 이미지 주소의 구조는 현재 웹페이지 파일이 위치한 곳이 기준이 됩니다.
즉, 저는 현재 연습으로 작업하고 있는 ex01.html 파일 기준으로 같은 위치에서 imgs 라고 하는 폴더를 만들었고, imgs 폴더안에 google.png 이미지 파일을 넣어둔 것 입니다. 그렇게 되면 경로는 위와 같아지게 됩니다. 이 경로에 대한 개념은 정말 중요하므로 반드시 기억해 두세요.
이미지 주소는 두가지 방법이 있습니다. 자신이 직접 웹서버에 이미지를 등록하는 방법과 이미 올라간 이미지 링크를 주소만 가지고 오는 방법이 있습니다. 제일 확실한 방법은 자신이 직접 이미지를 업로드해서 해당 주소를 사용하는 방법입니다. 왜냐하면 타사이트에 올라가있는 이미지가 만약 손상되거나 해당 페이지가 없어지면 X (엑박) 으로 표시가 되기 때문이죠. 원본이 사라졌기 때문입니다. 또한 저작권 문제가 있을 수 있으니 왠만하면 자신이 직접 제작한 이미지로 올리시는것을 추천합니다. 아니면 저작권 없는 무료 라이센스 이미지를 사용해 주시기를 바랍니다.
이렇게 태그를 구성하고 웹브라우저에 띄워 본 모습입니다. 구글 로고 이미지가 정상적으로 출력되고 있고, 클릭하니까 새 창으로 구글 홈페이지로 정상 이동하는 모습을 확인할 수 있습니다.
인터넷 상에 존재하는 이미지 넣기
아까 말씀드렸던 이미 인터넷에 업로드 되어 있는 이미지를 그대로 퍼오는 방법을 알아보겠습니다. 이것은 해당 사이트가 우클릭이 막혀있으면 퍼갈 수 없을 수도 있다는 점 참고해 주시고, 보안상 링크를 퍼가도 다른 사이트에서는 노출이 되지 않을수도 있다는 점도 기억해 주세요.
구글에서 "cat" 이라고 검색했더니 첫 이미지로 이 사진이 뜨네요. 이용하는 브라우저는 크롬을 추천합니다. 해당 이미지에서 마우스 오른쪽 버튼을 누르시면 "이미지 주소 복사" 라고 하는 항목이 있습니다. 그걸 선택해 주세요.
그리고 img src 태그에서 이미지 주소를 넣을 공간에 복사된 주소를 넣어주시기만 하면 끝 입니다. 간단합니다.
해당 이미지가 정상적으로 노출되고 있음을 확인할 수 있습니다.
여기까지 HTML 문서에서 a 링크태그와 img src 이미지 삽입 태그에 대한 가장 기본적인 방법을 알아봤고, 글씨와 이미지에 링크 거는 방법, 새 창에서 열리게 하는 방법도 알아봤습니다. 의외로 많이 사용되는 태그이므로 반드시 기억해 뒀다가 요긴하게 사용해 봅시다. 끝.
