Appia의 IT세상

[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기 본문

Programming/HTML&CSS

[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기

Appia 2020. 7. 25. 07:14
반응형

[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기

 

이번 포스팅에서는 HTML에 하이퍼 링크(hyper-link)을 연결하는 방법에 대해서 살펴보고자 합니다. 흔히 웹페이지에서 특정 부분을 클릭하면, 다른 사이트등에 바로 연결되게 하는 것을 하이퍼 링크(hyper-link)라고 합니다. 먼저 하이퍼링크를 연결하기 위해서는 앵커태그라고 하는 <a> - </a>을 사용해야합니다. 앵커 태그 내부에서는 어떤것도 링크의 일부가 되고, 해당 부분에 대해서 클릭을 할 수가 있습니다. 

<a href = "URL" ... attributes-list>Text</a> 

 

<Text 링크>

상기 부분이 적용된 간단한 예시를 한번 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>링크 연결 테스트</p>
    <a href = "https://appia.tistory.com" target = "_self">앱피아 홈페이지 이동</a>
 
</body>
</html>
cs

위의 부분을 적용하면 다음과 같은 화면이 나타납니다. 

링크 연결된 홈페이지 

위에서 적용된 속성중에 targer 관련된 부분에 대해서 먼저 확인해보겠습니다. 

_blank 연결된 문서를 새 창 또는 탭에서 열기
_self 연결된 문서를 현재 프레임에서 열기
_parent 상위 프레임에서 연결된 문서 열기
_top 창의 전체 본문에서 연결된 문서 열기 

 

<Base Path을 이용하는 방법>

링크에 연결된 부분이 많다면, 특정 부분에 대해서 base path를 지정해놓고 나머지 sub page만 입력하여 연결이 되도록 할 수 있습니다. 먼저 코드쪽을 한번 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href = "https://appia.tistory.com/">
    <title>Document</title>
</head>
<body>
    <p>링크 연결 테스트</p>
    <a href = "/278" target = "_self">파이썬[Python GUI, PyQt5 Tutorial 006] PyQt5 라벨(QLabel)생성하기</a>
 
</body>
</html>
cs

상위의 <head> - </head>안에서 보시면 base라는 부분을 볼 수 있습니다. 이 부분을 토대로 base path를 지정할 수 있습니다. 

링크 위에 마우스를 되면, 상태 창에 연결된 url이 표시가 됩니다. 이런 형태로 사용하시면 됩니다. 그리고 추가로, href부분에 파일등을 입력하시면, 사용자 입장에서는 다운로드를 할 수 있게 하이퍼링크가 생성이 됩니다. 

 

<image 연결하기>

사진을 바탕으로 연결하는 매우 간단합니다. 다음과 같은 형식으로 입력하시면 됩니다. 

<a href = "URL" ... attributes-list>
     <img src = "image path" alt = 대체 텍스트>
</a> 

그럼 간단히 예시를 한번 보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>링크 연결 테스트</p>
    <a href = "https://appia.tistory.com/" target = "_self">
         <img src = "/imgs/img1.PNG" alt="그림이 존재하지 않습니다."/>
    </a>
 
</body>
</html>
cs

위를 실행하면 다음과 같은 화면이 나타납니다. 

 

이번 포스팅에서는 [초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기라는 주제로 텍스트 및 이미지를 연결하는 방법에 대해서 살펴봤습니다. 추가로 하기 링크를 참조하시면 이미지를 하이퍼링크(Hyperlink)걸때 더욱 효과적입니다. 

[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기

 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 11]HTML - 이미지를 배경 설정하기  (0) 2020.07.29
[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)  (0) 2020.07.27
[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기  (0) 2020.07.23
[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기  (0) 2020.07.21
[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기  (0) 2020.07.19
'Programming/HTML&CSS' Related Articles more
Comments