HTML 링크: 외부 및 내부 하이퍼링크 생성

소개

HTML 링크 실습에 오신 것을 환영합니다! 하이퍼링크는 월드 와이드 웹 (World Wide Web) 의 기반이며, 사용자가 페이지와 리소스 간을 탐색할 수 있도록 합니다. HTML 에서 링크는 <a> (anchor) 태그를 사용하여 생성됩니다.

이 실습에서는 링크를 생성하고 관리하는 데 필수적인 기술을 배우게 됩니다. 먼저 기본적인 외부 링크를 생성하고, 이를 새 브라우저 탭에서 열도록 하는 방법을 배웁니다. 그 후, 같은 페이지의 다른 섹션으로 이동하는 내부 링크를 생성합니다. 마지막으로, 사용자 경험 향상을 위해 링크에 툴팁 (tooltip) 을 추가합니다.

WebIDE 에서 index.html 파일을 작업하게 됩니다. LabEx 인터페이스의 "Web 8080" 탭으로 전환하여 변경 사항을 실시간으로 확인할 수 있습니다.

시작해 봅시다!

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 92%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

외부 링크를 위한 href 속성을 가진 태그 추가

이 단계에서는 첫 번째 하이퍼링크를 생성합니다. "anchor"를 의미하는 <a> 태그는 하이퍼링크를 정의하는 데 사용됩니다. <a> 요소의 가장 중요한 속성은 href이며, 이는 링크의 대상 URL 을 지정합니다.

LabEx 웹사이트로 연결되는 링크를 추가해 보겠습니다.

먼저 WebIDE 왼쪽의 파일 탐색기에서 index.html 파일을 엽니다.

이제 <h2>Section 1</h2> 요소를 찾고, 바로 뒤에 있는 <p> 태그 안에 다음 <a> 태그를 추가합니다.

<a href="https://labex.io">Visit LabEx</a>

이제 index.html 파일의 <body>는 다음과 같이 보여야 합니다. 첫 번째 섹션 안에 있는 새로운 링크를 확인하세요.

<body>
  <h1>Welcome to the HTML Links Lab</h1>
  <p>
    This page will be used to practice creating different kinds of HTML links.
  </p>

  <nav>
    <!-- Navigation links will be added here -->
  </nav>

  <div class="section">
    <h2>Section 1</h2>
    <p>
      <a href="https://labex.io">Visit LabEx</a>
    </p>
  </div>

  <div class="section">
    <h2>Section 2</h2>
    <p>
      This is the section we will link to from the top of the page. It is placed
      far down to demonstrate the page jump effect.
    </p>
  </div>
</body>

코드를 추가한 후 파일을 저장합니다 (Ctrl+S 또는 Cmd+S). 그런 다음 "Web 8080" 탭으로 전환하여 새 링크를 확인합니다. 링크를 클릭하면 LabEx 홈페이지로 이동합니다.

새 탭을 위해 target 속성을 _blank 로 설정

이 단계에서는 링크를 새 브라우저 탭에서 열도록 하는 방법을 배웁니다. 기본적으로 링크는 같은 탭에서 열립니다. 이 동작을 변경하려면 target 속성을 사용합니다.

target="_blank"를 설정하면 브라우저는 링크된 문서를 새 탭이나 창에서 열도록 지시합니다. 이는 사용자가 외부 리소스를 방문할 수 있도록 하면서도 사용자를 웹사이트에 머물게 하기 때문에 외부 링크에 대한 일반적인 관행입니다.

이전 단계에서 생성한 링크를 수정해 보겠습니다. <a> 태그에 target="_blank" 속성을 추가합니다.

<a href="https://labex.io" target="_blank">Visit LabEx</a>

이제 업데이트된 index.html 파일의 첫 번째 섹션에는 수정된 링크가 포함되어야 합니다.

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank">Visit LabEx</a>
  </p>
</div>

파일을 저장하고 "Web 8080" 탭으로 전환합니다. 이제 "Visit LabEx" 링크를 클릭하면 새 브라우저 탭에서 열리며, 실습 환경 탭은 계속 열려 있게 됩니다.

ID 앵커에 href 를 사용하여 내부 링크 생성

이 단계에서는 "페이지 앵커" 또는 "점프 링크"라고도 하는 내부 링크를 생성합니다. 이러한 링크를 통해 사용자는 동일한 페이지의 특정 부분으로 이동할 수 있으며, 이는 긴 문서에 매우 유용합니다.

내부 링크를 생성하려면 href 속성을 해시 기호 (#) 와 연결하려는 요소의 id로 설정합니다. 예를 들어, href="#section-name"과 같이 설정합니다.

페이지 상단의 <nav> 요소 안에 "Section 2"로 이동하는 링크를 추가해 보겠습니다.

<nav> 태그 안에 다음 줄을 추가합니다.

<a href="#section2">Jump to Section 2</a>

이제 index.html 파일의 네비게이션 영역은 다음과 같이 보여야 합니다.

<nav>
  <!-- Navigation links will be added here -->
  <a href="#section2">Jump to Section 2</a>
</nav>

파일을 저장하고 "Web 8080" 탭을 확인합니다. 상단에 새 링크가 표시됩니다. 지금 링크를 클릭하면 아무 일도 일어나지 않을 것입니다. 아직 대상 앵커를 정의하지 않았기 때문입니다. 다음 단계에서 이를 수행할 것입니다.

앵커링을 위해 요소에 id 속성 추가

이전 단계에서는 #section2를 가리키는 링크를 생성했습니다. 이제 해당 링크의 대상을 생성해야 합니다. 이는 id 속성을 사용하여 수행됩니다.

id 속성은 페이지의 HTML 요소에 고유한 식별자를 제공합니다. id의 값은 HTML 문서 내에서 고유해야 합니다. 내부 링크 href="#section2"는 id="section2"인 요소를 찾습니다.

Section 2 의 <h2> 태그에 이 id를 추가해 보겠습니다. 다음 줄을 찾습니다.

<h2>Section 2</h2>

그리고 id 속성을 포함하도록 수정합니다.

<h2 id="section2">Section 2</h2>

이제 업데이트된 index.html 파일의 두 번째 섹션은 다음과 같이 보여야 합니다.

<div class="section">
  <h2 id="section2">Section 2</h2>
  <p>
    This is the section we will link to from the top of the page. It is placed
    far down to demonstrate the page jump effect.
  </p>
</div>

파일을 저장하고 "Web 8080" 탭으로 돌아갑니다. 페이지 상단에 있는 "Jump to Section 2" 링크를 클릭합니다. 브라우저는 이제 "Section 2" 제목으로 부드럽게 스크롤되어야 합니다.

링크 툴팁에 title 속성 사용

마지막 단계에서는 링크에 툴팁을 추가하는 방법을 배웁니다. 툴팁은 추가적인 비필수 정보를 제공하며, 일반적으로 사용자가 요소 위로 마우스를 가져갈 때 나타납니다. 이는 접근성과 사용자 경험을 향상시킬 수 있습니다.

전역 title 속성을 사용하여 링크를 포함한 모든 요소에 툴팁을 추가할 수 있습니다.

LabEx 로 가는 외부 링크에 설명적인 제목을 추가해 보겠습니다. 처음 두 단계에서 생성한 링크를 찾아 title 속성을 추가합니다.

<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
  >Visit LabEx</a
>

이제 최종 index.html 파일에는 이 실습 과정에서 추가한 모든 요소가 포함되어야 합니다. 첫 번째 섹션은 다음과 같이 보일 것입니다.

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
      >Visit LabEx</a
    >
  </p>
</div>

파일을 마지막으로 저장합니다. "Web 8080" 탭으로 이동하여 "Visit LabEx" 링크 위로 마우스를 가져갑니다. "Go to the LabEx homepage"라는 텍스트가 포함된 작은 상자가 나타나야 합니다.

요약

실습을 완료하신 것을 축하드립니다! HTML 에서 링크를 생성하고 사용자 정의하는 기본 사항을 배웠습니다.

이 실습에서는 다음을 연습했습니다.

외부 링크를 생성하기 위해 href 속성과 함께 <a> 태그 사용하기
새 탭에서 링크를 열기 위해 target="_blank" 속성 사용하기
단일 페이지 내 탐색을 위해 href="#id"를 사용하여 내부 페이지 앵커 생성하기
내부 링크의 대상을 정의하기 위해 id 속성 사용하기
더 나은 사용자 경험을 위해 title 속성으로 링크에 유익한 툴팁 추가하기

이러한 기술은 탐색 가능하고 사용자 친화적인 웹사이트를 구축하는 데 필수적입니다. HTML 숙련도를 높이기 위해 계속 연습하세요!