[HTML] anchor 태그
2023. 3. 9. 13:12ㆍ기술 창고/HTML
728x90
SMALL
anchor 태그는 링크를 걸어 경로를 찾아가는 패그이다.
anchor 라는 단어 자체가 해석하면 "걸다"라는 의미이기 때문에 이해하기 쉽다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>앵커 태그</title>
</head>
<body>
<h1>Anchor Tag</h1>
<a href="http://www.naver.com" target="_blank">naver</a>
<a href="http://www.daum.net" target="_blank">daum</a>
<a href="http://127.0.0.1:5500/11_table.html">절대 경로 테이블 사용법</a>
<a href="11_table.html">테이블 사용법</a>
</body>
</html>
<!--
# Anchor tag 의미 : 링크를 건다는 태그
# 절대 경로 : 주소 URL을 직접적으로 링크를 걸어 해당 경로의 사이트로 직접정으로 진입하는 경로
예 : http://www.naver.com
예 : http://127.0.0.1:5500/11_table.html <- 로컬 URL 주소와 같은 경로에 존재하는 html 파일 주소를 같이 사용해도 절대 경로.
# 상대 경로 : 같은 경로 안의 html 파일을 불러오는 경로
예 : 11_table.html
# 주소 URL 로만 불러오는 절대 경로의 경우에는 외부의 페이지를 불러오는 것이기 때문에 기존에 본인이 작성했던 페이지를 유지할 수 없다.
따라서 외부에서 불러오는 케이스의 경우에는 target="_blank" 속성을 부여하여 기존의 작성하고있던 페이지는 유지하되 외부의 페이지는 새로 생성하여
불러오게끔 한다.
_self : 설정하지 않아도 기본적으로 설정되어있는 자기 페이지에 불러오는 속성
_parent :
-->- 절대 경로 : 주소 URL을 직접적으로 링크를 걸어 해당 경로의 사이트로 직접정으로 진입하는 경로
- 예 : http://www.naver.com
- 예 : http://127.0.0.1:5500/11_table.html <- 로컬 URL 주소와 같은 경로에 존재하는 html 파일 주소를 같이 사용해도 절대 경로.
- 상대 경로 : 같은 경로 안의 html 파일을 불러오는 경로
- 예 : index.html
- <a> : 절대 경로와 상대 경로와 같은 이동 링크를 걸어주는 태그.
- target 속성
- 주소 URL 로만 불러오는 절대 경로의 경우에는 외부의 페이지를 불러오는 것이기 때문에 기존에 본인이 작성했던 페이지를 유지할 수 없다.
따라서 외부에서 불러오는 케이스의 경우에는 target="_blank" 속성을 부여하여 기존의 작성하고있던 페이지는 유지하되 외부의 페이지는 새로 생성하여 불러오게끔 한다. - 예 : <a href="http://www.naver.com" target="_blank">naver</a>
위와 같이 사용하면 외부에서 호출할 링크들은 새로운 탭에서 호출되게 된다. 이것이 외부 호출 주소의 표준이기도 하다. - target 속성에는 _self, _parent 속성도 존재한다.
- _self : 현재 자기 페이지에 호출하는 방식. 기본적으로 target 속성을 설정하지 않으면 해당 설정이 적용된다.
- _parent : 이전에는 Java와 같이 상속받는 듯한 형태의 html 구조가 있었기 떄문에 상속받은 html 파일 쪽에 호출되는 설정이다.
- 주소 URL 로만 불러오는 절대 경로의 경우에는 외부의 페이지를 불러오는 것이기 때문에 기존에 본인이 작성했던 페이지를 유지할 수 없다.
[실행한 결과]
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] 이미지 태그 (0) | 2023.03.09 |
|---|---|
| [HTML] anchor 태그 이동 경로 설정 파악 (0) | 2023.03.09 |
| [HTML] 테이블 태그 (2) | 2023.03.07 |
| [HTML] list 목록 태그 (0) | 2023.03.07 |
| Visual Code 설치와 초기 html 작성 (0) | 2023.03.07 |