HTML 텍스트 링크

HTML 링크는 링크 또는 하이퍼링크일 수 있습니다. 그러면 다른 페이지, 이미지 또는 웹사이트로 리디렉션됩니다. 그것은 무엇이든 될 수 있습니다. 또한 특정 섹션에 대해 동일한 페이지를 탐색하는 데에도 사용됩니다. 그들은 단지 클릭만으로 데이터와 문서를 렌더링하곤 했습니다. 문서, 이미지, URL 또는 데이터를 텍스트 안에 래핑합니다. 요구 사항에 따라 동일한 페이지나 다른 페이지에 있는 파일, 개체 또는 모든 항목을 가리킬 수도 있습니다. HTML 링크 위에 마우스를 올리면 커서가 다른 아이콘으로 변경됩니다. 기사의 다음 섹션에서 작동 방식과 생성 방법에 대해 논의할 수 있습니다. 이번 주제에서는 HTML 텍스트 링크에 ​​대해 알아보겠습니다.

HTML 링크 구문

아래 구문을 사용하여 첫 번째 HTML 링크를 만들 수 있습니다. 아래 주어진 구문에서 다른 태그, 속성 및 해당 속성을 사용합니다.

<a url>Link your corresponding text here</a>

위 구문에서는 앵커 태그를 사용하여 html 링크나 하이퍼링크를 생성합니다. 이 앵커 태그에 대해 자세히 논의하겠습니다.

앵커 태그는 텍스트, 문구, 단어를 첨부하거나 연결하여 외부 또는 내부 링크를 생성할 수 있는 태그입니다. 앵커 태그를 사용하여; 우리는 다른 페이지, 웹사이트 또는 페이지의 동일한 섹션으로 이동하는 데 사용할 수 있는 URL을 페이지에 만듭니다.

앵커태그를 사용하면 아래와 같은 장점이 많습니다.

• 정리: 데이터를 정리하는 데 도움이 됩니다. 관리 목적으로 여러 웹 페이지를 만들거나 데이터를 여러 덩어리로 나눌 필요가 없습니다. 데이터를 한 곳에만 쉽게 정리할 수 있습니다.
• 스크롤 없음: html 링크나 html 내부 링크를 사용하면 매우 긴 페이지에서 스크롤하는 것에 대해 걱정할 필요가 없습니다. 해당 링크를 클릭하면 원하는 섹션 페이지를 찾을 수 있습니다. 따라서 페이지에서 데이터나 섹션을 쉽게 찾을 수 있습니다.

앵커 태그는 어떻게 생성하나요?

위 구문에서 볼 수 있듯이 지금은 너무 많은 것을 사용했습니다. 어떻게 생성되고 어떻게 작동하는지 자세히 살펴보도록 하겠습니다.

세 가지 부분(속성)으로 구성됩니다.

1. href 속성
2. 대상 속성
3. 이름 속성

1. href 속성

Href 속성은 하이퍼텍스트 참조를 나타냅니다. 하이퍼링크를 만들고 싶다고 가정하면 첫 번째 요구 사항은 다른 웹 사이트, PDF와 같은 파일 등이 될 수 있는 문서 주소입니다.

예를 들면 다음과 같습니다.

<a href="http://www.google.com">Google</a>

여기서 http://www.google.com은 href 속성에 할당된 값입니다. 따라서 Google을 클릭할 때마다 Google 홈 페이지 링크로 리디렉션됩니다. 따라서 href 속성에는 문서 주소가 포함됩니다. href에 대한 자체 HTML 링크를 언급할 수도 있습니다.

예를 들어

<a href="demo.html">My page</a>

2. 대상 속성

target 속성은 문서가 열리는 방식을 정의합니다. 종류가 다양해서 필요에 따라 사용하면 됩니다.

• _parent: 첨부된 문서를 상위 프레임으로 엽니다.
• _blank: 문서를 새 탭이나 창에서 엽니다.
• _top: 첨부된 문서를 전체창으로 엽니다.
• _self: 문서를 클릭한 것과 동일한 창이나 탭에서 엽니다. 기본값은 이 대상이 활성화되어 있습니다. 아래와 같이 수정할 수 있습니다.

<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>

여기서 target="_blank"는 이를 사용하는 구문입니다.

3. 이름 속성

name 속성은 페이지의 특정 지점으로 이동하거나 이동하는 데 사용됩니다. 이는 콘텐츠가 너무 많은 중요한 VRU 페이지가 있는 경우 유용할 수 있습니다. 이는 스크롤하지 않고도 사용자가 찾은 내용과 시간을 절약하는 데 도움이 됩니다. 아래 구문:

<a name="to%20end"></a> or

여기서 클릭하면 아래로 스크롤하지 않고 페이지 끝으로 이동합니다.

<a href="#SomeSection">Section</a>

이 브라우저는 섹션을 식별하지만 이름 속성에는 (#)을 사용해야 합니다.

<a href="otherpage.html#title">Link your text</a>

이를 통해 내부적으로 다른 페이지의 '제목'을 참조할 수 있습니다. 여기서도 페이지 주소 끝에는 (#)을 사용해야 합니다.

HTML 링크 색상

또한 HTML 링크에 색상을 제공할 수도 있습니다. 기본적으로 링크 색상에는 세 가지 상태가 있습니다. 이는 모든 브라우저에 나타납니다.

• 활성 링크: 링크를 클릭하면 밑줄과 빨간색으로 표시된 활성 링크가 됩니다.
• 방문하지 않은 링크: 방문하지 않은 링크의 표준 브라우저 기본 색상은 파란색이며 밑줄이 그어져 있습니다.
• 방문한 링크: 보라색으로 밑줄이 그어져 있습니다.

그러나 아래 구문을 사용하여 링크할 사용자 정의 색상을 제공할 수도 있습니다. 우리는 이 다른 유형을 따라 링크에 색상을 부여할 수 있습니다. 하지만 여기서는 인라인 CSS를 사용하고 있습니다. 원한다면 외부 CSS를 생성할 수도 있습니다.

• Directly provide the name of the color.
• By using the HEX color code.
• By using rgb() and rgba() values.
• By using hsl and hsla() values.

<a href="http://demo.com/" style="color:blue;">Red Link</a>

We can directly specify the color name in the style attribute. This is an inline CSS.

<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>

Here we are specifying the color by using color codes. (HEX color codes)

<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>

We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().

<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>

You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.

<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>

We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().

Conclusion – HTML Text Link

So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.

위 내용은 HTML 텍스트 링크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!