href 속성
href 속성은 HTML에서 가장 중요한 속성 중 하나입니다.
href 다음 URL을 지정하는 데 사용됩니다.
- 하이퍼링크(간단히 "링크"라고도 함).
- 또는 스타일 및 스크립트와 같은 외부 리소스를 가져오기 위해
href의 가장 일반적인 사용 사례 앵커 요소 <a>에 내부 또는 외부 링크(URL)를 추가하는 것입니다. :
<a href="link-path">Click</a>href가 있는 내부 링크
사용자가 클릭하면 첫 페이지로 이동하는 링크를 만들어 보겠습니다.
집이라고 부를 것입니다.
먼저 앵커 요소를 정의합니다.
<a>Home</a>
이제 <a>를 만들려면 요소를 하이퍼링크에 추가하려면 href 속성:
<a href>Home</a>
그리고 "/" 값을 할당합니다. :
<a href="/">Home</a>브라우저에서 렌더링되는 방식:
홈
적절한 측정을 위해 앵커 요소 예제를 분리해 보겠습니다.
<a>여는 앵커 태그입니다.</a>닫는 앵커 태그입니다.Home콘텐츠(브라우저에서 볼 수 있는 유일한 부분)href이름 속성입니다.=할당 연산자입니다."/"속성 값입니다.
이 웹사이트에서 이 정확한 앵커 요소는 헤더의 왼쪽 상단 모서리에 있는 TechStacker 로고를 감싸고 있습니다(클릭하면 첫 페이지로 이동합니다).
웹사이트의 탐색 모음 <nav>...</nav> 내에서 사용된 이 정확한 코드 예제를 종종 볼 수 있습니다. .
귀하의 웹사이트에 총 3페이지가 있다고 가정해 보겠습니다. 홈, 정보, 연락처 및 내부로 만들고 싶은 링크입니다.
먼저 각 페이지의 HTML 문서 이름은 다음과 같이 지정해야 합니다.
- 홈은
index.html이어야 합니다. - 정보는
about.html이어야 합니다. - 연락처는
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">Link to YouTube.com</a>이 기회에 내 YouTube 채널에 연결하겠습니다.
내 YouTube 채널(TechStacker)로 연결됩니다.