[HTML 핵심강좌] 4. HTML 링크

HTML 링크는 웹 페이지에서 다른 웹 페이지나 파일, 이메일 주소 등 다른 리소스로 연결할 수 있도록 해주는 요소입니다. 링크를 생성하기 위해 <a> 태그를 사용하며, href 속성을 이용하여 링크 대상을 지정합니다.

 

HTML 링크를 작성하기 위해서는 먼저 <a> 태그를 작성하고, href 속성을 이용하여 링크 대상을 지정해야 합니다. 다음은 <a> 태그와 href 속성을 이용한 링크 작성 예시입니다.

<a href="https://ccusean.com">이것은 예시 링크입니다.</a>

위 코드는 "이것은 예시 링크입니다."라는 텍스트를 클릭하면 https://www.ccusean.com으로 이동하는 링크를 생성합니다.

 

링크를 작성할 때, href 속성에는 다음과 같은 대상을 지정할 수 있습니다.

• 다른 웹 페이지: https://나 http://로 시작하는 주소를 지정합니다.
• 같은 웹 페이지 내 다른 위치: #을 사용하여 같은 페이지 내에서 다른 위치를 지정할 수 있습니다.
• 파일: 로컬 파일 시스템 내의 파일 경로를 지정할 수 있습니다.
• 이메일 주소: mailto:를 사용하여 이메일 주소를 지정할 수 있습니다.

 

다음은 이러한 다양한 링크 대상을 지정한 예시입니다.

<a href="https://ccusean.com">이것은 예시 링크입니다.</a>

<a href="#section-1">섹션 1로 이동</a>
<h2 id="section-1">섹션 1</h2>

<a href="example.pdf">PDF 파일 다운로드</a>

<a href="mailto:example@example.com">이메일 보내기</a>

 

링크를 작성할 때, 링크 텍스트를 클릭했을 때 어떤 동작이 발생하는지를 명확하게 표시해야 합니다. 이를 위해 a 요소의 색상과 스타일을 변경하여 링크임을 표시할 수 있습니다. 예를 들어, 다음과 같이 스타일을 적용하여 링크를 강조할 수 있습니다.

<a href="https://ccusean.com" style="color: blue; text-decoration: underline;">이것은 예시 링크입니다.</a>

위 코드는 아래와 같이 표시됩니다.

이것은 예시 링크입니다.

 

마우스를 가져다 대면 색상이 변경되는 등의 효과도 적용할 수 있습니다. 이렇게 링크에 스타일을 적용하는 것은 링크를 더 명확하게 표시하는 데 도움이 됩니다.