앵커
ancher 의 앞자의 a를 사용합니다.
html는 HyperText를 지원하는 문서 작성 언어 입니다.
문서와 문서를 이동하기 위해서 앵커 테그를 사용합니다.
내용물
a 테그는 내용물을 가지는 테그 입니다.
앵커 테그로 감싸진 내용은 브라우저에서 기본적으로 파랑색으로 출력이 됩니다.
페이지 이동
앵커 테그는 페이지를 이동합니다. href 속성을 지원합니다.
href로 지정한 경로로 클릭시 이동을 합니다.
<a href="http://google.com"> 구글로 이동 </a>
html의 표준에 의하면 a 테그는 반드시 href 속성을 가져야 합니다.
href
href 속성을 지정하지 않으면 페이지의 이동링크가 동작하지 않습니다.
책갈피
a테그는 다른 페이지의 url로 이동을 처리 합니다. 하지만, 같은 페이지의 특정 내용으로 이동을 할 수 있습니다.
이를 책갈피 라고 합니다.
책갈피는 내용이 많은 페이지의 특정 영역으로 이동을 할때 매우 유용합니다.
책갈피 설정
책갈피 이동 설정은 id값을 참조하여 위치를 이동합니다.
<a href="#pos1">pos1 으로 이동</a>
<h1 id="pos1">pos1</h1>
책갈피를 이용하면, 스크롤을 하지 않고 빠르게 동일 페이지의 위치로 이동을 할 수 있습니다.
id 중복
동일 페이지 내에서 id는 중복이 되지 않도록 작성을 하여야 합니다.
id가 중복되더라고 html 문법 오류를 출력하지는 않습니다. 하지만, 중복되면 다양한 오동작이 발생될 요지가 있습니다.
빈링크
책갈피 이동 기능을 통하여 빈 링크를 연결할 수 있습니다.
#는 페이지의 이동이 이루어 지지 않는 빈 링크 입니다.
#의 문제점
#을 이용한 페이지이동을 하게 되면, 주소에 # 표시가 남게 됩니다.
이는 a링크가 하이퍼 페이지를 이동하면서 get 방식으로 페이지를 다시 호출하는 것과 같습니다.
빈링크 개선
최신의 w3c 규셕에서는 빈링크를 아무것도 없는 값으로 권장을 하고 있습니다.
href의 값을 null 문자로 지정하게 되면, 페이지 전체가 재로드하게 됩니다.
name 속성
<a>태그는 name이라는 속성을 제공합니다. name은 링크의 이름을 지정할때 사용을 합니다.
링크에 이름을 지정하면 문서내에서도 이 이름을 이용하여 이동이 가능합니다.
(페이지 이동이 아니라 스크롤을 통한 이동)
문서내부로 링크를 걸때는 #과 내부링크의 name 속성값을 적어주면 됩니다.
<p><a href="#bottom">문서의 하단으로</a></p>
<p style="height:600px;">스크롤이 되는 효과를 나타내기 위해서 이 문단의 높이를 높게 지정합니다.</p>
<p><a name="bottom">여기가 문서의 하단</a></p>
위의 소스에서 style=”height:600px;” 이 부분은 CSS 입니다.
앵커 연결
a 링크에 대해서 알아 봅니다.
링크 페이지
연결되는 링크는 href 속성을 부여하면 됩니다.
- 외부 사이트 : http 또는 https 프로토콜을 포함한 전체 주소를 입력합니다.
- 절대 주소
- 상대주소
새창열기
<a href="사이트" target="_blank">이동합니다.</a>
클릭확인
a 링크로 연결시
한번도 클릭한 적이 없는 경우에는 파랑색으로 표시됩니다.
한번 적속한 경우에는 보라색
밑줄
a 링크는 밑줄이 표시됩니다.
인라인
a 링크는 인라인 속성을 가지고 있습니다.
여러개의 링크를 작성시 한줄로 배치가 됩니다.
빈링크
- ie에서는 내컴퓨터가 선택됩니다.
- 크롬에서는 반응을 하지 않습니다.
페이지 제일 상위로 스크롤이 이동하게 됩니다.
id 값이 있는 컨덴츠가 있는 경우 스크롤을 이동하게 됩니다.
지정한 id가 없는 경우, 반응을 하지 않고, 현재의 위치에 머무르게 됩니다.
목적지가 없기 때문에 반응을 하지 않습니다.
퀴즈 : a요소는 텍스트만을 클릭할 수 있습니다. 텍스트 보다 큰 영역을 선택할 수 있도록 버튼화 하기 위해서는 어떻게 해야 할까요?
=> 정답: a요소의 inline 속성을 block 속성으로 변경합니다. a요소의 크기를 지정할 수 있습니다.