02 HTML 제목, 단락 및 링크 작업_3. 링크

 3. 링크:

  ● HTML의 하이퍼링크 소개

하이퍼링크 또는 단순히 링크는 HTML에서 서로 다른 웹 페이지 또는 리소스를 함께 연결하는 데 사용됩니다. 사용자가 페이지 사이를 탐색하거나 외부 웹사이트에 액세스하거나 페이지 내의 특정 섹션으로 이동할 수 있습니다. 링크는 HTML의 <a> 요소를 사용하여 생성됩니다.

  ● <a> 요소를 사용하여 링크 만들기

링크를 생성하려면 링크의 대상 URL을 지정하는 href 속성과 함께 <a> 요소를 사용하십시오. URL은 동일한 웹 사이트 내에서 절대 URL(예:https://example.com) 또는 상대 URL(예: page.html)일 수 있습니다. 다음은 Google 홈페이지 링크의 예입니다.

<a href="https://www.google.com">Go to Google</a>

 

  ● href 속성과 중요성 이해

href 속성은 링크의 대상 위치를 결정하므로 <a> 요소의 중요한 속성입니다. 링크가 탐색해야 하는 URL 또는 URL 조각을 지정합니다. 예를 들어 같은 페이지 내 섹션에 대한 내부 링크를 만들려면 ID 속성을 href 값으로 사용할 수 있습니다.

<a href="#section1">Jump to Section 1</a>

 

  ● 링크의 대상 URL 지정

대상 URL은 링크가 가리키는 웹 페이지 또는 리소스입니다. href 속성의 값에 원하는 대상에 대한 올바른 URL 또는 경로가 포함되어 있는지 확인하십시오. 예를 들어 외부 웹사이트에 링크하는 경우:

<a href="https://www.example.com">Visit Example Website</a>

 

  ● 링크 텍스트 추가 및 앵커 텍스트 개념 이해

여는 태그와 닫는 <a> 태그 사이에 있는 텍스트는 링크 텍스트 또는 앵커 텍스트를 나타냅니다. 앵커 텍스트는 사용자가 웹 페이지에서 볼 수 있는 클릭 가능한 텍스트입니다. 링크된 콘텐츠 또는 대상에 대한 간결하고 의미 있는 설명을 제공해야 합니다.

<a href="https://www.example.com">Learn more</a>

 

  ● 대상 속성을 사용하여 새 탭이나 창에서 링크 열기

기본적으로 링크는 동일한 탭이나 창에서 열리며 현재 페이지를 대체합니다. target 속성을 사용하여 링크가 새 탭이나 창에서 열리도록 지정할 수 있습니다.

<a href="https://www.example.com" target="_blank">Open in a new tab</a>

 

  ● 이메일 링크 및 전화 링크 생성

링크는 이메일 링크 및 전화 링크를 만드는 데 사용할 수 있습니다. 이메일 링크의 경우 "mailto:" 프로토콜 다음에 이메일 주소를 사용합니다.

<a href="mailto:info@example.com">Send an email</a>

전화 링크의 경우 "tel:" 프로토콜 다음에 전화 번호를 사용합니다.

<a href="tel:+1234567890">Call us</a>

 

  ● CSS를 사용한 스타일링 링크

CSS를 사용하여 링크의 스타일을 지정하여 색상, 밑줄 및 호버 효과와 같은 모양을 변경할 수 있습니다. CSS 선택기를 사용하여 링크를 타겟팅하고 링크에 스타일을 적용할 수 있습니다.

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

 

  ● 이미지를 링크로 추가

<a> 요소 안에 <img> 요소를 사용하여 이미지 링크를 만들 수 있습니다. 이렇게 하면 사용자가 이미지를 클릭하면 지정된 URL로 이동할 수 있습니다.

<a href="https://www.example.com">
  <img src="image.jpg" alt="Image">
</a>

 

  ● id 속성을 사용하여 페이지 내에 앵커 포인트 생성 및 연결

   - 앵커 포인트 만들기:
HTML 문서 내에서 기준점을 배치할 위치를 결정합니다. 기준점으로 사용할 요소(예: 제목 또는 <div>)를 선택합니다. 해당 요소에 id 속성을 추가하고 앵커 포인트에 고유한 이름을 제공하십시오.

<h2 id="section1">Section 1</h2>

   - 앵커 포인트에 대한 링크:
앵커 포인트에 대한 링크를 생성하려는 HTML 문서의 위치를 ​​찾으십시오. <a> 요소를 사용하여 링크를 만들고 앵커 포인트의 id에 대한 참조를 포함하도록 href 속성을 설정합니다. 여는 태그와 닫는 <a> 태그 내에 앵커 텍스트를 제공합니다.

<a href="#section1">Jump to Section 1</a>

   - 앵커 링크 테스트:
HTML 문서를 저장하고 웹 브라우저에서 엽니다. 생성한 앵커 링크를 클릭하면 브라우저가 페이지의 해당 앵커 지점으로 스크롤해야 합니다.