Skip to content
2014.08.11 17:36

HTML 링크 알아보기

조회 수 4400 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

이번에는 HTML 링크에 대해서 알아보겠습니다.


링크는 클릭을 통해서 웹페이지를 연결하는 것을 말하는데요.


일단 뭔지 한번 볼까요?




  HTML5 오픈 커뮤니티  



위의 HTML5 오픈 커뮤니티를 클릭하시면 새로운 창으로 HTML5 오픈 커뮤니티의 메인 화면이 뜨는 것을 확인할 수 있습니다.


이러한 링크를 규정하는 요소가 바로 <a>입니다.


위와 같은 문자열 뿐만 아니라 이미지나 이미지+텍스트와 같은 그룹도 사용할 수 있습니다.


따로 스타일을 규정하시지 않았다면 링크에는 밑줄이 그어지고


한번도 방문하지 않은 곳이라면 파란색, 방문했던 곳이라면 보라색, 활성화 중인 링크는 빨간색으로 보입니다.



이러한 링크의 사용법은 다음과 같습니다.


<a href="http://google.com" target="_blank">구글</a>



특별한 설명 없이도 아시겠죠?


<a></a> 사이에 원하는 텍스트나 이미지 등을 넣으시고


href에는 이동하게 할 경로를 적어주시면 됩니다.



위의 링크를 누르시면 현재 페이지가 변하게 되는데 위의 HTML5 오픈 커뮤니티는 새로운 창으로 떴었죠?


그건 아래처럼 하면 됩니다.


<a href="http://google.com" target="_blank">구글</a>



target 속성에 _blank 값을 주시면 새창 열기가 작동됩니다.




또 문서의 특정 위치로 이동하게도 할 수 있습니다.


<a id="tips">팁</a>
이 팁은 아주 유용합니다.

<a href="#tips">팁으로 이동하기</a>


<a href="#tips">로 정의된 팁으로 이동하기를 누르면 <a id="tips">로 적힌 곳으로 이동하게 됩니다.


위의 예제는 사실 길이가 짧아서 제대로 이동하는지 보이지 않으므로 저 사이에 줄바꾸기를 많이 넣으셔서 테스트해보시길 권장합니다.



?
  • ?
    GUMP 2015.11.02 23:36
    예문 1번에 target 지워야될것같은데요?

Copyright by sincntx 2014 All rights reserved.

sketchbook5, 스케치북5

sketchbook5, 스케치북5