[HTML] a 태그(tag) 속성 (href, target, title 등)

 "a" 태그는 하이퍼링크를 생성하는 데 사용되며 여러 속성을 포함할 수 있습니다. 

1. href:

링크의 대상 URL을 지정합니다. 이 속성은 필수입니다. (＊href 옵션)

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

 

2. target:

링크를 어떻게 열지를 지정합니다. 주로 사용되는 값은 "_blank"로, 새 창이나 탭에서 링크를 엽니다.

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

3. title:

링크에 대한 추가 정보를 제공합니다. 이 정보는 사용자가 마우스를 링크 위에 올릴 때 툴팁으로 표시됩니다.

<a href="https://www.example.com" title="Go to Example.com">Visit Example.com</a>

4. download:

링크를 클릭했을 때 리소스를 다운로드하도록 지정합니다. 이 속성은 <a> 태그가 다운로드 링크로 사용될 때 유용합니다.

<a href="files/document.pdf" download>Download PDF</a>

5.  rel:

링크의 관계를 지정합니다. 주로 스타일시트를 연결할 때 사용되며, "stylesheet"로 지정됩니다.

<a href="styles.css" rel="stylesheet">Link to Stylesheet</a>

 

 

* href 속성 안에 따온표로 감싼 문자열 내에서 사용할 수 있는 주요 옵션들:

 

1. 상대 URL(relative URL):

현재 웹페이지에서 상대적인 경로로 다른 페이지에 연결할 수 있습니다.

<a href="/about-us">About Us</a>

 

2. 이메일 주소:

"mailto:"를 사용하여 이메일 주소를 지정할 수 있습니다.

<a href="mailto:info@example.com">Contact Us</a>

3. 전화번호:

"tel:"을 사용하여 전화번호를 지정할 수 있습니다.

<a href="tel:+123456789">Call Us</a>

 

4. 파일 경로:

로컬 파일 시스템에서 파일에 대한 경로를 지정할 수 있습니다.

<a href="documents/document.pdf">Download PDF</a>

 

5. 앵커(Anchor) 링크:

같은 페이지 내에서 앵커로 지정된 위치로 이동할 수 있습니다.

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

 

주의할 점은 href 속성에는 항상 유효한 URL이 있어야 하며, 사용자가 클릭하면 해당 URL로 이동하게 됩니다.

 

 

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.