이번에는 HTML문서를 어떻게 연결하는지 알아보도록 하겠습니다!!
<a>
한 문서에서 다른 문서로 이동할 때는 <a>태그(anchor)를 이용합니다.
<a href="URL주소" target="속성값">내용</a> 와 같은 방식으로 사용됩니다.
href는 필수 속성값이며 이동할 문서의 URL을 표시합니다. <a> 태그를 설정하면 내용이 파란색깔로 변함과 동시에 밑줄이 쳐지는데 이 내용을 누르면 href에 표시한 부분으로 이동하게 됩니다.
href를 지정할 때 문서의 경로를 전체 다 표시하는 절대 경로와 축약해서 표현하는 상대 경로가 있습니다.
절대경로는 어떤 웹페이지나 문서의 고유한 경로를 뜻하며
href="https://www.w3schools.com/tags/att_a_target.asp"나 href="C:\Users\hp\Deskto\web-programming\index.html"
과 같이 문서의 전체 경로를 표시하는 경로입니다.
상대경로는 현재 열려있는 html문서가 위치한 곳을 기준으로 위치를 지정하는 경로입니다.
예를 들어 위의 web-programming 폴더 안에 index.html이 있고 우리가 index.html을 이용하여 문서를 이동한다고 가정하면
href="login.html"은 web-programming 폴더안에 있는 login.html로 이동한다는 뜻이 됩니다.
이는 href="./login.html"과 같은 의미를 지니게 된다.("./"는 현재 폴더를 의미)
이 밖에도 href="../index.html"은 현재 web-programming 폴더의 상위 폴더 안에 있는 index.html을 의미합니다.
즉, "../"은 현재 html 문서가 있는 폴더의 상위 폴더를 의미합니다. 만약 두 단계 위의 폴더에 접근하려면 "../../"으로 접근할 수 있습니다.
href="/index.html"은 최상위 폴더 즉, 루트에 있는 index.html에 접근한다는 뜻이 됩니다. "/"는 루트폴더를 의미합니다.
target 속성은 <a>에 지정된 문서를 어디서 표시할지를 지정하는 속성입니다.
속성값으로는 _self, _target, _parent, _top, framename 이 있습니다.
_self는 default 값으로 현재 열려있는 브라우저에서 지정된 문서를 엽니다.
_target은 새로운 브라우저에서 지정된 문서를 여는 속성값입니다.
_parent는 지정된 문서를 부모의 프레임(상위 레벨)에서 여는 속성값이며 _top은 가장 상위의 프레임에서 문서를 여는 속성값입니다.
만약 상위 레벨의 프레임이 없다면 둘 다 _self로 취급됩니다.
framename은 지정된 프레임에서 문서를 여는 속성값입니다.
<base>
<base> 태그는 <head>태그의 하위태그로써 href 속성에 기준 URL을 지정하여 링크주소를 간단히 만들 수 있습니다.
이때, 주의할 점은 base href 끝에 /를 누락하면 완전한 주소가 되지 못합니다.
<base href="https://www.w3schools.com/" target="_blank"> 와 같이 사용하며 href="https://www.w3schools.com"와 같이 마지막에 "/"를 빼면 안됩니다!
<base> 홀태그이므로 닫는 태그 없이 사용합니다.
문서 내에서의 이동
문서 내에서 링크는 이동할 목적지가 존재해야합니다. 이동하고자 하는 태그의 id 속성으로 문서의 한 지점을 정한 후에 <a>태그를 이용해서 그 위치로 이동할 수 있습니다.
<a>태그의 href 속성값으로 이동하고자 하는 태그의 id값을 넣어주면 됩니다. 이 때, id이므로 id값 앞에 '#'을 붙여야 하며 중복된 id값이 없어야합니다.
<a href="#login">로그인 부분으로 이동</a>, <a href="#top">맨 위로 이동</a> 과 같이 사용합니다.
'Web Basic > HTML' 카테고리의 다른 글
| 블록과 인라인 (0) | 2018.03.22 |
|---|---|
| 이미지 및 멀티미디어 (0) | 2018.03.22 |
| 텍스트 (0) | 2018.03.20 |
| HTML 기본구조 2 - 계층구조 및 주요태그 (0) | 2018.03.20 |
| HTML 기본구조 1 - 태그 (0) | 2018.03.20 |
