[HTML] anchor 태그 이동 경로 설정 파악
2023. 3. 9. 13:40ㆍ기술 창고/HTML
728x90
SMALL
html 을 사용하면 원하는 페이지로 이동하거나 호출을 하기 위해 잦은 a 태그 사용이 발생한다.
따라서 a 태그를 사용할 때 어떻게 경로로 이동해야 되는지 잘 파악할 필요가 있다.
현재 html 구조는 위와 같은 형태로 만들어져있다.
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Abc corporation</title>
</head>
<body>
<h1><a href="index.html">abc.com</a></h1>
<h2>Main Menu</h2>
<ul>
<li><a href="about.html">about us</a></li>
<li><a href="/docs/services.html">services</a></li>
<li><a href="/docs/location.html">location</a></li>
<li><a href="/docs/html/partners.html">partners</a>
<ul>
<li><a href="http://www.naver.com" target="_blank">naver</a></li>
<li><a href="http://www.daum.net" target="_blank">daum</a></li>
</ul>
</li>
<li><a href="/docs/catalog.zip">catalog download</a></li>
<li><a href="mailto:info@abc.com">contact us</a></li>
</ul>
</body>
</html>- <a href="index.html">abc.com</a>
- abc.com 은 메인 페이지로 이동하는 로고라고 볼 수 있다.
- 현재 있는 위치가 index.html이기 때문에 본인을 호출하는 것이므로 그대로 href 속성에 index.html 을 넣어준다.
- <a href="about.html">about us</a>
- about us 는 about.html 을 호출한다.
- about.html은 현재 본인이 위치한 index.html과 같은 경로에 존재하고 있기 때문에 about.html 을 넣어준다.
- <a href="docs/services.html">services</a>
- services 는 services.html 을 호출한다.
- services.html은 index.html이 위치한 경로에서 한 번더 docs 라는 폴더 경로에 위치하고 있다.
따라서 docs/services.html 을 넣어준다. (해석하면 docs 폴더 경로에 있는 services.html을 찾아간다라는 뜻.)
- <a href="docs/location.html">location</a>
- location는 location.html 을 호출한다.
- location.html은 index.html이 위치한 경로에서 한 번더 docs 라는 폴더 경로에 위치하고 있다.
따라서 docs/location.html 을 넣어준다.
- <a href="/docs/html/partners.html">partners</a>
- partners는 partners.html 을 호출한다.
- partners.html은 index.html이 위치한 경로에서 docs 라는 폴더 경로에서 한번 더 html 폴더 경로 안에 위치하고 있다.
따라서 docs/html/partners.html 을 넣어준다.
- <a href="docs/catalog.zip">catalog download</a>
- 링크를 걸면 알집 파일을 다운받을 수도 있다.
- docs 폴더 경로 안에 있는 catalog.zip 파일을 다운받는다.
- <a href="mailto:info@abc.com">contact us</a>
- mailto:{메일 주소} 는 이메일을 보낼 수 있도록 링크를 걸 수 있다.
[services.html]
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Abc corporation</title>
</head>
<body>
<h1><a href="../index.html">abc.com</a></h1>
<h2>SERVICES</h2>
<ul>
<li><a href="../about.html">about us</a></li>
<li><a href="services.html">services</a></li>
<li><a href="location.html">location</a></li>
<li><a href="html/partners.html">partners</a>
<ul>
<li><a href="http://www.naver.com" target="_blank">naver</a></li>
<li><a href="http://www.daum.net" target="_blank">daum</a></li>
</ul>
</li>
<li><a href="catalog.zip">catalog download</a></li>
<li><a href="mailto:info@abc.com">contact us</a></li>
</ul>
</body>
</html>- services.html 은 docs 폴더 경로 안에 위치하고 있다.
- <a href="../index.html">abc.com</a>
- abc.com 은 메인 페이지(index.html)로 이동해야 한다.
- 현재 있는 위치가 services.html 이기 때문에 본 href 속성에 ../index.html 을 넣어준다.
- " ../ " 은 이전 경로를 의미한다. (해석하면 이전 경로에 있는 index.html을 호출한다는 뜻이다.)
- <a href="../about.html">about us</a>
- about us 는 about.html 을 호출한다.
- about.html은 현재 본인이 위치한 services.html 의 이전 경로에 존재하고 있기 때문에 ../about.html 을 넣어준다.
- <a href="services.html">services</a>
- services 는 services.html 본인을 호출한다.
- 따라서 services.html 을 넣어준다.
- <a href="location.html">location</a>
- location는 location.html 을 호출한다.
- location.html은 services.html 이 위치한 경로와 같은 위치에 있기 떄문에 location.html 을 넣어준다.
- <a href="html/partners.html">partners</a>
- partners는 partners.html 을 호출한다.
- partners.html은 services.html이 위치한 경로에서 html 이라는 폴더 경로에 한번 더 위치하고 있다.
따라서 html/partners.html 을 넣어준다.
- <a href="catalog.zip">catalog download</a>
- 같은 위치에 있는 catalog.zip 파일을 다운받는다.
- <a href="mailto:info@abc.com">contact us</a>
- mailto:{메일 주소} 로 이메일 전송 링크를 건다.
- location.html 도 services.html 과 같은 위치에 있기 때문에 구성이 똑같다.
[partners.html]
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Abc corporation</title>
</head>
<body>
<h1><a href="../../index.html">abc.com</a></h1>
<h2>PARTNERS</h2>
<ul>
<li><a href="../../about.html">about us</a></li>
<li><a href="../services.html">services</a></li>
<li><a href="../location.html">location</a></li>
<li><a href="partners.html">partners</a>
<ul>
<li><a href="http://www.naver.com" target="_blank">naver</a></li>
<li><a href="http://www.daum.net" target="_blank">daum</a></li>
</ul>
</li>
<li><a href="../catalog.zip">catalog download</a></li>
<li><a href="mailto:info@abc.com">contact us</a></li>
</ul>
</body>
</html>- partners.html 은 docs 폴더 경로 안에 있는 html 경로에 한번 더 들어가서 위치하고 있다.
- <a href="../../index.html">abc.com</a>
- abc.com 은 메인 페이지(index.html)로 이동해야 한다.
- 현재 있는 위치가 partners.html 이기 때문에 본 href 속성에 ../../index.html 을 넣어준다.
- " ../ " 은 이전 경로를 의미하기 때문에 이전 경로 docs의 이전 경로를 한번 더 들어가서 index.html을 호출해야 한다. (해석하면 이전 경로 안에 있는 이전 경로에 진입해서 index.html을 호출한다는 뜻이다.)
- <a href="../../about.html">about us</a>
- about us 는 about.html 을 호출한다.
- about.html은 index.html 과 같은 위치에 있기 때문에 ../../about.html 을 넣어준다.
- <a href="../services.html">services</a>
- services 는 services.html 을 호출한다.
- 따라서 이전 경로에 있기 때문에 ../services.html 을 넣어준다.
- <a href="../location.html">location</a>
- location는 location.html 을 호출한다.
- 이전 경로에 있기 때문에 ../location.html 을 넣어준다.
- <a href="partners.html">partners</a>
- partners는 partners.html (본인)을 호출한다.
- partners.html 을 넣어준다.
- <a href="../catalog.zip">catalog download</a>
- 이전 경로에 있는 catalog.zip 파일을 다운받는다.
- <a href="mailto:info@abc.com">contact us</a>
- mailto:{메일 주소} 로 이메일 전송 링크를 건다.
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] 원하는 섹션으로 이동 (0) | 2023.03.09 |
|---|---|
| [HTML] 이미지 태그 (0) | 2023.03.09 |
| [HTML] anchor 태그 (0) | 2023.03.09 |
| [HTML] 테이블 태그 (2) | 2023.03.07 |
| [HTML] list 목록 태그 (0) | 2023.03.07 |