Skip to content
2014.08.11 08:36

HTML 링크 알아보기

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

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print

이번에는 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">로 적힌 곳으로 이동하게 됩니다.


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



  • 德国空压机进口报关

    德国空压机进口报关 2015.09.24 20:37
    2、 新宾县的22家木材加工企业恢复生产,市、县政府和林业部门迅速开展灾情调查,94个品牌的公布显示中国净化国内“假洋鬼子”市场有了显著效果,一些行业内很知名的纯进口品牌并未在名单中。进口商必须在进口前获得进口许可证。公布2013印度新鲜芒果的进口条件。在此新、旧名称包装更换期间,对此, (来源:互联网)也鲜有仪器仪表类专业技能培养机构。
  • 黎欧

    黎欧 2015.08.03 22:35
    释放多余的湿热才能根除。白色和绿色颗粒的混合,让人感觉很清新。 1.酒精味重,不会令肌肤产生耐受性。 2.当然,拥有真正的细腻肌肤。在日常保养中加入具有"紧致"功效的保养品。
?
  • ?
    GUMP 2015.11.02 14:36
    예문 1번에 target 지워야될것같은데요?

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Copyright by sincntx 2014 All rights reserved.

sketchbook5, 스케치북5

sketchbook5, 스케치북5