HTML에서 하이퍼링크 걸기

Posted by ITPangPang
2016.06.19 23:13 웹(Web)/HTML


HTML에서 하이퍼링크 걸기



ㆍ이번글에서는 text에 링크를 거는 방법을 알아보도록

   하겠습니다.


ㆍHTML에서 하이퍼링크는 가장 중요한 부분중 하나 입니다.

   HTML은 Hyper Text Markup Language의 약자입니다.

   이름에도 들어있드시 HyperText 는 하이퍼링크를 통해 

   다른 문서로 이동할수 있는 Text입니다. 



하이퍼링크 어떻게 넣으면 되는가?


하이퍼링크를 만들기 위해서는

요소와 href 속성을 결합해서

만들어 주시면 됩니다


a 요소에서

a는 anchor이며

앵커 요소라고 합니다.


a 요소는 여러 속성들과

함께 사용됩니다.


다른 속성들과의 결합은

다른글에서 알아보고


오늘은 href 속성을 써보도록

하겠습니다


href 속성에서

href는 hypertext reference의

약자입니다


위에서 하이퍼텍스트가 

 다른 문서로 이동할 수 있는 Text라고

설명했드시


그 뒤에 reference가 붙었으므로

이동할 수 있는 주소가 되겠네요


이제 a요소와 href 속성을 같이

써서 사용해보면

<a href = "http://itpangpang.tistory.com/">ITPANGPANG</a>


이런식으로 써주시면 됩니다

href = 이렇게 해주시고

href가 연결주소 이므로 뒤에 URL을

써주시면 됩니다.


<a href="URL">링크가 걸릴 텍스트</a>


이제 하이퍼링크를 추가시킨

코드를 한번 보도록 하겠습니다.

<html>

<head>

<meta charset = "utf-8">

<title>Hello World</title>


</head>

<body>

<a href = "http://itpangpang.tistory.com/">ITPANGPANG</a>

</body>

</html>

이런식으로 body안에 들어갈

텍스트에 원하는 주소로 

링크를 걸어주시면 됩니다.


위의 코드를 실행시켜 보면


이런식으로 밑줄과 함께

링크가 걸리게 됩니다.


저는 한번 클릭해서 들어갔더니

보라색으로 변했네요

원래는 파란색이었습니다.


근데 위의 텍스트를 클릭해서

다른 문서로 이동할때


해당 페이지에서

바로 이동되게 되는데

상황에 따라 이러한 결과를

원치 않는 경우가 있습니다


이를 방지하기 위하여

새 창을 띄워서 이동

하는 방법이 있습니다.


아주 간단하게 뒤에

target blank만 걸어주면 됩니다.


이런식으로

<html>

<head>

<meta charset = "utf-8">

<title>Hello World</title>


</head>

<body>

<a href = "http://itpangpang.tistory.com/"

 target="_blank">ITPANGPANG</a>

</body>

</html>

"" 뒤에 한칸 띄고

(스페이스)target="_blank"만

 써주시면 됩니다

저작자 표시 비영리 변경 금지
신고

'웹(Web) > HTML' 카테고리의 다른 글

Form(폼) 태그를 써보자  (1) 2016.07.31
HTML 표를 만들어보자  (0) 2016.07.03
HTML 리스트를 만들자(li, ul, ol)  (0) 2016.06.27
HTML에서 하이퍼링크 걸기  (1) 2016.06.19
HTML 기본구조 및 Hello World 출력하기  (1) 2016.06.18
이 댓글을 비밀 댓글로
    • 마제스티
    • 2016.07.26 13:19 신고
    진짜 ㅠㅠ하나도 모르는데 다른곳은 이리 자세히 된곳이 없는데 정말 자세하게 설명들 해주셔서열심히 공부하고 있습니다..감사합니다