HTML Hyperlink

<a> 태그 & href 속성

링크 삽입

• 웹 사이트에서 링크 기능은 많이 사용되는 기능이므로 중요하다.
• 입력값에 따라 텍스트 링크 또는 이미지 링크로 사용된다.
• 마우스를 링크 위로 이동하면 마우스 화살표가 작은 손으로 바뀐다.

<a> 태그의 기본형은 href속성을 이용해 연결할 파일이나 링크할 주소를 쓴다.

--> "#"은 임시링크로 넣은 것이다.

 

텍스트 링크

<a>와</a>태그 사이에 링크를 만들 텍스트 입력

href속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명 입력

이미지 링크

• <a>와 </a> 태그 사이에 링크로 만들 이미지 삽입
• <img> 태그 사용

링크 걸린 사진

target 속성

• 링크를 새 탭에서 열어주는 속성 -> 연셜된 문서를 열 위치를 지정
  • _self - 디폴트. 누른 것과 동일한 창/탭에서 문서를 엽니다.
  • _blank - 새 창 또는 탭에서 문서를 엽니다.
  • _parent - 상위 프레임에서 문서를 엽니다.
  • _top - 창 전체의 본문에서 문서를 엽니다.

절대경로 VS 상대경로 

• 로컬 링크(같은 웹 사이트 내의 페이지에 대한 링크)는 상대 URL 로 지정 (“https://www” 부분 없음).

1. 절대경로

2. 상대경로

 

h1 태그로 이동(문서의 맨 위) | 절대경로 이동
| 상대경로 이동