링크 anchor
링크는 anchor (앵커, 축, 정박지, 닻 과 같은 의미를 가집니다.) 의 약자인 a 태그를 사용합니다.
하이퍼링크를 표시하는 태그는 다음과 같습니다.
<a href=" 연결할 하이퍼링크 태그" >
a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)를 만드는 역할을 합니다. a태그는 인라인 요소이고, 콘텐츠는 주로 링크의 목적지예요.
href 는 하이퍼링크 레퍼런스의 약자입니다.
출처 : 유노코딩 ; https://www.youtube.com/c/%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9/about
target 타겟
하이퍼링크를 눌러서 열었을 때 새 탭에서 열지, 아니면 현재 창에서 열지를 정할 수도 있습니다.
target = "_self" 는 현재 창에서 링크를 연다.
target= "_blank" 는 새 탭에서 링크를 연다.
아래의 예시로 같이 확인을 해볼게요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크로 이동한다.</title>
</head>
<body>
<a href="https://blue-dot.tistory.com/" target="_blank">
비비 홈페이지를 엽니다.
</a>
</body>
</html>
새로운 창에서 열도록 설정을 해볼게요.
html 의 속성들에게는 '기본값'이 존재합니다.
targer의 기본값은 self 로 새롭게 설정을 하지 않을 시에는 현재 창에서 열리게 됩니다.
만약 이 링크에 css를 추가하고 싶을 때에는 컨테이너를 사용하면 가능합니다.
<div title="Be mia 홈페이지로 가요" style="background-color: yellow;">
<a href="https://blue-dot.tistory.com/" target="_blank">
비비 홈페이지를 엽니다.
</a>
</div>
실행했을 때 하단의 결과 화면이 출력됩니다!
하이퍼링크의 버튼(누르는 부분)을 텍스트가 아닌 이미지 삽입도 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크로 이동한다.</title>
</head>
<body>
<div title="Be mia 홈페이지로 가요" style="background-color: yellow;">
<a href="https://blue-dot.tistory.com/" target="_blank">
<img src="images/snowflakes.jpg">
</a>
</div>
</body>
</html>
아까의 이미지로 활용해보았어요.
저 이미지를 누르면 홈페이지로 이동합니다.
href 로 전화번호, 메일주소 연결
홈페이지 주소 외에 전화와 메일 또한 자동으로 연결될 수 있도록 태그할 수 있습니다.
<a href= "tel: 010-1234-5678" target="_self">
전화걸기
</a>
<a href = "mailto : bee@mail.com" target="_blank">
메일쓰기
</a>
하이퍼링크는 우선 여기까지 해보고 직접 만들 때 좀 더 활용해보도록 할게요!
'HTML · CSS > HTML · CSS 입문 공부일지' 카테고리의 다른 글
| 웹 HTML 입문 공부 8. input 입력 (0) | 2022.11.09 |
|---|---|
| 웹 HTML 입문 공부 7. 목록list 생성하기 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 5. 컨테이너 요소, 전역 속성 (+ 검색 엔진에 노출 잘 되는 법) (0) | 2022.11.09 |
| 웹 HTML 입문 공부 4. 요소 유형 (블록 레벨 태그, 인라인 태그), 이미지 표시 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 3. 텍스트 입력 (0) | 2022.11.09 |