티스토리를 위한 HTML - 앵커 tag 링크

HTML(Hyper Text Markup Language)의 <a> 태그는 하이퍼링크를 생성하는 데 사용됩니다. 이를 통해 한 웹 페이지에서 다른 웹 페이지로 연결하거나, 동일한 페이지 내의 다른 섹션으로 연결하거나, 문서나 미디어 파일과 같은 외부 리소스에 연결할 수 있습니다. 

 

HTML & CSS : web design

지난 글- 티스토리 HTML 목록 항목에 대한 링크와 위로가기 버튼 만들기

티스토리 HTML 목록 항목에 대한 링크와 위로가기 버튼 만들기

<a>의 'a'는 'anchor(앵커)'를 의미

1. 다음은 <a> 태그의 기본 예입니다

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

 

<a> 태그의 주요 구성요소를 분석

<a>: 앵커 요소의 여는 태그입니다.

href 속성: 이 속성은 URL(Uniform Resource Locator) 또는 링크가 연결되는 대상을 지정합니다. 절대 URL("http://" 또는 "https://"로 시작) 또는 상대 URL일 수 있습니다.

링크 텍스트: 여는 <a> 태그와 닫는 </a> 태그 사이의 텍스트입니다. 사용자가 클릭할 수 있는 링크의 보이는 부분입니다.  

</a> 태그 닫기: 앵커 요소의 끝을 나타냅니다.

 

반응형

2. 다음은 <a> 태그를 사용하는 방법에 대한 몇 가지 예입니다.

1. 외부 링크입니다:이 예에서 target="_blank" 속성은 새 브라우저 탭이나 창에서 링크를 엽니다.

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

 

2. 내부 링크(동일 사이트 내의 다른 페이지로 연결) : 이 경우 링크는 동일한 웹사이트에 있는 "about"이라는 페이지를 가리킵니다.

<a href="/about">Learn more about us</a>

 

3. 같은 페이지 내의 섹션에 링크(앵커 이름 사용):  일반적으로 내부 링크를 생성하기 위해 페이지 아래쪽에 id="section2"가id="section2" 있는 요소가 있습니다.

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

 

4, 이메일 링크: 이 링크는 지정된 이메일 주소를 사용하는 사용자의 기본 이메일 클라이언트를 엽니다.

<a href="mailto:info@example.com">Contact us via email</a> 

 

5. 파일에 연결: 여기서 링크는 동일한 사이트 내의 PDF 파일을 가리킵니다.

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

 

 

링크를 생성할 때 명확하고 설명적인 링크 텍스트를 제공하는 것이 중요하며 'href' 속성은 의도한 대상을 가리켜야 한다는 점을 기억하시기를 바랍니다. 또한 더 나은 접근성을 위해 링크된 콘텐츠에 대한 의미 있는 정보를 제공하는 텍스트를 사용하는 것도 중요합니다. 

 

이미지 크기 최적화 포멧 WebP

 

티스토리 블로그관리 홈 메뉴 초기 설정 방법