태그

페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 하이퍼링크 태그로 속성, 문자(이미지) 작성해서 사용한다.

href 속성 : 요청할 주소 값을 설정하는 속성이다. ex) https://velog.io/@lee_bb

target 속성 : 요청을 보냈을 때 받을 응답 방식에 대해서 설정하는 속성이다. _self는 현재 보고 있는 창에서 응답을 받는 형식이고 _blang은 새로운 창을 열어서 응답을 받는 형식이다.

target을 설정하지 않으면 기본 설정인 self로 열린다. 폰트 기본 형식은 파란색 글씨에 밑줄이고 한 번 실행했던 링크는 보라색으로 변환된다.

<a href="http://www.naver.com">네이버</a>
<a href="https://velog.io/@lee_bb">BBVelog</a>
<a href="http://www.op.gg" target="_blank">롤 사이트</a>
<a href="http://https://youtu.be/xnzq95VA4R0/">
   <img src="img주소" alt="">
</a>

💡 a 태그 내부에 img 태그를 사용할 수 있다.

hret 속성으로 페이지 내 이동

<ul>
    <li>
        <a href="#track1">hypeboy</a>
    </li>
    <li>
        <a href="#track2">ditto</a>
    </li>
</ul>
<h2 id="track1">뉴진스 - hypeboy</h2>
    <pre>
        (1,2,3,4)
        Baby, got me looking so crazy
        빠져버리는 daydream
        Got me feeling you
        너도 말해줄래
		</pre>
<h2 id="track2">뉴진스 - hypeboy</h2>
    <pre>
        Woo woo woo woo ooh
        Woo woo woo woo
        Stay in the middle
        Like you a little
        Don’t want no riddle
        말해줘 say it back
		</pre>
<style>
        ul>li{
            list-style-type: none;
            margin-bottom: 10px;
        }
        li>a{
            display: inline-block;
            text-decoration: none;
            font-size: 30px;
            font-weight: bolder;
            text-align: center;
            width: 200px;
            color:darkorange;
        }
        li>a:hover{
            color: darkcyan;
        }
</style>

( * 스타일 적용은 안 해도 문제 없이 실행된다.)

해당 li의 텍스트 노드 부분을 클릭하면 href에 작성한 id가 있는 태그를 찾아서 이동한다. 벨로그의 리모콘 기능처럼 움직인다.