스마일 서브<a> 태그 – 원하는 문서나 사이트로 연결하기
다른 사이트 또는 문서로 연결하는 링크를 만드는 것이 <a> 태그입니다.
ex)
<a href=”경로”> 텍스트 또는 이미지 </a>
href는 링크로 연결할 웹 문서 경로나 사이트 주소를 지정합니다. 이미지에 <a> 태그를 추가하면 ‘이미지 링크’가 되고 텍스트 부분에 <a> 태그를 추가하면 ‘텍스트 링크’가 됩니다. 텍스트에 링크를 적용하면 텍스트 색상이 파란색으로 바뀌고 밑줄이 생깁니다. 그리고 한 번 클릭했던 텍스트 링크는 자주색으로 바뀝니다. css를 사용하면 밑줄을 없애고 글자색도 바꿔서 웹 문서와 어울리는 텍스트 링크로 꾸밀 수 있습니다. 이미지 링크 여기 이미지 주변에 자동으로 테두리가 생기기 때문에 css를 이용해서 이미지
링크의 테두리를 보이지 않게 처리해야 합니다.
새 창 또는 새 탭에서 링크 열기
링크를 클릭하면 기본으로 현재 브라우저 창에 열리는데, 외부사이트로 연결하는 링크라면 현재 창보다 새로운 창에 열리도록 하는 것이 좋다 그럴 경우에는 target=”_blank”라고 target 속성을 지정하면 된다 멀티 탭 형식을 사용하는 최신 브라우저에서는 새로운 브라우저 창 대신 새로운 탭에 링크 내용이 열립니다.
ex)
<a herf=”경로” target=”_blank”><img src=”img.png”></a>
*target 속성에서 사용할 수 있는 값
_blank : 새로운 탭 또는 창
_self : 현재 탭 또는 창
_parent : 현재 화면을 불러낸 부모 탭이나 창, 없으면 현재 탭 또는 창
_top : 최상위 탭 또는 창, 없으면 현재 탭 또는 창
링크를 미리 알려주는 툴팁
보통 링크를 클릭해 보기 전에 어디로 이동할지 모르는 경우가 많습니다. 이때 사용하면 좋은것이 title 속성입니다. 웹 브라우저는 <a> 태그에서 title 속성을 만나면 링크의 툴팁을 표시합니다. 툴팁은 링크 위로 마우스 포인터를 올려놓을 때 나타나는 작은 설명 박스를 말합니다. 링크로 이동하지 않아도 툴팁으로 링크 내용을 미리 알수 있습니다.
ex)
<a href=”연결할 문서나 사이트 경로” title=”링크 내용에 대한 요약 설명”> 텍스트(ex: <img src=”img.png”>) </a>
한 페이지 안에서 이동할 수 있는 앵커
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다.
예를 들어 교보문고 온라인 서점에 있는 책을 클릭하여 책 정보로 들어가 보면 책 정보가 한 페이지에 다 들어 있습니다. 페이지를 아래로 내리면 모든 내용을 훑어볼 수 있지만 [목차]라는 부분을 클릭하면 목차 내용이 있는 위치로 바로 이동할 수 있습니다. 앵커는 한 페이지의 내용이 너무 길 경우 또는 서로 구분될 수 있는 내용으로 구성되어 있을 경우 사용하면 편리합니다.
ex)
<a id=”앵커이름”> 텍스트 또는 이미지 </a>
앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만들고 각각 다른 이름을 지정합니다. 이렇게 붙여놓은 앵커 이름들은 마치 링크를 만들 때처럼 <a> 태그의 href 속성을 사용하여 앵커 이름을 링크합니다. 단 앵커 이름 앞에 #을 붙여 앵커라는 표시를 합니다.
ex)
<a href=”#앵커이름”> 텍스트 또는 이미지 </a>