[HTML] 하이퍼링크 삽입하기

✨링크를 삽입하는 <a> 태그와 href 속성

• <a> : 링크 삽입하는 기능
  • 기본 형식

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

  • 위와 같이 href 속성을 이용해서 연결할 파일이나 링크할 주소를 쓴다.

 💡 텍스트 링크 만들기

• <a>와 </a> 태그 사이에 링크로 만들 텍스트 입력
• href 속성에는, 텍스트를 클릭하면 연결할 문서의 경로와 파일명 넣기
• 예시 코드

  <a href="https://www.naver.com/">주문서 작성하기</a>

  • 웹 페이지의 '주문서 작성하기'라는 부분을 누르면 링크로 연결

 💡 이미지 링크 만들기

• 텍스트 링크를 만드는 것과 같은 방법으로 만듦

• <a href="https://www.naver.com/"><img src="naverlogo.jpg" alt="네이버 로고"></a>

  • naverlogo라는 이미지를 누르면 링크로 연결

 💡 링크를 새 탭에서 열어 주는 target 속성

• 위에서 만든 예제의 텍스트나 이미지 링크를 클릭하면 현재 열려 있는 웹 브라우저 창에서 새로운 문서가 나타난다. 따라서 원래 문서로 돌아가려면 브라우저 창에서 매번 '이전 페이지'를 눌러야 해서 번거롭다.
• target 속성에 _blank 를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.

• <a href="https://www.naver.com/" target="_blank">주문서 작성하기</a>

  
  
  

출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)