[HTML] HTML에서 링크 다루기

HTML에서 링크 다루기

HTML에서 링크는 <a> 태그를 사용하여 생성합니다. "a"는 "anchor"(닻)의 약자로, 웹 페이지에서 특정 위치로 이동하거나 다른 웹 페이지로 넘어갈 수 있는 하이퍼링크를 만드는 데 사용됩니다.

기본 링크 구조

기본적으로 <a> 태그는 href 속성을 사용하여 링크의 대상을 지정합니다.

<a href="https://www.example.com">이곳을 클릭하면 example.com으로 이동합니다.</a>

내부 링크

같은 페이지 내의 특정 위치로 이동할 수 있는 내부 링크를 만들 때는 id 속성과 함께 사용합니다.

<h2 id="section1">섹션 1</h2>
<p>내용입니다.</p>

<a href="#section1">섹션 1로 이동</a>

이메일 링크

mailto:를 사용하여 이메일 프로그램을 열고 새 이메일을 작성할 수 있습니다.

<a href="mailto:example@example.com">이메일 보내기</a>

파일 다운로드 링크

파일을 다운로드할 수 있는 링크를 생성할 때는 download 속성을 사용할 수 있습니다.

<a href="file.pdf" download>파일 다운로드</a>

타겟 속성

링크를 클릭했을 때 어떤 창이나 탭에서 페이지가 열릴지 지정하려면 target 속성을 사용합니다.

• _blank: 새 창 또는 탭에서 링크 열기
• _self: 같은 창에서 링크 열기 (기본값)
• _parent: 부모 프레임에서 링크 열기
• _top: 가장 상위 프레임에서 링크 열기

<a href="https://www.example.com" target="_blank">새 창에서 열기</a>

링크에 스타일 적용

CSS를 사용하여 링크에 다양한 스타일을 적용할 수 있습니다.

<style>
  a {
    color: blue;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
</style>

<a href="https://www.example.com">스타일이 적용된 링크</a>

링크는 웹 페이지에서 다른 페이지나 리소스, 섹션 등으로 이동하기 위한 중요한 수단입니다. <a> 태그와 관련 속성을 이해하고 적절히 활용하면 효과적인 웹 페이지를 만들 수 있습니다.