태그에서 HREF 속성을 사용하여 HTML 하이퍼 링크를 만드는 방법

웹 사이트는 웹 페이지의 모음입니다. 그리고 이러한 페이지는 무언가로 연결되거나 연결되어야합니다. 그렇게하려면 HTML에서 제공하는 태그 인 태그를 사용해야합니다 a.

이 태그는 한 페이지에서 다른 페이지로 링크하는 데 사용되는 하이퍼 링크를 정의합니다. 그리고 a요소 의 가장 중요한 속성은 href링크의 목적지를 나타내는 속성입니다.

이 가이드에서는 태그 의 href속성을 사용하여 HTML 하이퍼 링크를 만드는 방법을 보여줍니다 a.

  • 링크 란?
  • 내부 링크를 만드는 방법
  • 같은 수준의 페이지로 이동
  • 다른 폴더에있는 페이지 찾아보기
  • 폴더에있는 페이지에서 루트로 찾아보기
  • 외부 링크를 만드는 방법
  • 앵커 링크를 만드는 방법
  • 같은 페이지에서 탐색
  • 다른 페이지에서 탐색
  • 결론

링크 란?

링크는 한 페이지에서 다른 페이지로 또는 동일한 페이지의 다른 부분을 탐색 할 수있는 클릭 가능한 텍스트입니다.

웹 개발에서 링크를 만드는 방법에는 여러 가지가 있지만 가장 일반적인 방법은 a태그와 href속성 을 사용 하는 것입니다. 마지막은 링크의 대상 주소를 지정하는 곳입니다.

a내부 링크, 외부 링크 및 앵커 링크 : 태그는 우리가 링크의 세 가지 종류를 만들 수 있습니다. 즉, 이제 다음 섹션에서 내부 링크를 만드는 방법에 대해 알아볼 수 있습니다.

내부 링크를 만드는 방법

웹 사이트를 구축 할 때 페이지를 연결하는 것이 좋습니다. 이러한 링크를 통해 A 페이지에서 B 페이지로 이동할 수있는 한 내부 링크라고합니다 (항상 동일한 도메인 이름 또는 동일한 웹 사이트에 있기 때문에). 따라서 내부 링크는 웹 사이트의 다른 페이지로 이동할 수있는 링크입니다.

이제 우리 폴더는 다음과 같이 구성되어 있습니다.

├── folder1 | └── page2.html ├── page1.html ├── index.html 

여기에 세 가지 사용 사례가 있으며 각각에 대해 예제를 만들 것입니다.

같은 수준의 페이지로 이동

  • index.html
Browse to Page 1 

보시다시피 페이지 page1.html는 동일한 수준에 있으므로 href속성 의 경로 는 페이지의 이름 일뿐입니다.

다른 폴더에있는 페이지 찾아보기

  • page1.html
Browse to Page 2 

여기에서는 방문하려는 페이지가 동일한 수준에 있지 않기 때문에 다른 사용 사례가 있습니다. 해당 페이지로 이동할 수 있으려면 폴더를 포함한 파일의 전체 경로를 지정해야합니다.

큰! 이제 마지막 사용 사례를 살펴 보겠습니다.

폴더에있는 페이지에서 루트로 찾아보기

  • page2.html
Browse to the Home Page 

이제 여기에서 index.html페이지 로 이동하려면 해당 페이지 로 이동 하기 전에 먼저 한 수준 위로 이동해야합니다.

이제 내부 링크에 대해 다루었으므로 계속해서 외부 링크로 이동하는 방법을 소개하겠습니다.

외부 링크를 만드는 방법

외부 웹 사이트로도 이동할 수있는 기능이 있으면 항상 유용합니다.

Browse to Google 

여기에서 볼 수 있듯이 Google로 이동하려면 해당 URL을 href속성 에 지정해야 합니다.

외부 및 내부 링크는 페이지 A에서 페이지 B로 이동하는 데 사용됩니다. 그러나 때로는 동일한 페이지에 머물면서 특정 부분으로 이동하려고합니다. 그렇게하려면 앵커 링크라는 것을 사용해야합니다. 다음 섹션에서 자세히 살펴 보겠습니다.

앵커 링크를 만드는 방법

앵커 링크는 좀 더 구체적입니다. 동일한 페이지에있는 동안 A 지점에서 B 지점으로 이동할 수 있습니다. 다른 페이지의 부품으로 이동할 때도 사용할 수 있습니다.

같은 페이지에서 탐색

Go to the anchor 

다른 것들에 비해 이건 조금 다릅니다. 실제로 그렇긴하지만 여전히 같은 방식으로 작동합니다.

여기에는 페이지 링크 대신 요소에 대한 참조가 있습니다. 링크를 클릭하면 해시 태그 ( about) 없이 이름이 같은 요소를 찾습니다 . 해당 ID를 찾으면 해당 부분을 찾습니다.

다른 페이지에서 탐색

Go to the anchor 

이것은 우리가 탐색하고 앵커를 추가 할 페이지를 정의해야한다는 점을 제외하고는 이전 예제와 거의 동일합니다.

결론

href의 가장 중요한 속성입니다 a태그입니다. 이를 통해 페이지 간 또는 페이지의 특정 부분 만 탐색 할 수 있습니다. 이 가이드가 많은 링크가있는 웹 사이트를 구축하는 데 도움이되기를 바랍니다.

읽어 주셔서 감사합니다.

저에게 연락 주시기 바랍니다!

트위터 블로그 뉴스 레터 GITHUB LINKEDIN CODEPEN DEV

Unsplash에 JJ Ying의 사진