[HTML5] 앵커 (anchor) 태그 <a> / 절대 경로, 상대 경로 / 특정 위치로 이동
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>앵커anchor 태그 a</title>
</head>
<body>
<h1>앵커anchor 태그 a</h1>
<p>href 속성을 이용하여 하이퍼 텍스트 설정</p>
<p>**인라인 요소</p>
<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/a" target="_blank">
MDN 사이트 <a> 바로가기</a>
<ul>
<li>href 속성을 이용하여 다른 페이지나
같은 페이지 내 어느 위치, 파일, 이메일 주소와 연결된 url을 만든다.</li>
<li>링크를 의미하는 밑줄로 표기</li>
<li>기본 색상은 파란색</li>
<li>방문한 적이 있는 곳은 보라색</li>
<li>마우스로 누르고 있으면 빨간색</li>
<li>a의 속성 값은 ""의 형태로 비워두지 않음<br>
<strong>href="#"처럼 임시링크 기호로 대체 표기</strong></li>
<li>target="_blank" 새창으로 열기 속성</li>
</ul>
<a href="#" target="_blank">임시 링크 기호 #</a>
</body>
</html>
0. <a> 태그는 인라인 요소
1. <a></a> 태그로 작성하며 지정된 범위 내의 텍스트는 url로 처리되기 때문에 닫는 태그의 위치를 잘 체크해야 한다.
2. <a href = "링크 주소"> : href 속성과 링크 주소를 값으로 입력해 해당 링크의 위치를 설정한다.
- href의 값은 절대 비워두지 않으며 당장 링크할 주소가 없다면 '#'을 입력해 임시 링크로 설정해준다.
3. <a href = "링크 주소" target = "_blank"> target 속성을 이용해 어느 위치에서 열 것인지 설정하는데
- _blank : 새 창에서 열기
- _self : 현재 창에서 열기 (target 속성이 없어도 기본으로 self로 설정됨)
- _parent : 프레임 사용 시 부모 프레임에서 열기 (현재는 사용하지 않음)
- _top : 프레임 사용시 프레임을 벗어나 전체 화면으로 열기 (현재는 사용하지 않음)
URL
(Uniform Resource Locator)
인터넷상에서 파일이 위치하는 곳을 알려주는 표기법.
웹 사이트가 표시되는 구조
브라우저에서 url이 가리키는 파일을 웹 서버에 요청하면 웹 서버에서 응답을 받아 브라우저에 표시한다.
url은 하나만 존재하며 동일한 url이 두 개 이상의 데이터를 가리킬 수 없다.
절대 경로
http:// 혹은 https://로 시작되는 주소로 외부 사이트로의 이동시 사용
http(s):// 값을 생략하면 절대 경로로 인식을 안 할 수 있어서 오류가 날 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>절대 경로</title>
</head>
<body>
<h1>절대 경로</h1>
<p>외부 사이트로의 이동시 사용</p>
<p>반드시 <strong>http://</strong>혹은 <strong>https://</strong>로 시작하는 주소로 작성</p>
<ul>
<li><a href="https://google.com" target="_blank">구글 바로가기</a></li>
<li><a href="https://naver.com" target="_blank">네이버 바로가기</a></li>
<li><a href="https://daum.net" target="_blank">다음 바로가기</a></li>
<li><a href="https://github.com/" target="_blank">깃허브 바로가기</a></li>
</ul>
</body>
</html>
상대 경로
- 동일한 사이트 내에서의 이동 즉, 내부 이동시 사용한다.
- 현재 열어놓은 문서를 기준으로 설정하기 때문에 열린 문서의 경로에 따라 다른 문서로 접근하는 경로가 달라진다.
기준 파일 (현재 열어놓은 문서)
- 기준 파일과 같은 곳으로의 이동 : ./name.html 혹은 name.html
- 기준 파일보다 하위 파일로의 이동 : ./폴더명/name.html 혹은 폴더명/name.html
- 기준 파일보다 상위 파일로의 이동 : ..name.html
최상위 폴더 / root_상대경로 (index.html, contact.html, about.html)
하위 폴더 / script폴더 (script.html), images폴더 (interface.html, photo.html), css폴더 (style.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상대경로 1</title>
</head>
<body>
<h1>index.html</h1>
<h2>상대경로 1</h2>
<p><strong>index.html</strong>은 모든 웹 문서의 첫 페이지로 약속됨.<br>임의 변경 불가</p>
<p>최상위 root 폴더 바로 아래 있는 index.html 문서만 첫페이지로 인식한다.</p>
<ul>
<li><a href="./index.html">첫페이지(홈)으로 바로가기</a></li>
<li><a href="./about.html">about.html 바로가기</a></li>
<li><a href="./contact.html">contact.html 바로가기</a></li>
<li><a href="css/style.html">style.html 바로가기</a></li>
<li><a href="images/photo.html">photo.html 바로가기</a></li>
<li><a href="images/interface.html">interface.html 바로가기</a></li>
<li><a href="script/script.html">script.html 바로가기</a></li>
</ul>
</body>
</html>
- index.html은 최상위 폴더인 'root_상대경로' 폴더 내에 존재하므로 같은 폴더 내에 존재하는 'about.html' 'contact.html' 파일로의 내부 이동시에는 ./about.html 혹은 about.html을 입력하는 것만으로도 이동이 가능하다.
- 최상위 폴더의 하위 폴더인 'css'폴더 내에 있는 style.html 파일로의 내부 이동시에는 'css/style.html'을 입력한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상대경로 1</title>
</head>
<body>
<h1>style.html</h1>
<h2>상대경로 1</h2>
<ul>
<li><a href="../index.html">첫페이지(홈)으로 바로가기</a></li>
<li><a href="../about.html">about.html 바로가기</a></li>
<li><a href="../contact.html">contact.html 바로가기</a></li>
<li><a href="./style.html">style.html 바로가기</a></li>
<li><a href="../images/photo.html">photo.html 바로가기</a></li>
<li><a href="../images/interface.html">interface.html 바로가기</a></li>
<li><a href="../script/script.html">script.html 바로가기</a></li>
</ul>
</body>
</html>
- style.html은 최상위 폴더인 'root_상대 경로' 폴더의 하위 폴더인 'css'폴더 내에 위치하므로 현재 위치에서 상위 폴더에 존재하는 index.html이나 contact.html 파일로 이동하려면 '../파일명.html'로 경로를 입력해야 한다.
- 현재 위치에서 상위 폴더에 존재하는 다른 하위 폴더 내의 파일로 이동하려면 일단 상위 폴더로 이동(../)한 후 존재하는 다른 폴더의 경로(폴더명/name.html)까지 입력해줘야 한다. '../images/photo.html 을 입력하면 photo' 파일로 이동할 수 있다.
루트 상대 경로 작성 방식
이름이 index.html인 파일은 파일명까지 작성할 필요 없이 '/(최상위 폴더 경로)' 로 경로를 지정해주기만 하면
자동으로 폴더 내 index.html 파일로 지정된다. 단, 로컬 작업 환경 내에서는 확인이 불가능하고
서버에 파일을 올려야 확인이 가능함.
특정 위치로 이동
내용이 많거나 페이지 내 특정 위치로 한 번에 이동하고 싶을 때
태그 내에 <태그 id="값">으로 id 속성을 이용해 특정 문단이나 내용에 식별자를 지정해주고
<a href="#id식별자"> 태그를 입력해 이동한다.
[ id 속성 ] : 그 문서 안에서 유일한 이름을 가진 식별자.
- 영어 소문자로 시작
- 각각의 id는 같은 식별자 이름을 가질 수 없다.
- _, - 을 제외한 특수기호 사용 안됨
- 공백(띄어쓰기) 안됨
문단이나 내용 안에 특정 줄로 이동시키고 싶을 때는 <요소 id="id값">을 넣어야한다.
근데 브라우저상에 줄바꿈이나 변형을 원하지 않는데 적절한 요소가 없다면 <span> 인라인 요소를 사용하면 된다.
<span id="id값"></span>
같은 루트 내 다른 페이지의 특정 위치로 이동할 때는
상대 경로 <a href="./subpage.html">을 입력하고 값 뒤에 #id값을 입력해주면 된다.
- <a href="./subpage.html#title1">