<HTML5+CSS3> 하이퍼 링크

하이퍼링크-웹상에서 텍스트나 이미지를 클릭하면 인터넷 이곳 저곳을 돌아다닐 수 있다는 점 이 연결을 해주는 것을 하이퍼링크라고 하는는데 줄여서 링크라고 한다.

<a>태그-원하는 문서나 사이트로 연결하기

<a href="경로(지정한 경로가 같은 위치에 있는 파일이어야가능)"> 텍스트 또는 이미지 </a>

href는 링크로 연결할 웹 문서 경로나 사이트 주소를 지정한다.

%href="#"은 실제로 연결되지 않는,링크 역할만 하도록 만든 가짜 링크 이런 링크를 널 링크라고 한다.

새 창 또는 새 탭에서 링크 열기

-링크를 클릭하면 기본으로 현재 브라우저 창에 열리는데 외부 사이트로 연결하는 링크라면 현재 창보다 새로운 창에 열리도록 하는것이 좋다 그럴 경우에는 target="_blank"라고 target속성을 지정하면 된다.

---------------------------------------------

target속성에서 사용할 수 있는 값

_blank:새로운 창

_self:현재 탭 또는 창

_parent:현재 화면을 불러낸 부모 탭이나 창. 없으면 현재 탭 또는 창

_top:최상위 탭 또는 창 없으면 현재

--------------------------------------------

ex)<a href="kor.html" target="_blank"><p>타겟링크</p></a>

링크를 미리 알려주는 툴팁

-웹 브라우저는 <a>태그에서 title속성을 만나면 링크의 툴팁을 표시한다. 툴팁은 링크 위로 마우스 포인터를 올려놓을 때 나타나는 작은 설명 박스를 말한다. 링크를 이동하지 않아도 툴팁으로 링크 내용을 미이 알수있다 툴팁의 설명글은 title속성에 작성한다.

ex)<a href="연결할 문서나 사이트 경로" title="링크 내용에 대한 요약 설명"> 내용표시</a>

% title ㅓ은 <a>태그 뿐만아니라 다른 태그에서도 사용 가능하다.

한 페이지 안에서 이동할 수 있는 앵커

-웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데 이 기능을 앵커라고 한다.  앵커는 한 페이지의 내용이 너무 길 경우 또는 서로 구분될 수 있는 내용으로 구성 되어 있을 경우 사용하면 편리하다.

ex)책 부분의 목차를 클릭하면 목차 내용이 있는 위치로 바로 이동.

-앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만들고 각각 다른 이름을 지정한다.

ex)<a id="앵커 이름">텍스트 또는 이미지</a>

-이렇게 붙여놓은 앵커 이름들은 마치 링크를 만들 때 처럼 <a>태그의 href속성을 사용해 앵커 이름을 링크한다 단 앵커 이름 앞에 #을 붙여 앵커라는 것을 알려준다

ex)<a href="#앵커이름">텍스트 또는 이미지 </a>

id값 말고 href값에 앵커 이름 앞에 #을 붙임.

%이런 양커 기능은 제이쿼리 모바일을 이용해 모바일 웹사이트나 웹앱을 만들 때 자주 사용한다.