[ 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
'· FRONT-END > └ HTML' 카테고리의 다른 글
[ HTML ] <input> 태그 속성 Type의 값 (0) | 2024.02.28 |
---|---|
[ HTML ] <input> 태그의 속성 (0) | 2024.02.27 |
[ HTML ] <img> 태그에 dummy 이미지 첨부 해보기 (0) | 2024.02.23 |
[ HTML ] <img> 태그 (0) | 2024.02.22 |
[ HTML / JSP ] 제목 태그 <h1> ~ <h6> (1) | 2024.02.21 |