Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML href 속성 완벽 가이드 – 내부 링크부터 외부 링크까지

href 속성이란?

href 속성은 HTML에서 가장 중요한 속성 중 하나입니다.

href는 주로 다음 두 가지 목적으로 URL을 지정할 때 사용됩니다.

  • 하이퍼링크(흔히 말하는 '링크') 생성
  • 스타일시트, 스크립트 등 외부 리소스 불러오기

href가 가장 널리 쓰이는 곳은 앵커 요소 <a>에 내부 또는 외부 링크(URL)를 연결하는 경우입니다.

<a href="link-path">클릭</a>

href로 내부 링크 만들기

클릭하면 사이트 첫 페이지로 이동하는 링크를 만들어 보겠습니다. 링크 이름은 Home(홈)으로 정하겠습니다.

먼저 앵커 요소를 정의합니다.

<a>Home</a>

이제 이 <a> 요소를 실제 하이퍼링크로 만들기 위해 href 속성을 추가합니다.

<a href>Home</a>

그다음 속성 값으로 "/"(최상위 경로)를 지정합니다.

<a href="/">Home</a>

브라우저에 렌더링되면 다음과 같이 표시됩니다.

Home

이해를 돕기 위해 이 앵커 요소 예제를 구성 요소별로 하나씩 분해해 보겠습니다.

  • <a> : 여는 앵커 태그
  • </a> : 닫는 앵커 태그
  • Home : 콘텐츠 (브라우저에서 유일하게 화면에 보이는 부분)
  • href : 속성 이름(name)
  • = : 할당 연산자
  • "/" : 속성 값(value)

실제로 수많은 웹사이트에서 이러한 방식의 앵커 요소가 헤더 왼쪽 상단의 로고를 감싸고 있습니다. 로고를 클릭하면 첫 페이지로 이동하는 것이 바로 이 원리입니다.

또한 웹사이트의 내비게이션 바인 <nav>...</nav> 안에서도 이와 동일한 코드 패턴을 매우 흔하게 볼 수 있습니다.

예를 들어 여러분의 웹사이트에 Home, About, Contact 세 개의 페이지가 있고, 각 페이지로 이동하는 내부 링크를 만들고 싶다고 가정해 보겠습니다.

먼저 각 페이지의 HTML 문서 파일명을 다음과 같이 정합니다.

  • Home → index.html
  • About → about.html
  • Contact → contact.html

그다음 각 문서에 대한 상대 경로(URL)를 아래와 같이 정의합니다.

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

이제 각 앵커 요소를 <nav> 요소로 감싸 주면 됩니다.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

이렇게 하면 웹사이트의 헤더, 푸터, 또는 사이드바 어디에든 배치할 수 있는 내비게이션 컴포넌트가 완성됩니다.

href로 외부 링크 만들기

자신의 사이트가 아닌 다른 웹사이트로 연결하고 싶다면 외부 링크 형식을 사용해 절대 경로를 지정해야 합니다.

<a href="https://www.youtube.com">YouTube.com으로 이동</a>

위 코드처럼 외부 링크에는 https://를 포함한 도메인 전체 URL을 작성합니다. 참고로 외부 링크를 새 탭에서 열고 싶다면 target="_blank" 속성을 함께 추가하면 됩니다.

<a href="https://www.youtube.com" target="_blank">새 탭에서 YouTube 열기</a>

정리하면, href 속성은 내부 링크에는 상대 경로를, 외부 링크에는 절대 URL을 사용한다는 점만 기억하면 됩니다. 이 두 가지 규칙만 익혀도 웹사이트 어디서든 자유롭게 링크를 구현할 수 있습니다.