• 하이퍼링크 삽입하기
  • <a> 태그와 href 속성
  • 이미지 링크
  • 링크 새 탭으로 열기 target 속성

하이퍼링크 삽입하기

<a> 태그와 href 속성

• 기본형

<a href="링크 주소"> 표시할 텍스트 또는 이미지 </a>

<a href="https://www.naver.com/"> 네이버 바로가기 </a>

이미지 링크

이미지 클릭하면 해당 링크로 연결된다.

• 기본 코드

<a href="링크 주소"> <img src ="이미지 위치" alt ="대체 텍스트"> </a>

<a href="https://www.google.com/search?q=%EC%98%A4%EB%A0%8C%EC%A7%80+%EC%82%AC%EC%A7%84&sxsrf=ALiCzsZRlNqE_W3-7tPDqyGYjdxi3BJ4zg:1651126105283&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiOh_CHjLb3AhXLDKYKHSJrA_YQ_AUoAXoECAEQAw&biw=1920&bih=975&dpr=1#imgrc=YvwuqfzMRk_31M"> <img src="orange.jpg" alt="오렌지 사진"> </a>

링크 새 탭으로 열기 target 속성

• 기본 코드

<a href="링크 주소" target = "_blank"> </a>

<a href="https://www.google.com/search?q=%EC%98%A4%EB%A0%8C%EC%A7%80+%EC%82%AC%EC%A7%84&sxsrf=ALiCzsZRlNqE_W3-7tPDqyGYjdxi3BJ4zg:1651126105283&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiOh_CHjLb3AhXLDKYKHSJrA_YQ_AUoAXoECAEQAw&biw=1920&bih=975&dpr=1#imgrc=YvwuqfzMRk_31M" target="_blank"> <img src="orange.jpg" alt="오렌지 사진"> </a>

---

출처

• (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.