[HTML] 링크 태그

링크 태그

<!-- 텍스트 링크 -->
<a href = "링크주소" [target = "방법"] [title = "제목"]> 텍스트 </a>

<!-- 이미지 링크 -->
<a href = "링크주소" [target = "방법"] [title = "제목"]> <img ~> </a>

 

  - target 속성 : 페이지 표시 방법

      1) target = "_self" (기본값)

          : 링크가 있는 페이지에서 그대로 열림

      2) target = "_blank"

          : 새 탭/창에서 열림

      3) target = "_top"

          : 전체 화면으로 열림

            (iframe 태그로 외부 문서를 불러올 경우 전체 화면으로 표시)

  - title 속성 

      : 커서를 올렸을 때 제목이 표시되도록 함

#  이동 기능이 없는 링크

<a href = "#"> 텍스트 </a>

 

 

---

외부 문서를 현재 문서에 삽입하는 태그

<iframe src = "외부문서명.html"> </iframe>

 

 

---

앵커 (anchor)

<!-- 출발 위치 -->
<a href = "#앵커명"> 텍스트/이미지 </a>

<!-- 도착 위치 -->
<태그 id = "앵커명"> 텍스트/이미지 </태그>

 

  - 한 페이지 안에서, 특정 위치로 한 번에 이동하도록 하는 링크를 만듦

  - '출발 위치' 링크를 누르면 '도착 위치'로 이동하게 됨

 

 

반응형

728x90

---

이미지맵

<img src = “경로/파일.jpg” [alt = “대체텍스트”] usemap = “#맵명”> 

<map name = “맵명”>
	<!-- 사각형 영역 (왼쪽 위 꼭짓점 x1, y2 // 오른쪽 아래 꼭짓점 x2, y2) -->
    <area shape = “rect” coords = “x1,y1,x2,y2” href = “링크주소”
    [target = “방법” alt = “대체텍스트”]>
    
    <!-- 원형 영역 (중심점 x1, y1 // 반지름 길이 d) -->
    <area shape = “circle” coords = “x1,y1,d” href = “링크주소”
    [target = “방법” alt = “대체텍스트”]>
</map>

 

  - 한 이미지 상에 영역을 지정하여 여러 개의 다른 링크를 만듦

#  그림판을 이용하여 좌표(coords) 구하기

 

  - 그림을 그림판 프로그램에 복사한 후, 원하는 위치에 커서를 올리면 하단에 해당 위치의 x좌표, y좌표가 나타남

 

 

---

기타 메모

- onclick = "이벤트" : 클릭 시 이벤트
    → onclick = "window.close()" : 클릭 시 브라우저 창을 닫음