[ HTML ] <A> 태그

2024. 2. 24. 13:57· FRONT-END/└ HTML

환경 : Spring Tools Suite4

 

 

[ A(Anchor) 태그 ]

  • 다른 URL과 연결할 수 있는 하이퍼링크를 생성하는 태그
    href 속성으로 이동할 위치를 설정
  •    └ (Hypertext Reference)
  • title 속성으로 Tooltip 텍스트를 설정할 수 있음
  • 영역에 링크를 설정하면 안됨
       └ 실체가 있는 대상(글자, 이미지, 버튼, ...)에 설정하여 이동하도록 구현

[ 사용 예 ]

 

   - HtmlController.java

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HtmlController {
	@RequestMapping("/link")
	public String link() {
		return "/WEB-INF/views/link.jsp";
	}
}

 

   - link.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<h1>하이퍼링크 예제</h1>

<a href="https://www.naver.com">네이버로 이동</a>
<a href="https://www.google.co.kr">구글로 이동</a>

<h2><a href="https://www.melon.com/">Melon</a></h2>

<br>

<%-- (Q) 네이버 이미지 넣기 --%>
<a href="https://www.naver.com" title="네이버">
	<img width="100" height="100" alt="네이버로 이동" src="/logo/naver.jpg">
</a>

<!-- 상대 주소 -->
<h2><a href="home">첫 번째 예제 보기</a></h2> 
<!-- 절대 주소 -->
<h2><a href="/home">첫 번째 예제 보기</a></h2>
<h2><a href="dummy">더미이미지 예제 보기</a></h2>
<h2><a href="/dummy">더미이미지 예제 보기</a></h2>

 

   - 출력 결과

 

 

 

 

 

 

개인 공부 기록용입니다:)

728x90