HTML에서 하이퍼링크 걸기
HTML에서 하이퍼링크 걸기
ㆍ이번글에서는 text에 링크를 거는 방법을 알아보도록
하겠습니다.
ㆍHTML에서 하이퍼링크는 가장 중요한 부분중 하나 입니다.
HTML은 Hyper Text Markup Language의 약자입니다.
이름에도 들어있드시 HyperText 는 하이퍼링크를 통해
다른 문서로 이동할수 있는 Text입니다.
하이퍼링크 어떻게 넣으면 되는가?
하이퍼링크를 만들기 위해서는
a 요소와 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 기본구조 및 Hello World 출력하기 (1) | 2016.06.18 |