HTML 링크(link) <a>태그

개미Coder
|2024. 4. 5. 10:16
반응형

한 줄 정리

 

<a href="홈페이지 주소">홈페이지 이름</a> : 링크 연결 코드

target="_blank" : 새로운 탭에서 페이지 열기

target="_self" : 기존 탭에서 페이지 열기

<img src="이미지 경로" > : a 태그 안에 넣으면 이미지 열기

tel: : 전화로 연결하기

mailto: 메일로 연결하기

 

 


 

 

## 링크(link)

-링크란 현제 문서에서 다른 문서로 이동하는 수단을 의미한다.

-링크(anchor)
 # a 태그 요소는  href 속성을 통해 다른 페이지, 전화번호 , 이메일 주소와 
  그외 다른 url로 연결할 수 있는 링크를 만든다.
 # anchor는 인라인 요소이며 컨텐츠는 주로 링크의 목적지를 나타낸다.

<body>
    <a href=""></a>
</body>


-<a>태그안의 href를 속성이라고 한다. (속성은 여러 가지를 사용할 수 있다.)
-href는 hyperlink Reference의 약자이다.(href="" 의 쌍따옴표 안에 경로를 설정하게되면 해당 경로로 이동하게된다.)

 

<!DOCTYPE html>
<html>
    <body>
        <a href="https://www.naver.com/">네이버</a>
    </br>
        <a href="https://www.google.com">구글</a>
    </body>
</html>

<u>이 기본값으로 나오게 된다. 안나오게 하려면 CSS에서 변경가능
해당 링크를 누르면 지정해준 페이지가 잘 나온다.

 

 


 

#<target="_self"> : 해당 탭에서 바로 열게 한다.

#<target="_black"> : 새로운 탭에서 열게 한다.

-속성값을 주어서 새로운 탭에서 열게 할 지, 기존 탭에서 열게 할 지 정할 수 있다.

<!DOCTYPE html>
<html>
    <body>
        <a href="https://www.naver.com/" target="_self">네이버</a>
    </br>
        <a href="https://www.google.com" target="_blank">구글</a>
    </body>
</html>

 

 


 

#이미지를 넣어서 링크를 넣어주는 방법

-<a>태그 안에 <img>태그를 넣어서, 사용한다.

<!DOCTYPE html>
<html>
    <body>
        <a href="https://www.kakaocorp.com/page/" target="_blank">
        <img src="/image/kakao.png" alt="카카오" width="200" height="200">
        </a>
    </body>
</html>

누르면 사이트로 옮겨진다.

 


 

#<a>태그 안에 tel: 번호를 기입하면, 컴퓨터 or 핸드폰에 설치되어 있는 전화 프로그램으로 전화를 걸 수 있다.

<a href="tel:010-1234-5678">010-1234-5678</a>

번호를 누르면, 연결 애플리케이션을 선택하라고 나온다.

 

 

 

#<a>태그 안에 mailto: 를 사용해서 메일을 보낼 수 있다.

<a href="mailto:java@naver.com" target="_blank">java@naver.com</a>

 

반응형