코딩스쿨

HTML Links

1. HTML Links란?

HTML 링크는 웹 페이지에서 다른 페이지, 웹사이트, 파일, 이메일 또는 같은 페이지 내의 특정 위치로 이동할 수 있게 하는 요소입니다. HTML에서 링크는 <a> 태그를 사용하여 생성됩니다.

2. HTML 링크의 기본 문법

HTML에서 링크를 만드는 기본 문법은 다음과 같습니다:

<a href="URL">링크 텍스트</a>

예시:

<a href="https://www.example.com">Example 웹사이트로 이동</a>

3. HTML 링크의 속성

3.1 `target` 속성

target 속성은 링크가 열리는 방식을 제어합니다.

<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>

3.2 `title` 속성

title 속성은 링크에 마우스를 올렸을 때 나타나는 툴팁(설명)을 설정할 수 있습니다.

<a href="https://www.example.com" title="Example 웹사이트로 이동">Example 웹사이트</a>

3.3 `rel` 속성

rel 속성은 링크와 대상 사이의 관계를 명시합니다.

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">안전하게 새 탭에서 열기</a>

4. 다양한 HTML 링크 사용 방법

4.1 외부 링크

외부 링크는 현재 웹 페이지 외부의 다른 웹사이트로 연결됩니다.

<a href="https://www.example.com">외부 링크로 이동</a>

4.2 내부 링크

내부 링크는 같은 웹사이트 내의 다른 페이지로 이동할 수 있습니다.

<a href="/about.html">회사 소개 페이지로 이동</a>

4.3 이메일 링크

이메일 링크는 사용자가 링크를 클릭하면 이메일 클라이언트를 통해 지정된 이메일 주소로 메일을 보낼 수 있도록 설정합니다.

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

4.4 파일 다운로드 링크

링크를 통해 사용자가 파일을 다운로드할 수 있습니다.

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

4.5 페이지 내 특정 위치로 이동 (앵커 링크)

같은 페이지 내의 특정 위치로 이동하려면 앵커 링크를 사용할 수 있습니다.

<a href="#section1">섹션 1로 이동</a>

<h2 id="section1">섹션 1</h2>

5. 텍스트와 이미지에 링크 적용

HTML에서 링크는 텍스트뿐만 아니라 이미지에도 적용할 수 있습니다.

<a href="https://www.example.com">
    <img src="image.jpg" alt="Example 사이트로 이동">
</a>

6. 링크 스타일링

기본적으로 HTML에서 링크는 파란색으로 표시되며, 방문한 링크는 보라색으로 표시됩니다. CSS를 사용하여 링크의 스타일을 변경할 수 있습니다.

<style>
    a {
        color: red; /* 링크 텍스트 색상 */
        text-decoration: none; /* 밑줄 제거 */
    }

    a:hover {
        color: blue; /* 마우스를 올렸을 때의 색상 */
    }
</style>

코딩 스쿨 HTML