html 공부 - link

coh·2022년 6월 16일
0

html + css + javascript

목록 보기
4/4

link와 관련된 tag로는 a태그가 있습니다


<a href="(연결할 주소)" target="(링크를 열 곳 옵션)">

a tag에서 link로 맞춰주면 됩니다!
속성값으로 target을 지정할 수 있는데 _self 는 현재 페이지에서 open
_blank는 새페이지에서 open을 하게 됩니다 !

<a href="https://www.google.com" target="_blank">구글로 가기</a>

다른 방법으로 이미지 요소를 추가해서 할 수도 있어요!
제 깃허브 이미지를 구글로 이동시켜봤어요!

<a href="https://www.google.com" target="_blank">
    <img
    src="https://avatars.githubusercontent.com/u/104769238?v=4"
    alt="구글로 이동(새탭에서)"

음.. 특정 사이트의 요소로 접근하는 방법도 있어요..!
id속성을 이용하는데 일련번호 내지 이름을 의미하고 겹치면 안 돼요! unique합니다.

'#'은 id속성을 지정할 때 사용합니다!
''은 연속으로 반복되고 숫자가 들어가게 할 때 사용합니다 p#target_{id: target_$}*1000

<a href="#target_500">타깃으러 이동</a>

한 후 클릭하면 해당 타깃으로 이동이 되는 겁니다!

연락처나 이메일 등 정보를 담을 때 address 안에 a tag를 사용해요!
이 때 mailto, tel 속성을 사용하게 돼요!!!

<h1>Contacts</h1>
  <address>
    웹사이트 주소: <a href="https://velog.io/@coh">coh.log</a> <br>
    오피스: 전산시 개발구 코딩동 123번길 45 <br>
    전화 <a href="tel:010-1234-5678">010-1234-5678</a> <br>
    이메일: <a href="mailto:och7164@gmail.com">och7164@gmail.com</a>
  </address>
profile
Written by coh

0개의 댓글