HTML & CSS

HTML 기본요소 (4) 링크

yul_S2 2023. 1. 25. 09:33
반응형

link

웹 페이지는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다.
이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a> 태그로 표현한다.
“a"는 앵커(Anchor)를 의미한다.

 

<a href="Link URL">링크제목</a>

 

링크

<html>

<head>
  <title>HTML 링크</title>
</head>

<body>
  <a href="//analytics-yulvely.tistory.com">yulvely</a>
</body>

</html>

 

 

 

???

target

<html>

<head>
  <title>HTML 링크</title>
</head>

<body>
    <div><a href="/books/5" target="_blank">_blank</a></div>
    <div><a href="/books/5" target="_self">_self</a></div>
    <div><a href="/books/5" target="_parent">_parent</a></div>
    <div><a href="/books/5" target="_top">_top</a></div>
    <div><a href="/books/5" target="myframe">frame</a></div>
 
    <iframe name="myframe" style="width:50%; height: 100%"></iframe>
</body>

</html>

_blank 링크로 연결된 문서를 새 창이나 새 탭에서 열린다.
_self 링크로 연결된 문서를 현재 프레임(frame)에서 열린다. (기본설정)
_parent 링크로 연결된 문서를 부모 프레임(frame)에서 열린다.
_top 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 열린다.
frame 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 열린다.

 

 

 

링크의 상태

웹 브라우저에서 링크가 연결되어 있는 텍스트의 색상은 다음과 같다.

  • 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경된다.
  • visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경된다.
  • active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경된다.

link 아직 한 번도 방문한 적이 없는 상태 (기본설정)
visited 한 번이라도 방문한 적이 있는 상태
hover 링크 위에 마우스를 올려놓은 상태
active 링크를 마우스로 누르고 있는 상태

 

<html>
<head>
    <title>state 속성</title>
    <style>
        a:link    { color: blue; }
        a:visited { color: green; }
        a:hover   { color: orange; }
        a:active  { color: red; }
    </style>
</head>
<body>
    <div><a href="/books/5">링크 상태에 따라 변경됩니다.</a></div>
</body>
</html>

 

 

 

 

 

 

페이지 책갈피

<a>태그의 name 속성을 이용하면 간단한 책갈피(Bookmark)를 만들 수 있다.
우선 책갈피를 통해서 이동하고 싶은 위치에 <a>태그를 만들고 name 속성을 작성한다.
그 다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 된다.

<html>
<head>
    <title>state 속성</title>
    <style>
        a:link    { color: blue; }
        a:visited { color: green; }
        a:hover   { color: orange; }
        a:active  { color: red; }
    </style>
</head>
<body>
<p><a href="#bottom">문서의 하단으로</a></p>

<p style="height:600px;">스크롤이 되는 효과를 나타내기 위해서 이 문단의 높이를 높게 지정합니다.</p>

<p><a name="bottom">여기가 문서의 하단</a></p>

</body>
</html>

 

R studio에서 창을 작게하면 "문서의하단으로"를 누르면 문서하단으로 스크롤내려가는 것을 확인 할 수 있다.

반응형