태그 - 링크(link)

 

HTML의 특징인 하이퍼텍스트(Hyper Text)는 웹 자원을 가리키는 참조를 말하며, 하이퍼텍스트로 가리킬 수 있는 것은 웹페이지, 이미지, 사운드 파일, 영상등 다양한다. 하이퍼텍스트는 링크(link)를 통해 구현되며, 링크는 웹 상에 있는 문서를 향하는 주소를 말한다. 링크를 사용하여 웹 상의 다른 문서에 URL주소를 통해 연결할 수 있다. 링크를 다른 말로 앵커(Anchor)라고 부르는데 앵커는 문서안에서 링크의 목적지가 있을 때 그 목적지를 가리키는 말이다.

링크를 사용할 때는 <a>태그를 사용한다.

<a>태그는 HTML anchor 엘레멘트로 앵커와 하이퍼텍스트를 정의한다. 시작태그에 속성을 정의하여 태그로 감싸는 콘텐츠 영역에 링크로 표현된 부분을 작성한다. 이 콘텐츠 영역에는 반드시 텍스트일 필요는 없고, 이미지 등 모든 HTML엘레멘트가 가능하다.

 

<a href="http://www.home.com">welcome home</a>

 

 

 

<a>태그가 가질 수 있는 속성

• name: 같은 문서에서 링크를 통해 연결할 때 사용
• href: 링크에 URL주소를 지정해 연결할 때 사용
• target: 링크로 표현된 문서가 열릴 창을 지정

이 때 target속성은 링크로 연결된 문서가 출력될 창을 지정하는 속성이다. target속성으로 지정할 수 있는 값은 아래와 같다.

• _blank: 새로운 창
• _top: 현재창에서 브라우저 전체를 사용하여 출력
• _self: 같은 프레임에서 출력(기본값)
• _parent: 프레임을 연 창에서 출력(부모창에서 출력)

 
외부 페이지에 링크를 걸 때는 href 속성에 해당 자원의 URL값을 지정한다.

 

<a href="http://www.home.com" >Visit home</a>

하지만 내부 문서에 링크를 걸 때는 다음과 같이 처리한다.

 

링크가 될 부분은:       <a nmae="label">any content</a>

링크로 표현될 부분은: <a href="#label">any content</a>

<a>태그는 링크라는 특성이 있기 때문에 방문하지 않은 링크, 방문했던 링크, 링크에 마우스를 올렸을 경우, 링크를 클릭했을 경우와 같은 다양한 표현 방법이 존재하여 스타일을 지정할 때도 이러한 표현 방법에 스타일을 지정할 수 있다. 이 때 스타일을 지정할 때는 순서대로 작성해 지정해야 한다.

1. a:link - 방문하지 않은 링크(unvisited link)
2. a:visited - 방문했던 링크(visited link)
3. a:hover - 링크에 마우스를 올렸을 경우(mouse over)
4. a:active - 링크를 클릭했을 경우(selected link)

참고로 링크를 사용해 메일을 보낼 수도 있는데 이 때는 href속성에 "mailto:메일주소"를 지정하면 된다.

 

<a href="mailto:메일주소">메일보내기</a>