본문 바로가기

front-end

[HTML] 링크 만들기

링크
  • 현재 문서에서 다른 문서로 이동할 수 있는 수단
  • a 태그 ≫ href 속성을 통해 다른 페이지, 전화번호, 이메일 주소, 그 외 다른 url로 연결할 수 있는 링크
  • 인라인 요소
  • 콘텐츠는 주로 링크의 목적지 나타냄
  • <a href="https://www.naver.com/">네이버</a>

 

target 속성
  • 새로운 문서를 열 때, 현재 탭에서 열지 새로운 탭에서 열지 결정
    • "_self" : 현재 탭에서
    • "_blank" : 새로운 탭에서
  • 기본값은 self ! ≫ 지정하지 않으면 현재 탭에서 열림

 

전화 걸기 / 메일 쓰기
  • 웹문서 주소 뿐 아니라 전화번호, 메일 주소 등을 href에 지정
    • tel / mailto 문자열 지정
  • <a href="tel:010-1234-5678">010-1234-5678 전화걸기</a>
  • <a href="mailto:emailaddress@naver.com">emailaddress@naver.com 메일 전송</a>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>링크 만들기</title>
  </head>
  <body>
    <a href="https://www.naver.com/" target="_self"> 
      네이버
    </a> 
    <br>
    <a href="https://www.google.co.kr/?hl=ko" target="_blank">
      구글
    </a>

    <br><br>

    <a href="tel:010-1234-5678">010-1234-5678</a>
    <br>
    <a href="mailto:emailaddress@naver.com">emailaddress@naver.com</a>
  </body>
</html>
  • 콘텐츠에는 텍스트 뿐만 아니라 이미지 등 다른 콘텐츠도 가능 ≫ 이미지 클릭 시 링크로 이동
    • img 태그로 지정
    • <a href="https://www.naver.com/" target="_self"> 
            <img src="images/WIN_20220602_22_40_53_Pro.jpg", width="300">
      </a>

 

  • 전화 걸기가 가능한 기기에서 클릭 시 전화가 걸림

  • 기본 메일 앱에서 해당 메일 주소로 메일 쓸 수 있는 창이 열림

 

 

 

 

'front-end' 카테고리의 다른 글

[HTML] 입력 요소 만들기  (0) 2024.12.01
[HTML] 목록 표시하기  (0) 2024.12.01
[HTML] 컨테이너와 전역 속성  (0) 2024.12.01
[HTML] 이미지 표시하기  (0) 2024.12.01
[HTML] 블록 태그와 인라인 태그  (0) 2024.12.01