[HTML] 4-6. 하이퍼 링크 삽입하기

less than 1 minute read

4-6. 하이퍼 링크 삽입하기

웹 사이트에서 가장 많이 사용되는 기능 중 하나가 링크 삽입 기능입니다.

링크는 < a > 태그로 만들며, 이 때 텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 됩니다.

<a href="링크할 주소">텍스트 또는 이미지</a>

👍 예시

텍스트 링크 만들기

<div>
    <p>
        <a href="../05/order.html">주문서 작성하기</a>
    </p>
</div>

텍스트에 링크를 추가하면 밑줄이 생기고 글자색이 검은색에서 파란색으로 바뀝니다. 한 번이라도 클릭한 텍스트 링크는 자주색으로 바뀝니다.

또한 텍스트 링크의 색을 바꿀 때는 CSS 를 사용합니다.

이미지 링크 만들기

<div>
    <a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a>
</div>

링크가 추가된 이미지 위로 마우스 포인터를 가져가면 손 모양으로 바뀌어 일반 이미지와 구별할 수 있습니다.

링크를 새 탭에서 열어주는 target 속성

앞에서 본 예시들은 링크 클릭 시 현재 웹 브라우저 창에서 새로운 문서를 띄우지만 target 속성에 _blank를 지정하면 링크 클릭 시 새 탭에서 연결된 문서가 열립니다.

<div>
    <p>
        <a href="../05/order/html" target="_blank">주문서 작성하기</a>
    </p>
</div>