Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

링크와 URL의 차이점은 무엇입니까?

링크와 URL의 차이점은 무엇이며 중요합니까?

링크와 URL의 차이는 웹 페이지의 일부 콘텐츠에 대한 직접 경로를 얻는 것에 대해 캐주얼한 대화를 나누는 경우에는 중요하지 않습니다. 친구 중 한 명과 훌륭한 기사를 공유하는 것과 같습니다.

높은(기술적이지 않은) 수준에서 링크는 특정 위치로 이동하는 클릭 가능한 사용자 인터페이스를 나타냅니다. 위치는 URL로 정의됩니다.

시각적으로 링크는 HTML 코드로 정의되는 텍스트 요소, 이미지, 버튼 또는 기타 UI 요소로 나타낼 수 있습니다(자세한 내용은 나중에 설명).

클릭할 수 있고 표면 뒤에 URL이 있으면 링크입니다.

기술 전문가와 비기술 전문가 모두 링크와 URL이라는 용어를 같은 의미로 사용합니다. 이는 사람들이 서체와 글꼴을 같은 것으로 부르는 것과 매우 유사합니다(기술적으로는 그렇지는 않지만). ). 그러나 기술적으로 분류하기 시작할 때 URL과 링크 사이에는 차이가 있습니다.

자, 조금 더 기술적인 부분을 알아보겠습니다.

URL의 기술적 구조

URL은 일반적으로 프로토콜, 도메인 이름, 최상위 도메인 및 슬러그와 같은 요소로 구성됩니다. 제 타이포그래피 튜토리얼 중 하나에 대한 URL을 예로 들어 보겠습니다.

https:/techstacker.com/typography-italic-vs-bold
  • https:// 프로토콜입니다
  • techstacker 은 도메인 이름입니다.
  • .com 최상위 도메인입니다.
  • typography-italic-vs-bold 슬러그입니다

Btw, URL은 Universal Resource Locator를 나타냅니다.

일반적으로 위의 내용을 일반적으로 링크라고 합니다. 비기술적 관점에서 보면 틀린 말은 아니다. 그러나 기술적으로 URL은 일부일 뿐입니다. 링크를 구성하는 것입니다. 클릭 가능한 대화형 링크 위의 URL을 만들려면 다른 요소와 결합해야 하며 이것이 바로 HTML의 역할입니다.

HTML이 링크/URL을 정의하는 방법

일반적으로 웹 사이트에서 링크를 볼 때 문장의 강조 표시된 부분으로 봅니다. TechStacker의 첫 페이지로 연결되는 이 텍스트를 좋아하세요.

  • 위의 강조 표시된 텍스트는 클릭 가능한 링크로 시각적으로 나타납니다.
  • 시각적 표면 아래에 위치가 포함된 URL이 있습니다.

링크 텍스트와 URL은 모두 HTML 앵커 요소 <a> 내에서 정의됩니다. .

HTML 앵커 요소에는 href가 포함됩니다. 값을 소스로 하는 속성 — 그리고 값은 클릭한 사람이 정의한 대상으로 이동하는 URL입니다.

TechStacker 첫 페이지에 대한 링크가 있는 단락의 HTML 코드는 다음과 같습니다.

<p>
  Usually when people talk about links, they refer to a highlighted part of a
  sentence, like <a href="https://techstacker.com">this text</a> that leads to
  TechStacker’s front page.
</p>

텍스트 이외의 다른 UI 요소를 사용하여 링크를 만들 수 있습니다.

이미지를 링크로 만들고 사용자가 클릭할 때 특정 위치로 안내하고 싶다고 가정해 보겠습니다. 그렇게 하려면 이미지 요소 <img>를 가져오기만 하면 됩니다. 앵커 요소 안에 래핑합니다.

따라서 위의 HTML 예제에서 앵커 요소를 가져옵니다.

<a href="https://techstacker.com">this text</a>

그리고 이 이미지 요소:

<img
  src="/article/uploadfiles/202203/2022033109302583.png"
  width="150"
  height="150"
  alt="Eric Cartman"
/>

이제 this text를 교체하세요. 다음과 같은 이미지 요소로:

<a href="https://techstacker.com">
  <img
    src="/article/uploadfiles/202203/2022033109302583.png"
    width="150"
    height="150"
    alt="Eric Cartman"
  />
</a>

그리고 그 결과 링크로 작동하는 이미지:

링크와 URL의 차이점은 무엇입니까?

이미지 위로 마우스를 움직이면 브라우저의 왼쪽 하단에 이 웹사이트의 URL이 표시됩니다.

이미지를 클릭하면 앵커 요소 내에 지정된 URL로 인해 첫 페이지로 이동합니다. 새 브라우저 탭에서 링크를 열려면 CMD(Mac) 또는 CTRL(Windows)을 누른 상태에서 클릭하십시오.

대부분의 사람들에게 기술 전문가 또는 비전문가에게 묻는 경우:

  • “X에 대한 웹사이트 URL을 알려주세요”
  • “X에 대한 웹사이트 링크를 주세요.”

상대방은 일반적으로 브라우저 주소 표시줄로 이동하여 URL을 복사하여 붙여넣습니다. 그들이 제공하는 것은 기술적으로 URL이지만 링크라고 하면 아무런 해를 끼치지 않고 결과는 같습니다.

그러나 블로그 게시물에 링크를 삽입하라는 메시지가 표시되면 URL 외에도 여러 가지가 있을 수 있습니다. 고려해야 할 관련성:

  • 링크를 클릭하면 새 브라우저 탭이 열리나요?
  • 팔로우 또는 비팔로우 링크여야 합니까(SEO 관련)?
  • 링크는 어떤 유형의 콘텐츠를 둘러싸야 합니까? 텍스트? 이미지?
  • 기타

예, 링크가 작동해야 하는 방식에 대해 이야기하기 시작하면 기술적인 부분이 중요해지고 있으며, 더 이상 URL이나 링크를 제공하는 것만으로는 충분하지 않습니다. 또한 사용자가 가고자 하는 위치에 대한 경로를 어떻게 사용하고 제시하는지에 대한 컨텍스트를 이해해야 합니다.