#HTML 강좌 - 링크걸기

안녕하세요. 낭만고양이 입니다. 오늘은 링크거는 방법을 알아보도록 하겠습니다. 링크거는 테그는 아주 자주쓰여서 중요하니 잘 숙지해두시면 많은 도움이되실 겁니다. 링크가 걸린 텍스트를 클릭하면 다른 주소로 이동이 됩니다. 어떻게 링크를 거느냐에 따라 새창으로 열리면서 페이지가 열릴수도 있고 현재 페이지에서 이동할수도 있습니다. 그러면 링크를 거는 방법에 대해서 자세히 알아보도록 하겠습니다.

■  HTML 강좌 - 링크걸기

링크는 하이퍼링크라고도 하며 다른 웹페이지로 이동수 있는 글자나 이미지입니다. 예시를 통해 알아보도록 하겠습니다.

낭만고양이 블로그로 이동

※위소스가 제대로 안보이면 아래를 보세요(모바일용)

<a href="http://disital.tistory.com/">

낭만고양이 블로그로 이동

</a>

<br><br>

<a href="https://www.daum.net/">

<img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png">

</a>

위 소스를 메모장에다가 붙여넣은다음 test.htm 으로 저장한후 실행해 보시면 아래와 같이 뜨는것을 확인할수가 있습니다.

낭만고양이 블로그로 이동 이라는 텍스트를 클릭하면 제 블로그인 http://disital.tistory.com/ 으로 이동하게 됩니다.

그리고 바로 아래에 있는 다음 로고 이미지를 클릭하게 되면 다음커뮤니티인 https://www.daum.net/ 으로 이동하게됩니다.

눈치 채셨겠지만 링크 걸기의 기본 뼈대는 아래와 같습니다.

<a href="이동할 페이지 주소">클릭하면 이동될 문자나 이미지</a>

클릭하면 이동할 페이지 주소에 적힌대로 이동하게됩니다.

여기서 추가로 아셔야 하는것은 이렇게만 하면 그냥 현재 페이지 에서 이동하게 됩니다.

따라서 현재페이지는 그냥두고 새창이 열리면서 페이지가 열리게 하고싶을 때가 있을겁니다.

이렇게 하실려면 한가지더 옵션 추가를 하셔야합니다.  target="blank" 라는 옵션을 추가하시면 됩니다.

그러면 위 예제에서 최종적용한 소스는 아래와 같습니다.

낭만고양이 블로그로 이동

※위소스가 제대로 안보이면 아래를 보세요(모바일용)

<a href="http://disital.tistory.com/" target="blank">

낭만고양이 블로그로 이동

</a>

<br><br>

<a href="https://www.daum.net/" target="blank" >

<img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png">

</a>

제 글이 도움이 되셨다면  "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.